/* Stage mode: biome-aligned sector map */

#stage-select-screen,
#stage-brief-screen {
  --sector-accent: #66dce7;
  --sector-accent-rgb: 102, 220, 231;
  --sector-deep: #0a2530;
  --sector-hot: #c8dfe4;
}

#stage-select-screen[data-sector-theme="fracture"],
#stage-brief-screen[data-sector-theme="fracture"],
[data-sector-theme="fracture"] { --sector-accent: #a78add; --sector-accent-rgb: 167, 138, 221; --sector-deep: #241a3b; --sector-hot: #d9c7ff; }
#stage-select-screen[data-sector-theme="ocean"],
#stage-brief-screen[data-sector-theme="ocean"],
[data-sector-theme="ocean"] { --sector-accent: #4bbcee; --sector-accent-rgb: 75, 188, 238; --sector-deep: #0c3553; --sector-hot: #a9e7ff; }
#stage-select-screen[data-sector-theme="magma"],
#stage-brief-screen[data-sector-theme="magma"],
[data-sector-theme="magma"] { --sector-accent: #f16e4e; --sector-accent-rgb: 241, 110, 78; --sector-deep: #421510; --sector-hot: #ffc37c; }
#stage-select-screen[data-sector-theme="desert"],
#stage-brief-screen[data-sector-theme="desert"],
[data-sector-theme="desert"] { --sector-accent: #d8a45f; --sector-accent-rgb: 216, 164, 95; --sector-deep: #392716; --sector-hot: #ffe1a8; }

#app .facility-screen--stage .facility-backdrop,
#app .facility-screen--brief .facility-backdrop {
  transition: background-color .3s ease;
}

#app .facility-screen--stage[data-sector-theme="fracture"] .facility-backdrop,
#app .facility-screen--brief[data-sector-theme="fracture"] .facility-backdrop {
  background:
    radial-gradient(ellipse at 78% 15%, rgba(139, 100, 207, .24), transparent 28%),
    linear-gradient(128deg, transparent 46%, rgba(171, 136, 224, .08) 47% 48%, transparent 49%),
    linear-gradient(160deg, #17102a, #070812 62%, #0f0917) !important;
}

#app .facility-screen--stage[data-sector-theme="ocean"] .facility-backdrop,
#app .facility-screen--brief[data-sector-theme="ocean"] .facility-backdrop {
  background:
    radial-gradient(ellipse at 50% 9%, rgba(93, 203, 241, .22), transparent 27%),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(95, 205, 242, .035) 43px),
    linear-gradient(160deg, #0a3450, #06141f 64%, #071724) !important;
}

#app .facility-screen--stage[data-sector-theme="magma"] .facility-backdrop,
#app .facility-screen--brief[data-sector-theme="magma"] .facility-backdrop {
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 104, 62, .28), transparent 24%),
    linear-gradient(112deg, transparent 42%, rgba(255, 126, 63, .07) 43% 44%, transparent 45%),
    linear-gradient(160deg, #35100c, #0d0809 62%, #1b0908) !important;
}

#app .facility-screen--stage[data-sector-theme="desert"] .facility-backdrop,
#app .facility-screen--brief[data-sector-theme="desert"] .facility-backdrop {
  background:
    radial-gradient(circle at 78% 15%, rgba(246, 193, 111, .25), transparent 19%),
    repeating-linear-gradient(170deg, transparent 0 49px, rgba(227, 174, 98, .035) 50px),
    linear-gradient(160deg, #322415, #0d0c0b 65%, #181109) !important;
}

/* Sector route */
#app .stage-sector-route {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 3px 1px 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(111, 173, 184, .14);
}

#app .stage-sector-route::-webkit-scrollbar { display: none; }

#app .stage-sector-route-btn {
  position: relative;
  flex: 0 0 clamp(92px, 28vw, 118px);
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 6px 8px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(var(--route-rgb, 102, 220, 231), .25) !important;
  border-radius: 0 !important;
  color: #b8c7ca !important;
  background: linear-gradient(105deg, rgba(var(--route-rgb, 102, 220, 231), .1), transparent 58%), #071117 !important;
  box-shadow: none !important;
  text-align: left !important;
}

#app .stage-sector-route-btn--fracture { --route-rgb: 167, 138, 221; }
#app .stage-sector-route-btn--ocean { --route-rgb: 75, 188, 238; }
#app .stage-sector-route-btn--magma { --route-rgb: 241, 110, 78; }
#app .stage-sector-route-btn--desert { --route-rgb: 216, 164, 95; }

#app .stage-sector-route-btn span {
  color: rgb(var(--route-rgb, 102, 220, 231));
  font: 900 12px/1 var(--fac-display);
}

#app .stage-sector-route-btn b {
  min-width: 0;
  color: #cbd7d9;
  font: 800 8px/1.35 var(--fac-body);
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

#app .stage-sector-route-btn.is-current {
  border-color: rgba(var(--route-rgb, 102, 220, 231), .72) !important;
  box-shadow: inset 0 -2px rgb(var(--route-rgb, 102, 220, 231)) !important;
}

#app .stage-sector-route-btn.is-cleared::after {
  content: "✓";
  position: absolute;
  right: 4px;
  top: 3px;
  color: rgb(var(--route-rgb, 102, 220, 231));
  font: 800 7px/1 var(--fac-display);
}

#app .stage-sector-route-btn:disabled {
  opacity: .34 !important;
  filter: grayscale(.7);
}

/* Biome card */
#app .stage-sector {
  --sector-accent: #66dce7;
  --sector-accent-rgb: 102, 220, 231;
  --sector-deep: #0a2530;
  --sector-hot: #c8dfe4;
  margin-bottom: 16px;
  padding: 0 8px 9px;
  overflow: hidden;
  scroll-margin-top: 12px;
  border-color: rgba(var(--sector-accent-rgb), .25) !important;
  border-left-color: var(--sector-accent) !important;
  background: linear-gradient(145deg, rgba(var(--sector-accent-rgb), .065), transparent 38%), rgba(4, 12, 17, .94) !important;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

#app .stage-sector--fracture { --sector-accent: #a78add; --sector-accent-rgb: 167, 138, 221; --sector-deep: #241a3b; --sector-hot: #d9c7ff; }
#app .stage-sector--ocean { --sector-accent: #4bbcee; --sector-accent-rgb: 75, 188, 238; --sector-deep: #0c3553; --sector-hot: #a9e7ff; }
#app .stage-sector--magma { --sector-accent: #f16e4e; --sector-accent-rgb: 241, 110, 78; --sector-deep: #421510; --sector-hot: #ffc37c; }
#app .stage-sector--desert { --sector-accent: #d8a45f; --sector-accent-rgb: 216, 164, 95; --sector-deep: #392716; --sector-hot: #ffe1a8; }

#app .stage-sector.is-current {
  border-color: rgba(var(--sector-accent-rgb), .5) !important;
  box-shadow: 0 0 0 1px rgba(var(--sector-accent-rgb), .08), 0 10px 24px rgba(0, 0, 0, .18);
}

#app .stage-sector.is-locked {
  --sector-accent: #59656a;
  --sector-accent-rgb: 89, 101, 106;
  --sector-deep: #111619;
  --sector-hot: #899397;
  opacity: .58;
}

#app .stage-sector::after {
  top: 0;
  right: 14px;
  width: 42px;
  background: var(--sector-hot);
}

#app .stage-sector-head {
  min-height: 54px;
  margin: 0;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
}

#app .stage-sector-head > div { min-width: 0; }

#app .stage-sector-head .stage-sector-code {
  min-width: 54px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

#app .stage-sector-head .stage-sector-code span { color: rgba(var(--sector-accent-rgb), .7); }
#app .stage-sector-head .stage-sector-code strong { color: var(--sector-accent); }

#app .stage-sector-head .stage-sector-copy {
  display: grid;
  gap: 4px;
}

#app .stage-sector-head .stage-sector-copy b {
  min-width: 0;
  color: #e0e9e9;
  font: 800 clamp(11px, 3.2vw, 14px)/1.15 var(--fac-body);
  letter-spacing: .04em;
}

#app .stage-sector-head .stage-sector-copy p {
  margin: 0;
  color: #75878c;
  font: 700 7px/1.2 var(--fac-display);
  letter-spacing: .05em;
}

#app .stage-sector-head > i {
  color: var(--sector-accent);
  font-size: 7px;
}

#app .stage-sector-landscape {
  position: relative;
  height: 58px;
  margin: 0 -8px 7px;
  overflow: hidden;
  border-block: 1px solid rgba(var(--sector-accent-rgb), .17);
  background:
    radial-gradient(circle at 18% 28%, rgba(var(--sector-accent-rgb), .52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, .35) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(var(--sector-accent-rgb), .09), var(--sector-deep));
}

#app .stage-sector-landscape::before,
#app .stage-sector-landscape::after,
#app .stage-sector-landscape i {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* orbit */
#app .stage-sector--orbit .stage-sector-landscape::before {
  right: 13%; top: -26px; width: 92px; height: 92px;
  border: 8px solid rgba(var(--sector-accent-rgb), .15); border-radius: 50%;
}
#app .stage-sector--orbit .stage-sector-landscape::after {
  left: 0; right: 0; bottom: 9px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sector-accent), transparent);
}
#app .stage-sector--orbit .stage-sector-landscape i { bottom: 9px; width: 18px; height: 14px; background: rgba(var(--sector-accent-rgb), .25); }
#app .stage-sector--orbit .stage-sector-landscape i:nth-child(1) { left: 18%; }
#app .stage-sector--orbit .stage-sector-landscape i:nth-child(2) { left: 27%; height: 24px; }
#app .stage-sector--orbit .stage-sector-landscape i:nth-child(3) { left: 61%; height: 19px; }

/* fracture */
#app .stage-sector--fracture .stage-sector-landscape::before {
  inset: 0;
  background: linear-gradient(122deg, transparent 28%, rgba(var(--sector-accent-rgb), .2) 29% 30%, transparent 31% 58%, rgba(var(--sector-accent-rgb), .16) 59% 60%, transparent 61%);
}
#app .stage-sector--fracture .stage-sector-landscape i { width: 38px; height: 48px; background: rgba(var(--sector-accent-rgb), .13); clip-path: polygon(48% 0, 100% 38%, 60% 100%, 0 75%); transform: rotate(22deg); }
#app .stage-sector--fracture .stage-sector-landscape i:nth-child(1) { left: 12%; top: 4px; }
#app .stage-sector--fracture .stage-sector-landscape i:nth-child(2) { right: 18%; top: -8px; transform: rotate(78deg) scale(.8); }
#app .stage-sector--fracture .stage-sector-landscape i:nth-child(3) { left: 48%; top: 18px; transform: rotate(-35deg) scale(.5); }

/* ocean */
#app .stage-sector--ocean .stage-sector-landscape::before {
  left: -5%; right: -5%; top: 28px; height: 36px;
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 15px, rgba(var(--sector-accent-rgb), .18) 16px 17px, transparent 18px 27px);
}
#app .stage-sector--ocean .stage-sector-landscape::after { right: 15%; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(174, 232, 255, .16); }

/* magma */
#app .stage-sector--magma .stage-sector-landscape::before {
  left: -5%; right: -5%; bottom: 0; height: 46px;
  background: linear-gradient(145deg, transparent 0 16%, rgba(30, 7, 5, .8) 17% 34%, transparent 35% 42%, rgba(25, 5, 4, .9) 43% 67%, transparent 68%);
}
#app .stage-sector--magma .stage-sector-landscape::after { left: 0; right: 0; bottom: 4px; height: 2px; background: linear-gradient(90deg, transparent, #ff7148 20% 38%, transparent 45% 57%, #ffb05f 68% 82%, transparent); box-shadow: 0 0 9px rgba(255, 90, 48, .45); }
#app .stage-sector--magma .stage-sector-landscape i { width: 3px; height: 3px; background: var(--sector-hot); }
#app .stage-sector--magma .stage-sector-landscape i:nth-child(1) { left: 20%; top: 13px; }
#app .stage-sector--magma .stage-sector-landscape i:nth-child(2) { left: 47%; top: 23px; }
#app .stage-sector--magma .stage-sector-landscape i:nth-child(3) { right: 19%; top: 9px; }

/* desert */
#app .stage-sector--desert .stage-sector-landscape::before {
  left: -10%; width: 72%; height: 48px; bottom: -31px; border-radius: 50% 50% 0 0; background: rgba(210, 153, 78, .2); box-shadow: 170px 7px 0 rgba(235, 186, 112, .13);
}
#app .stage-sector--desert .stage-sector-landscape::after { right: 13%; top: 8px; width: 25px; height: 25px; border-radius: 50%; background: rgba(255, 219, 151, .18); box-shadow: 0 0 16px rgba(255, 190, 94, .15); }

#app .stage-sector-description {
  margin: 0 1px 7px;
  color: #87979a;
  font: 600 9px/1.5 var(--fac-body);
}

#app .stage-sector-progress {
  position: relative;
  height: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .035);
}

#app .stage-sector-progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sector-progress, 0%);
  background: linear-gradient(90deg, rgba(var(--sector-accent-rgb), .38), rgba(var(--sector-accent-rgb), .08));
}

#app .stage-sector-progress > span {
  position: absolute;
  right: 4px;
  top: 50%;
  color: #829297;
  font: 700 6px/1 var(--fac-display);
  transform: translateY(-50%);
}

#app .stage-sector .stage-btn {
  border-color: rgba(var(--sector-accent-rgb), .24) !important;
  border-left-color: rgba(var(--sector-accent-rgb), .72) !important;
  background: linear-gradient(90deg, rgba(var(--sector-accent-rgb), .09), transparent 58%), #09151b !important;
}

#app .stage-sector .stage-btn:active { transform: scale(.985) !important; }
#app .stage-sector .stage-btn--boss { border-left-color: #d66058 !important; }

/* Mission dossier sector identity */
#app .stage-brief-sector {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 11px;
  margin-top: 11px;
  padding: 10px 12px 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--sector-accent-rgb), .34);
  border-left: 3px solid var(--sector-accent);
  background: linear-gradient(110deg, rgba(var(--sector-accent-rgb), .12), rgba(5, 13, 18, .9) 48%);
}

#app .stage-brief-sector::after {
  content: "";
  position: absolute;
  right: -19px;
  top: -28px;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(var(--sector-accent-rgb), .14);
  border-radius: 50%;
}

#app .stage-brief-sector > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--sector-accent);
  font: 900 8px/1.3 var(--fac-display);
  letter-spacing: .08em;
}

#app .stage-brief-sector > div { display: grid; gap: 3px; min-width: 0; }
#app .stage-brief-sector strong { color: #e3ecec; font: 800 13px/1.2 var(--fac-body); letter-spacing: .04em; }
#app .stage-brief-sector small { color: #73878d; font: 700 7px/1.25 var(--fac-display); letter-spacing: .06em; }
#app .stage-brief-sector p { grid-column: 1 / -1; margin: 2px 0 0; color: #8b9a9d; font: 600 9px/1.45 var(--fac-body); }

/* Sector 01 boss dossier: the mechanic is visible before deployment. */
#app .stage-brief-threat-card {
  position: relative;
  margin-top: 8px;
  padding: 9px 10px 8px 13px;
  overflow: hidden;
  border-left: 3px solid #f0aa64;
  background: linear-gradient(100deg, rgba(240, 170, 100, .13), rgba(6, 14, 24, .92) 58%);
  text-align: left;
}

#app .stage-brief-threat-card::after {
  content: "THREAT";
  position: absolute;
  top: 4px;
  right: 7px;
  color: rgba(240, 170, 100, .13);
  font: 900 16px/1 var(--fac-display);
  letter-spacing: .08em;
}

#app .stage-brief-threat-card span,
#app .stage-brief-threat-card strong,
#app .stage-brief-threat-card p { position: relative; z-index: 1; display: block; }
#app .stage-brief-threat-card span { color: #e9a967; font: 800 7px/1.2 var(--fac-display); letter-spacing: .12em; }
#app .stage-brief-threat-card strong { margin-top: 3px; color: #f4f0e9; font: 800 12px/1.25 var(--fac-body); }
#app .stage-brief-threat-card p { margin: 4px 0 0; color: #9eacb2; font: 600 9px/1.42 var(--fac-body); }

#game-screen .rem-battle-sector-code[data-sector-theme="fracture"] { color: #cdb5ff; }
#game-screen .rem-battle-sector-code[data-sector-theme="ocean"] { color: #8edcff; }
#game-screen .rem-battle-sector-code[data-sector-theme="magma"] { color: #ffad78; }
#game-screen .rem-battle-sector-code[data-sector-theme="desert"] { color: #f1c98d; }

@media (max-width: 350px) {
  #app .stage-sector-head { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 7px; }
  #app .stage-sector-head .stage-sector-copy b { font-size: 11px; }
  #app .stage-sector-description { font-size: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  #app .stage-sector-route { gap: 5px; }
  #app .stage-sector-route-btn { flex-basis: 112px; }
  #app .stage-sector-landscape { height: 44px; }
  #app .stage-sector-description { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #app .facility-screen--stage .facility-backdrop,
  #app .facility-screen--brief .facility-backdrop {
    transition: none;
  }
}