/* Title is a small cold-open: rift, threat, party and invitation arrive in order. */
.title-scene {
  isolation: isolate;
}
.title-sequence {
  position: relative;
  display: grid;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 50% 31%,
    #3c166e88 0%,
    #160526d9 42%,
    #09020eef 88%
  );
}
.title-sequence:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, #0e03198c 0%, transparent 32%, #09020eea 92%),
    url("../assets/library/brand/video-title-card.png") center/cover;
  opacity: 0.66;
  animation: titleBackdrop 8s ease-in-out infinite;
}
.title-sequence:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    #c6acf508 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: screen;
}
.title-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.title-stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #e8e1fb;
  box-shadow: 0 0 10px #9b6ded;
  animation: titleStar 2.4s ease-in-out infinite;
  animation-delay: var(--d);
}
.title-orb {
  position: absolute;
  z-index: 3;
  top: 53%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 11px #fff1a9) drop-shadow(0 0 24px #824ee2);
  animation:
    titleOrb 0.7s cubic-bezier(0.12, 0.83, 0.26, 1.15) 0.52s both,
    titleOrbPulse 1.2s ease-in-out 1.2s infinite;
}
.title-copy {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 100%;
  width: min(520px, 100%);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px 37px;
  text-align: center;
}
.title-wordmark {
  width: min(440px, 88%);
  margin: 0 0 9px;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.7) brightness(1.13)
    drop-shadow(0 5px 0 #10031c) drop-shadow(0 0 17px #8a58e177);
  opacity: 0;
  transform: translateY(18px) scale(0.92);
  animation: titleLogo 0.6s cubic-bezier(0.18, 0.88, 0.23, 1.22) 0.67s forwards;
}
.title-kicker {
  margin: 0 0 7px;
  color: #b9a5e1;
  font:
    700 10px ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  opacity: 0;
  animation: titleFade 0.35s ease 0.9s forwards;
}
.title-copy p {
  max-width: 390px;
  margin: 0 0 18px;
  color: #e3dfef;
  text-shadow: 0 2px 0 #0e0318;
  font-size: 12px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(8px);
  animation: titleFadeUp 0.42s ease 0.98s forwards;
}
.title-enter {
  position: relative;
  min-width: 244px !important;
  border: 2px solid #f4d576 !important;
  background: linear-gradient(#f1ca62, #ba7630) !important;
  color: #281807 !important;
  font-weight: 900 !important;
  box-shadow:
    0 4px 0 #5c3516,
    0 0 0 3px #f3d87518 !important;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  animation: titleEnter 0.38s cubic-bezier(0.18, 0.9, 0.22, 1.2) 1.14s forwards;
}
.title-enter:before {
  content: "";
  position: absolute;
  inset: 3px;
  background: linear-gradient(90deg, transparent, #fff6be77, transparent);
  transform: translateX(-120%);
  animation: titleButtonShine 2.8s ease 1.7s infinite;
}
.title-enter.ready {
  pointer-events: auto;
}
.title-enter:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}
/* 이 의사요소는 inset:0의 전체화면 배경이다. brightness를 애니메이션하면
   화면 전체가 매 프레임 픽셀 단위로 다시 계산된다 — 8초 주기로 영원히.
   느린 줌만 남겨도 「숨쉰다」는 읽힘은 유지되고, transform은 합성기에서
   처리되므로 메인 스레드 비용이 없다. */
@keyframes titleBackdrop {
  50% {
    transform: scale(1.06);
  }
}
@keyframes titleStar {
  50% {
    transform: scale(2);
    opacity: 0.25;
  }
}
@keyframes titleOrb {
  from {
    opacity: 0;
    transform: translate(-50%, 80px) scale(0.2);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes titleOrbPulse {
  50% {
    filter: drop-shadow(0 0 18px #fff5b7) drop-shadow(0 0 32px #824ee2);
    transform: translate(-50%, -50%) scale(1.16);
  }
}
@keyframes titleLogo {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes titleFade {
  to {
    opacity: 1;
  }
}
@keyframes titleFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes titleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes titleButtonShine {
  28%,
  100% {
    transform: translateX(120%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .title-sequence *,
  .title-sequence:before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .title-enter {
    pointer-events: auto;
  }
}
.title-enter img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  vertical-align: middle;
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.6) brightness(0.55);
}

/* Story layer only: the board and all physical constants stay untouched. */
.story-intro-scene {
  padding: 0 !important;
  place-content: stretch !important;
  background: #09020ef0 !important;
  cursor: pointer;
}
.story-intro-card {
  position: relative;
  display: flex;
  min-height: 100%;
  width: min(620px, 100%);
  margin: auto;
  padding: 46px 28px;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  overflow: hidden;
  /* 여기에도 옛 키아트가 깔려 있었다 — 프롤로그 컷신 카드 뒤로 「PRISM
     BREAKERS」가 비쳤다. 관측소 그라디언트로 바꾼다. */
  background:
    linear-gradient(90deg, #0e0318e8 0%, #12041ed9 62%, #12041e96),
    radial-gradient(
      ellipse at 68% 26%,
      #2b1b3f99 0%,
      #170a24ee 48%,
      #0e0616 88%
    );
}
.story-intro-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 28%, #f7db8e32, transparent 22%),
    repeating-linear-gradient(0deg, #dfffe708 0 1px, transparent 1px 4px);
}
.story-intro-card > * {
  position: relative;
  z-index: 1;
}
.story-intro-kicker {
  color: #e9c776;
  font:
    700 11px ui-monospace,
    monospace;
  letter-spacing: 0.16em;
}
.story-intro-card h2 {
  margin: 8px 0 22px;
  color: #fff2c6;
  font-size: 30px;
}
.story-intro-lines {
  display: grid;
  gap: 13px;
}
.story-intro-lines p {
  max-width: 470px;
  margin: 0;
  color: #e1ece5;
  font-size: 14px;
  line-height: 1.8;
}
.story-intro-skip {
  margin-top: 36px;
  color: #afa4c7;
  font:
    700 10px ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.survivor-hub {
  position: relative;
  overflow: hidden;
}
.hub-night-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hub-night-sky i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe49a;
  box-shadow:
    0 0 7px #ffd36d,
    0 0 15px #ffe18b88;
  opacity: 0.88;
}
.hub-night-sky i:nth-child(3n) {
  width: 2px;
  height: 2px;
}
.hub-night-sky i:nth-child(5n) {
  animation: hubStarPulse 2.4s ease-in-out infinite;
}
.survivor-hub > *:not(.hub-night-sky) {
  position: relative;
  z-index: 1;
}
@keyframes hubStarPulse {
  50% {
    opacity: 0.34;
    transform: scale(1.55);
  }
}
@media (max-width: 680px) {
  .story-intro-card {
    padding: 32px 22px;
  }
  .story-intro-card h2 {
    font-size: 25px;
  }
  .story-intro-lines p {
    font-size: 12px;
  }
  .story-intro-skip {
    margin-top: 25px;
  }
}

/* Observatory art direction: one quiet night palette, with starlight reserved for meaning. */
:root {
  --night-0: #0f0315;
  --night-1: #20062d;
  --night-2: #330947;
  --void: #27265b;
  --moon: #ebd1f9;
  --star: #ffe6a5;
  --gold: #d8ae62;
  --mist: #c09bd4;
  --line: #7b5092;
}
body {
  color: var(--moon);
  background: radial-gradient(
    ellipse at 50% -15%,
    #4c0f6a 0%,
    #20062d 43%,
    #0f0315 82%
  );
}
body:before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, #fff2ba 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 13%, #ebd1f9 0 1px, transparent 1.7px),
    radial-gradient(circle at 64% 71%, #fff2ba 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 28% 82%, #ebd1f9 0 0.8px, transparent 1.4px);
  background-size:
    173px 191px,
    229px 257px,
    149px 167px,
    281px 313px;
  opacity: 0.44;
}
header {
  border-color: #794e91 !important;
  background: linear-gradient(100deg, #1b0526ef, #300843ef) !important;
  box-shadow:
    0 8px 24px #09020c99,
    0 0 0 1px #d8ae6222;
}
header .tag,
.hud-label span,
.status-line span,
.boss-name span,
.blaze-score-label {
  color: #cca7e0 !important;
}
header h1,
.boss-name b {
  color: #fff1c5 !important;
  text-shadow: 0 0 14px #d8ae6255;
}
header p,
.status-line {
  color: #dcc1eb !important;
}
button {
  border-color: #9566ae !important;
  background: linear-gradient(180deg, #430c5e, #2c083f) !important;
  color: #f8effd !important;
  box-shadow: 0 3px 0 #0a020e !important;
}
button:hover {
  border-color: #ffe19a !important;
  background: linear-gradient(180deg, #5f1883, #3e0b57) !important;
  box-shadow:
    0 0 0 1px #ffe19a33,
    0 5px 14px #09020c99 !important;
}
.stage {
  border-color: #9362ae !important;
  box-shadow:
    0 0 0 1px #d9b26522,
    0 18px 42px #0a020dbb !important;
}
.stage:after {
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 48%,
    #08010b66 100%
  ) !important;
}
.game-mode .hud-card,
.game-mode .boss-panel,
.game-mode .boss-banner {
  border-color: #8556a0 !important;
  background: linear-gradient(145deg, #260736f4, #1e052bf4) !important;
  box-shadow:
    0 3px 0 #08010cbb,
    0 0 20px #0009 !important;
}
.boss-banner.impact-heavy {
  border-color: #fff0bd !important;
  background: #292750f3 !important;
  box-shadow:
    0 0 0 1px #fff4c8,
    0 0 27px #dba84d88 !important;
}
.meter {
  background: #16041f !important;
}
.meter i {
  background: linear-gradient(90deg, #c9954d, #ffe7a8 56%, #ffffff) !important;
  box-shadow: 0 0 9px #ffd98199;
}
.shot-dots {
  color: #f3d58c !important;
  text-shadow: 0 0 9px #e3b35d88;
}
.tip {
  border-color: #83539e !important;
  background: #190424dd !important;
  color: #ebd1f9 !important;
}
.blaze-card {
  border-color: #9365ac !important;
  background: linear-gradient(
    135deg,
    #2b083df5,
    #450c5eee 68%,
    #28235af0
  ) !important;
  box-shadow:
    0 3px 0 #08010cbb,
    0 0 22px #16041ebb !important;
  color: #f1e0fb !important;
}
.blaze-card:before {
  right: -10px;
  bottom: -11px;
  background:
    radial-gradient(
      circle at 50% 50%,
      #fff9d5 0 5%,
      #ffe39a 8% 13%,
      #d69bf355 19% 28%,
      transparent 46%
    ),
    radial-gradient(circle at 28% 70%, #ffe8a8 0 3%, transparent 8%),
    radial-gradient(circle at 73% 35%, #efdbfa 0 2%, transparent 7%);
  filter: blur(0.3px);
}
.blaze-card:after {
  background: linear-gradient(
    90deg,
    transparent 30%,
    #ffe9ad18 70%,
    #e1b7f624
  ) !important;
}
.blaze-score-label {
  color: #d8b6eb !important;
}
.blaze-card b {
  color: #fff4c6 !important;
  text-shadow:
    2px 2px 0 #190422,
    0 0 11px #e1b96588 !important;
}
.blaze-card small {
  border-color: #8a5ea355 !important;
  color: #dbbfec !important;
}
.blaze-card[data-heat="1"],
.blaze-card[data-heat="2"],
.blaze-card[data-heat="3"] {
  border-color: #f0cf78 !important;
  background: linear-gradient(
    135deg,
    #350b47f5,
    #33285df0 68%,
    #514181ec
  ) !important;
}
.blaze-card[data-heat="1"] b,
.blaze-card[data-heat="2"] b,
.blaze-card[data-heat="3"] b {
  text-shadow:
    2px 2px 0 #14112c,
    0 0 15px #ffd478,
    0 0 31px #9e9eff !important;
}
.overlay,
.meta-scene,
.stage-map-scene,
.stage-select-scene,
.tutorial-scene {
  background: #0f0315f2 !important;
}
.survivor-hub,
.meta-hub,
.world-map,
.stage-select,
.tutorial-shell {
  background: linear-gradient(155deg, #260735e8, #190424e8) !important;
}
.survivor-hub:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 12%, #bb79d92b, transparent 22%),
    linear-gradient(120deg, transparent 47%, #ffe9ac08 47.2%, transparent 47.5%);
  opacity: 0.9;
}
.hub-topbar {
  border-color: #8556a0 !important;
}
.hub-player,
.hub-mission p,
.hub-record,
.map-foot,
.stage-select-foot {
  color: #dec3ed !important;
}
.hub-player b,
.hub-mission h2,
.stage-select-card b,
.map-node b {
  color: #fff0c6 !important;
}
.hub-player small,
.hub-mission small,
.hub-resource,
.hub-quick small,
.map-node small,
.stage-select-card small,
.stage-select-heading p {
  color: #cba5e0 !important;
}
.hub-avatar,
.hub-resource,
.hub-party-row,
.hub-quick {
  border-color: #8758a2 !important;
  background: #2f0842 !important;
}
.hub-avatar {
  color: #ffe7a8 !important;
  box-shadow:
    0 3px 0 #0b020f,
    0 0 14px #dcb96944 !important;
}
.hub-resource b {
  color: #ffe0a0 !important;
}
.hub-mission {
  border-color: #d7ad61 !important;
  background-color: #310844 !important;
  background-image:
    linear-gradient(90deg, #190424ec, #2f0842d9 52%, #28245c70),
    var(--stage-art) !important;
  box-shadow:
    0 9px 24px #0a020dbb,
    0 0 0 1px #ffe3a51a !important;
}
.hub-mission:after {
  border-color: #f7dd9a24 !important;
}
.hub-start,
.title-enter {
  border-color: #ffe4a0 !important;
  background: linear-gradient(#f3d681, #bd8641) !important;
  color: #1b1430 !important;
  box-shadow:
    0 4px 0 #5b3e25,
    0 0 0 3px #f7dd9a1a !important;
}
.hub-party-label {
  color: #ffe0a1 !important;
}
.hub-party-slot {
  border-color: #915fae !important;
  background: #330949 !important;
}
.hub-party-slot.empty {
  color: #b088c6 !important;
}
.hub-quick:hover {
  border-color: #ffe0a0 !important;
  background: #460c65 !important;
}
.hub-quick img,
.map-node img,
.tutorial-visual img {
  filter: drop-shadow(0 0 7px #ffe09a88) !important;
}
.hub-record {
  border-left-color: #e0b45f !important;
  background: #1c0528 !important;
}
.map-node:hover,
.map-node.active,
.stage-select-card:hover,
.stage-select-card.active {
  border-color: #ffe2a0 !important;
  box-shadow:
    0 10px 22px #000b,
    0 0 0 2px #ffe2a044 !important;
}
.roster-shell,
.roster-detail,
.deployment-map,
.draft-scene .choice-card,
.tutorial-card,
.help-panel {
  border-color: #8758a2 !important;
  background: linear-gradient(145deg, #2f0842, #1c0527) !important;
  box-shadow: 0 9px 24px #0a020dbb !important;
}
.roster-unit.selected,
.party-chip.active,
.deploy-unit.selected {
  border-color: #ffe0a0 !important;
  background: #292654 !important;
  box-shadow:
    0 0 0 1px #ffe0a044,
    0 0 15px #e7bd6555 !important;
}
.tutorial-visual {
  border-color: #8b5ba6 !important;
  background: radial-gradient(circle, #521c6c, #1f052c 68%) !important;
}
.tutorial-progress i {
  background: #50186e !important;
}
.tutorial-progress i.active {
  background: #f0ca73 !important;
  box-shadow: 0 0 8px #f0ca7388 !important;
}
.title-sequence {
  background: radial-gradient(
    ellipse at 50% 28%,
    #35357b88,
    #2e0840de 45%,
    #0f0315f2 88%
  ) !important;
}
.title-sequence:before {
  background:
    linear-gradient(180deg, #16041e92, transparent 31%, #0a020eea 92%),
    url("../assets/library/brand/video-title-card.png") center/cover !important;
  filter: hue-rotate(18deg) saturate(0.7) brightness(0.78) !important;
}
.title-sequence:after {
  background: repeating-linear-gradient(
    0deg,
    #f1e0fb07 0 1px,
    transparent 1px 4px
  ) !important;
}
.title-stars i {
  background: #fff2be !important;
  box-shadow: 0 0 10px #ffe4a4 !important;
}
.title-orb {
  filter: drop-shadow(0 0 11px #fff1a9) drop-shadow(0 0 24px #d596f2) !important;
}
.title-wordmark {
  filter: saturate(0.72) brightness(1.18) drop-shadow(0 5px 0 #17041f)
    drop-shadow(0 0 17px #deaff588) !important;
}
.title-kicker {
  color: #e4c4f5 !important;
}
.title-copy p {
  color: #f3e3fc !important;
  text-shadow: 0 2px 0 #060716 !important;
}
.story-intro-scene {
  background: #040512f3 !important;
}
.story-intro-card {
  background:
    linear-gradient(90deg, #15041cec, #2c083ddf 62%, #3a0a4f99),
    radial-gradient(
      ellipse at 68% 26%,
      #581c7999 0%,
      #310845ee 48%,
      #16041e 88%
    ) !important;
}
.story-intro-card:before {
  background:
    radial-gradient(circle at 74% 28%, #ffe8a13b, transparent 22%),
    repeating-linear-gradient(0deg, #f1e0fb07 0 1px, transparent 1px 4px) !important;
}
.story-intro-kicker {
  color: #f2d184 !important;
}
.story-intro-card h2 {
  color: #fff3c7 !important;
}
.story-intro-lines p {
  color: #f1dffb !important;
}
.story-intro-skip {
  color: #d0abe5 !important;
}
.hub-night-sky i {
  background: #fff0b7 !important;
  box-shadow:
    0 0 7px #e5bd62,
    0 0 15px #ffe8a188 !important;
}