/* ═══════════════════════════════════════════════════════════════════════
   RWF DAILY — styles for the temporal loop screens (FLOW-06 danger zone,
   FLOW-07 daily winner + recap). Loaded after app.css; tokens only, no
   hex literals. Animations sit under the global reduced-motion floor in
   tokens.css (§7 row 16 — DZ3 heartbeat stays on the timer only).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── battle-live day chrome ──────────────────────────────────────────── */

/* play-day label under the top bar: "DAY 2 — CLOSES 11:59 PM" / rest day */
.fx-daylabel {
  font: 600 11px/1.2 var(--font-body);
  letter-spacing: 0.08em;
  color: var(--faint);
  margin: 10px 0 0;
  text-transform: uppercase;
}
.fx-daylabel b { color: var(--lime); font-weight: 700; }

/* the pulsing "log now" affordance at danger level ≥ 1 */
.fx-dzlog {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 361px; min-height: 51px;
  border-radius: var(--pill);
  border: 0; cursor: pointer;
  background: var(--lime); color: var(--bg);
  font: 700 16px/1 var(--font-body); letter-spacing: 0.02em;
  margin-top: 12px;
  transition: transform var(--ease), background var(--ease);
}
.fx-dzlog:active { transform: scale(0.98); background: var(--lime-dim); }
@media (prefers-reduced-motion: no-preference) {
  .fx-dzlog { animation: fx-dzlog-pulse 1.6s ease-in-out infinite; }
}
@keyframes fx-dzlog-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--lime-glow); }
  50% { box-shadow: 0 0 22px 4px var(--lime-glow); }
}

/* recap entry row on the battle screen */
.fx-recaplink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; max-width: 361px;
  border: 1px solid var(--line-bright); border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted); cursor: pointer;
  font: 600 13px/1.2 var(--font-body);
  padding: 13px 16px; margin-top: 12px;
  transition: border-color var(--ease), color var(--ease);
}
.fx-recaplink:hover { border-color: var(--lime); color: var(--text); }
.fx-recaplink b { color: var(--lime); }
.fx-recaplink .fg-icon { width: 16px; height: 16px; color: var(--faint); }

/* the DZ wash cross-fades instead of snapping */
.fx-app { transition: background-color 400ms ease; }

/* ── danger chips on the home battles list ───────────────────────────── */

.fg-status--dz1 { background: var(--lime); color: var(--on-gold, #07060d); }
.fg-status--dz2 { background: var(--urgency); color: var(--text); }
.fg-status--dz3 { background: var(--danger); color: var(--text); }

/* ── daily winner + recap screen (his MOB-RESULT-001/002/003, real data) ─ */

.fx-winnercard {
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--energy-tint) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--energy) 70%, transparent);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 361px;
  text-align: center;
}
.fx-winnercard--won { border-color: color-mix(in srgb, var(--lime) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 10%, var(--surface)) 0%, var(--surface) 100%); }
.fx-winnercard--brutal { border-color: var(--line-bright); background: var(--surface); }
.fx-winnercard__sub { font: 500 13px/1.5 var(--font-body); color: var(--muted); margin: 0; }
.fx-winnercard__sub b { color: var(--text); font-weight: 600; }
.fx-winnercard__trophy { font-size: 40px; line-height: 1; color: var(--lime); display: flex; justify-content: center; }
.fx-winnercard__trophy .fg-icon { width: 44px; height: 44px; }

/* day chips — pick which closed day the recap shows */
.fx-daychips { display: flex; gap: 8px; flex-wrap: wrap; max-width: 361px; margin-top: 12px; }
.fx-daychip {
  border-radius: var(--pill); border: 1px solid var(--line-bright);
  background: var(--surface-2); color: var(--muted);
  font: 700 12px/1 var(--font-body); letter-spacing: 0.04em;
  padding: 10px 14px; cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.fx-daychip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--bg); }
.fx-daychip--live { opacity: 0.55; cursor: default; }

/* daily standings row — rank, avatar, name + bar, adjusted score */
.fx-drow {
  display: flex; align-items: center; gap: 12px;
  max-width: 361px; min-height: 64px; padding: 10px 14px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.fx-drow--win { border-color: color-mix(in srgb, var(--lime) 70%, transparent); background: var(--surface-2); }
.fx-drow--you { border-color: var(--energy); }
.fx-drow__rank { width: 20px; text-align: center; font: 700 16px/1.2 var(--font-body); color: var(--faint); }
.fx-drow--win .fx-drow__rank { color: var(--lime); }
.fx-drow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fx-drow__name { font: 600 15px/1.2 var(--font-body); color: var(--text); display: flex; gap: 6px; align-items: center; }
.fx-drow__name .fg-icon { width: 14px; height: 14px; color: var(--lime); }
.fx-drow__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fx-drow__bar i { display: block; height: 100%; border-radius: 3px; background: var(--energy); }
.fx-drow--win .fx-drow__bar i { background: var(--lime); }
.fx-drow__score { text-align: right; }
.fx-drow__pts { font: 700 16px/1.2 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.fx-drow--win .fx-drow__pts { color: var(--lime); }
.fx-drow__sets { font: 400 11px/1.2 var(--font-body); color: var(--faint); }

/* nemesis / revenge strip on the daily screen */
.fx-nemesis {
  border-radius: var(--radius);
  background: var(--ink-navy, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--sky) 40%, transparent);
  padding: 13px 16px;
  font: 500 13px/1.5 var(--font-body); color: var(--muted);
  max-width: 361px;
}
.fx-nemesis b { color: var(--text); }