/* css/moved.css — "What Happened in Transfer" (/moved). Prefix mv-.
   Cyan theme (killers is green). Mobile-first: every field shows — the move-story
   stacks UNDER the name, nothing is hidden (90% of visitors are on phones). */

:root {
  --mv-1:      #22d3ee;                     /* cyan accent */
  --mv-glow:   rgba(34, 211, 238, .18);     /* card top glow */
  --mv-tint:   rgba(34, 211, 238, .06);     /* row/tile background wash */
  --mv-border: rgba(34, 211, 238, .24);
}

/* ── light theme (cool clay/glass, 2026-08-19) ───────────────────────
   Mirrors the killers/climbers blocks. --mv-1 is the page: the title, all
   three tile figures and the /moved tag. #22d3ee is 1.68:1 on the light
   card — every headline number on the page unreadable — so the cyan
   deepens to a teal that holds (4.99:1) while still reading as "the cyan
   page, not the green one" beside /killers. */
:root[data-theme="light"] {
  --mv-1:      #0e7490;
  --mv-glow:   rgba(14, 116, 144, .13);
  --mv-tint:   rgba(14, 116, 144, .06);
  --mv-border: rgba(14, 116, 144, .26);
}

.mv-wrap { max-width: 860px; margin: 0 auto; padding: 14px 14px 40px; }

/* scope picker + warzone search + alliance filter — above the card so shots stay clean */
.mv-controls { margin: 0 0 12px; display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; }
.mv-scopewrap { display: inline-flex; align-items: center; gap: 8px; }
.mv-wzinput { min-width: 110px; }
.mv-allfilter { display: inline-flex; margin: 2px 0 12px; }
.mv-count { color: var(--text-3, #7d8b96); font-weight: 500; font-size: 0.85em; }
.mv-scope-label { font: 600 0.7rem/1 var(--font-ui, system-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3, #7d8b96); }
.mv-scope {
  font: 600 0.9rem/1 var(--font-ui, system-ui); color: var(--text-1, #eaf1f5);
  background: var(--bg-2, #0d1216); border: 1px solid var(--border-2, #26313a);
  border-radius: 9px; padding: 9px 12px; min-width: 170px; cursor: pointer;
}
.mv-scope:focus { outline: none; border-color: var(--mv-border); box-shadow: 0 0 0 3px var(--mv-tint); }

/* segment pills (replace the View dropdown) */
.mv-pills { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.mv-pill {
  font: 700 0.85rem/1 var(--font-ui, system-ui); color: var(--text-2, #aab6c0);
  background: var(--bg-2, #0d1216); border: 1px solid var(--border-2, #26313a);
  border-radius: 999px; padding: 9px 15px; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s, border-color .15s;
}
.mv-pill:hover { color: var(--text-1, #eaf1f5); border-color: var(--mv-border); }
.mv-pill-on { color: var(--mv-1); background: var(--mv-tint); border-color: var(--mv-border); }

/* skeleton loader (shown while data fetches — feels instant on slow phones) */
.mv-skel { pointer-events: none; }
.mv-skel-box, .mv-skel-line {
  background: linear-gradient(90deg, var(--bg-2, #0d1216) 25%, rgba(34,211,238,.12) 50%, var(--bg-2, #0d1216) 75%);
  background-size: 200% 100%; animation: mv-shimmer 1.2s ease-in-out infinite; border-radius: 6px;
}
.mv-skel-box { width: 30px; height: 30px; border-radius: 50%; }
.mv-skel-line { height: 11px; display: inline-block; }
@keyframes mv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* The shareable card. Built from --glass-bg-2 exactly as .kw-card is, so the
   two weekly cards stay one family.
   ⚠ It used to sit on a `--panel` lookup, and --panel IS NOT A TOKEN in this
   system — the only definition lives inside migration-inflow.html, a
   self-contained page. So it always took the dark fallback and the card
   stayed near-black in BOTH themes, while its own tiles and rows (which use
   the REAL --bg-2) followed the theme into light: a dark card full of white
   tiles, with every heading dark-on-dark. Do not reintroduce --panel here. */
.mv-card {
  border: 1px solid var(--mv-border); border-radius: 16px; padding: 18px 16px 14px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% -10%, var(--mv-glow), transparent 60%), var(--glass-bg-2);
  box-shadow: var(--shadow-lg);
}

/* brand bar */
.mv-brandbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mv-brand-img { border-radius: 6px; }
.mv-brand-text { font: 800 0.95rem/1 var(--font-ui, system-ui); letter-spacing: .04em; color: var(--text-1, #eaf1f5); }
.mv-brand-dim { color: var(--text-3, #7d8b96); }
.mv-brand-tag { margin-left: auto; font: 600 0.72rem/1 var(--font-data, ui-monospace); color: var(--mv-1); background: var(--mv-tint); padding: 4px 9px; border-radius: 999px; }

/* hero */
.mv-hero { text-align: center; margin: 6px 0 16px; }
.mv-eyebrow { font: 700 0.8rem/1 var(--font-ui, system-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2, #aab6c0); }
.mv-title { font: 800 2rem/1.05 var(--font-ui, system-ui); margin: 8px 0 6px; color: var(--mv-1); }
.mv-sub { font: 500 0.95rem/1.4 var(--font-ui, system-ui); color: var(--text-2, #aab6c0); margin: 0; }
.mv-sub strong { color: var(--text-1, #eaf1f5); }
/* Which week the numbers above belong to. Dimmer than the counts on purpose —
   it qualifies them, it is not one of them. Wraps to its own line on a phone. */
.mv-window { color: var(--text-3, #7d8b96); font-weight: 500; }
@media (max-width: 480px) { .mv-window { display: block; } }

/* stat tiles */
/* auto-fit, not repeat(3): the strip carries five tiles now (migrations, open
   windows, hero power moved, strongest, weakest) and a fixed three would have
   silently pushed two onto a second row at full width. */
.mv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.mv-tile { background: linear-gradient(var(--mv-tint), var(--mv-tint)), var(--bg-2, #0d1216); border: 1px solid var(--mv-border); border-radius: 12px; padding: 12px 8px; text-align: center; }
.mv-tile-v { font: 800 1.5rem/1 var(--font-data, ui-monospace); color: var(--mv-1); }
.mv-tile-l { font: 600 0.66rem/1 var(--font-ui, system-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3, #7d8b96); margin-top: 6px; }

/* panels */
.mv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv-panel { margin: 0 0 14px; }
.mv-h { font: 700 0.95rem/1.3 var(--font-ui, system-ui); color: var(--text-1, #eaf1f5); margin: 4px 0 8px; }
.mv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mv-center { text-align: center; color: var(--text-3, #7d8b96); padding: 12px; }

/* winner/loser + route rows */
.mv-row, .mv-frow {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(var(--mv-tint), var(--mv-tint)), var(--bg-2, #0d1216);
  border: 1px solid var(--mv-border); border-radius: 10px; padding: 8px 11px;
  font: 600 0.85rem/1.25 var(--font-ui, system-ui);
}
.mv-srv { font-family: var(--font-data, ui-monospace); color: var(--text-1, #eaf1f5); min-width: 62px; }
.mv-net { font-family: var(--font-data, ui-monospace); font-weight: 800; }
.mv-pos { color: var(--accent); }   /* --green was a phantom too; the site green is --accent */
.mv-neg { color: var(--red, #f87171); }
.mv-detail { color: var(--text-3, #7d8b96); font-weight: 500; font-size: 0.78rem; }
.mv-pow { margin-left: auto; font-family: var(--font-data, ui-monospace); color: var(--text-2, #aab6c0); white-space: nowrap; }
.mv-arrow { color: var(--text-3, #7d8b96); }

/* player rows (movers / arrivals / departures) — rank · avatar · [name over move-story] · power.
   The move-story sits UNDER the name so it never gets cut on a phone. */
.mv-mrow {
  display: grid; grid-template-columns: 24px 30px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; cursor: pointer;
  background: linear-gradient(var(--mv-tint), var(--mv-tint)), var(--bg-2, #0d1216);
  border: 1px solid var(--mv-border); border-radius: 10px; padding: 9px 11px;
}
.mv-mrow:hover { border-color: var(--mv-1); }
.mv-rank { font-family: var(--font-data, ui-monospace); color: var(--text-3, #7d8b96); text-align: right; font-size: 0.85rem; }
.mv-avc { width: 30px; height: 30px; }
.mv-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-2, #0d1216); }
.mv-av-blank { display: grid; place-items: center; font: 700 0.8rem/1 var(--font-ui, system-ui); color: var(--text-3, #7d8b96); border: 1px solid var(--border-2, #26313a); }
.mv-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mv-nametext { color: var(--text-1, #eaf1f5); font: 600 0.92rem/1.2 var(--font-ui, system-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-sub { font: 500 0.76rem/1.3 var(--font-ui, system-ui); color: var(--text-3, #7d8b96); }
.mv-sub .mv-join { color: var(--mv-1); font-weight: 700; }
.mv-mrow .mv-pow { color: var(--mv-1); font-weight: 700; font-size: 0.95rem; }
.mv-mrow .mv-pow-none { color: var(--text-3, #7d8b96); font-weight: 500; }   /* no ranked hero power */

.mv-cardfoot { text-align: center; font: 500 0.78rem/1.4 var(--font-ui, system-ui); color: var(--text-3, #7d8b96); margin: 12px 0 2px; }
.mv-cardfoot strong { color: var(--text-2, #aab6c0); }
.mv-foot { text-align: center; font: 500 0.72rem/1.5 var(--font-ui, system-ui); color: var(--text-3, #7d8b96); margin: 14px auto 0; max-width: 520px; }

@media (max-width: 560px) {
  .mv-tiles { grid-template-columns: 1fr 1fr; }
  .mv-tiles .mv-tile:last-child { grid-column: 1 / -1; }
  .mv-cols { grid-template-columns: 1fr; }
  .mv-title { font-size: 1.55rem; }
  .mv-scope { min-width: 140px; flex: 1; }
}

/* The group WIDTH on each pill — 64 or 128. It is not decoration: this page is the
   one place the game's transfer groups and the site's segments differ, and the
   number is what says which one you are looking at. */
.mv-pill-w { font-family: var(--font-data); font-size: 9.5px; opacity: .65; margin-left: 4px;
             padding: 1px 4px; border: 1px solid currentColor; border-radius: 4px; }