/* release-polish.css — 에셋 url은 applyResourceURLs가 바꾸도록 assets/ 로 시작하게 쓴다. 출시 전 디자인 점검(2026-09-29)에서 찾은 겹침·빈 화면·위계 문제 보정.
   모든 스타일시트 뒤에 로드한다. 점검 도구: node tools/design-tour.mjs */

/* ---------- 도입부: 서약서가 떠 있으면 타이틀 조작부를 숨긴다 ---------- */
body:has(#oath) #title :is(.t-login, .t-links) { visibility: hidden; }

/* ---------- 메뉴 위 대화(over): AUTO/SKIP이 재화 바와 겹치지 않게 ---------- */
body:has(#menu:not(.hide)) #cine.over .cn-ui { top: 72px; }

/* Framed dialogue: position the plate by its own height, including the gold
   border. The containing block starts inside the dialogue's 24px border. */
#cine:is(.full, .scene, .over) .cn-name,
html.vp-touch #cine:is(.full, .scene, .over) .cn-name {
  top: -16px;
  transform: translateY(-100%);
  white-space: nowrap;
}
#cine .cn-name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: var(--c, #ffe07a);
  pointer-events: none;
}
#cine .cn-box.tip .cn-name::after { background: #8ad8ff; }
#cine:is(.full, .scene, .over) .cn-text { padding-top: 4px; }
html.vp-touch #cine:is(.full, .scene, .over).bars .cn-box {
  bottom: calc(9vh + 10px);
}

/* Keep field and battle staging visible between the two half-body portraits.
   Full-screen intro art retains its original dimensions. */
#cine:is(.scene, .over) .cn-por {
  height: 60vh;
  width: min(30vw, 420px);
  bottom: calc(4vh + 128px);
}
#cine.scene.bars .cn-por { bottom: calc(9vh + 130px); }
#cine:is(.scene, .over) .cn-por.l { left: 0; }
#cine:is(.scene, .over) .cn-por.r { right: 0; }
#cine:is(.scene, .over) .cn-por.on:not(.talk):not(.sil) {
  opacity: 1;
  filter: brightness(.68) saturate(.8);
}
html.vp-touch #cine:is(.scene, .over) .cn-por {
  height: min(54vh, 230px);
  width: min(28vw, 330px);
  bottom: calc(5vh + 94px / var(--vs, 1) - 24px);
}
html.vp-touch #cine.scene.bars .cn-por {
  bottom: calc(9vh + 10px + 94px / var(--vs, 1) - 24px);
}
/* The minimap, including its decorative frame, ends above 132 game pixels. */
body #cine.over .cn-ui,
body:has(#menu:not(.hide)) #cine.over .cn-ui { top: 140px; }
#cine .cn-ui button { min-width: 40px; min-height: 32px; }

/* Keyboard hints occupy their own corner, away from the centred skill icon. */
#hud :is(#skills, #cmds) button kbd {
  font-size: 10px;
  line-height: 12px;
  opacity: 1;
  color: #fff5d8;
  background: #101824;
  padding: 1px 3px;
  border: 1px solid #b6a575;
  border-radius: 2px;
  z-index: 5;
  top: -4px;
  left: auto;
  right: 0;
  transform: translateY(-100%);
}

/* Measurements here are physical CSS pixels after the phone iframe scales. */
html.vp-touch #hud #leader .li { width: calc(190px / var(--vs, 1)); }
html.vp-touch #hud #leader .ln { gap: calc(5px / var(--vs, 1)); }
html.vp-touch #hud #leader .ln :is(b, small) {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
html.vp-touch #hud #leader .ln b { flex: 0 1 auto; }
html.vp-touch #hud #leader .ln small { flex: 1 1 auto; }
html.vp-touch #hud #skills {
  width: calc(196px / var(--vs, 1));
  height: calc(144px / var(--vs, 1));
  right: calc(14px / var(--vs, 1));
  bottom: calc(12px / var(--vs, 1));
  transform: none;
}
html.vp-touch #hud #skills .sb {
  width: calc(56px / var(--vs, 1));
  height: calc(56px / var(--vs, 1));
  min-width: calc(44px / var(--vs, 1));
  min-height: calc(44px / var(--vs, 1));
}
html.vp-touch #hud #skills .sb::before { inset: -8%; }
html.vp-touch #hud #skills .sb.s1 { left: 0; right: auto; bottom: 0; }
html.vp-touch #hud #skills .sb.s2 { left: 0; right: auto; bottom: calc(88px / var(--vs, 1)); }
html.vp-touch #hud #skills .sb.sm { left: calc(70px / var(--vs, 1)); right: auto; bottom: calc(88px / var(--vs, 1)); }
html.vp-touch #hud #skills .sb.dg { left: auto; right: 0; bottom: calc(88px / var(--vs, 1)); }
html.vp-touch #hud #skills .sb.ult {
  right: 0;
  bottom: 0;
  width: calc(72px / var(--vs, 1));
  height: calc(72px / var(--vs, 1));
}
html.vp-touch #hud #skills .sb .nm { max-width: 100%; font-size: calc(10px / var(--vs, 1)); }
html.vp-touch #hud #cmds { right: calc(230px / var(--vs, 1)); }
html.vp-touch #hud #cmds button { min-width: calc(44px / var(--vs, 1)); min-height: calc(44px / var(--vs, 1)); }
html.vp-touch #hud :is(#skills, #cmds) button kbd {
  font-size: calc(10px / var(--vs, 1));
  line-height: 1.2;
}

/* 전투 위 대화(over) 동안: 오른쪽 CHAIN·HIT 표시가 AUTO/SKIP·초상과 겹치지 않게 잠시 숨긴다 */
body:has(#cine.over.on) #hud :is(#chain, #combo) { visibility: hidden; }
/* 데스크톱 반신 초상: 전장·오른쪽 HUD 를 덜 가리게 */
html:not(.vp-touch) #cine:is(.scene, .over) .cn-por { height: 50vh; }

/* ---------- 로비 ---------- */
/* 픽업 배너: 글 상자가 그림을 덮어 머리 위 띠만 보이던 문제 → 왼쪽 글, 오른쪽 인물 */
.bn .bn-t { top: 0; right: 40%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 8px 10px; border-top: 0; background: linear-gradient(90deg, #111c2cf2 48%, #111c2c00); }
.bn-pick .bn-art { left: auto; right: -10%; top: -16%; height: 300%; }
.bn-world .bn-t, .bn-dg .bn-t { right: 22%; }
.bn-t small { line-height: 1.35; }
.bn-dots { top: auto; bottom: -9px; right: 6px; }
/* 미션 알림 배지가 진행도(0/7)를 덮지 않게 왼쪽 모서리로 */
.lb-mis .badge { right: auto; left: -8px; }
/* 소환 버튼 픽업 꼬리표 */
.nb small { top: -15px; font-size: 9px; padding: 1px 6px; }
.lb-pi b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 히로인 카드: 등급·레벨 겹침, 조작 표시 ---------- */
.menu .hc .rar { left: 2px; font-size: 9px; letter-spacing: -.3px; }
.menu .hc .lv { right: 2px; font-size: 9px; padding: 0 3px; }
.menu .hc.lead::after { right: 2px; bottom: 42%; font-size: 9px; padding: 0 4px; box-shadow: 1px 1px #0b1520; z-index: 3; }
@media (min-width: 1000px) and (min-height: 640px) {
  .slots .hc { width: 76px; height: 100px; }
  .slots .hc .hcl { font-size: 8px; }
  .slots .hc b { font-size: 12px; }
}

/* ---------- 미션: 모두 받기는 머리 영역 오른쪽 ---------- */
.quest-banner .quest-claim { position: relative; flex: 0 0 auto; margin-left: 4px; padding: 10px 22px; font-size: 15px; }
.quest-banner .quest-claim em { position: absolute; right: -8px; top: -9px; min-width: 18px; padding: 0 4px; font-style: normal; font-size: 11px; line-height: 18px; color: #fff; background: #c4524e; box-shadow: 1px 1px #0b1520; }
.quest-banner .quest-claim:disabled { opacity: .55; }
@media (max-height: 480px) {
  .quest-banner p { display: none; }
  .quest-banner h2 { font-size: 20px; }
  .quest-banner > .ico { width: 40px; height: 40px; }
  .quest-banner .quest-claim { padding: 6px 14px; font-size: 13px; }
  .quest-count { padding-left: 14px; min-width: 0; }
  .quest-count > b { font-size: 22px; }
}

/* ---------- 설정: 가운데 정렬, 컷인 연출 항목 ---------- */
.menu .settings { align-self: center; margin: 24px auto; width: min(560px, calc(100% - 40px)); }
.menu .settings .cutin-manage { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu .settings .cutin-manage small { color: #e6ce95; font-size: 12px; }
.menu .settings { min-height: 0; overflow-y: auto; }
.menu .settings > * { flex-shrink: 0; }
.menu .settings .skill-voice-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu .settings .skill-voice-toggle small { color: #b6c0cc; font-size: 12px; }
.menu .settings .skill-voice-toggle[aria-pressed="true"] small { color: #e6ce95; }
.menu .skill-voice-volume:has(input:disabled) { opacity: .5; }

/* ---------- 스토리: 장 지도 배경, 큰 스테이지 카드 ---------- */
.menu .story { position: relative; isolation: isolate; }
.story-map { position: absolute; inset: 0; z-index: -1; background: url(../../assets/ui/world_map.jpg) no-repeat; background-size: 240%; opacity: .42; filter: saturate(.85); -webkit-mask-image: linear-gradient(#0000, #000 22%, #000 70%, #0000); mask-image: linear-gradient(#0000, #000 22%, #000 70%, #0000); pointer-events: none; }
@media (min-width: 900px) {
  .menu .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 40px; align-content: center; }
  .menu .st { min-height: 118px; padding: 14px 16px; }
  .menu .st b { font-size: 18px; }
}
.menu .st:not(.lock) { background-color: #162637f0; }
.menu .st.boss:not(.lock) { box-shadow: inset 0 0 0 1px #c9594f, 2px 3px #07111d; }
.menu .st.boss em::after { content: ' BOSS'; color: #ff8a7a; font-size: .85em; letter-spacing: 1px; }

/* ---------- 던전: 빈 카드 가운데 채우기 ---------- */
.menu .dg { position: relative; justify-content: center; }
.menu .dg::after { content: ''; position: absolute; left: 50%; top: 22px; width: 190px; height: 190px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent); pointer-events: none; }
.menu .dg > * { position: relative; z-index: 1; }
@media (min-height: 600px) {
  .menu .dg .dungeon-art { width: 144px; height: 144px; margin: 18px auto 20px; }
  .menu .dg b { font-size: 26px; }
  .menu .dg > span { font-size: 13px; line-height: 1.5; }
}
.menu .dg .tiers { margin-top: 18px; }

/* ---------- 상점: 가운데 정렬, 가격 버튼 높이 맞춤 ---------- */
.menu .shop { grid-template-columns: repeat(auto-fill, minmax(190px, 220px)); justify-content: center; align-content: start; }
.menu .si { align-items: stretch; }
.menu .si small:empty { display: none; }

/* ---------- 소환: 픽업 색 배경 ---------- */
.menu .gacha { background: radial-gradient(ellipse 50% 70% at 24% 60%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%), linear-gradient(100deg, color-mix(in srgb, var(--c) 12%, #0e1826), #0e1826 60%); }
.menu .g-info h2 { font-size: clamp(26px, 3.2vw, 40px); }

/* ---------- 결과: 패배는 어둡게, 작은 화면은 표를 촘촘히 ---------- */
.menu .res.lose { background: linear-gradient(180deg, #080d19d9, #10172ae8); }
.menu .res.lose .res-art { filter: grayscale(.75) brightness(.6) drop-shadow(4px 4px 0 #0b192b88); }
@media (max-height: 480px) {
  .res-box h1 { font-size: 34px; letter-spacing: 4px; }
  .res-stars span { font-size: 24px; }
  .res-box th, .res-box td { padding: 0 8px; line-height: 1.3; }
  .res-box td img { width: 16px; height: 16px; }
  .res-box .dim { font-size: 10px; }
}
.bn-t b { white-space: nowrap; }
@media (max-height: 480px) {
  .menu .shop { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
  .menu .si { min-height: 0; }
  .menu .si .shop-item-icon { width: 36px; height: 36px; margin: 0 0 4px; }
}

/* ---------- 소환 카드 뒷면: 도트 카드(AAA 도트 패스, assets/ui/kit/cardback_*.png 72x96) ---------- */
.gxc-back, .gxc-face { border-radius: 0; }
.gxc-back { border: 0; background: url(../../assets/ui/kit/cardback_r.png) center / 100% 100% no-repeat; image-rendering: pixelated;
  box-shadow: 0 0 0 2px #05070d, 3px 4px 0 2px #04060e99; }
.gxc.r-SR .gxc-back { background-image: url(../../assets/ui/kit/cardback_sr.png); }
.gxc.r-SSR .gxc-back { background-image: url(../../assets/ui/kit/cardback_ssr.png); }
.gxc-back i { display: none; }
.gxc-back::after { content: none; }
.gxc-face { box-shadow: 0 0 0 2px #05070d; }
.gxc.r-SSR .gxc-face { box-shadow: 0 0 0 2px #05070d, 0 0 0 4px #ffd84a; }
.gxc.r-SSR .gxc-back { animation: gxcSsrGlow 1.2s steps(4, end) infinite; }
@keyframes gxcSsrGlow { 50% { filter: brightness(1.35); } }