/* ══════════════════════════════════════════════════════════════
   v0.4 Deployment Phase — SVG Tabletop Extension
   Standard 2-column layout (roster + battlefield).
   Staging/DS/Reserves are SVG zones on an extended canvas.
   All shared styles are in ../../../shared/components/*.css
══════════════════════════════════════════════════════════════ */

/* ── App layout: standard 2-column (roster | battlefield) ── */
#app {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
}
#roster { grid-column: 1; }
#battlefield { grid-column: 2; overflow: hidden; }
#bf-svg-terrain { overflow: visible; }

/* ── Off-board SVG zones (staging / deep strike / reserves) ── */
/* Default staging fill is the side-A baseline; `.staging-zone--b` below
   re-fills with side-B token for the opposite zone. Inherently side-A. */
.offboard-zone {
  fill: color-mix(in srgb, var(--faction-a) 3%, transparent);
  pointer-events: none;
}
.offboard-zone.ds-zone-bg {
  fill: rgba(255,170,0,0.03);
}
.offboard-zone.reserves-zone-bg {
  fill: rgba(186,126,255,0.03);
}
/* Ork staging zone: red faction color */
.offboard-zone.staging-zone--b {
  fill: color-mix(in srgb, var(--faction-b) 8%, transparent);
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--faction-b) 6%, transparent));
}
.offboard-zone-label.staging-label--b {
  fill: color-mix(in srgb, var(--faction-b) 22%, transparent);
}

/* Default offboard label is side-A baseline; `.staging-label--b` rule
   above overrides for the side-B staging label. Inherently side-A. */
.offboard-zone-label {
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 5px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: color-mix(in srgb, var(--faction-a) 12%, transparent);
  pointer-events: none;
}
.offboard-zone-label.ds-label {
  fill: rgba(255,170,0,0.12);
}
.offboard-zone-label.reserves-label {
  fill: rgba(186,126,255,0.12);
}

/* ── Board edge separator ── */
.board-edge-separator {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 2;
  stroke-dasharray: 12 6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* ── Deployment zone SVG styling ── */
.deploy-zone-bg.a-zone { fill: rgba(0,80,160,0.08); }
.deploy-zone-bg.b-zone { fill: color-mix(in srgb, var(--faction-b) 8%, transparent); }
.nml-zone-bg { fill: rgba(0,0,0,0.12); }

.deploy-zone-border.a-border {
  stroke: color-mix(in srgb, var(--faction-a) 20%, transparent);
  stroke-width: 2;
  stroke-dasharray: 8 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.deploy-zone-border.b-border {
  stroke: color-mix(in srgb, var(--faction-b) 20%, transparent);
  stroke-width: 2;
  stroke-dasharray: 8 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.deploy-zone-label {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 4px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.deploy-zone-sublabel {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.deploy-zone-label.a-label, .deploy-zone-sublabel.a-label { fill: color-mix(in srgb, var(--faction-a) 10%, transparent); }
.deploy-zone-label.b-label, .deploy-zone-sublabel.b-label { fill: color-mix(in srgb, var(--faction-b) 10%, transparent); }
.nml-label {
  font-family: 'Anton', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 4px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: rgba(201,163,82,0.06);
  pointer-events: none;
}

/* ── Zone highlight on drag ── */
.deploy-zone-bg.zone-active.a-zone { fill: color-mix(in srgb, var(--faction-a) 14%, transparent); transition: fill 0.2s; }
.deploy-zone-bg.zone-active.b-zone { fill: color-mix(in srgb, var(--faction-b) 14%, transparent); transition: fill 0.2s; }
.offboard-zone.zone-active.staging-zone-bg { fill: color-mix(in srgb, var(--faction-a) 8%, transparent); transition: fill 0.2s; }
.offboard-zone.zone-active.staging-zone--b { fill: color-mix(in srgb, var(--faction-b) 8%, transparent); transition: fill 0.2s; }
.offboard-zone.zone-active.ds-zone-bg { fill: rgba(255,170,0,0.08); transition: fill 0.2s; }
.offboard-zone.zone-active.reserves-zone-bg { fill: rgba(186,126,255,0.08); transition: fill 0.2s; }

/* ── Deployment complete — hide deployment zone shading + staging only ── */
/* DS and Reserves zones PERSIST (units enter play later) */
.deployment-complete .deploy-zone-bg,
.deployment-complete .deploy-zone-border,
.deployment-complete .deploy-zone-label,
.deployment-complete .deploy-zone-sublabel,
.deployment-complete .nml-label {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.deployment-complete .nml-zone-bg {
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Only hide staging zone, board-edge separator, and reserves pills; keep DS + Reserves zones */
.deployment-complete .staging-zone-bg,
.deployment-complete .offboard-zone-label:not(.ds-label):not(.reserves-label),
.deployment-complete .board-edge-separator,
.deployment-complete .reserves-pill {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ── Version badge ── */
/* active-faction: badge is decorative for active deployer */
.deploy-badge {
  position: absolute; top: 32px; right: 12px; z-index: 50;
  font: 600 9px/1 'Rajdhani', sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dis); padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--active-faction) 6%, transparent);
}

/* ── Deploy status label in action bar ── */
/* This label flips between sides via `.b-turn`. Default is side-A; the
   `.b-turn` class overrides for the alternate deployer. Keep both as
   absolute side IDs since the disambiguating class is already there. */
#deploy-status-label {
  font: 700 9px/1 'Rajdhani', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--faction-a, #00d4ff);
  padding: 0 4px;
  min-width: 120px;
  text-align: center;
  flex: 0;
}
#deploy-status-label.b-turn {
  color: var(--faction-b, #ff4020);
}

/* ── Zone warning (transient deploy snap-back toast) ── */
.zone-warning {
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: rgba(204,34,34,0.9);
  color: #fff;
  font: 700 11px/1 'Rajdhani', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.zone-warning.banner-hidden { display: none; }

/* ── Infiltrators exclusion zone overlay ── */
.infiltrators-exclusion {
  fill: rgba(255,50,30,0.10);
  stroke: rgba(255,80,40,0.6);
  stroke-width: 2;
  stroke-dasharray: 6 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.infiltrators-exclusion-label {
  font: 600 8px/1 'Rajdhani', sans-serif;
  letter-spacing: 2px;
  fill: rgba(255,80,40,0.7);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
/* Gold valid-zone tint for Infiltrators (full board) */
.deploy-zone-bg.infil-valid { fill: rgba(255,215,0,0.06); transition: fill 0.2s; }
.nml-zone-bg.infil-valid    { fill: rgba(255,215,0,0.06); transition: fill 0.2s; }

/* ── Deployment ghost (placement preview) ── */
.deploy-ghost {
  pointer-events: none;
  fill: none;
  stroke-dasharray: 4 3;
  opacity: .4;
}

/* ── Cohesion banner positioning ── */
/* Full-width banner handled by battlefield.css */

/* Reserves limit pill — SVG pill above reserves offboard zones */
.reserves-pill-bg {
  fill: rgba(186,126,255,0.12);
  stroke: rgba(186,126,255,0.35);
  stroke-width: 0.5;
}
.reserves-pill-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: rgba(186,126,255,0.7);
  pointer-events: none;
}
.reserves-pill.over-limit .reserves-pill-bg {
  fill: rgba(255,60,60,0.18);
  stroke: rgba(255,60,60,0.45);
}
.reserves-pill.over-limit .reserves-pill-text {
  fill: #ff6666;
}
@keyframes reserves-pill-flash {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.reserves-pill.over-limit {
  animation: reserves-pill-flash 0.8s ease-in-out infinite;
}

/* ── Shake on blocked confirm ── */
@keyframes shake-err { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.shake-error { animation: shake-err 0.4s ease; }

/* ── Camera transition for deployment lock ── */
.camera-transition #battlefield-inner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Roll-off overlay polish ── */
.die-lg {
  width: 72px;
  height: 72px;
  font-size: 36px;
  border-radius: 10px;
}
.rolloff-content { gap: 20px; }

/* ── Deploy lock / badge states ── */
.deploy-btn-locked {
  background: rgba(0,200,80,0.15); border-color: rgba(0,200,80,0.4); color: #00c850;
}
.deploy-badge-deployed { background: rgba(0,200,80,0.15); color: #00c850; }
.deploy-badge-reserves { background: rgba(186,126,255,0.15); color: #ba7eff; }
.deploy-badge-pending  { background: rgba(255,170,0,0.15); color: #ffaa00; }
.rolloff-faction-label.side-a { color: var(--faction-a); }
.rolloff-faction-label.side-b { color: var(--faction-b); }

.rolloff-dice-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 16px;
}
.rolloff-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rolloff-faction-label {
  font: 700 11px/1 'Rajdhani', sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  max-width: 180px;
  text-align: center;
  word-wrap: break-word;
}
.rolloff-result {
  font: 700 15px/1 'Rajdhani', sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  min-height: 20px;
  text-align: center;
}
.rolloff-hint {
  font: 600 10px/1 'Rajdhani', sans-serif;
  letter-spacing: 1.5px;
  color: var(--text-dis);
  opacity: 0.5;
  text-align: center;
}
/* owning-faction: pulse glows in the winning side's color. deploy.js
   adds `side-{a,b}` to the winning die alongside `die-winner-pulse`,
   so --owning-faction resolves to the winner's palette via the cascade. */
@keyframes die-winner-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--owning-faction) 19%, transparent), 0 0 12px color-mix(in srgb, var(--owning-faction) 15%, transparent); }
  50%      { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--owning-faction) 19%, transparent), 0 0 24px color-mix(in srgb, var(--owning-faction) 35%, transparent); }
}
.die-winner-pulse {
  animation: die-winner-pulse 2s ease-in-out infinite;
}