/**
 * Result Modal Redesign — v7 Token Layer (Phase 1)
 *
 * Loaded after game.css. Phase 1 introduces design tokens and font-family
 * pointers only; component classes (.hero, .stats-clean, .chain-h, etc.) and
 * applied styles arrive in Phases 2–4. Nothing in Phase 1 redefines existing
 * selectors, so the current welcome / success / failure modals continue to
 * render unchanged.
 *
 * Source mockup: .claude/mockups/success-portal-redesign/v7.html
 * Plan:          .claude/plans/result-modal-redesign.md
 */

:root {
  /* Display + mono families used by the v7 result modals. Scoped with the
     -modal suffix so they don't shadow the existing global --font-display
     (Fraunces, defined in tokens.css) which is still consumed by other
     marketing pages (press.css, landing.css). */
  --font-display-modal: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono-display-modal: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Optical-size axis values for the Bricolage Grotesque variable font.
     Hero/headline copy uses opsz 96; stat numerals use opsz 32. */
  --opsz-display: 96;
  --opsz-stats: 32;

  /* v7 vertical rhythm. The 60px section break (--space-2xl-modal) is the
     headline spacing change in the redesign — three discrete sections
     separated by generous breathing room rather than one continuous block. */
  --space-2xl-modal: 60px;
  --space-xl-modal: 36px;
  --space-lg-modal: 24px;
  --space-md-modal: 18px;
  --space-sm-modal: 12px;
  --space-xs-modal: 8px;
  --space-action-modal: 22px;
}

/* ============================================================
 * Phase 2 — Welcome Modal (returning user)
 *
 * Overrides for `.welcome-*` classes already defined in game.css. Loaded
 * after game.css, so these win the cascade. Targets only the markup in
 * `getWelcomeContent()` — the played-today variant in
 * `getCompletedWelcomeContent()` uses different classes (`welcome-title`,
 * `welcome-container--results`) and is not affected by Phase 2.
 * ============================================================ */

.welcome-eyebrow {
  font-family: var(--font-display-modal);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-gray-600);
  line-height: 1.15;
  margin: 0 0 6px;
}

.welcome-streak-num {
  font-family: var(--font-display-modal);
  font-weight: 700;
  font-variation-settings: "opsz" var(--opsz-display);
}

.welcome-streak-label {
  font-family: var(--font-mono-display-modal);
}

.welcome-hook {
  font-family: var(--font-display-modal);
}

.welcome-hook em {
  font-weight: 600;
}

/* ============================================================
 * Phase 3 — Success Modal (daily mode)
 *
 * Activated by .modal--success on the feedback modal. The played-today
 * welcome variant uses .modal--welcome (different markup) and is unaffected.
 *
 * Class names mirror the v7 mockup but are scoped under .modal--success to
 * avoid colliding with global classes (.hero in landing.css, .streak in
 * game.css). Phase 4 will widen the scope by also adding .modal--failure to
 * the failure modal and updating selectors to target both modifiers.
 * ============================================================ */

/* Drop the visible header bar — the v7 .hero in the body becomes the title.
   The H2 is sr-only'd below for screen-reader labeling. The sr-only title is
   position:absolute (out of flex flow), so the close button is the only
   in-flow flex child; flex-end pins it to the right to match every other
   ChainWhich modal (stats, settings, rules, etc.) where close lives top-right. */
.modal--success .modal__header {
  border-bottom: none;
  padding-bottom: 0;
  justify-content: flex-end;
}
.modal--success .modal__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Tighter body padding so v7 spacing tokens drive the rhythm */
.modal--success .modal__body {
  padding: var(--space-lg-modal) var(--space-md-modal) var(--space-md-modal);
}

/* Hero (visual title block) */
.modal--success .hero {
  text-align: center;
}
.modal--success .hero .prefix {
  display: block;
  font-family: var(--font-display-modal);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-gray-600);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 2px;
}
.modal--success .hero .title {
  display: block;
  font-family: var(--font-display-modal);
  font-weight: 800;
  font-size: 2.05rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-gray-900);
  font-variation-settings: "opsz" var(--opsz-display);
}
.modal--success .hero .title .emoji {
  font-size: 1.4rem;
  margin-left: 6px;
  vertical-align: 0.18em;
  display: inline-block;
}
.modal--success .hero.tier-top .title {
  background: linear-gradient(160deg, #111827 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modal--success .hero.tier-top .title .emoji {
  -webkit-text-fill-color: initial;
  background: none;
}
.modal--success .hero.tier-mid .title {
  /* Calmer treatment for Quick / Steady / Clutch Solver — no gradient. */
  font-weight: 700;
}

/* Honors row — replaces the .achievement-ribbon panel for v7 success modals.
   Renders amber pills between hero and stats. The slot lives in the body
   markup (built by _buildSuccessBody); showAchievementBadges populates it
   when honors arrive (sync or async). */
.modal--success .honors-slot {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 18px 4px 0;
}
.modal--success .honors-slot:empty {
  display: none;
  margin: 0;
}
.modal--success .honor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.4);
  color: var(--color-gray-900);
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-family: var(--font-display-modal);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(var(--color-accent-rgb), 0.15);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 250ms ease-out,
              transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal--success .honor--visible {
  opacity: 1;
  transform: scale(1);
}
.modal--success .honor__icon {
  font-size: 0.88rem;
  line-height: 1;
}

/* Pulse: draws eye to the honors row after Act 2 settles (mirrors the
   achievement-ribbon--pulse animation but on the slot wrapper). */
.modal--success .honors-slot--pulse {
  animation: honorsSlotPulse 800ms cubic-bezier(0.4, 0, 0.2, 1) 2;
}
@keyframes honorsSlotPulse {
  0%   { background-color: transparent;
         box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.5); }
  40%  { background-color: rgba(234, 179, 8, 0.10);
         box-shadow: 0 0 8px 4px rgba(234, 179, 8, 0.25); }
  100% { background-color: transparent;
         box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

/* Stats — slimmed (no icons, no panel background, hairline dividers). */
.modal--success .stats-clean {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 8px;
  margin-top: var(--space-lg-modal);
}
.modal--success .stat-clean {
  text-align: center;
  position: relative;
  padding: 0 4px;
}
.modal--success .stat-clean + .stat-clean::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  width: 1px;
  height: 64%;
  background: var(--color-gray-200);
}
.modal--success .stat-clean__value {
  font-family: var(--font-display-modal);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.025em;
  color: var(--color-gray-900);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: "opsz" var(--opsz-stats);
}
.modal--success .stat-clean__label {
  font-family: var(--font-mono-display-modal);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-top: 6px;
}

/* Streak — single-line confirmation; only generic "🔥 N day streak" shown.
   Scoped under .modal--success so the page-chrome .streak (game.css:105) is
   unaffected.

   IMPORTANT: the global .streak rule in game.css sets `display: flex` for the
   page-chrome streak counter. text-align: center has no effect on flex items
   — we have to override display to block (or use justify-content) to center
   the streak inside the modal. */
.modal--success .streak {
  display: block;
  text-align: center;
  font-family: var(--font-display-modal);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-gray-700);
  line-height: 1;
  margin-top: var(--space-lg-modal);
}
.modal--success .streak strong {
  font-family: var(--font-display-modal);
  font-weight: 700;
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
}

/* "Create your own" link — small sentence below the action buttons. Targets
   the community page. Sized down so it reads as a soft secondary affordance,
   not a competing CTA. Lives inside .modal__content (after .modal__actions),
   not in the body. */
.modal--success .create-own-cta {
  text-align: center;
  font-family: var(--font-display-modal);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-gray-500);
  line-height: 1.4;
  margin: var(--space-md-modal) var(--space-md-modal) var(--space-sm-modal);
  letter-spacing: -0.005em;
}
.modal--success .create-own-cta__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.modal--success .create-own-cta__link:hover,
.modal--success .create-own-cta__link:focus-visible {
  border-bottom-color: var(--color-primary);
  outline: none;
}
.modal--success .create-own-cta__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-bottom-color: transparent;
}

/* The splash hide rules in game.css enumerate specific children of
   .modal__content (.modal__header, .modal__body, .modal__actions,
   .achievement-ribbon). The v7 .create-own-cta is a NEW sibling of those,
   so it has to be added to the same rules or it bleeds through the teal
   splash card. Mirroring all three states (splash hold, splash entering,
   reduced motion) keeps the entrance animation in sync with the buttons. */
.modal--splash .create-own-cta {
  opacity: 0;
  pointer-events: none;
}
.modal--splash-entering .create-own-cta {
  animation: modalContentEnter 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .modal--splash-entering .create-own-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Tomorrow's Chain teaser. */
.modal--success .teaser-label {
  font-family: var(--font-mono-display-modal);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  text-align: center;
  margin: var(--space-2xl-modal) 0 12px;
  line-height: 1;
}
.modal--success .chain-h {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.modal--success .chain-h.compact {
  gap: 3px;
}
.modal--success .chain-h__tile {
  font-family: var(--font-display-modal);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--color-primary);
  color: var(--color-gray-900);
  background: rgba(var(--color-primary-rgb), 0.08);
  padding: 8px 8px;
  border-radius: 8px;
  min-width: 56px;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}
/* Long-anchor adaptive tile — applied when an anchor is 7+ chars
   (~2.4% of seeds: VALENTINES, SPECIALIST, BASKETBALL). */
.modal--success .chain-h__tile.long {
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  padding: 7px 5px;
}
.modal--success .chain-h.compact .chain-h__qmark {
  font-size: 1.15rem;
  width: 14px;
}
.modal--success .chain-h.compact .chain-h__arrow {
  font-size: 0.7rem;
}
.modal--success .chain-h__qmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-family: var(--font-display-modal);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-gray-300);
  line-height: 1;
  font-variation-settings: "opsz" var(--opsz-stats);
  user-select: none;
}
.modal--success .chain-h__arrow {
  color: var(--color-gray-400);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
}

/* Buttons row gets the 60px section break above. The .button .button--primary
   styles from game.css continue to provide the actual button visuals. */
.modal--success .modal__actions {
  margin-top: var(--space-2xl-modal);
}

/* Defense-in-depth: hide the legacy gift-share section if any path still
   tries to inject it on the success modal. addGiftShareSection() is no
   longer called from showSuccessModal in Phase 3, but this prevents
   accidental display from re-opens or future edits. */
.modal--success .gift-share-section {
  display: none;
}

/* The fadeInStats rule in game.css fades .success-stats. The v7 markup uses
   .stats-clean instead, so re-apply the same delayed fade-in for parity with
   the curated/uncurated pacing rules already in game.css:1519-1525. */
.modal--success .stats-clean {
  opacity: 0;
  animation: fadeInStats 300ms ease-out forwards;
}
.modal--success:not(.modal--splash-done) .stats-clean {
  animation-delay: 0.8s;
}
.modal--splash-done .stats-clean {
  animation-delay: 0s;
}

/* Reduced-motion: skip honor pop-in stagger and pulse animations. */
@media (prefers-reduced-motion: reduce) {
  .modal--success .honor {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .modal--success .honors-slot--pulse {
    animation: none;
  }
  .modal--success .stats-clean {
    opacity: 1;
    animation: none;
  }
}