/* ===========================================================
   How Well Do You Know Charlotte? — Design Tokens
   Concept: warm, celebratory, friend/family party-quiz energy.
   Palette: sunset coral + golden yellow + deep plum ink.
   =========================================================== */

:root,
[data-theme="light"] {
  --color-bg: #fff5fa;
  --color-surface: #ffffff;
  --color-surface-2: #fdeef8;
  --color-surface-offset: #fbe3f2;
  --color-border: #f5cfe6;
  --color-divider: #f8ddee;

  --color-text: #4a2f45;
  --color-text-muted: #93758c;
  --color-text-faint: #d0b3c6;
  --color-text-inverse: #fff5fa;

  --color-primary: #ec6cb9;
  --color-primary-hover: #e2549f;
  --color-primary-active: #cf3f8b;
  --color-primary-highlight: #fce0f1;

  --color-accent-2: #b48af0; /* soft lavender */
  --color-accent-2-highlight: #ece0fc;

  --color-mint: #7fd9c4;
  --color-mint-highlight: #ddf6ef;

  --color-success: #4c8c5a;
  --color-success-highlight: #dcefe0;
  --color-error: #d1567e;
  --color-error-highlight: #fbdde9;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(58, 35, 24, 0.06);
  --shadow-md: 0 8px 24px rgba(58, 35, 24, 0.10);
  --shadow-lg: 0 20px 48px rgba(58, 35, 24, 0.16);

  --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Cabinet Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'General Sans', 'Segoe UI', sans-serif;
  --font-script: 'Caveat', cursive;
}

[data-theme="dark"] {
  --color-bg: #241823;
  --color-surface: #301f2e;
  --color-surface-2: #3a2538;
  --color-surface-offset: #432c40;
  --color-border: #5a3d56;
  --color-divider: #4a3147;

  --color-text: #fbe9f5;
  --color-text-muted: #cba3c2;
  --color-text-faint: #8f6e89;
  --color-text-inverse: #241823;

  --color-primary: #f487cf;
  --color-primary-hover: #f79ed8;
  --color-primary-active: #ec6cb9;
  --color-primary-highlight: #4d2e48;

  --color-accent-2: #c7a6f7;
  --color-accent-2-highlight: #40325a;

  --color-mint: #8fe6d1;
  --color-mint-highlight: #24463f;

  --color-success: #7cbb87;
  --color-success-highlight: #29392c;
  --color-error: #ec8fae;
  --color-error-highlight: #4a2c3a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #241823;
    --color-surface: #301f2e;
    --color-surface-2: #3a2538;
    --color-surface-offset: #432c40;
    --color-border: #5a3d56;
    --color-divider: #4a3147;
    --color-text: #fbe9f5;
    --color-text-muted: #cba3c2;
    --color-text-faint: #8f6e89;
    --color-text-inverse: #241823;
    --color-primary: #f487cf;
    --color-primary-hover: #f79ed8;
    --color-primary-active: #ec6cb9;
    --color-primary-highlight: #4d2e48;
    --color-accent-2: #c7a6f7;
    --color-accent-2-highlight: #40325a;
    --color-mint: #8fe6d1;
    --color-mint-highlight: #24463f;
    --color-success: #7cbb87;
    --color-success-highlight: #29392c;
    --color-error: #ec8fae;
    --color-error-highlight: #4a2c3a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
  }
}

/* Type scale */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.5vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

/* ===========================================================
   Base
   =========================================================== */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background:
    radial-gradient(circle at 15% -10%, var(--color-accent-2-highlight) 0%, transparent 45%),
    radial-gradient(circle at 85% 0%, var(--color-primary-highlight) 0%, transparent 40%),
    var(--color-bg);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   Header
   =========================================================== */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  max-width: 560px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}

.brand-mark { flex-shrink: 0; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), color var(--transition-interactive);
}
.theme-toggle:hover { color: var(--color-primary); transform: scale(1.06); }

/* ===========================================================
   Layout
   =========================================================== */

.app-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-16);
  position: relative;
  z-index: 1;
}

.screen { animation: screen-in 420ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

/* ===========================================================
   Buttons
   =========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  transition: transform var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive);
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
}

.btn-lg { font-size: var(--text-base); padding: var(--space-5) var(--space-8); }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--color-primary);
  color: #fff8f2;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-active); transform: translateY(0); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  min-height: auto;
  margin: var(--space-4) auto 0;
  display: flex;
}
.btn-ghost:hover { color: var(--color-primary); }

/* ===========================================================
   Start screen
   =========================================================== */

.screen-start { padding-top: var(--space-8); }

.start-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.accent-text {
  color: var(--color-primary);
  font-family: var(--font-script);
  font-size: 1.15em;
  font-weight: 700;
}

.lede {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 40ch;
  margin: 0 auto var(--space-8);
}

.field-group { text-align: left; margin-bottom: var(--space-6); }

.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.text-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.text-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); outline: none; }
.text-input::placeholder { color: var(--color-text-faint); }

.field-hint {
  min-height: 1.2em;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-2);
}

/* ===========================================================
   Quiz screen
   =========================================================== */

.screen-quiz { padding-top: var(--space-6); }

.quiz-topbar { margin-bottom: var(--space-6); }

.progress-track {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent-2));
  transition: width 380ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 10%;
}

.quiz-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.quiz-score { color: var(--color-primary); }

.question-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
}

.question-prompt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-base);
  font-weight: 500;
  min-height: 56px;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
}

.option-btn:hover { border-color: var(--color-primary); transform: translateY(-1px); }

.option-btn .option-check {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}

.option-btn[data-multi] .option-check { border-radius: var(--radius-sm); }

.option-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.option-btn.selected .option-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.option-btn.correct {
  border-color: var(--color-success);
  background: var(--color-success-highlight);
}
.option-btn.correct .option-check { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.option-btn.incorrect {
  border-color: var(--color-error);
  background: var(--color-error-highlight);
}
.option-btn.incorrect .option-check { background: var(--color-error); border-color: var(--color-error); color: #fff; }

.option-btn:disabled { cursor: default; transform: none; }

.text-answer-wrap { margin-bottom: var(--space-6); }

/* ===========================================================
   Results screen
   =========================================================== */

.screen-results { padding-top: var(--space-8); }

.results-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6) var(--space-8);
  box-shadow: var(--shadow-md);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Washi tape decorations */
.washi {
  position: absolute;
  width: 90px;
  height: 26px;
  opacity: 0.85;
  z-index: 2;
}
.washi::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 6px, transparent 6px 12px);
}
.washi-1 {
  top: -8px;
  left: -18px;
  background: var(--color-primary);
  transform: rotate(-40deg);
}
.washi-2 {
  top: -8px;
  right: -18px;
  background: var(--color-accent-2);
  transform: rotate(40deg);
}

.sticker-frame {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto var(--space-5);
  transform: rotate(-3deg);
}

.sticker-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 6px solid var(--color-surface);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-border);
  background: var(--color-surface-2);
}

.sticker-stars {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  box-shadow: var(--shadow-md);
  font-size: 1rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.tier-name {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  transform: rotate(-1deg);
}

.tier-encouragement {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  background: linear-gradient(135deg, var(--color-primary-highlight), var(--color-accent-2-highlight));
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  margin: 0 auto var(--space-3);
}

.score-pill-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-text);
}

.score-pill-total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.result-time {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

/* Entry animation: calm fade + scale (tiers 1-3), used for all tiers as the base */
.results-card.card-enter {
  animation: card-fade-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes card-fade-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Celebration glow pulse for tiers 4-5 */
.results-card.card-celebrate {
  animation: card-fade-in 320ms cubic-bezier(0.16, 1, 0.3, 1), celebrate-glow 1.5s ease-out 320ms;
}

@keyframes celebrate-glow {
  0% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(236, 108, 185, 0.5); }
  40% { box-shadow: var(--shadow-md), 0 0 0 18px rgba(236, 108, 185, 0); }
  100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(236, 108, 185, 0); }
}

.sticker-frame.sticker-pop {
  animation: sticker-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both;
}

@keyframes sticker-pop {
  0% { transform: rotate(-3deg) scale(0.7); opacity: 0; }
  60% { transform: rotate(-3deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .results-card.card-enter,
  .results-card.card-celebrate,
  .sticker-frame.sticker-pop {
    animation: none !important;
  }
}

.results-actions { display: flex; flex-direction: column; gap: var(--space-3); }

.review-list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-border);
}

.review-item.is-correct { border-left-color: var(--color-success); }
.review-item.is-incorrect { border-left-color: var(--color-error); }

.review-q { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.review-a { font-size: var(--text-xs); color: var(--color-text-muted); }
.review-a strong { color: var(--color-text); }

/* ===========================================================
   Leaderboard screen
   =========================================================== */

.screen-leaderboard { padding-top: var(--space-8); }

.leaderboard-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  min-height: 120px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.leaderboard-row.is-top1 { background: linear-gradient(90deg, var(--color-accent-2-highlight), var(--color-surface-2)); }

.rank-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xs);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.rank-badge.rank-1 { background: var(--color-accent-2); color: #3a2318; }
.rank-badge.rank-2 { background: #d8c8b8; color: #3a2318; }
.rank-badge.rank-3 { background: #e3ac7f; color: #3a2318; }

.lb-name {
  flex: 1;
  font-weight: 600;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-score {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-primary);
  flex-shrink: 0;
}

.lb-time {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  flex-shrink: 0;
  min-width: 44px;
  text-align: right;
}

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.skeleton-row {
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-offset) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===========================================================
   Confetti
   =========================================================== */

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0.4; }
}

/* ===========================================================
   Responsive
   =========================================================== */

@media (min-width: 640px) {
  .app-main { padding-top: var(--space-8); }
}

@media (max-width: 380px) {
  .start-card, .question-card, .results-card, .leaderboard-card {
    padding: var(--space-6) var(--space-4);
  }
}