/* turn-interstitial.css — Full-screen overlay for hot-seat turn swap
   Matches v3-A design system: dark surface, subtle borders, Rajdhani/Anton fonts */

.turn-interstitial {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(circle at 50% 35%, rgba(28, 42, 56, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(3, 6, 10, 0.55), rgba(3, 6, 10, 0.72));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: interstitial-fade-in 0.24s ease;
  backdrop-filter: blur(12px);
}

@keyframes interstitial-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* active-faction: hot-seat interstitial themes to whoever's about to play */
.turn-interstitial-content {
  width: min(400px, calc(100vw - 40px));
  padding: 28px 28px 24px;
  text-align: center;
  color: var(--text-primary, #e0e8f0);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--active-faction) 14%, transparent);
  border-top: 2px solid var(--active-faction, #00d4ff);
  background:
    linear-gradient(180deg, rgba(15, 21, 32, 0.97), rgba(8, 12, 16, 0.94));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Legacy `.faction-b` switch — JS in turn-interstitial.js still adds it
   when the title text contains "ORK". Now that the base rule reads
   --active-faction (which already tracks the activating side), this
   override is redundant for the active-faction path but is kept to
   force absolute side-B colors when the JS forces an Ork-named turn
   handoff regardless of the body's --active-faction (e.g. legacy
   non-hot-seat fixtures that don't set the active turn before the
   interstitial fires). */
.turn-interstitial-content.faction-b {
  border-top-color: var(--faction-b, #ff4020);
}

/* active-faction */
.turn-interstitial-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 3px;
  border: 1px solid var(--active-faction-tint);
  background: color-mix(in srgb, var(--active-faction) 7%, transparent);
  color: rgba(210, 232, 246, 0.9);
  font: 700 9px/1 'Rajdhani', sans-serif;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

.turn-interstitial-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #dceaf5;
  /* active-faction: handoff icon glow themes to incoming player */
  background: radial-gradient(circle at 35% 35%, var(--active-faction-tint), rgba(0, 0, 0, 0));
  border: 1px solid color-mix(in srgb, var(--active-faction) 12%, transparent);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--active-faction) 6%, transparent);
}

.turn-interstitial-title {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.turn-interstitial-subtitle {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-sec, #8090a0);
  margin-bottom: 26px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.turn-interstitial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 28px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--active-faction) 30%, transparent);
  background: linear-gradient(180deg,
    var(--active-faction-tint) 0%,
    color-mix(in srgb, var(--active-faction) 8%, transparent) 100%);
  color: #e0e8f0;
  cursor: pointer;
  font: 700 13px/1 'Rajdhani', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--active-faction) 12%, transparent), inset 0 1px 0 rgba(255,255,255,0.06);
}

.turn-interstitial-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--active-faction) 26%, transparent) 0%,
    color-mix(in srgb, var(--active-faction) 12%, transparent) 100%);
  border-color: var(--active-faction-glow);
  box-shadow: 0 8px 24px var(--active-faction-tint), inset 0 1px 0 rgba(255,255,255,0.08);
}

.turn-interstitial-btn:active {
  transform: translateY(0);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--active-faction) 12%, transparent) 0%,
    color-mix(in srgb, var(--active-faction) 6%, transparent) 100%);
}