/* ============================================================
   시각 업그레이드 시안 — 스타일 절반 (VISUAL_UPGRADE §5-1·§6-4·§6-5)
   stella-ball-dawn.css «뒤»에 로드한다. 전부 표현 전용.
   ============================================================ */

/* ---- §6-4 픽셀 슬라이더: 네이티브 크롬 제거 (그림은 upgrade.js가 굽는다) */
input[type="range"][data-pxr] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 50%;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 #04080a);
}
input[type="range"][data-pxr]::-webkit-slider-runnable-track {
  background: transparent;
  height: 18px;
}
input[type="range"][data-pxr]::-moz-range-track {
  background: transparent;
  height: 18px;
}

/* ---- §5-1 표 프레임: 미사용 library/ui/panel-frame.png (256×256, 격자 64)
        슬라이스 64px 를 32px 로 = 셀 2px 정수. 표가 패널 «위»에 얹힌다. */
.rank-table,
.codex-table {
  border: 24px solid transparent;
  border-image: url("../assets/library/ui/panel-frame.png") 64 fill / 24px
    stretch;
  image-rendering: pixelated;
  border-collapse: separate !important;
  border-spacing: 0;
}
/* 행 구분 1px 헤어라인 → 2px 하드 라인, 픽셀 규칙의 「하드 섀도」와 같은 색군 */
.rank-table th,
.rank-table td,
.codex-table th,
.codex-table td {
  border-bottom: 2px solid #241839 !important;
}
/* §6-3: 도감표 th 8px 는 10px 하한 위반 → 10px */
.codex-table th {
  font-size: 10px !important;
  letter-spacing: 0.08em;
}
.codex-table td {
  font-size: 11px !important;
}

/* ---- §5-1 HP 미터: border-radius 999px(polish.css:46) → 픽셀 프레임 */
.meter.hp {
  border-radius: 0 !important;
  height: 12px !important;
  border: 4px solid transparent;
  border-image: url("../assets/library/ui/hpbar-frame.png") 16 / 4px stretch;
  image-rendering: pixelated;
  background: #140a20 !important;
}
.meter.hp i {
  border-radius: 0 !important;
  background: linear-gradient(
    180deg,
    #ffe4bc 0 3px,
    #f2a262 3px 6px,
    #d17a44 6px 9px,
    #ab5c32 9px 12px
  ) !important;
  image-rendering: pixelated;
}

/* ---- §6-5 .tip: display:none(interface.css:510) → 판 아래 안내 줄 복원.
        aria-live 가 다시 접근성 트리에 들어간다.

        2026-08-23: 전투 화면으로 한정한다. `#tip` 은 `<section class="stage">`
        안, 판 아래에 붙는 줄인데 되살릴 때 화면을 가리지 않아 메뉴에도 그대로
        떴다 — 타이틀에는 「파티를 편성하세요.」 상자가 제작자 표기 밑에
        떠 있었고, 허브에서는 주 버튼 「관측」의 아래쪽을 덮었다(실측:
        title-mode·meta-mode·menu-mode 전부 display:block). 모든 플레이어가
        반드시 지나는 두 화면이라 출시 전에 막는다.
        접근성은 잃지 않는다 — 메뉴의 같은 문구는 각 화면이 자기 글로 이미
        말하고, 조준 상태는 별도 라이브 리전(`#aimLive`)이 낭독한다. */
body.game-mode .tip {
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  max-width: 86%;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #d9c2f0;
  background: #11071cf0;
  border: 1px solid #3a2a5e;
  box-shadow: 0 4px 0 #04080a;
  text-shadow: 0 2px 0 #04080a;
  pointer-events: none;
  z-index: 6;
}
/* A pause or verdict owns the stage while it is open. The previous aiming
   sentence remains useful after resume, but must not compete with the modal. */
body.game-mode:has(.overlay:not(.hide) .pause-card) .tip,
body.game-mode:has(.overlay:not(.hide) .oc) .tip,
body.game-mode:has(.overlay:not(.hide) .outcome-cut) .tip,
body.game-mode:has(.overlay:not(.hide) .pause-card) .toast,
body.game-mode:has(.overlay:not(.hide) .oc) .toast,
body.game-mode:has(.overlay:not(.hide) .outcome-cut) .toast,
body.game-mode:has(.overlay:not(.hide) .pause-card) .luna-speech,
body.game-mode:has(.overlay:not(.hide) .oc) .luna-speech,
body.game-mode:has(.overlay:not(.hide) .outcome-cut) .luna-speech {
  display: none !important;
}

/* 전투의 현재 동사를 판 밖에서 고정해 둔다. 데스크톱은 세로 계기판,
   좁은 화면은 한 줄 흐름이라 캔버스 위 안내와 경쟁하지 않는다. */
.combat-flow {
  display: none;
  border: 1px solid #453a57;
  background: #100b18e8;
  color: #aeb5b8;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", ui-monospace, monospace;
}
.game-mode .combat-flow {
  display: grid;
  gap: 9px;
  padding: 10px;
}
/* 루나가 위 안내 띠에서 오른쪽 열로 빠진 뒤, 헤더를 조금 조여 판을 예전
   크기(≈586)에 가깝게 되살린다. 안내 띠(72px)는 전각 안내문이 두 줄로
   꽉 차 못 줄이지만, 보스 배너 위아래 여백(9→6)과 열 간격(8→5)에서
   ~12px를 회수하면 판을 577로 키우면서도 위아래 8px 여백이 남는다(실측).
   왼쪽 계기판 188 + 판 577 + 오른쪽 루나 168 + 간격은 957이라 main
   980 안에 들어간다. */
.game-mode .battle-column {
  position: relative;
  gap: 5px;
  /* 위 안내 띠(대사 패널)를 걷어 그 72px를 판에 돌려준다(2026-08-23 오너
     지시). 헤더가 보스판만 남아 얇아졌으므로 -143 → -90 으로 판을 키운다. */
  width: min(720px, calc(80vh - 90px));
  width: min(720px, calc(80dvh - 90px));
}
.game-mode .boss-banner {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* min-width 로 가둔다: 이 전역 규칙(마지막 시트라 캐스케이드 승자)이 모바일
   구간까지 이겨, combat.css @media(max-width:760)의 12px 여백을 32px 로
   덮어 버렸다. 데스크톱 폭 확장은 761px 이상에서만 건다. */
@media (min-width: 761px) {
  .game-mode main {
    /* 커진 판 + 왼쪽 계기판 + 오른쪽 루나 세 열이 들어가게 넓힌다. */
    width: min(1080px, calc(100vw - 32px));
    width: min(1080px, calc(100dvw - 32px));
  }
}

/* 위 안내 띠(대사 패널)는 시각적으로 걷는다 — 판을 넓히려는 오너 지시.
   다만 #tip 은 캔버스 aria-label 이 가리키는 진행 상황 낭독 리전이라,
   화면에서만 빼고(0 크기 sr-only) 스크린리더에는 그대로 남긴다. */
.battle-guidance {
  display: none;
}
.game-mode .battle-guidance {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background: none;
  box-shadow: none;
}
.game-mode .battle-guidance .tip {
  position: static;
  display: flex !important;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 70px;
  padding: 10px 15px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #d9e3e1;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  transform: none;
  transition: opacity 0.16s ease;
}
.game-mode .battle-guidance .tip:empty {
  display: flex !important;
}
.game-mode .battle-guidance:has(.luna-speech.show) .tip {
  opacity: 0;
}
.game-mode .battle-guidance .luna-speech {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: #111922f7;
  box-shadow: inset 3px 0 0 #91b6bd;
  transform: translateY(-7px);
}
.game-mode .battle-guidance .luna-speech.show {
  transform: translateY(0);
}
.game-mode .battle-guidance .luna-speech-face {
  width: 50px;
  height: 50px;
  border-color: #67858c;
  border-radius: 4px;
}
.game-mode .battle-guidance .luna-speech-body b {
  color: #9fc8c6;
  font-size: 10px;
  letter-spacing: 0;
}
.game-mode .battle-guidance .luna-speech-text {
  color: #edf4f2;
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 1180px) and (min-height: 621px) {
  .game-mode .battle-guidance .luna-speech {
    inset: 0;
    width: 100%;
  }
}

/* 루나 오른쪽 세로 열. 예전의 «판 밖 관측 보조»를 판 오른쪽에 상시 세운다.
   초상·이름은 늘 보이고(온보딩 중에도 안내자가 곁에 있다), 말할 때만 그
   아래로 보라 말풍선이 펼쳐진다. 왼쪽 계기판(188px)과 좌우로 짝을 이뤄
   판은 가운데 그대로다. 폭이 좁아 세 열이 못 들어가는 화면에서는 접는다. */
.luna-side {
  display: none;
}
.game-mode .luna-side {
  display: flex;
  flex: 0 0 168px;
  flex-direction: column;
  gap: 10px;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", ui-monospace, monospace;
}
.game-mode .luna-side-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 12px 12px;
  border: 1px solid #6f5aa8;
  background: linear-gradient(160deg, #16112ef4, #1b1638ee);
  box-shadow:
    0 3px 0 #05030b,
    inset 0 0 0 1px #9f8ad018;
}
.game-mode .luna-side-face {
  width: 92px;
  height: 92px;
  border: 1px solid #8f7ad0;
  border-radius: 8px;
  background: #0e0616;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #8f7ad014;
}
.game-mode .luna-side-name {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}
.game-mode .luna-side-name small {
  color: #9a86cf;
  font-size: 8px;
  letter-spacing: 0.16em;
}
.game-mode .luna-side-name span {
  color: #ece7ff;
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* 오른쪽 열의 말풍선은 흐름 안에 있어 펼쳐지면 아래로 밀려난다 —
   초상은 그대로 있고 말풍선만 나타난다(초상이 튀지 않는다). */
.game-mode .luna-side .luna-speech {
  position: static;
  inset: auto;
  transform: none;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    max-height 0.24s ease;
}
.game-mode .luna-side .luna-speech.show {
  opacity: 1;
  max-height: 220px;
}
.game-mode .luna-side .luna-speech-text {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #6f5aa8;
  border-radius: 8px;
  background: #14102bf4;
  box-shadow: inset 3px 0 0 #91b6bd;
  color: #ece7ff;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}
@media (max-width: 980px) {
  .game-mode .luna-side {
    display: none;
  }
}

.combat-flow ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.combat-flow li {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: #97a0a4;
  font-size: 12px;
}
/* 단계 마커를 뜻이 있는 아이콘으로 — 별(선택)·화살(발사)·펄스링(공명)·
   버스트(각성). 진행 표시는 밝기로 유지한다: 지금 단계만 또렷하고 나머지는
   흐리다. 활성 규칙이 배경을 채우면 아이콘이 지워지므로, 채우기 대신 밝기·
   글로만 준다. */
.combat-flow li i {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: auto;
  opacity: 0.42;
  transition:
    opacity 0.18s ease,
    filter 0.18s ease;
}
.combat-flow li[data-flow="select"] i {
  background-image: url(../assets/library/icons/star/star-16.png);
  image-rendering: pixelated;
}
.combat-flow li[data-flow="launch"] i {
  background-image: url(../assets/library/ui/arrow-indicator.png);
}
.combat-flow li[data-flow="resonate"] i {
  background-image: url(../assets/library/fx/pulse-wave.png);
}
.combat-flow li[data-flow="settle"] i {
  background-image: url(../assets/library/icons/skill-ready.png);
}
.combat-flow li.active {
  color: #fff2c2;
}
.combat-flow li.active i {
  opacity: 1;
  filter: drop-shadow(0 0 4px #ffe09a99);
}
.combat-flow p {
  min-height: 34px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #39313f;
  color: #dde2e1;
  font-size: 12px;
  line-height: 1.55;
}

/* ── 계기판·보스판·루나 글씨 키우기 (2026-08-23) ─────────────────────────
   전투 텍스트가 전부 9~10px라 작다는 지적. 세로 여유가 있는 왼쪽 계기판과
   오른쪽 루나 열은 넉넉히 키우고, 판 높이를 먹는 보스판은 이름만 살짝
   키운다(방금 되살린 판 여백 8px를 지키려고). 값(숫자)은 굵은 큰 글씨로
   또렷하게 세워 한눈에 읽히게 한다. */
.game-mode .hud-label span,
.game-mode .status-line span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #aab4b7;
}
/* 스탯 앞 아이콘 — 조준(약점)·별(별빛)·화살(운동)로 한눈에 읽힌다.
   원본이 256px인 것은 작게 줄면 부드럽게(auto) 내려 선명하게 둔다. */
.game-mode .stat-ico {
  width: 15px;
  height: 15px;
  flex: none;
  object-fit: contain;
  image-rendering: auto;
}
.game-mode .hud-label b,
.game-mode .status-line b {
  font-size: 15px;
  font-weight: 700;
  color: #f3f7f5;
}
.game-mode .status-line {
  align-items: center;
}
.game-mode .blaze-score-label {
  font-size: 11px;
  letter-spacing: 0.06em;
}
.game-mode #blazeDetail {
  font-size: 11px;
}
.game-mode .boss-banner .boss-name {
  font-size: 12px;
}
.game-mode .boss-banner .combo-readout {
  font-size: 12px;
}
.game-mode .luna-side-name small {
  font-size: 10px;
}
.game-mode .luna-side-name span {
  font-size: 15px;
}

/* ── 결과(정산) 화면 글씨·아이콘 (2026-08-23) ────────────────────────────
   행 라벨이 9px, 키커가 10px라 작다는 지적. 라벨을 키우고 유성·시간·피해
   앞에 metric 아이콘을 세워 무슨 수치인지 한눈에 읽히게 한다. 값(17px)·
   제목(30px)은 이미 크므로 그대로 둔다. */
.oc-kicker {
  font-size: 11px;
}
.oc-row small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.oc-row-ico {
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
  image-rendering: auto;
}

/* ── 로스터(배치) 화면 글씨 (2026-08-23) ─────────────────────────────────
   자리·별지기 역할·능력 설명이 10~11px라 작다는 지적. 초상·번호 아이콘은
   이미 있으므로 설명 텍스트만 키운다. */
.squad-head small,
.squad-head p {
  font-size: 12px;
}
.squad-detail-copy small {
  font-size: 12px;
}
.squad-detail-copy p {
  font-size: 12px;
  line-height: 1.55;
}
.squad-detail-zone {
  font-size: 12px;
}
.squad-detail-zone i {
  font-size: 11px;
}
.squad-tray-head small {
  font-size: 12px;
}
.slot-name {
  font-size: 12px;
}
.slot-zone {
  font-size: 11px;
}
.map-launch {
  font-size: 11px;
}

.oc-advice {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(430px, 100%);
  margin: -8px 0 18px;
  padding: 10px 12px;
  border: 1px solid #4d6269;
  background: #111d21cc;
  opacity: 0;
  animation: ocFade 0.4s ease-out 2.12s forwards;
  text-align: left;
}
.oc-advice i {
  width: 18px;
  height: 18px;
  border: 2px solid #91b6bd;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px #91b6bd16;
}
.oc-advice span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.oc-advice small {
  color: #78949b;
  font-size: 9px;
}
.oc-advice b {
  color: #d7e4e3;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .game-mode .combat-dashboard {
    grid-template-rows: auto auto;
  }
  .game-mode .combat-flow {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
  }
  .combat-flow ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }
  .combat-flow li {
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 4px;
    min-height: 18px;
    font-size: 8px;
    white-space: nowrap;
  }
  .combat-flow li i {
    width: 7px;
    height: 7px;
  }
  .combat-flow p {
    min-height: 0;
    padding: 0 0 0 8px;
    border-top: 0;
    border-left: 1px solid #39313f;
    font-size: 8px;
    line-height: 1.4;
  }
  .game-mode .stage {
    width: min(720px, calc(80dvh - 260px));
  }
  .game-mode .battle-guidance {
    height: 60px;
    min-height: 60px;
  }
  .game-mode .battle-guidance .tip,
  .game-mode .battle-guidance .luna-speech {
    min-height: 58px;
  }
  .game-mode .battle-guidance .luna-speech {
    padding: 7px 9px;
  }
  .game-mode .battle-guidance .luna-speech-face {
    width: 42px;
    height: 42px;
  }
  .game-mode .battle-guidance .luna-speech-text {
    font-size: 11px;
  }
  .onboarding-dock .onboarding-card button[data-pbtn] {
    color: #fff7e2 !important;
    text-shadow:
      -1px 0 0 #54260d,
      1px 0 0 #54260d,
      0 -1px 0 #54260d,
      0 2px 0 #54260d !important;
  }
}

@media (max-width: 430px) {
  .game-mode .combat-flow {
    grid-template-columns: 1fr;
  }
  .combat-flow p {
    padding: 4px 0 0;
    border-top: 1px solid #39313f;
    border-left: 0;
    text-align: center;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .game-mode .battle-column {
    width: min(720px, calc(80dvh - 174px));
  }
}
/* 나머지 규칙은 셀렉터를 유지한다 — 전투에서만 보이지만 모양은 한 곳에서
   정의되는 편이 낫다. 아래 :empty 는 전투 중 빈 줄을 접는 것이다. */
.tip:empty {
  display: none !important;
}

/* ---- §6-5 760px 아래: 둘째 HUD 카드가 대체 없이 사라지던 것 복원 +
        판 위·HUD 글자 10px 하한 유지 */
@media (max-width: 760px) {
  .hud .hud-card + .hud-card {
    display: block !important;
  }
  .hud-card,
  .boss-panel,
  .blaze-card small {
    font-size: 10px !important;
  }
}

/* ---- §6-4 터치·포커스: 킷이 마우스 이벤트만 바인딩하는 구멍의 CSS 보완 */
[data-pbtn]:focus-visible {
  outline: 2px solid #ffd2a0;
  outline-offset: 2px;
}
[data-pbtn]:active {
  transform: translateY(3px);
}
[data-pbtn="disabled"],
.gacha-draw.insufficient {
  color: #8f889e !important;
  cursor: not-allowed;
  text-shadow: 0 2px 0 #04080a;
}

/* ---- §6-2 새 MAP 셀렉터의 !important 표면 무력화 (dawn.css:11 과 같은 수법,
        더 늦게 로드되고 특이도를 한 단 올린다) */
.ig-cta[data-pbtn],
.oc-go[data-pbtn],
.oc-ghost[data-pbtn],
.outcome-cut button[data-pbtn],
.stage-drawer-go[data-pbtn],
.world-step[data-pbtn],
.constellation-training[data-pbtn],
.language-choice button[data-pbtn],
.archive-tab[data-pbtn],
.gacha-draw.insufficient[data-pbtn],
.gacha-draw[disabled][data-pbtn],
.constellation-node .stage-copy[data-pbtn] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: var(--pbtn-img) !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #07020c);
}
.ig-cta[data-pbtn] {
  color: #fff6e6 !important;
  text-shadow:
    -1px 0 0 #6e3616,
    1px 0 0 #6e3616,
    0 -1px 0 #6e3616,
    0 2px 0 #6e3616 !important;
}
.ig-cta[data-pbtn] > i {
  display: none;
}
.world-step[data-pbtn],
.oc-ghost[data-pbtn],
.constellation-training[data-pbtn],
.language-choice button[data-pbtn] {
  color: #ede9f5 !important;
  text-shadow: 0 2px 0 #07020c !important;
}
.gacha-draw.insufficient[data-pbtn],
.gacha-draw[disabled][data-pbtn],
[data-pbtn="disabled"] {
  color: #8f889e !important;
  text-shadow: 0 2px 0 #04080a !important;
  filter: drop-shadow(0 2px 0 #07020c);
}
.constellation-node .stage-copy[data-pbtn] {
  filter: drop-shadow(0 3px 0 #07020c);
}

/* ---- §5-1 허브 탭 아이콘 자리(글리프 → 도트 이미지, upgrade.js가 채움) */
.hub-tab span[aria-hidden] {
  display: block;
  min-height: 16px;
  line-height: 1;
}

/* ============================================================= *
 * §6 별무기 · 소환/무기고(2026-08-24)                            *
 * 일반=차가운 은빛(#8fb7d6), 전용=금빛(#ffcf7a). 소환 껍데기      *
 * (gacha-shell) 팔레트를 그대로 물려받아 세 갈래가 한 화면으로     *
 * 읽힌다.                                                         *
 * ============================================================= */
.gacha-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 10px 0 2px;
  padding: 4px;
  border: 1px solid #3f2e53;
  background: #0c0516;
}
.gacha-modes button {
  padding: 7px 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #b9afce !important;
  font:
    700 10px ui-monospace,
    monospace !important;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.gacha-modes button.on {
  border-color: #6b5488 !important;
  background: linear-gradient(150deg, #2a1740, #170a26) !important;
  color: #ffd7a1 !important;
  box-shadow: inset 0 0 0 1px #f2b98826;
}
.gacha-modes button:not(.on):hover {
  color: #ede9f5 !important;
}

/* 무기 아이콘 글리프(도트 반입 전까지) */
.weapon-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 22px;
  font-style: normal;
  line-height: 1;
  border: 1px solid #4a5a6d;
  background: radial-gradient(circle at 50% 38%, #24313f, #0d141c);
  box-shadow: inset 0 0 0 1px #ffffff10;
}
.weapon-ico.grade-common {
  border-color: #4a5a6d;
  color: #d6ecff;
}
.weapon-ico.grade-exclusive {
  border-color: #a5772f;
  color: #ffe3ac;
  background: radial-gradient(circle at 50% 34%, #4a3413, #1c1206);
  box-shadow:
    inset 0 0 0 1px #ffd98e2e,
    0 0 12px #ffcf7a33;
}

/* --- 무기 소환 연출/후보 --- */
.weapon-reveal {
  display: grid !important;
  place-items: center;
  gap: 7px;
  text-align: center;
  padding: 10px;
}
.weapon-reveal .weapon-ico {
  width: 62px;
  height: 62px;
  font-size: 34px;
}
.weapon-reveal.shown {
  animation: weaponPop 0.42s ease-out;
}
.weapon-reveal.is-exclusive {
  animation: weaponPopGold 0.55s ease-out;
}
.weapon-reveal-name {
  color: #f6efff;
  font-size: 13px;
}
.weapon-grade {
  font:
    700 8px ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border: 1px solid #4a5a6d;
  color: #cfe6fb;
}
.weapon-grade.grade-exclusive {
  border-color: #c79238;
  color: #ffe3ac;
  background: #3a280d;
  box-shadow: 0 0 10px #ffcf7a44;
}
.weapon-reveal small {
  color: #b7aecb;
  font-size: 10px;
  max-width: 240px;
}
@keyframes weaponPop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes weaponPopGold {
  0% {
    transform: scale(0.6) rotate(-6deg);
    opacity: 0;
    filter: brightness(2);
  }
  55% {
    transform: scale(1.14) rotate(2deg);
    filter: brightness(1.5) drop-shadow(0 0 16px #ffcf7a);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
}
.weapon-pool-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
.weapon-pool-unit {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px 4px;
  text-align: center;
  border: 1px solid #34273f;
  background: #140a20;
}
.weapon-pool-unit .weapon-ico {
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.weapon-pool-unit b {
  color: #e9e2f6;
  font-size: 9px;
  line-height: 1.15;
}
.weapon-pool-unit em {
  font:
    700 7px ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  color: #9f96b6;
  font-style: normal;
}
.weapon-pool-unit small {
  color: #857c9a;
  font-size: 8px;
  line-height: 1.2;
}
.weapon-pool-unit.grade-exclusive {
  border-color: #6a4a1c;
  background: linear-gradient(160deg, #241706, #140a20);
}
.weapon-pool-unit.grade-exclusive em {
  color: #ffcf7a;
}
.weapon-pool-unit.owned {
  border-color: #5a6f57;
}
.weapon-pool-unit.owned small {
  color: #9fd08a;
}

/* --- 무기고(장착) --- */
.armory-shell {
  width: min(560px, 100%);
}
.armory-intro {
  margin-top: 10px;
}
.armory-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
}
.armory-hero {
  border: 1px solid #3a2c4c;
  background: #150b22;
}
.armory-hero.open {
  border-color: #6b5488;
  box-shadow: inset 0 0 0 1px #f2b98818;
}
.armory-hero-head {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  text-align: left;
}
.armory-portrait {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid #4d3d61;
  background: #0d0618;
  image-rendering: pixelated;
}
.armory-hero-copy {
  flex: 0 0 auto;
  width: 70px;
}
.armory-hero-copy b {
  display: block;
  color: #f2ecff;
  font-size: 12px;
}
.armory-hero-copy small {
  color: #9a90b0;
  font-size: 9px;
}
.armory-equipped {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #34273f;
  background: #0f0619;
}
.armory-equipped .weapon-ico {
  width: 32px;
  height: 32px;
  font-size: 16px;
}
.armory-equipped b {
  color: #e9e2f6;
  font-size: 10px;
}
.armory-equipped em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 8px;
  color: #928aa6;
}
.armory-equipped.empty {
  color: #7d7594;
  border-style: dashed;
}
.armory-equipped.grade-exclusive {
  border-color: #6a4a1c;
}
.armory-equipped.matched {
  border-color: #d1a24a;
  background: linear-gradient(150deg, #2c1d08, #140a1c);
  box-shadow: 0 0 12px #ffcf7a2e;
}
.armory-equipped.matched em {
  color: #ffcf7a;
}
.armory-caret {
  flex: 0 0 auto;
  color: #9a90b0;
  font-size: 9px;
}
.armory-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 4px 11px 11px;
}
.armory-pick {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 8px !important;
  text-align: left;
  border: 1px solid #34273f !important;
  background: #0f0619 !important;
  cursor: pointer;
}
.armory-pick .weapon-ico {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
/* 별무기 도트(upgrade.js weaponIcons가 얹는 img). 등급 프레임 상자 안에서
   픽셀 그대로, 넘치지 않게. */
.weapon-ico .wpn-dot {
  image-rendering: pixelated;
}
.armory-pick b {
  color: #e6dff5;
  font-size: 10px;
}
.armory-pick em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 8px;
  color: #8f86a4;
}
.armory-pick.on {
  border-color: #7f6aa0 !important;
  box-shadow: inset 0 0 0 1px #f2b98826;
}
.armory-pick.exclusive-here {
  border-color: #b98836 !important;
  background: linear-gradient(150deg, #241706, #0f0619) !important;
}
.armory-pick.exclusive-here em {
  color: #ffcf7a;
}
.armory-unequip {
  grid-column: 1 / -1;
  padding: 6px !important;
  border: 1px solid #4a3a3a !important;
  background: #180d13 !important;
  color: #d9a9a9 !important;
  font-size: 9px !important;
  cursor: pointer;
}
.armory-empty {
  grid-column: 1 / -1;
  color: #9a90b0;
  font-size: 10px;
  text-align: center;
  padding: 10px;
}

/* ============================================================= *
 * §7 프롤로그(story-intro) 클릭 블로커 수정 (2026-08-26)          *
 * 시크릿창 첫 실행 제보: 인트로 뒤 프롤로그가 «가운데 클릭»에만   *
 * 넘어감. 원인 — 프롤로그는 #overlay 를 쓰는데 #overlay 는       *
 * .stage(가운데 판 컬럼) 안에 갇혀 가로가 판 폭(≈916/1280px)뿐.  *
 * 진행 핸들러가 U.over.onclick 이라 좌우 여백(각 ~180px) 클릭이  *
 * overlay 에 닿지 않았다. title/meta 씬처럼 이 씬도 뷰포트 전체로*
 * 펴, 화면 아무 데나 눌러도 다음 줄로 넘어가게 한다.             *
 * ============================================================= */
.overlay.story-intro-scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
}