/* ==================================================
   Pages Stylesheet
   Purpose: Applies page-specific visual identity for the
   loading start page and Page 1 gameplay shell.
   Category: Page-specific styling
================================================== */

/* ==================================================
   Start Page Visual Theme
   Purpose: Creates the premium earth background, dark
   readability veil, and map-grid segmentation overlay.
   Category: Page-specific styling
================================================== */
.page-start {
  background: var(--color-bg-950);
}

.page-start .start-screen {
  background-image: url("../assets/background/earth.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-start .start-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 68% 24%, rgba(78, 122, 183, 0.2), transparent 40%),
    linear-gradient(170deg, rgba(5, 8, 15, 0.72), rgba(5, 8, 15, 0.8));
}

.page-start .start-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(rgba(158, 194, 240, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 194, 240, 0.2) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.22;
}

.page-start .hero-panel,
.page-start .loading-section,
.page-start .brand-header,
.page-start .start-footer {
  transition: opacity var(--duration-medium) var(--ease-standard),
    transform var(--duration-medium) var(--ease-standard);
}

.page-start.is-transitioning .hero-panel,
.page-start.is-transitioning .loading-section,
.page-start.is-transitioning .brand-header,
.page-start.is-transitioning .start-footer {
  opacity: 0;
  transform: translateY(-10px);
}

/* ==================================================
   Region Transition Theme
   Purpose: Applies continent-specific loading context
   while reusing start-screen atmosphere.
   Category: Page-specific styling
================================================== */
.page-region-transition .start-screen::before {
  background: radial-gradient(circle at 30% 22%, rgba(84, 135, 204, 0.22), transparent 42%),
    linear-gradient(170deg, rgba(4, 8, 16, 0.72), rgba(4, 8, 16, 0.82));
}

/* ==================================================
   Page 1 Visual Theme
   Purpose: Defines atmospheric background and elevated
   header styling for the first main page.
   Category: Page-specific styling
================================================== */
.page-home {
  background: radial-gradient(circle at 10% 12%, rgba(64, 106, 168, 0.28), transparent 44%),
    radial-gradient(circle at 82% 88%, rgba(52, 88, 141, 0.25), transparent 38%),
    linear-gradient(160deg, #060b15, #0a1221 45%, #080f1d 100%);
}

.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(130, 171, 224, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 171, 224, 0.11) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.14;
}

.page-home .game-header {
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.92), rgba(8, 14, 26, 0.72));
  border-bottom: 1px solid rgba(145, 183, 232, 0.18);
}

/* ==================================================
   Europe Countries Theme
   Purpose: Adds subtle Europe page atmosphere while
   preserving core dark game identity.
   Category: Page-specific styling
================================================== */
.page-europe {
  background: radial-gradient(circle at 14% 14%, rgba(66, 112, 176, 0.24), transparent 44%),
    radial-gradient(circle at 84% 86%, rgba(54, 92, 148, 0.2), transparent 40%),
    linear-gradient(165deg, #060d19, #0b1526 48%, #081222 100%);
}

/* ==================================================
   Country View Theme
   Purpose: Provides subtle focus atmosphere for dedicated
   country boundary detail pages.
   Category: Page-specific styling
================================================== */
.page-country {
  background: radial-gradient(circle at 18% 14%, rgba(72, 117, 176, 0.2), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(56, 92, 146, 0.18), transparent 40%),
    linear-gradient(160deg, #060d18, #0a1425 48%, #081120 100%);
}

.page-country .game-header,
.page-country .country-map-options {
  backdrop-filter: none;
}

.page-country .country-map,
.page-country .country-map-overlay-canvas {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ==================================================
   Menu and Modal State Visuals
   Purpose: Handles global visual behavior when drawer
   and section popups are active.
   Category: Page-specific styling
================================================== */
body.menu-open,
body.section-modal-open {
  overflow: hidden;
}

.section-template-store {
  display: none;
}