/* screen: stats
   Global dashboard: head-to-head hero, world results, regions,
   trend chart, live activity feed, and the player's rail. */

.stats-wrap { display: flex; flex-direction: column; gap: 16px; }

/* ---------- head to head hero ---------- */

.stats-h2h {
  display: grid;
  grid-template-columns: minmax(76px, 130px) 1fr auto 1fr minmax(76px, 130px);
  grid-template-areas: "sceneJp jp vs it sceneIt";
  align-items: center;
  gap: 16px;
}

/* mini 3-layer scene: sky+ground gradient, silhouette hills, landmark, ground line.
   Colors arrive per-destination via inline --scene-* vars (h2hSceneHTML in stats.js), 
   the same data.js scene the vote screen paints its cards with (ARCHITECTURE.md D-… exception). */
.stats-h2h-scene {
  border-radius: var(--r-lg);
  min-height: 108px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.stats-h2h-scene--jp { grid-area: sceneJp; }
.stats-h2h-scene--it { grid-area: sceneIt; }

/* layer 1 : sky, fading into the ground color at the horizon */
.stats-h2h-sky {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    var(--scene-sky-a) 0%, var(--scene-sky-b) 60%,
    var(--scene-ground) 60%, var(--scene-ground) 100%);
}
/* Night pass: the destination scene colors come from data.js and are light
   pastels in both themes, so the whole vignette has to be dimmed, not just the
   sky. The overlay used to live on .stats-h2h-sky::after, whose own stacking
   context stopped at the sky: the hills and ground line (z-index 1, painted
   from the same pastel --scene-ground) stayed daylight-bright over a night sky.
   Moved up to the scene, under the landmark. Integration review 2026-08-12. */
.stats-h2h-scene::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  transition: opacity .25s ease;
}
[data-theme="dark"] .stats-h2h-scene::after { opacity: 1; }

/* halo behind the landmark : ambient light, sits above the sky.
   Purely decorative (audit: this pulsed on both scenes at once, 2 of the
   screen's 48 infinite loops for something outside the reading path), a
   static glow reads the same without ever animating. */
.stats-h2h-glow {
  position: absolute; z-index: 1;
  left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--scene-accent) 28%, transparent) 0%, transparent 62%);
  opacity: .82;
}

/* layer 2 : silhouette hills, the ground's depth cue */
.stats-h2h-hill {
  position: absolute; z-index: 1;
  left: -16%; width: 132%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: color-mix(in srgb, var(--scene-ground) 68%, var(--scene-accent) 32%);
}
.stats-h2h-hill-back { bottom: 24%; height: 22%; opacity: .5; }
.stats-h2h-hill-front { bottom: 17%; height: 16%; left: -26%; width: 152%; opacity: .82; }

/* layer 3 : ground line, the horizon's edge */
.stats-h2h-ground {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0; height: 4px;
  background: color-mix(in srgb, var(--scene-accent) 45%, transparent);
}

/* z-index 4 : above the night overlay (3), so the landmark stays lit at night */
.stats-h2h-emoji {
  position: relative; z-index: 4;
  font-size: 34px;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--scene-accent) 45%, transparent));
}

.stats-h2h-side { text-align: center; min-width: 0; }
.stats-h2h-side--jp { grid-area: jp; }
.stats-h2h-side--it { grid-area: it; }
.stats-h2h-flag { display: flex; justify-content: center; font-size: 21px; }
.stats-h2h-name { font-weight: 800; font-size: 14.5px; margin-top: 4px; color: var(--ink-soft); }
.stats-h2h-pct { font-weight: 900; font-size: 30px; line-height: 1.15; margin-top: 2px; }
.stats-h2h-side--jp .stats-h2h-pct { color: var(--warm); }
.stats-h2h-side--it .stats-h2h-pct { color: var(--blue); }
.stats-h2h-votes { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 2px; }

.stats-h2h-vs {
  grid-area: vs;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; font-size: 14.5px; letter-spacing: .03em;
  background: linear-gradient(135deg, var(--warm-soft), var(--blue-soft));
  border: 2px solid var(--card);
  box-shadow: var(--shadow-2);
  justify-self: center;
}

@media (max-width: 640px) {
  .stats-h2h {
    grid-template-columns: 1fr;
    grid-template-areas: "sceneJp" "jp" "vs" "it" "sceneIt";
    row-gap: 10px;
  }
}

/* ---------- main grid ---------- */

.stats-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.stats-main, .stats-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* the shell sidebar eats 264px until 980px, so the trend chart and the 24-dot
   map were being squeezed under ~300px well before the old 900px breakpoint. */
@media (max-width: 1040px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stats-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

/* ---------- live chip ---------- */

.stats-live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 800; font-size: 12px; white-space: nowrap;
}
/* the screen used to run this pulse on three identical dots at once (Global
   Results chip, Recent Activity chip, footer) : three of the same infinite
   loop for one idea. Only one dot carries the meaning now, the live activity
   feed that is actually ticking (setInterval in stats.js) ; the other two
   stay static, still a colored "live" mark, just not animated. */
.stats-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
}
.stats-live-dot-anim { animation: stats-live-pulse 1.8s ease-in-out infinite; }
@keyframes stats-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(1.6); }
}

/* ---------- global results / world map ---------- */

.stats-map { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; margin-bottom: 16px; }
.stats-dot { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--line-soft); }
.stats-dot-warm { background: var(--warm); opacity: .88; }
.stats-dot-blue { background: var(--blue); opacity: .88; }
.stats-dot-sea { background: var(--line-soft); opacity: .55; }
/* was the screen's main offender : 41 dots pulsing in a permanent diagonal
   wave, decorative flourish on a static silhouette map. A brighter, slightly
   larger static dot reads as "lit" just as well without ever animating. */
.stats-dot-lit { transform: scale(1.25); filter: brightness(1.15); }

.stats-map-foot { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.stats-map-foot b { color: var(--ink); }

@media (max-width: 480px) {
  .stats-map { gap: 3px; }
}

/* ---------- by region ---------- */

.stats-toggle { display: inline-flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 999px; }
.stats-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 12.5px; color: var(--ink-soft); transition: background .2s ease, color .2s ease, transform .1s ease-out; }
.stats-toggle-btn.selected { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
/* same sober press feedback as the other screens' own toggles/tabs (shop-tab,
   focus-pill) : a 1px nudge and a token background, not a scale trick. */
.stats-toggle-btn:active { transform: translateY(1px); background: var(--card-2); }

.stats-region-rows { display: flex; flex-direction: column; gap: 12px; }
.stats-region-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; gap: 8px; }
.stats-region-name { font-weight: 800; font-size: 13.5px; }
/* .timer-digits gives these tabular figures (they swap on the Japan/Italy
   toggle); at 12.5px its 1px tracking reads loose, so zero it back out here. */
.stats-region-pct { font-size: 12.5px; font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.stats-region-pct b { letter-spacing: 0; }
.stats-pct-warm { color: var(--warm); }
.stats-pct-blue { color: var(--blue); }
.stats-pct-strong { font-size: 14.5px; }
.stats-region-sep { color: var(--muted); font-weight: 600; }
.stats-region-track { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--bg-2); }
.stats-region-fill-warm { background: var(--warm); transition: flex-basis .4s ease; }
.stats-region-fill-blue { background: var(--blue); transition: flex-basis .4s ease; }

/* ---------- vote trends ---------- */

.stats-trend-select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-soft);
  font-weight: 800; font-size: 12.5px;
  box-shadow: var(--shadow-1);
}

.stats-trend-legend { display: flex; align-items: center; gap: 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.stats-trend-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.stats-trend-legend-warm { background: var(--warm); }
.stats-trend-legend-blue { background: var(--blue); }

.stats-trend-svg { width: 100%; height: auto; display: block; }
.stats-trend-grid { stroke: var(--line-soft); stroke-width: 1; }
.stats-trend-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stats-trend-line-warm { stroke: var(--warm); }
.stats-trend-line-blue { stroke: var(--blue); }
.stats-trend-dot { stroke: var(--card); stroke-width: 1.5; cursor: default; }
.stats-trend-dot-warm { fill: var(--warm); }
.stats-trend-dot-blue { fill: var(--blue); }

.stats-trend-axis { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 6px; }

/* ---------- recent vote activity ---------- */

.stats-activity-list { display: flex; flex-direction: column; }
.stats-activity-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.stats-activity-row:last-child { border-bottom: none; }
.stats-activity-avatar {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px;
  background: var(--bg-2);
}
.stats-activity-text { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.stats-activity-text b { color: var(--ink); }
.stats-activity-text .flag { margin: 0 1px -1px; }
.stats-activity-warm { color: var(--warm) !important; }
.stats-activity-blue { color: var(--blue) !important; }
.stats-activity-time { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.stats-activity-new { animation: stats-activity-in .45s ease-out both; }
@keyframes stats-activity-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- in transit (rail head) ----------
   The signature stats card: where am I going, and how long until I
   land there. Three depth reads : the destination glow behind, the clock on
   the card, the progress rail under it. */

.stats-transit {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.stats-transit::before {
  content: '';
  position: absolute; top: -55%; right: -30%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 68%);
  pointer-events: none;
}
.stats-transit > * { position: relative; }

.stats-transit-dest { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.stats-transit-dest b { font-size: 17px; font-weight: 900; }

.stats-transit-clock {
  font-size: 30px; line-height: 1.1;
  color: var(--muted);
  transition: color .3s ease;
}
.stats-transit[data-active="true"] .stats-transit-clock { color: var(--ink); }

.stats-transit-caption { font-size: 11.5px; font-weight: 800; color: var(--muted); }

/* the rail only breathes while a journey is actually under way, a pulsing bar
   on an idle screen is noise, not life */
.stats-transit-bar { margin-top: 4px; }
.stats-transit[data-active="true"] .stats-transit-bar > i {
  animation: stats-transit-glow 2.6s ease-in-out infinite;
}
@keyframes stats-transit-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

.stats-transit-btn { width: 100%; margin-top: 8px; }

/* ---------- profile ---------- */

.stats-profile-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.stats-avatar-wrap { position: relative; width: 56px; height: 56px; display: grid; place-items: center; flex-shrink: 0; }
.stats-avatar-halo { position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, var(--violet-soft), transparent 70%); }
.stats-avatar-emoji {
  position: relative; width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 26px;
  background: var(--card-2); border: 2px solid var(--violet-soft);
  box-shadow: var(--shadow-1);
}
.stats-profile-name { font-weight: 900; font-size: 16px; }
.stats-profile-check { color: var(--accent); }
.stats-profile-level { font-size: 12.5px; font-weight: 700; margin-top: 2px; }

.stats-xp-row { margin-bottom: 16px; }
.stats-xp-label { font-size: 12px; font-weight: 800; margin-top: 6px; text-align: right; letter-spacing: 0; }

.stats-account-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px; border-radius: var(--r-md);
  background: var(--accent-soft);
  margin-bottom: 16px;
}
.stats-account-note b { font-size: 12.5px; color: var(--ink); }
.stats-edit-btn { width: 100%; }

/* ---------- friends traveling ---------- */

.stats-see-all { font-size: 12px; font-weight: 800; color: var(--accent); }
.stats-friends-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.stats-friend-row { display: flex; align-items: center; gap: 10px; }
.stats-friend-name { font-weight: 800; font-size: 13.5px; }
.stats-friend-doing { font-size: 11.5px; font-weight: 600; }
.stats-friend-when { font-size: 11px; font-weight: 700; white-space: nowrap; }

/* ---------- react to the journey ---------- */

.stats-react-q { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; line-height: 1.4; margin: 8px 0 16px; }
.stats-react-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stats-react-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1.5px solid transparent;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.stats-react-btn:hover { transform: translateY(-2px); }
.stats-react-btn.selected { border-color: var(--accent); background: var(--accent-soft); }
.stats-react-emoji { font-size: 20px; }
.stats-react-label { font-size: 9.5px; font-weight: 800; color: var(--muted); }
.stats-react-btn.selected .stats-react-label { color: var(--accent); }

/* ---------- invite friends ---------- */

.stats-invite { text-align: center; background: linear-gradient(165deg, var(--gold-soft), var(--card) 65%); }
.stats-invite-emoji { font-size: 30px; margin-bottom: 6px; }
.stats-invite-title { font-weight: 900; font-size: 14.5px; margin-bottom: 4px; }
.stats-invite-btn { margin-top: 12px; width: 100%; }

/* ---------- footer ---------- */

.stats-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; padding: 10px 4px 2px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
}
.stats-footer-sep { color: var(--muted); }
.stats-footer .stats-live-dot { display: inline-block; margin-right: 5px; vertical-align: middle; }

@media (max-width: 480px) {
  .stats-footer { justify-content: flex-start; text-align: left; }
  .stats-react-label { display: none; }
}

@media (max-width: 480px) {
  .stats-transit-clock { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-live-dot-anim, .stats-activity-new,
  .stats-transit[data-active="true"] .stats-transit-bar > i { animation: none; }
}