/* ==========================================================================
   /squad — Squad mode overlay styles
   Sits on top of /v2/css/slot.css. Only adds the roster panel and the
   squad-shaped history card. Everything else (cabinet, reels, controls,
   spin button, sound button, scoreboard) inherits unchanged.
   ========================================================================== */

/* ── Squad roster ───────────────────────────────────────────────────────── */
/* Three player tiles in a row, with a thin connecting rail underneath.
   Pre-spin: dim placeholders. During player N's spin: tile N glows in its
   class color and shows a "ROLLING" pip. After: solid filled summary. */

.squad-roster {
  position: relative;
  width: min(100%, 920px);
  margin: 0 auto 28px;
  padding: 18px 20px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;

  background:
    linear-gradient(180deg, oklch(14% 0.025 260) 0%, oklch(9% 0.018 260) 100%);
  border: 1px solid oklch(24% 0.03 260);
  border-radius: 18px;
  box-shadow:
    0 14px 38px oklch(0% 0 0 / 0.55),
    inset 0 1px 0 oklch(34% 0.04 260 / 0.5);
}

/* Subtle rail behind the tiles — visual cue that the three are connected. */
.roster-rail {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 14px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    oklch(36% 0.04 260 / 0.6) 18%,
    oklch(36% 0.04 260 / 0.6) 82%,
    transparent);
  pointer-events: none;
}

.roster-tile {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, oklch(11% 0.02 260) 0%, oklch(7% 0.014 260) 100%);
  border: 1px solid oklch(22% 0.03 260);
  box-shadow:
    0 6px 18px oklch(0% 0 0 / 0.45),
    inset 0 1px 0 oklch(28% 0.04 260 / 0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;

  --tile-accent: oklch(45% 0.04 260);
  transition:
    border-color 240ms var(--ease-out-expo),
    box-shadow 240ms var(--ease-out-expo),
    transform 240ms var(--ease-out-expo);
}

/* While the class reel is still spinning we want a visible "active" glow that
   doesn't spoil which class will land — use the brand magenta as a neutral. */
.roster-tile[data-state="active"]:not([data-class]) {
  --tile-accent: var(--accent);
}

/* Class color tinting per tile — set via JS data-class once the class lands. */
.roster-tile[data-class="Light"]  { --tile-accent: var(--class-light);  }
.roster-tile[data-class="Medium"] { --tile-accent: var(--class-medium); }
.roster-tile[data-class="Heavy"]  { --tile-accent: var(--class-heavy);  }

/* Active state: this player is currently rolling. */
.roster-tile[data-state="active"] {
  border-color: var(--tile-accent);
  box-shadow:
    0 0 0 1px var(--tile-accent),
    0 10px 26px oklch(0% 0 0 / 0.55),
    0 0 28px var(--tile-accent),
    inset 0 1px 0 oklch(38% 0.04 260 / 0.6);
  transform: translateY(-2px);
  animation: roster-tile-pulse 1.4s ease-in-out infinite;
}

@keyframes roster-tile-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--tile-accent), 0 10px 26px oklch(0% 0 0 / 0.55), 0 0 22px var(--tile-accent), inset 0 1px 0 oklch(38% 0.04 260 / 0.6); }
  50%      { box-shadow: 0 0 0 1px var(--tile-accent), 0 10px 26px oklch(0% 0 0 / 0.55), 0 0 38px var(--tile-accent), inset 0 1px 0 oklch(38% 0.04 260 / 0.6); }
}

/* Done state: this player's spin is locked in. */
.roster-tile[data-state="done"] {
  border-color: oklch(from var(--tile-accent) l c h / 0.55);
  box-shadow:
    0 6px 18px oklch(0% 0 0 / 0.45),
    inset 0 1px 0 oklch(28% 0.04 260 / 0.5),
    inset 0 0 0 1px oklch(from var(--tile-accent) l c h / 0.18);
}

.roster-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roster-tile-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(38% 0.03 260);
  box-shadow: 0 0 0 2px oklch(8% 0.015 260), inset 0 0 0 1px oklch(48% 0.04 260);
  flex-shrink: 0;
  transition: background 240ms var(--ease-out-expo), box-shadow 240ms var(--ease-out-expo);
}

.roster-tile[data-state="active"] .roster-tile-pip {
  background: var(--tile-accent);
  box-shadow:
    0 0 0 2px oklch(8% 0.015 260),
    0 0 8px var(--tile-accent),
    0 0 18px var(--tile-accent);
  animation: roster-pip-blink 0.8s ease-in-out infinite;
}

.roster-tile[data-state="done"] .roster-tile-pip {
  background: var(--tile-accent);
  box-shadow: 0 0 0 2px oklch(8% 0.015 260), 0 0 6px var(--tile-accent);
}

@keyframes roster-pip-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.roster-tile-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.roster-tile-status {
  margin-left: auto;
  font-family: 'Space Mono', 'Saira Extra Condensed', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: oklch(14% 0.02 260);
  border: 1px solid oklch(26% 0.03 260);
  color: var(--ink-muted);
  white-space: nowrap;
}

.roster-tile[data-state="active"] .roster-tile-status {
  background: oklch(from var(--tile-accent) l c h / 0.16);
  border-color: oklch(from var(--tile-accent) l c h / 0.55);
  color: var(--tile-accent);
  text-shadow: 0 0 10px var(--tile-accent);
}

.roster-tile[data-state="done"] .roster-tile-status {
  background: oklch(from var(--tile-accent) l c h / 0.10);
  border-color: oklch(from var(--tile-accent) l c h / 0.35);
  color: oklch(from var(--tile-accent) l c h / 0.85);
}

.roster-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.roster-tile-class {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1;
}

.roster-tile[data-state="active"] .roster-tile-class,
.roster-tile[data-state="done"] .roster-tile-class {
  color: var(--tile-accent);
  text-shadow: 0 0 16px var(--tile-accent), 0 0 2px var(--tile-accent);
}

/* Pre-class-reveal placeholder — softer than a real class label. */
.roster-tile[data-state="active"]:not([data-class]) .roster-tile-class {
  color: oklch(60% 0.04 260);
  text-shadow: none;
  letter-spacing: 0.16em;
  font-size: 1.3rem;
  opacity: 0.7;
}

.roster-tile-weapon {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-tile[data-state="done"] .roster-tile-weapon {
  color: var(--ink);
}

/* Mobile: stack tiles vertically — three small status cards instead of squashed columns. */
@media (max-width: 540px) {
  .squad-roster {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 14px 14px;
  }

  .roster-rail { display: none; }

  .roster-tile {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 10px 12px;
  }

  .roster-tile-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 56px;
  }

  .roster-tile-status {
    margin-left: 0;
  }

  .roster-tile-body {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    overflow: hidden;
  }

  .roster-tile-class {
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .roster-tile-weapon {
    font-size: 0.78rem;
  }
}

/* ── Squad history card ────────────────────────────────────────────────── */
/* One card per squad spin. Three internal player rows stacked vertically.
   Each row has its own class-tinted accent + compact loadout grid. */

.history-card.squad-card {
  padding: 14px 18px 14px;
  /* Override the default left-edge accent — squad cards use a brass top stripe
     instead, since each player row carries its own color. */
}

.history-card.squad-card::before {
  display: none;
}

.history-card.squad-card .history-card-header {
  border-bottom: 1px solid oklch(28% 0.04 260);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.history-card.squad-card .history-card-class {
  /* Title becomes "SQUAD" not a class name. Brass color, not class color. */
  color: var(--brass);
  text-shadow: 0 0 12px oklch(76% 0.16 85 / 0.4);
}

.squad-card-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.squad-row {
  position: relative;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, oklch(10% 0.02 260) 0%, oklch(7% 0.014 260) 100%);
  border: 1px solid oklch(20% 0.03 260);

  --row-accent: var(--brass);
}

.squad-row[data-class="Light"]  { --row-accent: var(--class-light);  }
.squad-row[data-class="Medium"] { --row-accent: var(--class-medium); }
.squad-row[data-class="Heavy"]  { --row-accent: var(--class-heavy);  }

.squad-row::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--row-accent);
  box-shadow: 0 0 10px var(--row-accent);
}

.squad-row-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.squad-row-player {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding: 3px 10px;
  background: oklch(14% 0.02 260);
  border: 1px solid oklch(28% 0.04 260);
  border-radius: 999px;
  flex-shrink: 0;
}

.squad-row-class {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.32rem;
  letter-spacing: 0.12em;
  color: var(--row-accent);
  text-shadow: 0 0 12px var(--row-accent);
  flex: 1;
}

.squad-row-body {
  display: grid;
  /* weapon | spec | g1 | g2 | g3 — weapon a touch wider since it leads */
  grid-template-columns: 1.25fr 1.05fr 1fr 1fr 1fr;
  gap: 6px 14px;
}

.squad-row-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.squad-row-cell-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.squad-row-cell-value {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The first cell (WEAPON) is the headline — pull it forward with a brighter
   color and slightly larger size so it reads as the primary stat. */
.squad-row-cell:first-child .squad-row-cell-value {
  font-size: 1.08rem;
  font-weight: 700;
  color: oklch(98% 0.01 100);
}

@media (max-width: 720px) {
  .squad-row-body {
    /* Weapon-spec on top row, three gadgets below — keeps weapon prominent. */
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
  }

  .squad-row-cell:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px dashed oklch(24% 0.03 260);
  }

  .squad-row-cell:first-child .squad-row-cell-label {
    flex-shrink: 0;
  }
}

@media (max-width: 540px) {
  .squad-row-body {
    grid-template-columns: 1fr 1fr;
  }

  .squad-row-cell:first-child {
    grid-column: 1 / -1;
  }
}

/* When the engine sets data-class on .stage, we ALSO want the cabinet glow
   to react — that's already handled by /v2/css/slot.css. Nothing to add here. */