/* ============================================================
   FOUNDRYWEB v0.4.8.0
   SEASON PHASE THEME

   The civilization colors remain the Foundry accent system:
     Snow     #8ECFE9
     Badlands #D97B3F
     Lush     #77B95A

   This layer changes atmosphere only. It does not alter gameplay
   data, Chronicle data, navigation, or the main application.
   ============================================================ */

:root {
  --phase-snow: #8ECFE9;
  --phase-badlands: #D97B3F;
  --phase-lush: #77B95A;
  --phase-bone: #F2EEE2;

  --phase-rail:
    linear-gradient(
      90deg,
      var(--phase-snow) 0 33.333%,
      var(--phase-badlands) 33.333% 66.666%,
      var(--phase-lush) 66.666% 100%
    );

  --phase-rail-opacity: .30;
  --phase-overlay: none;
  --phase-overlay-opacity: 0;
  --phase-line: rgba(242, 238, 226, .10);
  --phase-dot: var(--phase-bone);
}

/* A narrow persistent phase rail.
   Isolation visibly separates the civilizations.
   Contact removes those visual walls. */
html::before {
  content: "";
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  pointer-events: none;
  background: var(--phase-rail);
  opacity: var(--phase-rail-opacity);
  transition:
    opacity 700ms ease,
    filter 700ms ease;
}

/* Atmospheric overlay above the existing backdrop but below content. */
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: var(--phase-overlay);
  opacity: var(--phase-overlay-opacity);
  transition: opacity 1000ms ease;
}

.shell {
  position: relative;
  z-index: 1;
}

/* Let the header quietly echo the current phase without rebuilding
   the existing Foundry visual system. */
.topbar {
  transition:
    box-shadow 900ms ease,
    border-color 900ms ease;
  box-shadow:
    0 1px 0 var(--phase-line),
    0 12px 36px rgba(0, 0, 0, .16);
}

.live-dot {
  transition:
    border-color 900ms ease,
    box-shadow 900ms ease;
  border-color: var(--phase-line);
}

.live-dot > span {
  background: var(--phase-dot);
  box-shadow: 0 0 12px var(--phase-dot);
  transition:
    background 900ms ease,
    box-shadow 900ms ease;
}

/* ============================================================
   PRESEASON
   ============================================================ */

html[data-foundry-phase="preseason"] {
  --phase-rail-opacity: .28;
  --phase-overlay-opacity: 0;
  --phase-line: rgba(242, 238, 226, .10);
  --phase-dot: #F2EEE2;
}

/* ============================================================
   ISOLATION

   The literal gaps in the rail visually represent the walls.
   ============================================================ */

html[data-foundry-phase="isolation"] {
  --phase-rail:
    linear-gradient(
      90deg,
      #8ECFE9 0 30.5%,
      transparent 30.5% 34.5%,
      #D97B3F 34.5% 65.5%,
      transparent 65.5% 69.5%,
      #77B95A 69.5% 100%
    );

  --phase-rail-opacity: .95;

  --phase-overlay:
    radial-gradient(
      circle at 12% 18%,
      rgba(142, 207, 233, .42) 0,
      rgba(142, 207, 233, .13) 20%,
      transparent 43%
    ),
    radial-gradient(
      circle at 50% 15%,
      rgba(217, 123, 63, .31) 0,
      rgba(217, 123, 63, .09) 19%,
      transparent 39%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(119, 185, 90, .34) 0,
      rgba(119, 185, 90, .10) 20%,
      transparent 43%
    );

  --phase-overlay-opacity: .42;
  --phase-line: rgba(142, 207, 233, .20);
  --phase-dot: #8ECFE9;
}

/* ============================================================
   FIRST CONTACT

   No gaps. All three civilizations now occupy one continuous
   color field.
   ============================================================ */

html[data-foundry-phase="contact"] {
  --phase-rail:
    linear-gradient(
      90deg,
      #8ECFE9 0%,
      #8ECFE9 18%,
      #D97B3F 50%,
      #77B95A 82%,
      #77B95A 100%
    );

  --phase-rail-opacity: 1;

  --phase-overlay:
    radial-gradient(
      circle at 18% 16%,
      rgba(142, 207, 233, .48) 0,
      rgba(142, 207, 233, .13) 27%,
      transparent 53%
    ),
    radial-gradient(
      circle at 50% 8%,
      rgba(217, 123, 63, .43) 0,
      rgba(217, 123, 63, .12) 28%,
      transparent 55%
    ),
    radial-gradient(
      circle at 82% 16%,
      rgba(119, 185, 90, .46) 0,
      rgba(119, 185, 90, .13) 27%,
      transparent 53%
    );

  --phase-overlay-opacity: .60;
  --phase-line: rgba(242, 238, 226, .19);
  --phase-dot: #F2EEE2;
}

/* ============================================================
   WORLD END

   Values are supplied dynamically by phase-theme.js so a single
   winner or shared victory can take over the atmosphere.
   ============================================================ */

html[data-foundry-phase="ended"] {
  --phase-rail-opacity: 1;
  --phase-overlay-opacity: .64;
}

html[data-foundry-phase="ended"] .topbar {
  box-shadow:
    0 1px 0 var(--phase-line),
    0 15px 42px rgba(0, 0, 0, .20);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html::before,
  body::after,
  .topbar,
  .live-dot,
  .live-dot > span {
    transition: none !important;
  }
}

/* ============================================================
   FOUNDRYWEB v0.4.8.1
   REIGNING VICTOR CELEBRATION

   Current-season phase remains authoritative.
   The previous victor is an additional historical accent only.
   ============================================================ */

.reigning-victor-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  padding: .58rem 1rem;
  margin: 0;

  border-bottom:
    1px solid var(--reigning-solid, rgba(242,238,226,.18));

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--reigning-glow, rgba(242,238,226,.08)),
      transparent
    ),
    rgba(11,14,20,.86);

  color: #F2EEE2;

  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.reigning-victor-banner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--reigning-accent, #F2EEE2);
}

.reigning-victor-banner .rv-label {
  opacity: .62;
}

.reigning-victor-banner .rv-name {
  color: var(--reigning-solid, #F2EEE2);
}

html[data-foundry-reigning] .topbar {
  box-shadow:
    0 1px 0 var(--phase-line),
    0 0 30px var(--reigning-shadow, transparent),
    0 12px 36px rgba(0,0,0,.16);
}

@media (max-width: 650px) {
  .reigning-victor-banner {
    font-size: .64rem;
    padding: .52rem .65rem;
    text-align: center;
    flex-wrap: wrap;
  }
}