/* ============================================================================
   roster.css: Team Falcon roster, ON TOP of scrollcraft.css + falcon.css.
   The arena, dossier lines, respawn and join all reuse falcon.css. This file
   adds the intro lede tweak, the dossier-line reveal, and the picker grid.
   ========================================================================== */

/* Arrival lede: team-forward */
.arrival__lede em { color: var(--sc-accent); font-style: normal; }

/* Dossier line reveal (lines are built dynamically, so we do our own robust,
   visible-by-default reveal rather than the engine's data-sc-in). */
.js-reveal .dossier__line { opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--sc-ease-out), transform 0.6s var(--sc-ease-out); }
.js-reveal .dossier__line.in { opacity: 1; transform: none; }
/* The big name never wraps; roster.js shrinks it to fit one line. */
.dossier__title--name { white-space: nowrap; }
.respawn__name { white-space: nowrap; }

/* 4 - Meet the Squad: the picker (opaque ground that covers the arena) */
.act--pick {
  position: relative; z-index: var(--z-act); background: #10141C;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 8rem);
  box-shadow: 0 -1px 0 rgba(247, 179, 43, 0.28);
}
.meet__head { max-width: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); padding-inline: var(--sc-gutter); text-align: center; }
.meet__eyebrow { margin: 0; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.meet__title { margin: var(--sc-3) 0 0; font-size: var(--sc-t-3xl); line-height: 0.94; text-transform: uppercase; }
.meet__intro { margin: var(--sc-4) auto 0; max-width: 42ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.meet__intro em { font-style: normal; color: var(--sc-ink); }

.roster { max-width: var(--sc-maxw); margin: 0 auto; padding-inline: var(--sc-gutter);
  display: grid; gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.roster--squad { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.pick {
  cursor: pointer; text-decoration: none; color: inherit; display: grid; grid-template-rows: auto auto; overflow: hidden;
  background: linear-gradient(180deg, #182030, #121822);
  border: 1px solid transparent; border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
  clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% 100%, 0 100%);
  transition: transform 0.25s var(--sc-ease-out), border-color 0.25s var(--sc-ease-out), box-shadow 0.25s var(--sc-ease-out);
}
.pick:hover { transform: translateY(-3px); border-color: rgba(247, 179, 43, 0.6); }
.pick:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.pick.is-selected, .pick[aria-current="page"] { border-color: var(--sc-accent); box-shadow: var(--sc-e2), 0 0 0 1px var(--sc-accent), 0 16px 40px -24px rgba(247, 179, 43, 0.5); }
.pick__media { position: relative; aspect-ratio: 4 / 5; background: #0D1017; overflow: hidden; }
.pick__media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pick__flag { position: absolute; top: 0.5rem; left: 0.5rem; font-family: var(--sc-font-display);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent-ink);
  background: var(--sc-accent); padding: 0.12rem 0.45rem;
  clip-path: polygon(0 0, calc(100% - 0.35rem) 0, 100% 0.35rem, 100% 100%, 0 100%); }
.pick__badge { position: absolute; right: 0.5rem; bottom: 0.5rem; font-size: 0.56rem; letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft); background: rgba(10, 12, 18, 0.65);
  border: 1px solid var(--sc-hairline-strong); padding: 0.08rem 0.4rem; border-radius: 2px; }
.pick__badge--live { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: transparent; font-family: var(--sc-font-display); }
.pick__body { padding: var(--sc-3) var(--sc-4) var(--sc-4); display: grid; gap: 0.2rem; }
.pick__name { margin: 0; font-size: var(--sc-t-base); line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.pick__event { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* close / foot reuse falcon.css .act--join, .join, .foot */
@media (max-width: 860px) { .hud__index { display: none; } }