/* ============================================
   WHO'S OLDER — v2.0
   Faithful to the original mobile gameplay screens:
   - HUD: Best | Logo | Score (with green timer ring)
   - White header strip with "X or Y?"
   - Two photos butted together (no seam)
   - Pills appear OPPOSITE swipe direction
   - Teal tint overlay on reveal
   - Tick mark under each age number
   ============================================ */

:root {
  --teal: #1c6e6e;
  --teal-dark: #154f4f;
  --teal-darker: #0e3838;
  --teal-tint: rgba(28, 138, 138, 0.65);  /* used for the reveal overlay */
  --orange: #f5993b;
  --orange-bright: #ff9a3c;
  --lime: #a8c93a;
  --lime-bright: #b8d943;
  --cream: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-dim: rgba(255,255,255,0.7);
  --danger: #e94e4e;

  --font-display: "Fredoka", "Comic Sans MS", system-ui, sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--teal);
  color: var(--cream);
}

body {
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
  font-weight: 700;
}

#app {
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--teal);
}

/* ============================================
   HUD
   ============================================ */
.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 18px 12px;
  gap: 12px;
  flex-shrink: 0;
  background: var(--teal);
}

.hud__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--cream);
}

.hud__stat--left { justify-self: start; }
.hud__stat--right { justify-self: end; }

.hud__label { font-weight: 500; }
.hud__value { font-weight: 700; font-variant-numeric: tabular-nums; }

.hud__brand { justify-self: center; }

.hud__brand img {
  height: 44px;
  width: auto;
  display: block;
  transform: rotate(-3deg);
}

/* Timer ring around the score number */
.timer-ring {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-ring__bg {
  fill: var(--lime-bright);
  fill-opacity: 0.25;
  stroke: var(--lime-bright);
  stroke-width: 3;
  stroke-opacity: 0.4;
}

.timer-ring__progress {
  fill: none;
  stroke: var(--lime-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 106.81;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.1s linear, stroke 0.2s var(--ease);
}

.timer-ring--warning .timer-ring__progress { stroke: var(--orange-bright); }
.timer-ring--danger .timer-ring__progress { stroke: var(--danger); }

.timer-ring__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* ============================================
   SCREENS
   ============================================ */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.35s var(--ease);
  min-height: 0;
}

.hidden { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   MENU
   ============================================ */
.screen--menu {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  gap: 32px;
}

.menu__logo-wrap {
  width: 100%;
  max-width: 280px;
  display: flex;
  justify-content: center;
}

.menu__logo {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.25));
  animation: logoPop 0.55s var(--ease);
}

@keyframes logoPop {
  0% { opacity: 0; transform: scale(0.85) rotate(-2deg); }
  60% { opacity: 1; transform: scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.menu__subtitle {
  max-width: 320px;
  color: var(--cream);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 800;
  padding: 0 4px;
}

.menu__buttons {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active { transform: scale(0.97); }

.btn__icon {
  font-size: 14px;
  opacity: 0.9;
}

.btn--primary {
  padding: 16px 24px;
  background: transparent;
  color: var(--lime-bright);
  border: 2.5px solid var(--lime-bright);
  border-radius: 999px;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--lime-bright);
  color: var(--teal-darker);
  outline: none;
}

.btn--secondary {
  padding: 14px 22px;
  background: var(--orange);
  color: var(--cream);
  border: 2.5px solid var(--orange);
  border-radius: 999px;
}

.btn--secondary:hover { background: var(--orange-bright); }

.btn--ghost {
  padding: 16px 24px;
  background: transparent;
  color: var(--cream);
  border: 2.5px solid var(--cream);
  border-radius: 999px;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--cream);
  color: var(--teal-darker);
  outline: none;
}

/* ============================================
   ARENA
   ============================================ */
.screen--arena {
  padding: 0;
  gap: 0;
  background: var(--teal);
}

.match-header {
  background: var(--cream);
  color: var(--ink);
  padding: 16px 20px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}

.cards-row {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;                      /* no seam — photos butt together */
  background: var(--teal);
  min-height: 0;
  position: relative;
  margin-bottom: env(safe-area-inset-bottom, 24px);
  padding-bottom: 24px;        /* small teal margin under cards, matches screenshots */
}

.card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  background: var(--teal-dark);
  user-select: none;
}

.card__photo {
  width: 100%;
  height: 100%;
}

.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform var(--anim-swipe-ms, 400ms) var(--ease);
  pointer-events: none;
}

/* Teal tint overlay layer — sits over the photo on reveal.
   Fades in alongside the ages, matching the original's parallel text fades. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal-tint);
  opacity: 0;
  transition: opacity var(--anim-age-fade-ms, 550ms) linear;
  pointer-events: none;
  z-index: 2;
}

.card--reveal::after {
  opacity: 1;
}

/* Card swipe feedback */
.card--swipe-up .card__photo img { transform: translateY(-14px); }
.card--swipe-down .card__photo img { transform: translateY(14px); }

/* ====== Chain crossover animation ======
   The "incoming" img is a transient overlay added by JS during chain transitions.
   It starts off-screen right (translateX(100%)) and slides in.
   The existing img simultaneously slides off to the left.
   Together with the survivor appearing in BOTH cards (incoming on left, current
   on right), the user sees the survivor sliding from right to left across the
   seam, and the newcomer entering on the right. */
.card__photo-incoming {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: translateX(100%);
  z-index: 1;
  pointer-events: none;
}

.card--chaining .card__photo > img:not(.card__photo-incoming) {
  animation: chain-slide-out var(--anim-chain-ms, 450ms) ease-out forwards;
}

.card--chaining .card__photo-incoming {
  animation: chain-slide-in var(--anim-chain-ms, 450ms) ease-out forwards;
}

@keyframes chain-slide-out {
  to { transform: translateX(-100%); }
}

@keyframes chain-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Action pills */
.card__pill {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--orange-bright);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  padding: 12px 8px;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  pointer-events: none;
  z-index: 3;
}

.card__pill--top { top: 0; }
.card__pill--bottom { bottom: 0; }

/* Show OPPOSITE pill from swipe direction
   (swiping down shows pill at top so finger doesn't cover it) */
.card--show-up .card__pill--bottom { opacity: 1; }
.card--show-down .card__pill--top { opacity: 1; }

/* Age overlay with tick mark — appears on reveal */
.age-overlay {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  /* Linear easing matches the original Unity Color.Lerp on the text fade */
  transition: opacity var(--anim-age-fade-ms, 550ms) linear;
  pointer-events: none;
  z-index: 4;
}

.card--reveal .age-overlay { opacity: 1; }

.age-overlay__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  line-height: 1;
}

.age-overlay__tick {
  width: 2px;
  /* Height is set per-round by JS to make the bar proportional to age.
     Falls back to 36px if no var is set. */
  height: var(--tick-height, 36px);
  background: var(--cream);
  border-radius: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: height 0.3s var(--ease);
}

/* Center result badge (check/X)
   Pop sequence matches the original Unity SymbolEffect: scale 0 → 1 linear over 350ms.
   We use scale(0) here instead of (0.4) so the badge truly pops in. */
.result-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--lime-bright);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  opacity: 0;
  transition:
    opacity var(--anim-badge-pop-ms, 350ms) linear,
    transform var(--anim-badge-pop-ms, 350ms) linear;
  pointer-events: none;
  z-index: 5;
}

.result-badge--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.result-badge--wrong { background: var(--danger); }

/* ============================================
   GAME OVER
   ============================================ */
.screen--gameover {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 20px;
}

.gameover__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--orange-bright);
  letter-spacing: -0.01em;
}

.gameover__line {
  color: var(--cream);
  font-size: 15px;
  max-width: 320px;
  font-weight: 700;
  margin-top: -4px;
}

.reveal { width: 100%; max-width: 360px; }

.reveal__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reveal__cell {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 8px 8px 12px;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reveal__cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 8px;
  background: #d8d3c8;
}

.reveal__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.15;
  color: var(--ink);
}

.reveal__age {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

.gameover__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.gameover__score-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

.gameover__score-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--lime-bright);
  font-variant-numeric: tabular-nums;
}

.gameover__buttons {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Small-height tablet/landscape */
@media (max-height: 700px) {
  .menu__logo { max-width: 200px; }
  .menu__subtitle { font-size: 14px; }
  .age-overlay__num { font-size: 42px; }
  .reveal__cell img { aspect-ratio: 4 / 3; }
  .gameover__score-value { font-size: 48px; }
}

/* ===== v2.6 polish pass ===== */

/* Orange-styled "or" in the match header (between celeb names) */
.match-header__or {
  color: var(--orange, #f5993b);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 0.15em;
}

/* Hide the leaderboard button until v2 (still in DOM for future wiring) */
#btn-leaderboard {
  display: none !important;
}

/* Footer (bottom of menu screen) */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px 12px;
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.02em;
  z-index: 5;
  pointer-events: auto;
}
.app-footer a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  margin: 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
}
.app-footer a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.85);
}
.app-footer__copy {
  display: block;
  margin-bottom: 4px;
  opacity: 0.85;
}
/* Hide footer when the game is in play to avoid distraction */
body.in-arena .app-footer,
body.in-gameover .app-footer {
  display: none;
}

/* First-time tutorial overlay */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 110, 110, 0.96);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  animation: tutorial-fade-in 0.4s ease-out;
}
.tutorial-overlay.hidden { display: none; }
@keyframes tutorial-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tutorial {
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.tutorial__title {
  font-family: var(--font-display, 'Fredoka', system-ui, sans-serif);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.tutorial__sub {
  font-size: 15px;
  opacity: 0.85;
  margin: 0 0 28px;
  line-height: 1.5;
}
.tutorial__demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
}
.tutorial__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  text-align: left;
}
.tutorial__arrow {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  color: var(--lime, #b8d943);
  font-weight: 700;
}
.tutorial__row-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.tutorial__row-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.tutorial__row-text small {
  opacity: 0.75;
  font-size: 13px;
}
.tutorial__btn {
  background: var(--lime, #b8d943);
  color: #1a1a1a;
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-display, 'Fredoka', system-ui, sans-serif);
  letter-spacing: 0.02em;
  width: 100%;
  max-width: 280px;
  transition: transform 0.12s, background-color 0.15s;
}
.tutorial__btn:hover { background: #c5e644; }
.tutorial__btn:active { transform: scale(0.97); }

/* Static-page styles (used by /privacy, /terms, /credits) */
body.static-page {
  background: var(--teal, #1c6e6e);
  color: #f5f0e6;
  font-family: 'Nunito', system-ui, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
.static-page__wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}
.static-page__back {
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
}
.static-page__back:hover { color: #fff; }
.static-page h1 {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--lime, #b8d943);
  font-size: 32px;
  margin: 0 0 6px;
}
.static-page__meta {
  opacity: 0.6;
  font-size: 13px;
  margin-bottom: 24px;
}
.static-page h2 {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--orange, #f5993b);
  font-size: 20px;
  margin: 28px 0 10px;
}
.static-page p, .static-page li {
  line-height: 1.65;
  font-size: 15px;
  margin: 0 0 12px;
}
.static-page a {
  color: var(--lime, #b8d943);
  text-decoration: underline;
}
.credits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.credits-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 1.5;
}
.credits-list li strong { font-weight: 700; }
.credits-list .credit-meta {
  display: block;
  opacity: 0.7;
  font-size: 12px;
  margin-top: 2px;
}

/* ===== App Store / Google Play "coming soon" badges ===== */
.app-soon {
  margin-top: 24px;
  text-align: center;
  /* Leave breathing room above the footer */
  padding-bottom: 60px;
}
.app-soon__label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  font-family: 'Nunito', system-ui, sans-serif;
}
.app-soon__badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.app-soon__badge {
  /* Look like a real store badge — black pill with logo + text */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  /* Subtle "disabled-ish" appearance since these aren't real links yet */
  opacity: 0.7;
  cursor: default;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-width: 140px;
}
.app-soon__logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #fff;
}
.app-soon__badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  text-align: left;
}
.app-soon__badge-text small {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.app-soon__badge-text strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Hide the app-soon section once the player is in the game */
body.in-arena .app-soon,
body.in-gameover .app-soon {
  display: none;
}

/* On narrow viewports, badges stack vertically for legibility */
@media (max-width: 360px) {
  .app-soon__badges { flex-direction: column; align-items: center; }
  .app-soon__badge { width: 200px; }
}
/* Allow scrolling on static info pages — overrides game-screen lock */
html:has(body.static-page),
body.static-page {
  overflow: auto !important;
  height: auto !important;
  min-height: 100%;
  position: static !important;
  touch-action: auto !important;
}

body.static-page .static-page__wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  /* no fixed height — let content flow */
}