/* Stella Ball palette: an observatory night with starlight reserved for meaning. */
:root {
  background: #130421;
  color: #edf1e9;
}
body {
  background: radial-gradient(
    ellipse 90% 55% at 50% -12%,
    #421f6c 0%,
    #2a0a4a 39%,
    #130421 78%
  );
}
.tag,
header .tag {
  color: #dfbb70;
}
h1 {
  color: #f7efd9;
  text-shadow:
    0 3px 0 #291043,
    0 0 24px #d4a04d44;
}
header p {
  color: #c8c3d6;
}
header button,
.overlay button {
  border-color: #d8b263;
  background: linear-gradient(180deg, #bf773d, #7e3f29);
  box-shadow:
    0 3px 0 #3d221d,
    0 0 0 1px #edc97955 inset;
}
.overlay button:hover,
header button:hover {
  background: linear-gradient(180deg, #d18a49, #91472c);
}
.stage {
  border-color: #b79555;
  background: #1a052c;
  box-shadow:
    0 28px 88px #07010c99,
    0 0 0 1px #cfb36a38 inset;
}
.hud-card,
.boss-panel {
  border-color: #665184;
  background: #150423f2;
  box-shadow:
    0 3px 0 #06010bbb,
    0 0 18px #0008;
}
.hud-label {
  color: #c3bed2;
}
.hud-label b,
.status-line b {
  color: #f2cf7d;
}
.status-line {
  color: #d6d2e1;
}
.phase {
  color: #d9c184;
}
.boss-name {
  color: #edf0df;
}
.meter {
  border-color: #493069;
  background: #240d3c;
}
.meter.hp i {
  background: linear-gradient(90deg, #b34f48, #dd9852);
  box-shadow: 0 0 12px #cb694dcc;
}
.combo-readout {
  color: #c5bdd7;
}
.tip {
  border-color: #6c5a8a;
  background: #160524e8;
  color: #e6eee9;
  box-shadow: 0 2px 0 #06010c99;
}
.tip b {
  color: #f4cc78;
}
.toast {
  border-color: #d0a95d;
  background: #20122ef4;
  color: #fff0c7;
}
.impact-flash {
  background: radial-gradient(
    circle at 55% 44%,
    #fff4c2aa 0%,
    #d87b4b55 24%,
    transparent 58%
  );
}
.overlay {
  background: linear-gradient(135deg, #12041ef7, #21073af5);
}
.overlay h2 {
  color: #f6edcf;
  text-shadow: 0 2px 0 #220b3b;
}
.overlay p {
  color: #dbd7e5;
}
.choice-card {
  border-color: #634e7d;
  background: #210937;
  color: #e8f0ea;
  box-shadow: 0 2px 0 #06010c88;
}
.choice-card:hover {
  border-color: #edc66d;
  background: #2e124b;
  box-shadow: 0 5px 16px #0008;
}
.choice-card small {
  color: #cdc7da;
}
.choice-card strong {
  color: #f4edd8;
}
.deployment-map {
  border-color: #73608c;
  background: radial-gradient(circle at 68% 58%, #3a185e, #180529 70%);
}
.deployment-map:before {
  background-image:
    linear-gradient(#7d6a9e33 1px, transparent 1px),
    linear-gradient(90deg, #7d6a9e33 1px, transparent 1px);
}
.deployment-map:after {
  color: #d5c58c;
}
.slot-card {
  border-color: #84769d;
  background: #180528f2;
}
.slot-card small {
  color: #d9d5e3;
}
.slot-card.drop-ready {
  border-color: #f1cb70;
  background: #432c62;
  box-shadow: 0 0 0 3px #e0b55a55;
}
.map-boss {
  color: #df7e62;
}
.runes div {
  border-color: #573f76;
  background: #1b062e;
  color: #dedae8;
}
.runes b {
  color: #f2cb79;
}
.roster-unit.active {
  border-color: var(--unit);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--unit) 34%, #270b46) 0%,
    color-mix(in srgb, var(--unit) 12%, #1a062f) 100%
  );
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--unit) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--unit) 42%, transparent);
  color: #fff;
}
.roster-unit.active .portrait {
  filter: drop-shadow(0 3px 0 #11041e) drop-shadow(0 0 7px var(--unit));
}
.roster-unit.active {
  opacity: 1;
  filter: none;
  border-color: #f2c65f;
  background: linear-gradient(145deg, #4d3b18 0%, #243229 52%, #1c0634 100%);
  box-shadow:
    0 0 0 2px #f2c65faa,
    0 0 19px #e5ad485c,
    inset 0 0 17px #ffd87626;
  color: #fff8df;
}
.roster-unit.active .portrait {
  filter: drop-shadow(0 3px 0 #11041e) drop-shadow(0 0 8px #ffd66e);
}
.result-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  width: min(430px, 100%);
  margin: 14px auto;
  padding: 10px;
  border: 1px solid #73618c;
  background: #170527;
  color: #e8efea;
  text-align: left;
}
.result-medal {
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.7);
}
.result-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.result-metric {
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  line-height: 1.2;
}
.result-metric img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.68);
}
.result-metric b {
  display: block;
  color: #f1cb79;
  font-size: 11px;
}

.title-mode header,
.title-mode .runes,
.meta-mode header,
.meta-mode .runes {
  display: none;
}
.overlay.title-scene,
.overlay.meta-scene {
  padding: 0;
  background: #12041ef4;
  place-content: stretch;
}
/* 옛 키아트(video-title-card.png)에는 「PRISM BREAKERS」가 픽셀 글씨로 크게
   박혀 있다. stella-ball-theme.css가 .title-sequence:before만 덮어 놓아서
   이 컨테이너는 그대로 옛 제목을 깔고 있었고, blend-mode: screen이라 오히려
   글씨가 더 밝게 떴다. 이 화면의 배경은 .title-sequence가 가지고 있으므로
   여기서는 바탕색만 남긴다. */
.title-scene {
  background: #12041e !important;
}
.title-wordmark {
  width: min(440px, 80%);
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.68) brightness(1.08);
  margin-bottom: 8px;
}
.title-content button img,
.meta-launch img {
  width: 21px;
  height: 21px;
  vertical-align: middle;
  margin-right: 7px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.7);
}
.meta-hub {
  width: min(700px, 100%);
  min-height: 100%;
  margin: auto;
  padding: 26px 22px;
  text-align: left;
}
.meta-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #5d487c;
}
.meta-brand img {
  width: 230px;
  max-width: 62%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(145deg) saturate(0.68) brightness(1.08);
}
.meta-profile {
  color: #cbc5da;
  font:
    700 10px ui-monospace,
    monospace;
  text-align: right;
}
.meta-profile b {
  display: block;
  color: #f2cb79;
  font-size: 12px;
}
.meta-launch {
  padding: 10px 13px !important;
  white-space: nowrap;
}
.meta-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 8px;
  color: #d9c182;
  font:
    700 11px ui-monospace,
    monospace;
  letter-spacing: 0.09em;
}
.overlay-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.overlay-actions button {
  min-width: 140px;
}
@media (max-width: 680px) {
  .meta-hub {
    padding: 18px 14px;
  }
  .meta-brand img {
    width: 190px;
  }
  .meta-daily .meta-launch {
    grid-column: 1 / -1;
    width: 100%;
  }
  .title-wordmark {
    width: min(360px, 90%);
  }
}
.outcome-cut {
  width: min(560px, 100%);
  padding: 46px 24px 28px;
  background-color: #12041fe8;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border: 1px solid #75648c;
  box-shadow: 0 12px 32px #0009;
}
.outcome-cut.win {
  background-image: url("../assets/library/cutin/win-backplate.png");
}
.outcome-cut.fail {
  background-image: url("../assets/library/cutin/fail-backplate.png");
}
.outcome-cut .tag {
  margin-top: 34px;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  min-height: 100dvh;
}
main {
  width: min(720px, calc(100vw - 32px), calc(80vh - 70px));
  width: min(720px, calc(100vw - 32px), calc(80dvh - 70px));
  padding: 8px 0;
}
header,
.runes {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.stage {
  width: 100%;
  margin: 0 auto;
  border-radius: 18px;
}
.overlay {
  overflow: auto;
}
.hud {
  inset: 12px 14px auto;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 8px;
}
.hud > * {
  min-width: 0;
}
.hud-card,
.boss-panel {
  padding: 8px 9px;
  min-height: 54px;
  font-size: 10px;
}
.boss-panel {
  min-height: 60px;
}
.hud-label,
.status-line,
.boss-name {
  gap: 6px;
}
.hud-label span,
.status-line span,
.boss-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-label b,
.status-line b,
.boss-name b {
  flex: 0 0 auto;
  white-space: nowrap;
}
.shot-dots {
  gap: 3px;
}
.shot-dots .shot-icon {
  width: 16px;
  height: 16px;
}
.tip {
  display: none;
}
@media (max-width: 680px) {
  main {
    width: min(calc(100vw - 12px), calc(80vh - 46px));
    width: min(calc(100vw - 12px), calc(80dvh - 46px));
    padding: 0;
  }
  .stage {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .hud {
    inset: 7px;
  }
  .hud-card,
  .boss-panel {
    font-size: 9px;
  }
}

.menu-mode header,
.menu-mode .runes,
.game-mode .runes {
  display: none;
}
/* A short landscape window used to make the whole observatory column narrow
   through the shared 80dvh width cap. The inner screens then kept their wide
   layouts because their media queries saw a 920px viewport, not the resulting
   ~340px column. Meta screens do not need the 720:900 combat canvas contract,
   so give them the available landscape rectangle and let their overlay own
   vertical scrolling. */
@media (max-height: 620px) and (min-width: 681px) {
  .menu-mode main,
  .meta-mode main {
    width: min(720px, calc(100dvw - 24px));
    height: calc(100dvh - 12px);
    padding: 0;
  }
  .menu-mode .stage,
  .meta-mode .stage {
    height: calc(100dvh - 12px);
    min-height: 0;
  }
  .menu-mode canvas,
  .meta-mode canvas {
    display: none;
  }
}
/* 넘치면 잘리는 것이 아니라 닿을 수 있어야 한다. `hidden`이던 이 규칙은
   미디어 쿼리 밖 전역이라, 좁은 화면용으로 앞쪽(417행 블록)에 넣어 둔
   `.overlay { overflow: auto }`를 같은 특정도로 덮어 무력화하고 있었다.
   그래서 스테이지 선택의 내용 722px이 상자 635px에 갇혀 「튜토리얼 다시보기 ·
   무한 훈련장 · 뒤로」 세 버튼이 스크롤도 못 하고 사라졌다 — 판을 떠날 방법이
   없었다는 뜻이다. 내용이 들어맞을 때는 auto가 막대를 만들지 않으므로
   타이틀·편성·전투 화면의 모습은 그대로다. */
.overlay {
  overflow: auto;
}
.meta-hub {
  padding: 16px 18px;
}
.meta-brand {
  padding-bottom: 9px;
}
.meta-section-title {
  margin: 10px 0 6px;
}
@media (max-width: 680px) {
  .meta-hub {
    padding: 12px;
  }
}

.roster-scene,
.deployment-scene,
.draft-scene {
  padding: 12px 16px;
  place-content: center;
}
.roster-scene h2,
.deployment-scene h2,
.draft-scene h2 {
  margin: 3px;
  font-size: 23px;
}
.roster-scene > p,
.deployment-scene > p,
.draft-scene > p {
  margin: 3px auto;
  font-size: 12px;
  line-height: 1.4;
}
.roster-scene .choice-grid {
  margin: 6px auto !important;
}
.roster-scene .roster-unit .portrait {
  width: 34px;
  height: 34px;
}
.roster-scene .roster-detail .portrait {
  width: 40px;
  height: 40px;
}
.roster-scene .overlay-actions,
.deployment-scene .overlay-actions,
.draft-scene .overlay-actions {
  margin-top: 6px;
}
.roster-scene .overlay-actions button,
.deployment-scene .overlay-actions button,
.draft-scene .overlay-actions button {
  min-width: 104px;
  padding: 7px 12px;
}
.draft-scene .choice-card {
  min-height: 100px;
  padding: 9px;
}
.deploy-unit.dragging {
  opacity: 0.38;
  transform: scale(0.94);
}
.deploy-unit .portrait {
  width: 62px;
  height: 62px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 #0e0318);
}
.deployment-scene .deployment-map {
  height: 250px;
  margin: 0 auto;
  border: 1px solid #74648e;
  border-radius: 12px;
  background: #18052b;
  overflow: hidden;
}
.deployment-scene .deployment-map:before {
  background-image:
    linear-gradient(#7d6a9e26 1px, transparent 1px),
    linear-gradient(90deg, #7d6a9e26 1px, transparent 1px);
  background-size: 26px 26px;
}
.deployment-scene .deployment-map:after {
  display: none;
}
.slot-card {
  display: grid;
  place-items: center;
  width: 76px;
  min-height: 76px;
  padding: 3px;
  border: 2px dashed var(--unit);
  border-radius: 50%;
  background: #1d0736de;
  box-shadow:
    0 0 0 5px #11041e,
    0 0 16px color-mix(in srgb, var(--unit) 34%, transparent);
  transform: translate(-50%, -50%);
}
.slot-card .portrait {
  width: 66px;
  height: 66px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 #0e0318);
}
.slot-card .slot-index {
  position: absolute;
  top: -10px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--unit);
  border-radius: 50%;
  background: #130421;
  color: #f7efd5;
  font:
    700 10px ui-monospace,
    monospace;
  transform: translateX(-50%);
}
.slot-card.drop-ready {
  background: #2b0e53;
  box-shadow:
    0 0 0 5px #11041e,
    0 0 0 3px #f1cb70,
    0 0 22px #e0b55a88;
}
.map-boss {
  top: 24px;
  right: auto;
  bottom: auto;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid #de7d62;
  border-radius: 50%;
  background: #2a272b;
  color: #ffcc87;
  font-size: 19px;
  transform: translateX(-50%);
  box-shadow: 0 0 16px #df7e6255;
}
.deployment-scene .overlay-actions {
  margin-top: 14px;
}
@media (max-width: 680px) {
  .roster-scene,
  .deployment-scene,
  .draft-scene {
    padding: 8px 10px;
  }
  .roster-scene .roster-unit .portrait {
    width: 30px;
    height: 30px;
  }
  .deployment-scene .deployment-map {
    height: 220px;
  }
  .deploy-unit .portrait {
    width: 55px;
    height: 55px;
  }
  .draft-scene .choice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .draft-scene .choice-card {
    min-height: 88px;
    padding: 6px;
  }
  .draft-scene .choice-card small {
    font-size: 9px;
  }
}
.map-node:hover,
.map-node.active {
  transform: translateY(-3px);
  border-color: #f0c66e;
  box-shadow:
    0 10px 22px #000b,
    0 0 0 2px #f0c66e55;
}
.map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #b0a7c5;
  font-size: 10px;
}
.map-foot button {
  min-width: 104px;
}
.game-mode .hud-card:last-child .status-line:first-of-type {
  display: none;
}
.stage-select-card:hover,
.stage-select-card.active {
  border-color: #f0c66e;
  transform: translateY(-2px);
  box-shadow:
    0 9px 20px #000b,
    0 0 0 2px #f0c66e55;
}