/* ui/results/results.css — Mission Debrief overlay. (M10)
   Mission Control language: hairline frames, monospace, uppercase, letter-spacing.
   z-index 35 — above #hud (10) and loadout (30); below nothing critical.
   Reuses shared CSS custom properties from loadout.css / styles.css:
     --rarity-common, --rarity-rare, --rarity-legendary, --rarity-exotic
     --amber, --green, --void, --panel-bg, --green-dim, --amber-dim
     --red, --cream
   Mobile-friendly: cards flex-wrap; safe-area insets applied.
*/

/* ── Overlay root ────────────────────────────────────────────────────────── */
.results-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;           /* hidden by default; JS clears inline + adds .results-visible */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* R2.1.2 — Fully opaque (was 0.97) so the 3D scene doesn't bleed through. */
  background: var(--void, #0a0e2a);
  color: var(--green, #33ff66);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  pointer-events: none;    /* none by default; open() sets auto */
  padding:
    env(safe-area-inset-top,    0px)
    env(safe-area-inset-right,  0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left,   0px);
}

.results-overlay.results-visible {
  display: flex;
}

/* ── Hairline frame (design-system §3 motif) ────────────────────────────── */
.rs-frame {
  position: absolute;
  inset: 8px;
  border: 1px solid var(--green-dim, rgba(51,255,102,.25));
  pointer-events: none;
  z-index: 0;
}

/* ── Scrollable center column ────────────────────────────────────────────── */
.rs-column {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  flex: 1 1 auto;     /* fill height above the pinned action bar… */
  min-height: 0;      /* …so overflow-y:auto actually scrolls instead of clipping */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 20px 24px;
  box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.rs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--green-dim, rgba(51,255,102,.25));
  flex-shrink: 0;
}

.rs-title {
  color: var(--amber, #ffb000);
  font-size: 20px;
  letter-spacing: 5px;
}

.rs-sector {
  font-size: 10px;
  color: var(--green, #33ff66);
  opacity: .5;
  letter-spacing: 3px;
}

/* ── Verdict ─────────────────────────────────────────────────────────────── */
.rs-verdict {
  font-size: 15px;
  letter-spacing: 4px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--green-dim, rgba(51,255,102,.25));
}

.rs-verdict-won  { color: var(--green, #33ff66); }
.rs-verdict-lost { color: var(--amber, #ffb000); }

/* ── Panel (shared section wrapper) ─────────────────────────────────────── */
.rs-panel {
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--green-dim, rgba(51,255,102,.25));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-section-label {
  font-size: 10px;
  color: var(--amber, #ffb000);
  letter-spacing: 3px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* ── Score panel ─────────────────────────────────────────────────────────── */
.rs-score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.rs-score-label {
  font-size: 10px;
  color: var(--green, #33ff66);
  opacity: .7;
  letter-spacing: 2px;
  flex-shrink: 0;
}

.rs-score-val {
  font-size: 13px;
  color: var(--green, #33ff66);
  letter-spacing: 1px;
  text-align: right;
}

/* Divider rule between breakdown rows and TOTAL */
.rs-rule {
  height: 1px;
  background: var(--green-dim, rgba(51,255,102,.25));
  margin: 4px 0;
}

/* TOTAL row — big amber readout */
.rs-score-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.rs-score-total {
  font-size: 26px;
  color: var(--amber, #ffb000);
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(255,176,0,.45);
  text-align: right;
}

/* Secondary stats row (WAVES SURVIVED + SURVIVAL) */
.rs-secondary-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.rs-secondary-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rs-secondary-label {
  font-size: 9px;
  color: var(--green, #33ff66);
  opacity: .6;
  letter-spacing: 2px;
}

.rs-secondary-val {
  font-size: 13px;
  color: var(--green, #33ff66);
  letter-spacing: 1px;
}

/* Lifetime + progress bar */
.rs-lifetime-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--green-dim, rgba(51,255,102,.25));
}

.rs-lifetime-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rs-next-tier-line {
  font-size: 9px;
  color: var(--amber, #ffb000);
  opacity: .7;
  letter-spacing: 2px;
}

.rs-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-bar-track {
  flex: 1;
  height: 8px;
  border: 1px solid var(--green-dim, rgba(51,255,102,.25));
  background: rgba(51,255,102,.04);
  overflow: hidden;
}

.rs-bar-fill {
  height: 100%;
  background: var(--amber, #ffb000);
  transition: width .3s ease;
}

.rs-bar-fill.rs-bar-full {
  background: var(--green, #33ff66);
}

.rs-bar-pct {
  font-size: 9px;
  color: var(--amber, #ffb000);
  letter-spacing: 1px;
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

/* ── Salvage section ─────────────────────────────────────────────────────── */
.rs-salvage-section {
  gap: 10px;
}

.rs-salvage-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rs-shard-gain {
  font-size: 12px;
  color: var(--amber, #ffb000);
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,176,0,.4);
}

/* SKIP/REVEAL ALL — the "never trap the player" affordance for the sequential
 * unspool below. Sits in the salvage header row; JS hides it once every spool
 * has resolved (see results.js _hideSkipBtn). */
.rs-skip-btn {
  margin-left: auto;
  min-height: 32px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1.5px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--green-dim, rgba(51,255,102,.25));
  color: var(--green, #33ff66);
  opacity: .8;
  transition: background .1s, color .1s, opacity .1s;
}
.rs-skip-btn:hover { opacity: 1; background: rgba(51,255,102,.08); }
.rs-skip-btn.ui-focused {
  outline: 2.5px solid var(--amber, #ffb000);
  outline-offset: 1px;
  opacity: 1;
}

/* Drops list — full-width vertical stack so each drop owns the screen for a
 * moment (the .gc inside is the rich shared gear card; see ui/shared/gear-card.css). */
.rs-drops-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-no-salvage {
  color: var(--green-dim, rgba(51,255,102,.25));
  font-size: 11px;
  letter-spacing: 2px;
  padding: 12px 0;
}

/* ── The Loom unspool — one spool at a time, sealed → flip → revealed ────────
 * Each .rs-drop-card holds two stacked layers: .rs-spool-face (a sealed "spool
 * pending" placeholder — no rarity/identity leaked) shown until this card's
 * turn, and .rs-drop-inner (the real gear card) shown after. `.rs-card-visible`
 * swaps which layer is in flow; `.rs-card-flip` plays a brief card-flip beat on
 * the reveal instant. Clickable throughout (results.js) — a tap on a still-
 * sealed card force-reveals it instead of doing nothing. */
.rs-drop-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.rs-spool-face {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border: 1px dashed var(--green-dim, rgba(51,255,102,.25));
  color: var(--green-dim, rgba(51,255,102,.4));
  animation: rs-spool-pulse 1.6s ease-in-out infinite;
}
.rs-drop-card.rs-card-visible .rs-spool-face { display: none; }

.rs-spool-glyph {
  font-size: 20px;
  line-height: 1;
}
.rs-spool-label {
  font-size: 10px;
  letter-spacing: 2px;
}

@keyframes rs-spool-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

.rs-drop-inner { display: none; }
.rs-drop-card.rs-card-visible .rs-drop-inner {
  display: block;
  position: relative;
}
.rs-drop-card.rs-card-flip .rs-drop-inner {
  animation: rs-flip var(--reveal-flip-ms, 360ms) ease-out;
  transform-origin: center;
}
@keyframes rs-flip {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  60%  { transform: rotateX(12deg);  opacity: 1; }
  100% { transform: none;            opacity: 1; }
}

/* Glow flash for legendary/exotic on reveal — the glow rides the inner .gc */
.rs-drop-card.rs-card-glow .gc {
  animation: rs-glow var(--reveal-glow-ms, 900ms) ease-out forwards;
  box-shadow: 0 0 18px 4px var(--card-rarity-color, var(--amber, #ffb000));
}

@keyframes rs-glow {
  0%   { box-shadow: 0 0 24px 6px var(--card-rarity-color, var(--amber, #ffb000)); }
  60%  { box-shadow: 0 0 12px 2px var(--card-rarity-color, var(--amber, #ffb000)); }
  100% { box-shadow: none; }
}

/* Equip-from-reveal feedback (loot-vision.md §6) — a small ribbon on whichever
 * revealed card was just equipped from this screen; results.js toggles this
 * class, at most one per slot. */
.rs-equipped-flag {
  display: none;
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--green, #33ff66);
  border: 1px solid var(--green, #33ff66);
  background: rgba(10,14,42,.85);
  padding: 2px 6px;
}
.rs-drop-card.rs-drop-card-equipped .rs-equipped-flag { display: inline-block; }

.rs-badge-new {
  background: var(--green, #33ff66);
  color: var(--void, #0a0e2a);
}

.rs-badge-dupe {
  color: var(--green, #33ff66);
  opacity: .5;
  border: 1px solid currentColor;
}

.rs-badge-pity {
  color: var(--amber, #ffb000);
  border: 1px solid currentColor;
}

/* ── Unlocks + achievements ──────────────────────────────────────────────── */
.rs-extras-section {
  gap: 6px;
}

.rs-unlock-line {
  font-size: 11px;
  color: var(--green, #33ff66);
  letter-spacing: 2px;
  padding: 2px 0;
}

.rs-achievement-line {
  font-size: 11px;
  color: var(--amber, #ffb000);
  letter-spacing: 2px;
  padding: 2px 0;
  text-transform: none; /* preserve quoted label casing */
}

/* ── Actions row ─────────────────────────────────────────────────────────── */
.rs-actions-row {
  position: relative;
  z-index: 1;
  flex-shrink: 0;            /* pinned bar — never scrolls away */
  width: 100%;
  max-width: 780px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--green-dim, rgba(51,255,102,.25));
  background: rgba(10,14,42,.97);
  flex-wrap: wrap;
}

.rs-action-btn {
  background: none;
  border: 1px solid var(--amber, #ffb000);
  color: var(--amber, #ffb000);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 12px 20px;
  min-height: 48px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}

/* THE TAPESTRY is the primary button — the debrief's default landing (view your
 * progress / what you earned), so it carries the amber fill + focus glow the old
 * CONTINUE button had. */
.rs-btn-tapestry {
  background: rgba(255,176,0,.08);
  min-width: 200px;
}

.rs-btn-tapestry:hover,
.rs-btn-tapestry.ui-focused {
  background: rgba(255,176,0,.22);
  box-shadow: 0 0 10px var(--amber-dim, rgba(255,176,0,.3)) inset;
}

/* LOADOUT — secondary (gear up / play again). Amber outline, no fill, so it
 * reads as an equal-tier destination without competing with THE TAPESTRY. */
.rs-btn-loadout {
  font-size: 12px;
  letter-spacing: 2px;
}

.rs-btn-loadout:hover,
.rs-btn-loadout.ui-focused {
  background: rgba(255,176,0,.14);
}

/* MAIN MENU — secondary back-to-start affordance. Sits on the left of the
 * actions row (R3) so dpad-LEFT from the rest of the row reaches it. Green-dim
 * styling to read as navigation, mirroring the loadout overlay's MAIN MENU. */
.rs-btn-main-menu {
  color: var(--green, #33ff66);
  border-color: var(--green-dim, rgba(51,255,102,.25));
  font-size: 12px;
  letter-spacing: 2px;
}

.rs-btn-main-menu:hover,
.rs-btn-main-menu.ui-focused {
  background: var(--green-dim, rgba(51,255,102,.25));
  border-color: var(--green, #33ff66);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .rs-title        { font-size: 15px; letter-spacing: 3px; }
  .rs-sector       { display: none; }
  .rs-column       { padding: 0 12px 20px; }
  .rs-actions-row  { justify-content: stretch; }
  .rs-action-btn   { flex: 1; min-width: 0; font-size: 11px; }
  .rs-score-total  { font-size: 20px; }
}

@media (max-width: 380px) {
  .rs-secondary-row { flex-direction: column; gap: 6px; }
}

/* ── Short-height landscape (iPhone 15 landscape ≈ 852×393) ──────────────────
   The column already scrolls and the actions row is pinned, so the buttons stay
   reachable. Compress the header/verdict/total so more of the debrief is
   visible per screen and the pinned action bar stays a comfortable tap target. */
@media (max-height: 480px) {
  .rs-header { padding: 8px 0 6px; }
  .rs-title { font-size: 16px; letter-spacing: 3px; }
  .rs-verdict { font-size: 13px; letter-spacing: 3px; padding: 6px 0 5px; }
  .rs-panel { padding: 8px 0 6px; }
  .rs-score-total { font-size: 20px; }
  .rs-actions-row { padding: 8px 16px; }
  .rs-action-btn { min-height: 44px; padding: 10px 16px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rs-spool-face {
    animation: none;
  }
  .rs-drop-card.rs-card-flip .rs-drop-inner {
    /* JS already skips flip:true in this mode; this is belt-and-suspenders */
    animation: none;
    transform: none;
    opacity: 1;
  }
  .rs-drop-card.rs-card-glow .gc {
    animation: none;
    box-shadow: none;
  }
  .rs-bar-fill {
    transition: none;
  }
  .rs-action-btn {
    transition: none;
  }
}