/* Quirky Wrapped — tap-through story layout. */

[data-theme="light"] .game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.head-btns { display: flex; gap: 6px; }
#wr-month { min-width: 160px; }

/* ---- Locked state ---- */
.wr-locked { text-align: center; max-width: 480px; margin: var(--space-5) auto; }
.wr-locked-emoji { font-size: 2.6rem; margin-bottom: var(--space-2); }
.wr-locked .btn { margin-top: var(--space-2); }

/* ---- Progress dots ---- */
.wr-dots { display: flex; gap: 6px; max-width: 480px; margin: 0 auto var(--space-3); }
.wr-dots span { flex: 1; height: 5px; border-radius: 3px; background: var(--surface); transition: background 200ms var(--ease); }
.wr-dots span.on { background: var(--accent); }

/* ---- Stage ---- */
.wr-stage {
  position: relative;
  max-width: 480px; margin: 0 auto;
  min-height: 62svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
    var(--bg-elev);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.wr-tap { position: absolute; top: 0; bottom: 0; width: 28%; cursor: pointer; z-index: 2; }
.wr-tap-prev { left: 0; }
.wr-tap-next { right: 0; }
.wr-skip-btn { position: absolute; top: 10px; right: 10px; z-index: 3; opacity: 0.75; }

.wr-slide { position: relative; z-index: 1; text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 380px; }
.wr-emoji { font-size: 4rem; line-height: 1; }
.wr-kicker { font-weight: 800; font-size: 0.76rem; letter-spacing: 0.16em; color: var(--accent-text); text-transform: uppercase; }
.wr-headline { font-size: 1.65rem; font-weight: 800; line-height: 1.22; margin: 2px 0; }
.wr-sub { color: var(--text-dim); font-size: 0.95rem; margin: 0; }
.wr-bonus { margin-top: 6px; }
.wr-divider { font-size: 0.85rem; color: var(--text-faint); margin-top: 10px; }
.wr-persona-name { font-size: 2.5rem; font-weight: 900; color: var(--accent-text); margin: 2px 0; }
.wr-actions { display: grid; gap: 8px; width: 100%; max-width: 320px; margin-top: 14px; }

.wr-hint { margin-top: var(--space-2); }

@keyframes wrPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
.wr-pop { animation: wrPop 420ms var(--ease) both; }

@media (max-width: 420px) {
  .wr-emoji { font-size: 3.4rem; }
  .wr-headline { font-size: 1.4rem; }
  .wr-persona-name { font-size: 2.1rem; }
}