/* Velora immersive website — world as interface under a fixed menu */

:root {
  --menu-h: 3.25rem;
  --ink: #f4efe6;
  --ink-muted: rgba(244, 239, 230, 0.78);
  --veil: rgba(8, 10, 14, 0.42);
  --menu-bg: rgba(8, 10, 14, 0.72);
  --accent: #d4b483;
  --focus: #9ec9ff;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #080a0e;
  color: var(--ink);
  font-family: var(--font);
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.site-body {
  min-height: 100vh;
}

.site-main {
  min-height: calc(100vh - var(--menu-h));
}

/* —— Fixed menu (always above scene transition) —— */
.site-menu {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--menu-h);
  background: var(--menu-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}

.site-menu__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.65rem 1rem;
}

.site-menu__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.site-menu__brand-logo {
  display: block;
  height: 1.35rem;
  width: auto;
  max-width: 9.5rem;
}

.site-menu__toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(244, 239, 230, 0.35);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.site-nav {
  display: none;
  width: 100%;
  flex-basis: 100%;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.site-menu.is-open .site-nav {
  display: flex;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-nav__link,
.site-nav__trigger {
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  text-align: left;
}

.site-nav__link.is-active,
.site-nav__sublink.is-active {
  color: var(--ink);
}

.site-nav__sub {
  list-style: none;
  margin: 0.25rem 0 0.5rem 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.site-nav__sub[hidden] {
  display: none !important;
}

.site-nav__sub-label {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.45);
  margin-top: 0.35rem;
}

.site-nav__sub-divider {
  height: 1px;
  background: rgba(244, 239, 230, 0.15);
  margin: 0.4rem 0;
}

.site-nav__sublink {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0.2rem 0;
}

.site-nav__sound {
  align-self: flex-start;
  font-family: var(--ui);
  font-size: 0.75rem;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid rgba(244, 239, 230, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}

@media (min-width: 900px) {
  .site-menu__toggle {
    display: none;
  }

  .site-menu__inner {
    flex-wrap: nowrap;
  }

  .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    flex-basis: auto;
    margin-left: auto;
    padding-top: 0;
    gap: 1.25rem;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .site-nav__item--has-sub {
    position: relative;
  }

  .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    margin: 0.35rem 0 0;
    padding: 0.65rem 0.85rem;
    background: rgba(8, 10, 14, 0.94);
    border: 1px solid rgba(244, 239, 230, 0.12);
    border-radius: 0.5rem;
  }

  .site-nav__sound {
    align-self: center;
  }
}

/* —— Scene —— */
.journey {
  position: relative;
  min-height: calc(100vh - var(--menu-h));
}

.journey__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.journey .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: grid;
  align-content: end;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.journey .scene.is-active {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Inactive panels must not run atmos (body.atmos-* would otherwise style all 40). */
.journey .scene:not(.is-active) .scene__atmos,
.journey .scene:not(.is-active) .scene__atmos::before,
.journey .scene:not(.is-active) .scene__atmos::after {
  content: none !important;
  animation: none !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden;
}

.scene {
  position: relative;
  min-height: calc(100vh - var(--menu-h));
  display: grid;
  align-content: end;
  overflow: hidden;
}

.scene__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scene__picture,
.scene__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* —— Scene zoom-fade transition (scene area only — never covers menu) —— */
.scene-transition {
  position: fixed;
  top: var(--menu-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
  visibility: hidden;
  background: #080a0e;
}

.scene-transition.is-active,
.scene-transition.is-hold {
  visibility: visible;
}

.scene-transition.is-active {
  pointer-events: auto;
}

.scene-transition__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.scene-transition__layer--out {
  z-index: 2;
}

.scene-transition__layer--in {
  z-index: 1;
  opacity: 0;
  transform: scale(1.2);
}

.scene-transition__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  user-select: none;
}

.scene-transition__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scene-transition__atmos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.scene-transition.is-active .scene-transition__layer--out {
  animation: scene-trans-out 2s ease-in-out forwards;
}

.scene-transition.is-active .scene-transition__layer--in {
  animation: scene-trans-in 2s ease-in-out forwards;
}

/* Destination-page hold: same framing as end of transition, no animation */
.scene-transition.is-hold .scene-transition__layer--out {
  visibility: hidden;
  opacity: 0;
}

.scene-transition.is-hold .scene-transition__layer--in {
  opacity: 1;
  transform: none;
}

@keyframes scene-trans-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes scene-trans-in {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.journey.is-leaving .scene__progress,
.journey.is-leaving .scene__controls,
.scene.is-leaving .scene__copy,
.scene.is-leaving .scene__lore,
.scene.is-leaving .playtest-panel {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Hide page atmos while transition layers carry image + veil + weather */
.scene.is-leaving .scene__atmos {
  opacity: 0;
}

/* Soft-fade panel chrome after in-place switch */
.journey.is-chrome-entering .scene.is-active .scene__copy,
.journey.is-chrome-entering .scene.is-active .scene__lore,
.journey.is-chrome-entering .scene.is-active .playtest-panel {
  opacity: 0;
  animation: scene-chrome-in 0.55s ease-in-out 0.05s forwards;
}

@keyframes scene-chrome-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-transition.is-active .scene-transition__layer--out,
  .scene-transition.is-active .scene-transition__layer--in {
    animation: none;
  }

  .scene-transition.is-active .scene-transition__layer--out {
    opacity: 0;
  }

  .scene-transition.is-active .scene-transition__layer--in {
    opacity: 1;
    transform: none;
  }

  .journey.is-chrome-entering .scene.is-active .scene__copy,
  .journey.is-chrome-entering .scene.is-active .scene__lore,
  .journey.is-chrome-entering .scene.is-active .playtest-panel {
    animation: none;
    opacity: 1;
  }
}

.scene__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 10, 14, 0.88) 0%,
    rgba(8, 10, 14, 0.35) 42%,
    rgba(8, 10, 14, 0.15) 100%
  );
  pointer-events: none;
}

.scene__veil--map {
  background: linear-gradient(
    to top,
    rgba(8, 10, 14, 0.72) 0%,
    rgba(8, 10, 14, 0.12) 38%,
    transparent 62%
  );
}

/* —— Interactive Velora map hotspots —— */
.velora-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.velora-map__regions {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: auto;
  overflow: hidden;
}

.velora-map__regions--mobile {
  display: block;
}

@media (min-width: 900px) {
  .velora-map__regions--mobile {
    display: none;
  }

  .velora-map__regions--desktop {
    display: block;
  }
}

.velora-map__regions .region {
  fill: transparent;
  stroke: none;
  transition: fill 0.28s ease;
  outline: none;
}

.velora-map__regions .region[data-scene-target] {
  cursor: pointer;
  pointer-events: auto;
}

.velora-map__regions .region--realm-beyond {
  cursor: default;
  pointer-events: auto;
}

.velora-map__regions .region-label {
  fill: #fff;
  font-family: var(--ui);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
  paint-order: stroke fill;
  stroke: rgba(8, 10, 14, 0.55);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.velora-map__regions .region-label--realm {
  font-size: 22px;
  letter-spacing: 0.08em;
}

.velora-map__regions--mobile .region-label {
  font-size: 36px;
}

.velora-map__regions--mobile .region-label--realm {
  font-size: 28px;
}

.velora-map__regions .region-hit:hover .region-label,
.velora-map__regions .region-hit:focus-within .region-label {
  opacity: 1;
}

.velora-map__regions .region--realm-beyond:hover,
.velora-map__regions .region-hit--realm-beyond:focus-within .region--realm-beyond {
  fill: rgba(120, 110, 100, 0.4);
}

.velora-map__regions .region--little-frost:hover,
.velora-map__regions .region-hit--little-frost:focus-within .region--little-frost,
.velora-map__regions .region--little-frost.is-hot {
  fill: rgba(190, 230, 255, 0.4);
}

.velora-map__regions .region--ashdrift:hover,
.velora-map__regions .region-hit--ashdrift:focus-within .region--ashdrift,
.velora-map__regions .region--ashdrift.is-hot {
  fill: rgba(160, 145, 130, 0.4);
}

.velora-map__regions .region--everlight:hover,
.velora-map__regions .region-hit--everlight:focus-within .region--everlight,
.velora-map__regions .region--everlight.is-hot {
  fill: rgba(90, 220, 160, 0.4);
}

.velora-map__regions .region--moonwake:hover,
.velora-map__regions .region-hit--moonwake:focus-within .region--moonwake,
.velora-map__regions .region--moonwake.is-hot {
  fill: rgba(60, 200, 230, 0.4);
}

.velora-map__regions .region--amberwild:hover,
.velora-map__regions .region-hit--amberwild:focus-within .region--amberwild,
.velora-map__regions .region--amberwild.is-hot {
  fill: rgba(255, 170, 60, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .velora-map__regions .region,
  .velora-map__regions .region-label {
    transition: none;
  }
}

.scene__copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 5.5rem;
  text-align: center;
}

.scene__region {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}

.scene__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 500;
  margin: 0 0 0.65rem;
  line-height: 1.2;
}

.scene__text {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  line-height: 1.45;
  color: var(--ink-muted);
}

.scene__lore {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(28rem, calc(100% - 2.5rem));
  max-height: calc(100% - 14rem);
  overflow: auto;
  padding: 1.1rem 1.25rem;
  background: rgba(8, 10, 14, 0.72);
  border: 1px solid rgba(244, 239, 230, 0.18);
  border-radius: 0.75rem;
  backdrop-filter: blur(8px);
  text-align: center;
}

.scene__lore-title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
}

.scene__lore-text {
  margin: 0;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  line-height: 1.5;
  color: var(--ink-muted);
}

.scene__lore-text + .scene__lore-text {
  margin-top: 0.7rem;
}

@media (min-width: 900px) {
  .scene__lore {
    left: auto;
    right: 2.75rem;
    transform: translateY(-50%);
    width: min(26rem, 36vw);
    text-align: left;
  }
}

.scene__controls {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  font-family: var(--ui);
}

.scene__nav {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(244, 239, 230, 0.35);
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.45);
  min-width: 5.5rem;
  text-align: center;
}

.scene__nav.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.scene__counter {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.scene__progress {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  bottom: 4.5rem;
  right: 0.55rem;
  width: 0.55rem;
}

.scene__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scene__mark a {
  display: block;
  width: 0.35rem;
  height: 0.35rem;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(244, 239, 230, 0.28);
  text-decoration: none;
}

.scene__mark.is-current a {
  background: var(--ink);
  transform: scale(1.35);
}

.scene__mark.region-ashdrift a { background: #9a9a9a; }
.scene__mark.region-everlight a { background: #c9a45c; }
.scene__mark.region-little_frost a { background: #b9d4e8; }
.scene__mark.region-moonwake a { background: #6eb0c8; }
.scene__mark.region-amberwild a { background: #d4a04a; }
.scene__mark.region-arcori a,
.scene__mark.region-legacy a,
.scene__mark.region-museum a { background: #c0c0c8; }

@media (prefers-reduced-motion: no-preference) {
  .scene__image {
    transition: opacity 0.6s ease;
  }

  .scene--tide .scene__image {
    transition: opacity 1.1s ease;
  }
}

/* —— Scene atmosphere (CSS only; keyed by body.atmos-*) —— */
.scene__atmos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.scene__atmos::before,
.scene__atmos::after {
  content: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmos-ash_fall .scene__atmos::before,
.atmos-ash_fall .scene__atmos::after,
.atmos-ash_wind .scene__atmos::before,
.atmos-ash_wind .scene__atmos::after,
.atmos-ash_darkness .scene__atmos::before,
.atmos-ash_darkness .scene__atmos::after,
.atmos-electric .scene__atmos::before,
.atmos-electric .scene__atmos::after,
.atmos-electric_crawl .scene__atmos::before,
.atmos-electric_crawl .scene__atmos::after,
.atmos-electric_fork .scene__atmos::before,
.atmos-electric_fork .scene__atmos::after,
.atmos-sky_flash .scene__atmos::before,
.atmos-sky_flash .scene__atmos::after,
.atmos-sky_streak .scene__atmos::before,
.atmos-sky_streak .scene__atmos::after,
.atmos-haze_flash .scene__atmos::before,
.atmos-haze_flash .scene__atmos::after,
.atmos-haze_pulse .scene__atmos::before,
.atmos-haze_pulse .scene__atmos::after,
.atmos-light_gather .scene__atmos::before,
.atmos-light_gather .scene__atmos::after,
.atmos-light_watch .scene__atmos::before,
.atmos-light_watch .scene__atmos::after,
.atmos-light_depth .scene__atmos::before,
.atmos-light_depth .scene__atmos::after,
.atmos-light_violet .scene__atmos::before,
.atmos-light_violet .scene__atmos::after,
.atmos-light_flare .scene__atmos::before,
.atmos-light_flare .scene__atmos::after,
.atmos-snow_fall .scene__atmos::before,
.atmos-snow_fall .scene__atmos::after,
.atmos-snow_dense .scene__atmos::before,
.atmos-snow_dense .scene__atmos::after,
.atmos-snow_blizzard .scene__atmos::before,
.atmos-snow_blizzard .scene__atmos::after,
.atmos-sunny .scene__atmos::before,
.atmos-sunny .scene__atmos::after,
.atmos-tide_glow .scene__atmos::before,
.atmos-tide_glow .scene__atmos::after,
.atmos-tide_high .scene__atmos::before,
.atmos-tide_high .scene__atmos::after,
.atmos-tide_low .scene__atmos::before,
.atmos-tide_low .scene__atmos::after,
.atmos-tide_beacon .scene__atmos::before,
.atmos-tide_beacon .scene__atmos::after,
.atmos-tide_thunder .scene__atmos::before,
.atmos-tide_thunder .scene__atmos::after,
.atmos-tide_water .scene__atmos::before,
.atmos-tide_water .scene__atmos::after,
.atmos-tide_cloud .scene__atmos::before,
.atmos-tide_cloud .scene__atmos::after,
.atmos-amber_motes .scene__atmos::before,
.atmos-amber_motes .scene__atmos::after,
.atmos-amber_fracture .scene__atmos::before,
.atmos-amber_fracture .scene__atmos::after,
.atmos-amber_still .scene__atmos::before,
.atmos-amber_still .scene__atmos::after,
.atmos-amber_wind .scene__atmos::before,
.atmos-amber_wind .scene__atmos::after {
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  /* Particle atmos (ash / snow / amber): sparse random flakes via JS (.scene__atmos-flake).
     CSS only handles fall motion + secondary veil/shimmer/fracture sheets. */

  .scene__atmos.is-particles {
    overflow: hidden;
  }

  .scene__atmos-flake {
    position: absolute;
    top: -4%;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    animation-name: atmos-flake-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .atmos-ash_fall .scene__atmos-flake,
  .atmos-ash_wind .scene__atmos-flake,
  .atmos-snow_fall .scene__atmos-flake,
  .atmos-snow_dense .scene__atmos-flake,
  .atmos-snow_blizzard .scene__atmos-flake {
    border-radius: 0;
    box-shadow: none;
    animation-name: atmos-ash-flake-fall;
    animation-timing-function: linear;
  }

  .atmos-ash_fall .scene__atmos-flake,
  .atmos-ash_wind .scene__atmos-flake {
    background: rgba(8, 8, 8, 0.94);
  }

  /* Irregular shard silhouettes (ash / snow). */
  .scene__atmos-flake--shard-1 {
    clip-path: polygon(8% 35%, 42% 0%, 92% 18%, 100% 55%, 78% 100%, 22% 88%, 0% 58%);
  }
  .scene__atmos-flake--shard-2 {
    clip-path: polygon(0% 40%, 28% 5%, 70% 0%, 100% 32%, 88% 78%, 45% 100%, 5% 72%);
  }
  .scene__atmos-flake--shard-3 {
    clip-path: polygon(12% 0%, 88% 12%, 100% 48%, 70% 100%, 18% 92%, 0% 50%);
  }
  .scene__atmos-flake--shard-4 {
    clip-path: polygon(0% 20%, 55% 0%, 100% 25%, 92% 70%, 48% 100%, 8% 78%, 18% 42%);
  }

  .atmos-ash_fall .scene__atmos,
  .atmos-ash_wind .scene__atmos,
  .atmos-snow_fall .scene__atmos,
  .atmos-snow_dense .scene__atmos,
  .atmos-snow_blizzard .scene__atmos {
    animation: atmos-ash-fade-inout 5s ease-in-out forwards;
  }

  .atmos-ash_wind .scene__atmos-flake {
    animation-name: atmos-ash-flake-wind;
  }

  .atmos-snow_fall .scene__atmos-flake,
  .atmos-snow_dense .scene__atmos-flake,
  .atmos-snow_blizzard .scene__atmos-flake {
    background: rgba(255, 255, 255, 0.95);
  }

  .atmos-snow_blizzard .scene__atmos-flake--blizzard {
    animation-name: atmos-snow-blizzard-drive;
    animation-timing-function: linear;
    opacity: 0.85;
  }

  .atmos-snow_blizzard .scene__atmos::before {
    background:
      linear-gradient(100deg, transparent 8%, rgba(230, 240, 250, 0.38) 42%, transparent 62%),
      linear-gradient(112deg, transparent 35%, rgba(200, 225, 245, 0.28) 55%, transparent 78%);
    opacity: 0;
    animation: atmos-snow-blizzard-shear 5s ease-in-out forwards;
  }

  .atmos-snow_blizzard .scene__atmos::after {
    background:
      linear-gradient(to bottom, rgba(210, 230, 245, 0.5) 0%, rgba(200, 225, 240, 0.18) 22%, transparent 42%),
      linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    box-shadow: inset 0 0 90px rgba(200, 225, 240, 0.28);
    animation: atmos-frost-veil 5s ease-in-out forwards;
  }

  /* sunny — Little Frost clear-sky warmth (CSS only, no particles) */
  .atmos-sunny .scene__atmos {
    background: transparent;
    opacity: 1;
    animation: atmos-ash-fade-inout 5s ease-in-out forwards;
  }
  .atmos-sunny .scene__atmos::before {
    background:
      radial-gradient(ellipse 55% 45% at 78% 8%, rgba(255, 236, 180, 0.55) 0%, rgba(255, 210, 120, 0.22) 42%, transparent 72%),
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 250, 230, 0.28) 0%, transparent 68%);
    opacity: 0;
    animation: atmos-sunny-bloom 5s ease-in-out forwards;
  }
  .atmos-sunny .scene__atmos::after {
    background:
      linear-gradient(118deg, transparent 46%, rgba(255, 245, 210, 0.28) 50%, transparent 54%),
      linear-gradient(102deg, transparent 58%, rgba(255, 220, 150, 0.18) 62%, transparent 66%);
    opacity: 0;
    transform-origin: 80% 0%;
    animation: atmos-sunny-shaft 5s ease-in-out forwards;
  }

  /* Amber — suspended glowing orbs (no fall). */
  .atmos-amber_motes .scene__atmos-flake--orb,
  .atmos-amber_fracture .scene__atmos-flake--orb,
  .atmos-amber_still .scene__atmos-flake--orb,
  .atmos-amber_wind .scene__atmos-flake--orb {
    border-radius: 50%;
    clip-path: none;
    background:
      radial-gradient(
        circle at 35% 30%,
        rgba(255, 245, 210, 0.75) 0%,
        rgba(255, 190, 80, 0.62) 38%,
        rgba(230, 140, 40, 0.38) 68%,
        rgba(180, 90, 20, 0) 100%
      );
    box-shadow:
      0 0 9px rgba(255, 180, 70, 0.42),
      0 0 19px rgba(255, 150, 50, 0.22);
    animation-name: atmos-amber-orb-float;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
  }

  .atmos-amber_still .scene__atmos-flake--orb {
    animation-name: atmos-amber-orb-breathe;
  }

  .atmos-amber_wind .scene__atmos-flake--orb-wind {
    animation-name: atmos-amber-orb-wind;
    animation-timing-function: ease-in-out;
  }

  .atmos-amber_motes .scene__atmos,
  .atmos-amber_fracture .scene__atmos,
  .atmos-amber_still .scene__atmos,
  .atmos-amber_wind .scene__atmos {
    animation: atmos-ash-fade-inout 5s ease-in-out forwards;
  }

  /* Residual ash overlays (no tiled particles) */
  .atmos-ash_wind .scene__atmos::after {
    opacity: 0.55;
    background: linear-gradient(105deg, transparent 25%, rgba(0, 0, 0, 0.45) 50%, transparent 75%);
    animation: atmos-ash-wind-shear 5s ease-in-out forwards;
  }

  /* ash_darkness — center bloom fade in/out (no directional travel) */
  .atmos-ash_darkness .scene__atmos {
    background: transparent;
    opacity: 1;
    z-index: 2;
  }
  .atmos-ash_darkness .scene__atmos::before {
    background: radial-gradient(
      ellipse 75% 70% at 50% 45%,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.36) 45%,
      transparent 72%
    );
    opacity: 0;
    transform: scale(0.72);
    transform-origin: 50% 45%;
    mix-blend-mode: multiply;
    animation: atmos-ash-darkness-center 5s ease-in-out forwards;
  }
  .atmos-ash_darkness .scene__atmos::after {
    background: radial-gradient(
      ellipse 55% 50% at 50% 45%,
      rgba(0, 0, 0, 0.45) 0%,
      transparent 70%
    );
    opacity: 0;
    transform: scale(0.85);
    transform-origin: 50% 45%;
    mix-blend-mode: multiply;
    animation: atmos-ash-darkness-center-core 5s ease-in-out forwards;
  }

  /* Residual snow frost veil */
  .atmos-snow_fall .scene__atmos::after,
  .atmos-snow_dense .scene__atmos::after {
    background: linear-gradient(to bottom, rgba(210, 230, 245, 0.35) 0%, rgba(200, 225, 240, 0.12) 18%, transparent 38%);
    box-shadow: inset 0 0 70px rgba(200, 225, 240, 0.2);
    animation: atmos-frost-veil 10s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  .atmos-snow_dense .scene__atmos::after {
    background: linear-gradient(to bottom, rgba(200, 225, 245, 0.45) 0%, transparent 32%);
  }

  /* Residual amber shimmer / fracture (no tiled motes) */
  .atmos-amber_motes .scene__atmos::before,
  .atmos-amber_fracture .scene__atmos::before,
  .atmos-amber_still .scene__atmos::before,
  .atmos-amber_wind .scene__atmos::before {
    background: radial-gradient(ellipse 75% 55% at 55% 45%, rgba(255, 180, 70, 0.28) 0%, rgba(212, 160, 74, 0.1) 50%, transparent 70%);
    animation: atmos-amber-shimmer 12s ease-in-out infinite;
  }

  .atmos-amber_wind .scene__atmos::after {
    background: linear-gradient(100deg, transparent 28%, rgba(255, 200, 100, 0.2) 48%, transparent 68%);
    opacity: 0;
    animation: atmos-amber-wind-shear 5s ease-in-out forwards;
  }

  .atmos-amber_motes .scene__atmos::after,
  .atmos-amber_fracture .scene__atmos::after {
    background:
      linear-gradient(125deg, transparent 46%, rgba(255, 230, 160, 0.65) 49%, transparent 52%),
      linear-gradient(95deg, transparent 60%, rgba(255, 200, 100, 0.5) 62.5%, transparent 65%);
    opacity: 0;
    animation: atmos-amber-fracture 14s ease-in-out infinite;
  }

  .atmos-amber_fracture .scene__atmos::after {
    background:
      linear-gradient(125deg, transparent 44%, rgba(255, 230, 160, 0.85) 48%, transparent 52%),
      linear-gradient(95deg, transparent 58%, rgba(255, 200, 100, 0.7) 62%, transparent 66%),
      linear-gradient(140deg, transparent 28%, rgba(255, 220, 140, 0.6) 31%, transparent 34%);
    animation: atmos-amber-fracture-fast 8s ease-in-out infinite;
  }

  .atmos-amber_still .scene__atmos::before {
    animation: atmos-amber-shimmer 24s ease-in-out infinite;
  }

  .atmos-amber_still .scene__atmos::after {
    background: linear-gradient(125deg, transparent 48%, rgba(255, 230, 160, 0.35) 50%, transparent 52%);
    opacity: 0.2;
    animation: none;
  }

  /* electric — soft ambience; traveling arcs are JS SVG (.scene__atmos-arcs) */
  .atmos-electric .scene__atmos,
  .atmos-electric_crawl .scene__atmos,
  .atmos-electric_fork .scene__atmos {
    background: rgba(140, 190, 255, 0.06);
    animation: atmos-rb-flicker 14s ease-in-out infinite;
  }
  .atmos-electric .scene__atmos::before,
  .atmos-electric_crawl .scene__atmos::before,
  .atmos-electric_fork .scene__atmos::before {
    background:
      radial-gradient(ellipse 70% 45% at 72% 16%, rgba(200, 235, 255, 0.45) 0%, transparent 70%),
      radial-gradient(ellipse 45% 35% at 28% 42%, rgba(160, 210, 255, 0.28) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-rb-flash 18s ease-in-out infinite;
  }
  .atmos-electric .scene__atmos::after,
  .atmos-electric_crawl .scene__atmos::after,
  .atmos-electric_fork .scene__atmos::after {
    background:
      linear-gradient(112deg, transparent 42%, rgba(230, 245, 255, 0.55) 48%, transparent 54%),
      linear-gradient(98deg, transparent 58%, rgba(180, 220, 255, 0.4) 62%, transparent 66%);
    opacity: 0;
    transform: skewX(-6deg);
    transform-origin: 65% 12%;
    animation: atmos-rb-bolt 22s ease-in-out infinite;
  }

  /* sky_flash — light from sky: wide cyan blooms + flash pulses */
  .atmos-sky_flash .scene__atmos {
    background:
      radial-gradient(ellipse 90% 55% at 50% -5%, rgba(190, 225, 255, 0.22) 0%, transparent 70%);
    opacity: 0.15;
    animation: atmos-sky-ambience 4.2s ease-in-out forwards;
  }
  .atmos-sky_flash .scene__atmos::before {
    background:
      radial-gradient(ellipse 75% 50% at 58% 0%, rgba(230, 245, 255, 0.85) 0%, transparent 68%),
      radial-gradient(ellipse 55% 40% at 28% 8%, rgba(170, 215, 255, 0.55) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-sky-flash-burst 4.2s ease-in-out forwards;
  }
  .atmos-sky_flash .scene__atmos::after {
    background:
      radial-gradient(ellipse 40% 30% at 78% 18%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
      radial-gradient(ellipse 35% 28% at 18% 35%, rgba(180, 220, 255, 0.4) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-sky-flash-echo 4.2s ease-in-out forwards;
  }

  /* sky_streak — light from sky: diagonal sheet / bolt streaks */
  .atmos-sky_streak .scene__atmos {
    background:
      radial-gradient(ellipse 70% 40% at 62% -8%, rgba(180, 220, 255, 0.18) 0%, transparent 68%);
    opacity: 0.12;
    animation: atmos-sky-ambience 4s ease-in-out forwards;
  }
  .atmos-sky_streak .scene__atmos::before {
    background:
      linear-gradient(108deg, transparent 38%, rgba(240, 250, 255, 0.75) 46%, transparent 52%),
      linear-gradient(96deg, transparent 55%, rgba(170, 215, 255, 0.5) 60%, transparent 66%);
    opacity: 0;
    transform: skewX(-8deg);
    transform-origin: 60% 0%;
    animation: atmos-sky-streak-burst 4s ease-in-out forwards;
  }
  .atmos-sky_streak .scene__atmos::after {
    background:
      linear-gradient(122deg, transparent 48%, rgba(255, 255, 255, 0.65) 51%, transparent 55%),
      linear-gradient(88deg, transparent 30%, rgba(190, 225, 255, 0.45) 35%, transparent 42%);
    opacity: 0;
    transform: skewX(-4deg);
    transform-origin: 40% 0%;
    animation: atmos-sky-streak-echo 4s ease-in-out forwards;
  }

  /* haze_flash — faded local blooms only (no beams / hard light) */
  .atmos-haze_flash .scene__atmos {
    background: transparent;
    opacity: 1;
  }
  .atmos-haze_flash .scene__atmos::before {
    background:
      radial-gradient(ellipse 28% 22% at 22% 30%, rgba(170, 205, 235, 0.35) 0%, transparent 72%),
      radial-gradient(ellipse 24% 20% at 74% 48%, rgba(150, 190, 225, 0.28) 0%, transparent 74%);
    opacity: 0;
    filter: blur(18px);
    animation: atmos-haze-flash-a 4.4s ease-in-out forwards;
  }
  .atmos-haze_flash .scene__atmos::after {
    background:
      radial-gradient(ellipse 26% 24% at 58% 22%, rgba(190, 215, 240, 0.3) 0%, transparent 72%),
      radial-gradient(ellipse 22% 18% at 38% 68%, rgba(140, 180, 215, 0.22) 0%, transparent 75%);
    opacity: 0;
    filter: blur(22px);
    animation: atmos-haze-flash-b 4.4s ease-in-out forwards;
  }

  /* haze_pulse — softer drifting local haze pulses */
  .atmos-haze_pulse .scene__atmos {
    background: transparent;
    opacity: 1;
  }
  .atmos-haze_pulse .scene__atmos::before {
    background:
      radial-gradient(ellipse 32% 26% at 68% 36%, rgba(160, 195, 225, 0.26) 0%, transparent 75%),
      radial-gradient(ellipse 20% 16% at 30% 55%, rgba(145, 180, 210, 0.2) 0%, transparent 78%);
    opacity: 0;
    filter: blur(24px);
    animation: atmos-haze-pulse-a 4.6s ease-in-out forwards;
  }
  .atmos-haze_pulse .scene__atmos::after {
    background:
      radial-gradient(ellipse 30% 24% at 44% 18%, rgba(175, 205, 230, 0.24) 0%, transparent 76%),
      radial-gradient(ellipse 18% 15% at 80% 70%, rgba(135, 175, 210, 0.18) 0%, transparent 80%);
    opacity: 0;
    filter: blur(28px);
    animation: atmos-haze-pulse-b 4.6s ease-in-out forwards;
  }

  .scene__atmos.is-electric {
    overflow: hidden;
  }

  .scene__atmos-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
  }

  .scene__atmos-bolt {
    transition: opacity 70ms linear;
  }

  .scene__atmos-bolt.is-fading {
    transition: opacity 90ms ease-out;
  }

  .scene__atmos-arc {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .scene__atmos-arc--glow {
    stroke: rgba(160, 210, 255, 0.55);
    stroke-width: calc(var(--arc-w, 5) * 1px);
    opacity: 0.9;
  }

  .scene__atmos-arc--core {
    stroke: rgba(255, 255, 255, 0.98);
    stroke-width: calc(var(--arc-w, 1.5) * 1px);
  }

  .scene__atmos-arc--branch.scene__atmos-arc--glow {
    stroke: rgba(170, 215, 255, 0.4);
  }

  .scene__atmos-arc--branch.scene__atmos-arc--core {
    stroke: rgba(235, 248, 255, 0.85);
  }

  /* light_gather — gold + teal/rose converge, fade in/out */
  .atmos-light_gather .scene__atmos {
    background: radial-gradient(ellipse 65% 42% at 50% 10%, rgba(255, 210, 120, 0.65) 0%, rgba(212, 180, 100, 0.25) 45%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-host 5s ease-in-out forwards;
  }
  .atmos-light_gather .scene__atmos::before {
    background: radial-gradient(ellipse 38% 48% at 28% 35%, rgba(80, 210, 195, 0.55) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-converge-a-burst 5s ease-in-out forwards;
  }
  .atmos-light_gather .scene__atmos::after {
    background: radial-gradient(ellipse 36% 46% at 72% 32%, rgba(230, 110, 140, 0.5) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-converge-b-burst 5s ease-in-out forwards;
  }

  /* light_watch — cool watchful glow, slower drift */
  .atmos-light_watch .scene__atmos {
    background: radial-gradient(ellipse 50% 30% at 50% 8%, rgba(180, 210, 255, 0.55) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-host 5.4s ease-in-out forwards;
  }
  .atmos-light_watch .scene__atmos::before {
    background: radial-gradient(ellipse 25% 35% at 48% 22%, rgba(255, 230, 160, 0.45) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-watch-pulse 5.4s ease-in-out forwards;
  }
  .atmos-light_watch .scene__atmos::after {
    background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(40, 60, 90, 0.35) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-soft 5.4s ease-in-out forwards;
  }

  /* light_depth — deep teal from below */
  .atmos-light_depth .scene__atmos {
    background: radial-gradient(ellipse 70% 50% at 50% 85%, rgba(40, 140, 160, 0.55) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-host 5.2s ease-in-out forwards;
  }
  .atmos-light_depth .scene__atmos::before {
    background: radial-gradient(ellipse 40% 30% at 30% 60%, rgba(60, 190, 180, 0.4) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-converge-a-burst 5.2s ease-in-out forwards;
  }
  .atmos-light_depth .scene__atmos::after {
    background: radial-gradient(ellipse 35% 25% at 70% 50%, rgba(100, 160, 220, 0.35) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-converge-b-burst 5.2s ease-in-out forwards;
  }

  /* light_violet — slow indigo/violet orbit */
  .atmos-light_violet .scene__atmos {
    background: radial-gradient(ellipse 58% 40% at 50% 18%, rgba(160, 120, 255, 0.35) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-ever-fade-host 5.8s ease-in-out forwards;
  }
  .atmos-light_violet .scene__atmos::before {
    background: radial-gradient(ellipse 32% 38% at 30% 40%, rgba(110, 80, 220, 0.5) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-ever-violet-orbit-a 5.8s ease-in-out forwards;
  }
  .atmos-light_violet .scene__atmos::after {
    background: radial-gradient(ellipse 30% 36% at 72% 48%, rgba(200, 140, 255, 0.42) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-ever-violet-orbit-b 5.8s ease-in-out forwards;
  }

  /* light_flare — fast warm coral/amber sweeps */
  .atmos-light_flare .scene__atmos {
    background: radial-gradient(ellipse 48% 32% at 62% 12%, rgba(255, 170, 90, 0.4) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-host 4.4s ease-in-out forwards;
  }
  .atmos-light_flare .scene__atmos::before {
    background: radial-gradient(ellipse 28% 34% at 22% 28%, rgba(255, 90, 70, 0.55) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-flare-dash-a 4.4s ease-in-out forwards;
  }
  .atmos-light_flare .scene__atmos::after {
    background: radial-gradient(ellipse 26% 30% at 78% 55%, rgba(255, 200, 80, 0.5) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-flare-dash-b 4.4s ease-in-out forwards;
  }

  /* tide_glow — soft edges, no hard cut line */
  .atmos-tide_glow .scene__atmos,
  .atmos-tide_high .scene__atmos,
  .atmos-tide_low .scene__atmos {
    -webkit-mask-image:
      linear-gradient(to top, transparent 0%, #000 14%, #000 100%),
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image:
      linear-gradient(to top, transparent 0%, #000 14%, #000 100%),
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .atmos-tide_glow .scene__atmos {
    background:
      radial-gradient(ellipse 50% 40% at 30% 72%, rgba(90, 220, 240, 0.45) 0%, transparent 72%),
      radial-gradient(ellipse 45% 35% at 70% 78%, rgba(60, 180, 220, 0.4) 0%, transparent 72%),
      radial-gradient(ellipse 60% 28% at 50% 88%, rgba(140, 230, 255, 0.32) 0%, transparent 75%);
    opacity: 0.9;
    animation: atmos-moon-caustic 12s ease-in-out infinite;
  }
  .atmos-tide_glow .scene__atmos::before {
    background: radial-gradient(ellipse 95% 55% at 50% 100%, rgba(80, 200, 230, 0.5) 0%, rgba(100, 190, 220, 0.22) 42%, transparent 72%);
    animation: atmos-moon-tide 14s ease-in-out infinite;
  }
  .atmos-tide_glow .scene__atmos::after {
    background: radial-gradient(ellipse 70% 32% at 50% 90%, rgba(180, 240, 255, 0.38) 0%, transparent 75%);
    animation: atmos-moon-caustic 16s ease-in-out infinite reverse;
  }

  /* tide_high */
  .atmos-tide_high .scene__atmos {
    background:
      radial-gradient(ellipse 70% 50% at 50% 58%, rgba(70, 190, 220, 0.48) 0%, transparent 72%),
      radial-gradient(ellipse 55% 40% at 30% 68%, rgba(90, 220, 240, 0.42) 0%, transparent 72%);
    opacity: 0.95;
    animation: atmos-moon-caustic 10s ease-in-out infinite;
  }
  .atmos-tide_high .scene__atmos::before {
    background: radial-gradient(ellipse 100% 70% at 50% 100%, rgba(60, 180, 210, 0.62) 0%, rgba(80, 190, 220, 0.32) 48%, transparent 78%);
    animation: atmos-moon-tide 12s ease-in-out infinite;
  }
  .atmos-tide_high .scene__atmos::after {
    background: radial-gradient(ellipse 85% 45% at 50% 78%, rgba(160, 230, 255, 0.42) 0%, transparent 75%);
    animation: atmos-moon-caustic 14s ease-in-out infinite reverse;
  }

  /* tide_low */
  .atmos-tide_low .scene__atmos {
    background:
      radial-gradient(ellipse 45% 22% at 50% 94%, rgba(140, 230, 255, 0.38) 0%, transparent 75%),
      radial-gradient(ellipse 35% 18% at 25% 92%, rgba(90, 200, 220, 0.28) 0%, transparent 75%);
    opacity: 0.85;
    animation: atmos-moon-caustic 16s ease-in-out infinite;
  }
  .atmos-tide_low .scene__atmos::before {
    background: radial-gradient(ellipse 100% 35% at 50% 100%, rgba(80, 180, 210, 0.35) 0%, rgba(100, 190, 220, 0.12) 40%, transparent 70%);
    animation: atmos-moon-tide 18s ease-in-out infinite;
  }
  .atmos-tide_low .scene__atmos::after {
    background: radial-gradient(ellipse 55% 20% at 50% 97%, rgba(200, 240, 255, 0.3) 0%, transparent 75%);
    animation: atmos-moon-caustic 20s ease-in-out infinite reverse;
  }

  /* tide_beacon — lighthouse search light from center / 30% top */
  .atmos-tide_beacon .scene__atmos {
    background: radial-gradient(ellipse 36% 24% at 50% 30%, rgba(255, 248, 220, 0.22) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-host 5.2s ease-in-out forwards;
  }
  .atmos-tide_beacon .scene__atmos::before {
    background: conic-gradient(
      from 200deg at 50% 30%,
      transparent 0deg,
      rgba(255, 250, 230, 0.02) 4deg,
      rgba(255, 250, 230, 0.08) 9deg,
      rgba(255, 248, 220, 0.2) 14deg,
      rgba(255, 245, 200, 0.42) 19deg,
      rgba(255, 245, 200, 0.55) 24deg,
      rgba(255, 245, 200, 0.42) 29deg,
      rgba(255, 248, 220, 0.2) 34deg,
      rgba(255, 250, 230, 0.08) 39deg,
      rgba(255, 250, 230, 0.02) 44deg,
      transparent 50deg,
      transparent 360deg
    );
    opacity: 0;
    transform-origin: 50% 30%;
    animation: atmos-tide-beacon-sweep 5.2s ease-in-out forwards;
    /* Fade must finish before panel edges (origin at 30% top) or overflow clips hard. */
    -webkit-mask-image: radial-gradient(
      ellipse 115% 105% at 50% 30%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 12%,
      rgba(0, 0, 0, 0.62) 28%,
      rgba(0, 0, 0, 0.32) 46%,
      rgba(0, 0, 0, 0.12) 64%,
      rgba(0, 0, 0, 0.04) 80%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 115% 105% at 50% 30%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 12%,
      rgba(0, 0, 0, 0.62) 28%,
      rgba(0, 0, 0, 0.32) 46%,
      rgba(0, 0, 0, 0.12) 64%,
      rgba(0, 0, 0, 0.04) 80%,
      transparent 100%
    );
  }
  .atmos-tide_beacon .scene__atmos::after {
    background: radial-gradient(ellipse 16% 12% at 50% 30%, rgba(255, 255, 240, 0.7) 0%, rgba(255, 230, 160, 0.25) 45%, transparent 72%);
    opacity: 0;
    animation: atmos-tide-beacon-lamp 5.2s ease-in-out forwards;
  }

  /* tide_thunder — storm flash over the bay */
  .atmos-tide_thunder .scene__atmos {
    background: rgba(40, 60, 90, 0.12);
    opacity: 0;
    animation: atmos-ever-fade-host 4.6s ease-in-out forwards;
  }
  .atmos-tide_thunder .scene__atmos::before {
    background:
      radial-gradient(ellipse 70% 45% at 58% 0%, rgba(200, 230, 255, 0.55) 0%, transparent 68%),
      radial-gradient(ellipse 40% 30% at 28% 18%, rgba(160, 200, 255, 0.35) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-tide-thunder-flash 4.6s ease-in-out forwards;
  }
  .atmos-tide_thunder .scene__atmos::after {
    background:
      linear-gradient(112deg, transparent 44%, rgba(240, 250, 255, 0.65) 49%, transparent 53%),
      linear-gradient(98deg, transparent 56%, rgba(180, 210, 255, 0.4) 60%, transparent 65%);
    opacity: 0;
    transform: skewX(-8deg);
    transform-origin: 55% 0%;
    animation: atmos-tide-thunder-bolt 4.6s ease-in-out forwards;
  }

  /* tide_water — circular luminous pool from center */
  .atmos-tide_water .scene__atmos {
    background: radial-gradient(ellipse 48% 48% at 50% 50%, rgba(70, 210, 230, 0.28) 0%, rgba(100, 230, 255, 0.12) 45%, transparent 72%);
    opacity: 0;
    animation: atmos-ever-fade-host 5.4s ease-in-out forwards;
  }
  .atmos-tide_water .scene__atmos::before {
    background:
      radial-gradient(ellipse 52% 52% at 50% 50%, rgba(80, 200, 230, 0.32) 0%, transparent 68%),
      radial-gradient(ellipse 26% 26% at 50% 50%, rgba(180, 245, 255, 0.22) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-tide-water-rise 5.4s ease-in-out forwards;
  }
  .atmos-tide_water .scene__atmos::after {
    background:
      radial-gradient(ellipse 20% 20% at 46% 48%, rgba(220, 250, 255, 0.3) 0%, transparent 70%),
      radial-gradient(ellipse 16% 16% at 54% 52%, rgba(140, 230, 255, 0.24) 0%, transparent 72%),
      radial-gradient(ellipse 14% 14% at 50% 46%, rgba(200, 245, 255, 0.2) 0%, transparent 72%);
    opacity: 0;
    animation: atmos-tide-water-caustic 5.4s ease-in-out forwards;
  }

  /* tide_cloud — everlight-style converge, faster + greyscale */
  .atmos-tide_cloud .scene__atmos {
    background: radial-gradient(ellipse 65% 42% at 50% 10%, rgba(230, 230, 235, 0.55) 0%, rgba(160, 160, 168, 0.22) 45%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-fade-host 3.4s ease-in-out forwards;
  }
  .atmos-tide_cloud .scene__atmos::before {
    background: radial-gradient(ellipse 38% 48% at 28% 35%, rgba(200, 200, 205, 0.5) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-converge-a-burst 3.4s ease-in-out forwards;
  }
  .atmos-tide_cloud .scene__atmos::after {
    background: radial-gradient(ellipse 36% 46% at 72% 32%, rgba(120, 120, 128, 0.48) 0%, transparent 70%);
    opacity: 0;
    animation: atmos-ever-converge-b-burst 3.4s ease-in-out forwards;
  }


@keyframes atmos-flake-fall {
  from { transform: translate3d(0, -5vh, 0); }
  to { transform: translate3d(var(--flake-drift, 12px), 110vh, 0); }
}
@keyframes atmos-flake-wind {
  from { transform: translate3d(-10vw, -5vh, 0); }
  to { transform: translate3d(calc(30vw + var(--flake-drift, 20px)), 110vh, 0); }
}
@keyframes atmos-ash-flake-fall {
  from {
    transform: translate3d(0, -5vh, 0) rotate(var(--flake-rot, 0deg));
  }
  to {
    transform: translate3d(var(--flake-drift, 12px), 110vh, 0)
      rotate(calc(var(--flake-rot, 0deg) + var(--flake-spin, 40deg)));
  }
}
@keyframes atmos-ash-flake-wind {
  from {
    transform: translate3d(-10vw, -5vh, 0) rotate(var(--flake-rot, 0deg));
  }
  to {
    transform: translate3d(calc(30vw + var(--flake-drift, 20px)), 110vh, 0)
      rotate(calc(var(--flake-rot, 0deg) + var(--flake-spin, 60deg)));
  }
}
@keyframes atmos-snow-blizzard-drive {
  from {
    transform: translate3d(0, 0, 0) rotate(var(--flake-rot, 0deg));
  }
  to {
    transform: translate3d(
        var(--flake-drift, 240px),
        var(--blizzard-fall, 60vh),
        0
      )
      rotate(calc(var(--flake-rot, 0deg) + var(--flake-spin, 140deg)));
  }
}
@keyframes atmos-snow-blizzard-shear {
  0% { opacity: 0; transform: translateX(-12%) skewX(-12deg); }
  14% { opacity: 0.85; transform: translateX(-2%) skewX(-10deg); }
  45% { opacity: 0.6; transform: translateX(12%) skewX(-8deg); }
  100% { opacity: 0; transform: translateX(22%) skewX(-4deg); }
}
@keyframes atmos-sunny-bloom {
  0% { opacity: 0; transform: scale(0.92); }
  20% { opacity: 0.9; transform: scale(1); }
  55% { opacity: 0.75; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes atmos-sunny-shaft {
  0% { opacity: 0; }
  18% { opacity: 0.55; }
  50% { opacity: 0.4; }
  100% { opacity: 0; }
}
@keyframes atmos-amber-orb-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(calc(var(--orb-scale, 1) * 0.7));
  }
  18% {
    opacity: 0.72;
    transform: translate3d(
        calc(var(--orb-dx, 8px) * 0.35),
        calc(var(--orb-dy, -10px) * 0.35),
        0
      )
      scale(var(--orb-scale, 1));
  }
  50% {
    opacity: 0.6;
    transform: translate3d(var(--orb-dx, 8px), var(--orb-dy, -10px), 0)
      scale(calc(var(--orb-scale, 1) * 1.05));
  }
  82% {
    opacity: 0.7;
    transform: translate3d(
        calc(var(--orb-dx, 8px) * 0.4),
        calc(var(--orb-dy, -10px) * -0.2),
        0
      )
      scale(var(--orb-scale, 1));
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--orb-dx, 8px) * -0.2),
        calc(var(--orb-dy, -10px) * 0.5),
        0
      )
      scale(calc(var(--orb-scale, 1) * 0.75));
  }
}
@keyframes atmos-amber-orb-breathe {
  0% {
    opacity: 0;
    transform: scale(calc(var(--orb-scale, 1) * 0.65));
  }
  22% {
    opacity: 0.65;
    transform: scale(var(--orb-scale, 1));
  }
  50% {
    opacity: 0.5;
    transform: scale(calc(var(--orb-scale, 1) * 1.08))
      translate3d(calc(var(--orb-dx, 4px) * 0.3), calc(var(--orb-dy, 4px) * 0.3), 0);
  }
  78% {
    opacity: 0.6;
    transform: scale(var(--orb-scale, 1));
  }
  100% {
    opacity: 0;
    transform: scale(calc(var(--orb-scale, 1) * 0.7));
  }
}
@keyframes atmos-amber-orb-wind {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(calc(var(--orb-scale, 1) * 0.75));
  }
  12% {
    opacity: 0.7;
    transform: translate3d(
        calc(var(--orb-dx, 200px) * 0.12),
        calc(var(--orb-dy, 0px) * 0.2),
        0
      )
      scale(var(--orb-scale, 1));
  }
  55% {
    opacity: 0.55;
    transform: translate3d(
        calc(var(--orb-dx, 200px) * 0.65),
        calc(var(--orb-dy, 0px) * 0.7),
        0
      )
      scale(calc(var(--orb-scale, 1) * 0.95));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--orb-dx, 200px), var(--orb-dy, 0px), 0)
      scale(calc(var(--orb-scale, 1) * 0.8));
  }
}
@keyframes atmos-amber-wind-shear {
  0% { opacity: 0; transform: translateX(-6%); }
  20% { opacity: 0.55; transform: translateX(0%); }
  70% { opacity: 0.35; transform: translateX(8%); }
  100% { opacity: 0; transform: translateX(14%); }
}
@keyframes atmos-flake-drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(var(--flake-drift, 8px), 12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes atmos-ash-fall {
  from { background-position: 0 0, 20px 0, -10px 0, 15px 0, -5px 0, 8px 0, -12px 0; }
  to { background-position: 18px 90px, 12px 110px, 24px 80px, -10px 100px, 14px 70px, -8px 95px, 16px 120px; }
}
@keyframes atmos-ash-fall-drift {
  from { background-position: 0 0, -15px 0, 10px 0, 5px 0, -8px 0; }
  to { background-position: 22px 130px, 8px 105px, -14px 140px, 18px 85px, 12px 120px; }
}
@keyframes atmos-ash-wind {
  from { background-position: 0 0, 10px 0, -8px 0, 5px 0, -12px 0, 6px 0; }
  to { background-position: 90px 50px, 110px 70px, 80px 40px, 100px 60px, 70px 35px, 95px 55px; }
}
@keyframes atmos-ash-wind-shear {
  0% { transform: translateX(-4%); opacity: 0; }
  20% { transform: translateX(0%); opacity: 0.7; }
  55% { transform: translateX(6%); opacity: 0.55; }
  100% { transform: translateX(10%); opacity: 0; }
}
@keyframes atmos-ash-fade-inout {
  0% { opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes atmos-ash-darkness-center {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  22% {
    opacity: 0.95;
    transform: scale(1);
  }
  55% {
    opacity: 0.8;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}
@keyframes atmos-ash-darkness-center-core {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  20% {
    opacity: 0.88;
    transform: scale(1);
  }
  58% {
    opacity: 0.65;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}
@keyframes atmos-rb-flicker {
  0%, 100% { opacity: 0.12; }
  40% { opacity: 0.18; }
  70% { opacity: 0.14; }
  82% { opacity: 0.22; }
  88% { opacity: 0.13; }
}
@keyframes atmos-rb-flash {
  0%, 62%, 100% { opacity: 0; }
  64% { opacity: 0.28; }
  66% { opacity: 0.08; }
  68% { opacity: 0.22; }
  71% { opacity: 0; }
}
@keyframes atmos-rb-bolt {
  0%, 70%, 100% { opacity: 0; }
  72% { opacity: 0.45; }
  73.5% { opacity: 0.1; }
  75% { opacity: 0.35; }
  77% { opacity: 0; }
}
@keyframes atmos-sky-ambience {
  0% { opacity: 0.08; }
  12% { opacity: 0.2; }
  55% { opacity: 0.14; }
  100% { opacity: 0.06; }
}
@keyframes atmos-sky-flash-burst {
  0%, 100% { opacity: 0; }
  8% { opacity: 0.15; }
  12% { opacity: 0.85; }
  16% { opacity: 0.12; }
  20% { opacity: 0.7; }
  26% { opacity: 0; }
  48% { opacity: 0; }
  52% { opacity: 0.55; }
  56% { opacity: 0.1; }
  60% { opacity: 0.4; }
  66% { opacity: 0; }
}
@keyframes atmos-sky-flash-echo {
  0%, 100% { opacity: 0; }
  14% { opacity: 0; }
  18% { opacity: 0.5; }
  22% { opacity: 0.08; }
  28% { opacity: 0; }
  54% { opacity: 0; }
  58% { opacity: 0.45; }
  64% { opacity: 0; }
}
@keyframes atmos-sky-streak-burst {
  0%, 100% { opacity: 0; }
  10% { opacity: 0; }
  12% { opacity: 0.9; }
  14% { opacity: 0.15; }
  17% { opacity: 0.7; }
  22% { opacity: 0; }
  40% { opacity: 0; }
  42% { opacity: 0.75; }
  45% { opacity: 0.12; }
  48% { opacity: 0.55; }
  54% { opacity: 0; }
  72% { opacity: 0; }
  74% { opacity: 0.6; }
  78% { opacity: 0; }
}
@keyframes atmos-sky-streak-echo {
  0%, 100% { opacity: 0; }
  13% { opacity: 0; }
  15% { opacity: 0.55; }
  19% { opacity: 0; }
  43% { opacity: 0; }
  46% { opacity: 0.5; }
  51% { opacity: 0; }
  75% { opacity: 0; }
  77% { opacity: 0.4; }
  82% { opacity: 0; }
}
@keyframes atmos-haze-flash-a {
  0%, 100% { opacity: 0; transform: scale(1); }
  10% { opacity: 0; }
  16% { opacity: 0.55; transform: scale(1.04); }
  24% { opacity: 0.12; }
  30% { opacity: 0.4; transform: scale(1.02); }
  40% { opacity: 0; transform: scale(1); }
  62% { opacity: 0; }
  68% { opacity: 0.35; transform: scale(1.03); }
  78% { opacity: 0; transform: scale(1); }
}
@keyframes atmos-haze-flash-b {
  0%, 100% { opacity: 0; transform: scale(1); }
  18% { opacity: 0; }
  24% { opacity: 0.45; transform: scale(1.05); }
  34% { opacity: 0; transform: scale(1); }
  55% { opacity: 0; }
  62% { opacity: 0.38; transform: scale(1.03); }
  70% { opacity: 0.1; }
  76% { opacity: 0.28; }
  86% { opacity: 0; transform: scale(1); }
}
@keyframes atmos-haze-pulse-a {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
  8% { opacity: 0.15; }
  22% { opacity: 0.42; transform: translate(2%, -1%) scale(1.06); }
  40% { opacity: 0.18; transform: translate(-1%, 1%) scale(1.02); }
  58% { opacity: 0.36; transform: translate(1%, 0) scale(1.05); }
  78% { opacity: 0.1; }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes atmos-haze-pulse-b {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
  14% { opacity: 0.1; }
  30% { opacity: 0.34; transform: translate(-2%, 1%) scale(1.05); }
  48% { opacity: 0.14; }
  66% { opacity: 0.3; transform: translate(1%, -1%) scale(1.04); }
  88% { opacity: 0.08; }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes atmos-ever-breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.14); }
}
@keyframes atmos-ever-converge-a {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  50% { transform: translate(34%, -16%); opacity: 1; }
}
@keyframes atmos-ever-converge-b {
  0%, 100% { transform: translate(0, 0); opacity: 0.82; }
  50% { transform: translate(-32%, -14%); opacity: 1; }
}
@keyframes atmos-ever-fade-host {
  0% { opacity: 0; }
  18% { opacity: 0.9; }
  68% { opacity: 0.85; }
  100% { opacity: 0; }
}
@keyframes atmos-ever-fade-soft {
  0% { opacity: 0; }
  22% { opacity: 0.7; }
  70% { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes atmos-ever-converge-a-burst {
  0% { opacity: 0; transform: translate(-8%, 6%); }
  20% { opacity: 0.9; transform: translate(0, 0); }
  55% { opacity: 1; transform: translate(28%, -14%); }
  100% { opacity: 0; transform: translate(38%, -18%); }
}
@keyframes atmos-ever-converge-b-burst {
  0% { opacity: 0; transform: translate(8%, 4%); }
  22% { opacity: 0.85; transform: translate(0, 0); }
  58% { opacity: 1; transform: translate(-26%, -12%); }
  100% { opacity: 0; transform: translate(-36%, -16%); }
}
@keyframes atmos-ever-watch-pulse {
  0% { opacity: 0; transform: scale(0.9); }
  25% { opacity: 0.85; transform: scale(1); }
  55% { opacity: 0.7; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes atmos-ever-violet-orbit-a {
  0% { opacity: 0; transform: translate(0, 0) scale(0.92); }
  18% { opacity: 0.85; transform: translate(6%, -4%) scale(1); }
  50% { opacity: 0.75; transform: translate(22%, 10%) scale(1.06); }
  100% { opacity: 0; transform: translate(10%, 18%) scale(1.02); }
}
@keyframes atmos-ever-violet-orbit-b {
  0% { opacity: 0; transform: translate(0, 0) scale(0.94); }
  20% { opacity: 0.8; transform: translate(-4%, 2%) scale(1); }
  55% { opacity: 0.7; transform: translate(-20%, -12%) scale(1.05); }
  100% { opacity: 0; transform: translate(-8%, -20%) scale(1.01); }
}
@keyframes atmos-ever-flare-dash-a {
  0% { opacity: 0; transform: translate(-20%, 12%) scale(0.8); }
  12% { opacity: 0.95; transform: translate(0, 0) scale(1); }
  35% { opacity: 0.7; transform: translate(40%, -22%) scale(1.1); }
  55% { opacity: 0.9; transform: translate(8%, 8%) scale(0.95); }
  78% { opacity: 0.55; transform: translate(55%, -30%) scale(1.12); }
  100% { opacity: 0; transform: translate(70%, -40%) scale(1.05); }
}
@keyframes atmos-ever-flare-dash-b {
  0% { opacity: 0; transform: translate(18%, -10%) scale(0.85); }
  14% { opacity: 0.9; transform: translate(0, 0) scale(1); }
  40% { opacity: 0.65; transform: translate(-35%, 18%) scale(1.08); }
  62% { opacity: 0.85; transform: translate(-8%, -6%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, 28%) scale(1.1); }
}
@keyframes atmos-snow-fall {
  from { background-position: 0 0, 10px 0, -8px 0, 5px 0, -12px 0, 6px 0; }
  to { background-position: 10px 70px, -6px 95px, 16px 60px, 12px 80px, 8px 65px, -10px 105px; }
}
@keyframes atmos-frost-veil {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes atmos-moon-caustic {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.75; }
  50% { transform: translateY(-36px) translateX(16px); opacity: 1; }
}
@keyframes atmos-moon-tide {
  0%, 100% { transform: translateY(22px); opacity: 0.75; }
  50% { transform: translateY(-28px); opacity: 1; }
}
@keyframes atmos-tide-beacon-sweep {
  0% { opacity: 0; transform: rotate(-28deg); }
  14% { opacity: 0.85; transform: rotate(-18deg); }
  50% { opacity: 1; transform: rotate(18deg); }
  86% { opacity: 0.7; transform: rotate(38deg); }
  100% { opacity: 0; transform: rotate(48deg); }
}
@keyframes atmos-tide-beacon-lamp {
  0% { opacity: 0; transform: scale(0.7); }
  16% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(0.9); }
}
@keyframes atmos-tide-thunder-flash {
  0%, 100% { opacity: 0; }
  10% { opacity: 0; }
  14% { opacity: 0.95; }
  18% { opacity: 0.15; }
  22% { opacity: 0.8; }
  28% { opacity: 0; }
  58% { opacity: 0; }
  62% { opacity: 0.7; }
  68% { opacity: 0.12; }
  72% { opacity: 0.55; }
  80% { opacity: 0; }
}
@keyframes atmos-tide-thunder-bolt {
  0%, 100% { opacity: 0; }
  16% { opacity: 0; }
  18% { opacity: 0.9; }
  21% { opacity: 0.15; }
  24% { opacity: 0.7; }
  30% { opacity: 0; }
  64% { opacity: 0; }
  66% { opacity: 0.75; }
  70% { opacity: 0.1; }
  74% { opacity: 0.5; }
  82% { opacity: 0; }
}
@keyframes atmos-tide-water-rise {
  0% { opacity: 0; transform: scale(0.72); }
  22% { opacity: 0.85; transform: scale(1); }
  55% { opacity: 0.65; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes atmos-tide-water-caustic {
  0% { opacity: 0; transform: scale(0.85) rotate(0deg); }
  20% { opacity: 0.75; transform: scale(1) rotate(8deg); }
  48% { opacity: 0.55; transform: scale(1.1) rotate(-6deg); }
  74% { opacity: 0.62; transform: scale(1.04) rotate(10deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(-4deg); }
}
@keyframes atmos-amber-motes {
  0%, 100% { background-position: 0 0, 8px 4px, -4px 0, 2px -2px, -6px 3px, 4px -4px; }
  50% { background-position: 10px 16px, 4px 20px, 12px 10px, -6px 14px, 8px 12px, -8px 10px; }
}
@keyframes atmos-amber-shimmer {
  0%, 100% { opacity: 0.55; filter: hue-rotate(0deg); }
  50% { opacity: 1; filter: hue-rotate(10deg); }
}
@keyframes atmos-amber-fracture {
  0%, 55%, 100% { opacity: 0; }
  60% { opacity: 0.9; }
  65% { opacity: 0.2; }
  70% { opacity: 0.75; }
  75%, 100% { opacity: 0; }
}
@keyframes atmos-amber-fracture-fast {
  0%, 30%, 100% { opacity: 0; }
  35% { opacity: 1; }
  40% { opacity: 0.15; }
  48% { opacity: 0.85; }
  55% { opacity: 0.1; }
  62% { opacity: 0.7; }
  70%, 100% { opacity: 0; }
}

/* —— Playtest overlay —— */
.playtest-panel {
  position: relative;
  z-index: 4;
  max-width: 24rem;
  margin: -3.5rem auto 5.5rem;
  padding: 1.25rem;
  background: rgba(8, 10, 14, 0.78);
  border: 1px solid rgba(244, 239, 230, 0.18);
  border-radius: 0.75rem;
  backdrop-filter: blur(8px);
}

.playtest-panel__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.playtest-panel__tagline {
  margin: 0 0 1rem;
  font-family: var(--ui);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.playtest-form,
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--ui);
}

.playtest-form__label,
.contact-form__label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.playtest-form input,
.contact-form input,
.contact-form textarea {
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(244, 239, 230, 0.25);
  border-radius: 0.4rem;
  padding: 0.55rem 0.65rem;
}

.playtest-form__submit,
.contact-form__submit {
  font-family: var(--ui);
  font-size: 0.9rem;
  color: #120e08;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  cursor: pointer;
}

.playtest-form__status,
.contact-form__status {
  min-height: 1.25rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.playtest-form__status.is-error,
.contact-form__status.is-error {
  color: #ffb4b4;
}

.playtest-form__status.is-ok,
.contact-form__status.is-ok {
  color: #b8e0b8;
}

/* —— Contact / error —— */
.contact,
.error-panel {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.contact__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.contact__title,
.error-panel h1 {
  margin: 0 0 0.75rem;
}

.contact__intro {
  margin: 0 0 1.25rem;
  color: var(--ink-muted);
}

.error-panel a {
  font-family: var(--ui);
}

/* —— Theory (About lore) —— */
.theory-page .site-main {
  position: relative;
  min-height: calc(100vh - var(--menu-h));
}

.theory {
  position: relative;
  isolation: isolate;
  max-width: none;
  margin: 0;
  min-height: calc(100vh - var(--menu-h));
  padding: 2.5rem 1.25rem 4.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.theory__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #080a0e;
  background-image: var(--theory-banner);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.theory__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 10, 14, 0.72) 0%,
      rgba(8, 10, 14, 0.78) 45%,
      rgba(8, 10, 14, 0.88) 100%
    ),
    rgba(8, 10, 14, 0.45);
}

.theory__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
  background: rgba(8, 10, 14, 0.55);
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem 2rem;
  backdrop-filter: blur(6px);
}

.theory__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
}

.theory__lead {
  margin: 0 0 1.25rem;
  font-size: 1.08em;
  line-height: 1.55;
  color: var(--ink);
}

.theory__panel > p {
  margin: 0 0 1.15rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.theory__panel > p.theory__lead {
  color: var(--ink);
}

.theory__closing {
  margin: 1.75rem 0 1rem;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
}

.theory__welcome {
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.04em;
}