/* CRIMSON VEIL — ui.css  (Claude 소유: 전 화면 UI/UX)
   레퍼런스: Touhou(정보구조) · NIKKE(크롬) · Azur Lane(장식) · Crimzon Clover(게이지) · Honkai(가독성)
   → docs/refs/UI_REFERENCES.md */

/* ═══════════════════ AGE GATE ═══════════════════ */
#scr-agegate{ display:grid; place-items:center; background:
  radial-gradient(70% 55% at 50% 40%, rgba(60,10,26,.55), transparent 70%), var(--ink); }
.ag-wrap{ width:660px; text-align:center; padding:52px 56px; background:var(--panel-hi);
  border:1px solid var(--line); clip-path:var(--clip-6); }
.ag-mark{ width:78px; height:78px; margin:0 auto 22px; }
.ag-title{ margin:0 0 18px; font-family:var(--f-display); font-size:30px; letter-spacing:.22em; color:var(--gold); }
.ag-body{ margin:0 0 34px; font-size:15px; line-height:2; color:var(--dim); }
.ag-body b{ color:var(--crimson-hi); }
.ag-btns{ display:flex; gap:14px; justify-content:center; }

/* ═══════════════════ OPENING ═══════════════════ */
#scr-opening{ background:var(--ink); }
.opening-art{ position:absolute; inset:0; }
.opening-art img{ width:100%; height:100%; object-fit:cover; }
.opening-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,2,6,.22),transparent 38%,rgba(4,2,6,.84)),
             linear-gradient(90deg,rgba(4,2,6,.75),transparent 55%); }
.opening-panel{ position:absolute; left:78px; bottom:72px; z-index:1; width:452px;
  padding:18px 20px; background:rgba(12,6,14,.78); border:1px solid var(--line-soft);
  clip-path:var(--clip-6); }
.opening-kicker,.opening-count{ font-family:var(--f-num); font-size:11px; letter-spacing:.24em; }
.opening-kicker{ color:var(--gold); }
.opening-count{ float:right; color:var(--dim); }
.opening-progress{ display:flex; gap:8px; margin:14px 0 18px; }
.opening-progress i{ width:34px; height:3px; background:rgba(255,255,255,.2); }
.opening-progress i.on{ background:var(--crimson-hi); box-shadow:0 0 12px var(--crimson); }
.opening-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ═══════════════════ TITLE ═══════════════════ */
#scr-title{ background:transparent; }
.title-art{ position:absolute; inset:0; display:grid; place-items:stretch; pointer-events:none; }
.title-art img{ width:100%; height:100%; object-fit:cover; filter:none; animation:none; }
@keyframes t-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.title-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,2,6,.78) 0%, rgba(4,2,6,.22) 30%, transparent 55%, rgba(4,2,6,.92) 100%),
             linear-gradient(90deg, rgba(4,2,6,.92) 0%, rgba(4,2,6,.55) 34%, transparent 60%); }
#scr-title.is-cleared .title-scrim{
  background:linear-gradient(180deg, rgba(4,2,6,.48) 0%, rgba(4,2,6,.06) 46%, rgba(4,2,6,.62) 100%),
             linear-gradient(90deg, rgba(4,2,6,.94) 0%, rgba(4,2,6,.78) 25%, rgba(4,2,6,.34) 44%, transparent 66%);
}
.title-logo{ position:absolute; left:70px; top:96px; width:760px; height:264px; }
.title-afterword{
  position:absolute; left:78px; top:376px;
  display:flex; align-items:center; gap:14px;
  padding:9px 18px 9px 14px;
  background:var(--panel-hi); border-left:3px solid var(--gold);
  clip-path:var(--clip-6);
}
.ta-en{ font-family:var(--f-num); font-size:10px; letter-spacing:.26em; color:var(--gold); }
.ta-ko{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--text); }
.title-menu{ position:absolute; left:78px; top:452px; width:452px; display:flex; flex-direction:column; gap:11px; }
#scr-title.is-cleared .title-menu{ top:440px; gap:8px; }
#scr-title.is-cleared .tm-item{ padding:11px 30px 11px 58px; font-size:20px; }
#scr-title.is-cleared .tm-item .tm-en{ margin-top:2px; }
/* 목업: 우측 모서리가 안쪽으로 기운 평행사변형, 선택 항목은 진홍 채움 + 좌측 사각별 */
.tm-item{
  position:relative; padding:16px 30px 16px 58px; text-align:left;
  font-family:var(--f-display); font-size:22px; font-weight:600; letter-spacing:.13em;
  color:#D9C9CE; text-transform:uppercase;
  background:linear-gradient(100deg, rgba(24,8,14,.82), rgba(14,7,12,.34));
  border:1px solid rgba(226,58,92,.45);
  clip-path:polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%);
  transition:.2s var(--ease);
}
.tm-item .tm-en{ display:block; font-family:var(--f-num); font-size:10px; letter-spacing:.34em;
  color:var(--dim-2); margin-top:4px; text-transform:none; }
/* 4각 별 마커 */
.tm-item::before{
  content:""; position:absolute; left:22px; top:50%; width:18px; height:18px; margin-top:-9px;
  background:radial-gradient(circle,#FFE9C0 0%,var(--gold) 40%,transparent 68%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  opacity:0; transform:scale(.4); transition:.22s var(--ease);
}
.tm-item.on,.tm-item:hover{
  color:#FFF; border-color:#FF6B87;
  background:linear-gradient(100deg, rgba(150,20,48,.92) 0%, rgba(96,14,32,.6) 55%, rgba(26,8,16,.3) 100%);
  text-shadow:0 0 20px rgba(255,140,164,.85);
  box-shadow:0 0 28px -8px var(--crimson), inset 0 0 30px rgba(226,58,92,.22);
}
.tm-item.on::before,.tm-item:hover::before{ opacity:1; transform:scale(1); }
.tm-item.on .tm-en{ color:var(--gold); }
.title-foot{ position:absolute; left:0; right:0; bottom:26px; display:flex; justify-content:space-between;
  padding:0 64px; font-family:var(--f-num); font-size:11px; letter-spacing:.22em; color:var(--dim-2); }
.corner-orn{ position:absolute; width:120px; height:120px; pointer-events:none; opacity:.5; }
.corner-orn.tl{ left:18px; top:18px; }
.corner-orn.tr{ right:18px; top:18px; transform:scaleX(-1); }
.corner-orn.bl{ left:18px; bottom:18px; transform:scaleY(-1); }
.corner-orn.br{ right:18px; bottom:18px; transform:scale(-1); }

/* ═══════════════════ MAIN MENU ═══════════════════ */
#scr-menu{ background:linear-gradient(105deg, #0B0509 0%, #150A11 55%, #0B0509 100%); }
.menu-art{ position:absolute; left:-30px; bottom:0; width:820px; height:900px;
  display:grid; place-items:end center; pointer-events:none; }
.menu-art img{ height:96%; width:auto; object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(226,58,92,.28)); }
.menu-side{ position:absolute; right:76px; top:118px; width:420px; }
.menu-plate{ padding:14px 20px; margin-bottom:26px; background:var(--panel);
  border:1px solid var(--line-soft); clip-path:var(--clip-12); }
.mp-label{ font-family:var(--f-num); font-size:10px; letter-spacing:.34em; color:var(--gold); }
.mp-name{ font-size:19px; font-weight:600; letter-spacing:.05em; margin-top:4px; }
.menu-list{ display:flex; flex-direction:column; gap:8px; }
.menu-list.compact .tm-item{ padding:11px 22px 11px 34px; font-size:15px; }
.menu-strip{ position:absolute; right:76px; bottom:34px; display:flex; gap:9px; }
.ms-chip{ width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line-soft); clip-path:var(--clip-6); transition:.18s var(--ease); }
.ms-chip:hover{ border-color:var(--gold); background:rgba(232,199,122,.10); }

/* ═══════════════════ CHARACTER SELECT ═══════════════════ */
#scr-charselect{ background:linear-gradient(160deg,#0A0509,#160A12 60%,#0A0509); }
.cs-art{ position:absolute; left:50%; top:0; width:640px; height:900px; transform:translateX(-52%);
  display:grid; place-items:end center; pointer-events:none; }
.cs-art img{ height:92%; object-fit:contain; filter:drop-shadow(0 20px 54px rgba(0,0,0,.7)); }
.cs-art img.swap{ animation:cs-swap .34s var(--ease); }
@keyframes cs-swap{ from{ opacity:0; transform:translateY(18px) scale(.985) } to{ opacity:1; transform:none } }
.cs-cards{ position:absolute; left:64px; top:170px; display:flex; flex-direction:column; gap:14px; }
.cs-card{ position:relative; width:250px; padding:14px 16px; display:flex; gap:13px; align-items:center;
  background:var(--panel); border:1px solid var(--line-soft); clip-path:var(--clip-12);
  transition:.2s var(--ease); }
.cs-card img{ width:56px; height:56px; object-fit:cover; clip-path:var(--clip-6);
  background:rgba(255,255,255,.05); }
.cs-card .ccn{ font-size:17px; font-weight:700; letter-spacing:.03em; }
.cs-card .cct{ font-size:11px; letter-spacing:.16em; color:var(--dim); margin-top:3px; }
.cs-card::after{ content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--cc,var(--crimson)); opacity:0; transition:.2s; }
.cs-card.on,.cs-card:hover{ border-color:var(--cc,var(--crimson)); transform:translateX(8px);
  background:var(--panel-hi); box-shadow:0 0 30px -8px var(--cc,var(--crimson)); }
.cs-card.on::after,.cs-card:hover::after{ opacity:1; }
.cs-info{ position:absolute; right:64px; top:170px; width:340px; padding:22px 24px;
  background:var(--panel); border:1px solid var(--line-soft); clip-path:var(--clip-12); }
.ci-title{ font-family:var(--f-display); font-size:26px; letter-spacing:.1em; color:var(--cc,var(--crimson-hi)); }
.ci-sub{ font-family:var(--f-num); font-size:11px; letter-spacing:.3em; color:var(--gold); margin:4px 0 16px; }
.ci-desc{ font-size:13.5px; line-height:1.95; color:var(--dim); margin:0 0 18px; }
.ci-stat{ display:grid; grid-template-columns:64px 1fr 34px; gap:9px; align-items:center; margin-bottom:9px;
  font-family:var(--f-num); font-size:11px; letter-spacing:.14em; color:var(--dim); }
.ci-bar{ height:4px; background:rgba(255,255,255,.08); }
.ci-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--cc,var(--crimson)),var(--gold)); }
.ci-quote{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:13px; font-style:italic; color:var(--gold); line-height:1.8; }
.cs-foot{ position:absolute; right:64px; bottom:48px; display:flex; gap:12px; }

/* ═══════════════════ VISUAL NOVEL ═══════════════════ */
#scr-vn{ background:#050306; }
.vn-cast{ position:absolute; inset:0; overflow:hidden; }
/* 원화를 화면 높이보다 크게 잡고 아래를 화면 밖으로 흘린다(bottom 음수 + .vn-cast overflow:hidden).
   대사창 위(y≈618px)까지가 실제로 보이는 영역이므로, 전신의 위 2/3 — 머리~허벅지가 크게 들어온다.
   ⚠ max-width 가 걸리면 object-fit:contain 이 이미지를 오히려 축소시킨다.
     body 에셋 종횡비는 0.58~0.71 이라 105% 높이에서 최대 폭이 41.5% → 45% 로 여유를 둬 클램프를 피한다. */
.vn-actor{ position:absolute; bottom:-46px; height:105%; width:auto; max-width:45%;
  object-fit:contain; object-position:bottom center;
  transition:filter .3s, opacity .3s, transform .3s var(--ease); }
.vn-actor.left{ left:3%; }
/* 캐릭터 아트는 좌우 반전하지 않는다 — 비대칭 디자인(장식·머리 가르마)이 뒤집힌다 */
.vn-actor.right{ right:3%; }
.vn-actor.dim{ filter:brightness(.38) saturate(.35); }
.vn-actor.right.dim{ transform:scaleX(-1) translateY(8px); }
.vn-actor.left.dim{ transform:translateY(8px); }
.vn-actor[hidden]{ display:none; }

/* ── 에용 페르소나 전환 ──
   에용은 한 몸에 세 페르소나(일반·분탕·쌀먹)를 갖고 있고, 대사 상황에 따라 원화가 바뀐다.
   그냥 src 를 갈아끼우면 그림이 획 바뀌어 다른 사람처럼 보인다.
   전환을 "같은 사람의 다른 면이 올라오는" 것처럼 읽히게 한다:
   살짝 가라앉으며 색이 빠졌다가, 색수차 글리치를 한 번 스치고 제자리로 올라온다. */
.vn-actor.persona-swap{ animation:persona-swap .46s var(--ease); }
@keyframes persona-swap{
  0%   { opacity:.15; transform:translateY(10px) scale(.985);
         filter:saturate(.2) brightness(1.5) blur(3px); }
  38%  { opacity:.85; transform:translateY(2px)  scale(1.004);
         filter:saturate(1.5) brightness(1.12) blur(0)
                drop-shadow(3px 0 0 rgba(255,90,140,.5))
                drop-shadow(-3px 0 0 rgba(90,200,255,.5)); }
  62%  { filter:saturate(1.1) brightness(1.02)
                drop-shadow(-1px 0 0 rgba(255,90,140,.28))
                drop-shadow(1px 0 0 rgba(90,200,255,.28)); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:none; }
}
/* 전환 순간 뒤쪽에서 한 번 번쩍이는 잔광. 페르소나가 "교대"했다는 신호를 준다.
   ⚠ .vn-cast 에 position:relative 를 주면 안 된다. 배우(.vn-actor)는 absolute + height:105% 인데
   .vn-cast 는 높이가 0이라, 포함 블록이 .vn-cast 로 바뀌는 순간 배우 높이가 0px 이 되어
   **대사 캐릭터가 통째로 사라진다**(실측). 잔광은 #scr-vn::before 에 붙인다. */
#scr-vn::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 42% 58% at var(--persona-x,20%) 62%,
    rgba(150,215,255,.34), rgba(150,215,255,0) 70%);
}
#scr-vn.persona-flash::before{ animation:persona-flash .46s ease-out; }
@keyframes persona-flash{ 0%{ opacity:0 } 22%{ opacity:1 } 100%{ opacity:0 } }

@media (prefers-reduced-motion: reduce){
  .vn-actor.persona-swap{ animation:persona-fade .3s linear; }
  @keyframes persona-fade{ from{ opacity:.2 } to{ opacity:1 } }
  #scr-vn.persona-flash::before{ animation:none; }
}
/* 대사창 가독성용 스크림. ⚠ 절대 상단을 덮지 말 것.
   예전에는 inset:0 에 위쪽 42%가 어두운 그라데이션이라, 전체화면 프롤로그
   일러스트 위에 검은 띠가 얹혔다. 슬라이드일 때만 걷어내는 조건부 덮어쓰기로
   막아 봤지만 조건이 한 번만 어긋나도 다시 나온다(실측 3회 재발).
   그래서 기본값 자체를 하단 전용으로 고정한다. */
#scr-vn::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:52%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,3,6,0) 0%,rgba(5,3,6,.62) 46%,rgba(5,3,6,.94) 100%); }
/* 목업(docs/refs/mockup_vn.webp) 1:1 — 모서리 깎인 대사창 + 진홍 배너 네임플레이트 */
/* 대사창.
   ⚠ .vn-box 자체에 clip-path 를 걸면 위로 튀어나온 네임플레이트가 잘린다.
   모서리 깎인 형태는 ::before 오버레이가 그리고, 박스 자체는 클립하지 않는다. */
.vn-box{ position:absolute; left:118px; right:118px; bottom:76px; min-height:206px; z-index:2;
  padding:38px 46px 34px;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.85)); }
.vn-box::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(7,4,9,.90);
  border:1.5px solid rgba(226,58,92,.62);
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),
                    calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px),0 26px);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 60px rgba(226,58,92,.05);
}
/* 중앙 문양 — 폰트 글리프 대신 CSS 도형(마름모 로제트) */
.vn-box::after{
  content:""; position:absolute; left:50%; top:50%; width:78px; height:78px; z-index:0;
  transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; opacity:.07;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 50%/34px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 50% 0/1px 34px no-repeat,
    radial-gradient(circle at 50% 50%, transparent 12px, var(--gold) 12px 13px, transparent 13px);
}
/* 네임플레이트: 박스 위로 완전히 올라오도록 bottom 기준으로 붙인다 */
.vn-nameplate{ position:absolute; left:34px; bottom:100%; z-index:3;
  margin-bottom:-16px; padding:9px 30px 9px 46px;
  min-width:200px; max-width:520px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-display),var(--f-body); font-size:19px; font-weight:700;
  line-height:1.3; letter-spacing:.12em;
  color:#FFEDE2; background:linear-gradient(100deg,#7C1226,#B02240 62%,#6E0F22);
  border:1px solid rgba(232,199,122,.55);
  clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);
  box-shadow:0 4px 18px rgba(0,0,0,.6); }
.vn-nameplate::before{
  content:"✦"; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--gold); }
.vn-nameplate:empty{ display:none; }
.vn-text{ position:relative; z-index:2; margin:0;
  font-family:var(--f-display),var(--f-body); font-size:23px; line-height:1.95;
  letter-spacing:.01em; color:#F6EDE4;
  text-shadow:0 2px 14px rgba(0,0,0,.95); white-space:pre-wrap; }
.vn-text.narration{ color:var(--gold); font-style:italic; }
/* 외곽선 삼각 진행 마커 */
.vn-next{ position:absolute; right:34px; bottom:22px; z-index:2; width:22px; height:16px;
  border:0; background:var(--crimson);
  clip-path:polygon(0 0,100% 0,50% 100%,50% 100%,50% 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  animation:vn-blink 1.05s infinite; }
.vn-next::before{ content:""; position:absolute; inset:3px 4px 4px;
  background:rgba(7,4,9,.95); clip-path:polygon(0 0,100% 0,50% 100%); }
@keyframes vn-blink{ 0%,100%{ opacity:.25; transform:translateY(0) } 50%{ opacity:1; transform:translateY(4px) } }
.vn-ctl{ position:absolute; right:120px; bottom:30px; z-index:3; display:flex; align-items:center; gap:0; }
.vn-ctl::before{ content:""; position:absolute; left:-190px; right:-6px; top:-13px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dk) 45%,var(--gold-dk) 55%,transparent); }
.vn-ctl::after{ content:"◆"; position:absolute; left:-200px; top:-22px; font-size:9px; color:var(--gold); opacity:.8; }
.vn-ctl .vbtn{ border:0; padding:5px 16px; font-family:var(--f-display); font-size:14px;
  letter-spacing:.22em; color:var(--gold); }
.vn-ctl .vbtn + .vbtn{ position:relative; }
.vn-ctl .vbtn + .vbtn::before{ content:"◆"; position:absolute; left:-4px; top:50%;
  transform:translateY(-50%); font-size:7px; color:var(--gold); opacity:.7; }
.vn-ctl .vbtn:hover{ color:#FFF3D6; text-shadow:0 0 14px rgba(232,199,122,.9); }
.vbtn.on{ color:var(--crimson-hi); text-shadow:0 0 14px rgba(226,58,92,.8); }
.vn-logpanel{ position:absolute; inset:70px 140px; z-index:5; padding:28px 34px; overflow:auto;
  background:rgba(6,4,8,.95); border:1px solid var(--line); clip-path:var(--clip-6); }
.vn-logpanel[hidden]{ display:none; }
.vl-row{ margin-bottom:17px; font-size:15px; line-height:1.85; }
.vl-row b{ display:block; color:var(--gold); font-size:12.5px; letter-spacing:.1em; margin-bottom:3px; }

/* ═══════════════════ HUD ═══════════════════
   목업(docs/refs/mockup_hud.webp) 1:1 구현
   좌우 = 라운드 카드 패널 + 금색 코너 브래킷 / 중앙 = 프레임 두른 플레이필드 */
#hud{ position:absolute; inset:0; pointer-events:none; }
#hud[hidden]{ display:none; }
.scrim-top,.scrim-bot{ position:absolute; left:380px; width:840px; height:130px; }
/* 보스바가 필드 위에 겹치므로 그 뒤를 살짝 어둡게 해 가독성을 확보한다 */
.scrim-top{ top:52px; background:linear-gradient(180deg,rgba(4,2,6,.72),transparent); }
.scrim-bot{ bottom:0; background:linear-gradient(0deg,rgba(4,2,6,.55),transparent); }

/* 플레이필드 프레임 */
.field-frame{
  position:absolute; left:382px; top:52px; width:836px; height:836px;
  border:1.5px solid rgba(226,58,92,.55); border-radius:10px;
  box-shadow:inset 0 0 42px rgba(226,58,92,.10), 0 0 26px rgba(226,58,92,.10);
}
.field-frame::before,.field-frame::after{
  content:""; position:absolute; width:30px; height:30px; border:2px solid var(--crimson);
}
.field-frame::before{ left:-2px; top:-2px; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.field-frame::after{ right:-2px; bottom:-2px; border-left:0; border-top:0; border-radius:0 0 10px 0; }

/* ── 좌우 카드 패널 ── */
.hud-panel{
  position:absolute; top:14px; bottom:14px; width:352px; padding:22px 24px;
  display:flex; flex-direction:column; align-items:center; gap:15px; text-align:center;
  background:linear-gradient(180deg,#0B0710 0%,#0E0812 55%,#0A0610 100%);
  border:1.5px solid rgba(226,58,92,.5); border-radius:16px;
  box-shadow:inset 0 0 70px rgba(226,58,92,.07), 0 0 26px rgba(0,0,0,.85);
}
.hud-left{ left:14px; }
.hud-right{ right:14px; }
/* 4모서리 금색 브래킷 (DOM 추가 없이 배경 그라디언트로) */
.hud-panel::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  --b:#B08C42; --s:26px; --t:1.5px;
  background-image:
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b));
  background-size:var(--s) var(--t),var(--t) var(--s),var(--s) var(--t),var(--t) var(--s),
                  var(--s) var(--t),var(--t) var(--s),var(--s) var(--t),var(--t) var(--s);
  background-position:left 9px top 9px,left 9px top 9px, right 9px top 9px,right 9px top 9px,
                      left 9px bottom 9px,left 9px bottom 9px, right 9px bottom 9px,right 9px bottom 9px;
  background-repeat:no-repeat; opacity:.75;
}

/* ── 좌측: 캐릭터 원화 크게 ──
   패널을 꽉 채우고, 상시 미세 부유 + 피격 시 흔들림·적색 점멸로
   '맞았다'가 시야 주변부에서도 읽히게 한다. */
.hud-left{ padding:0; overflow:hidden; justify-content:flex-end; }
.portrait{ position:absolute; inset:0; overflow:hidden; }
.portrait img{
  /* 패널은 352x872(비율 0.40)인데 원화는 약 0.68 이라, contain 으로 맞추면
     가로에 맞춰져 세로가 절반 가까이 빈다. cover 로 채우고 좌우를 조금
     희생한다. object-position 을 위쪽으로 당겨 얼굴·상반신을 살린다. */
  position:absolute; left:50%; bottom:0; width:100%; height:100%;
  transform:translateX(-50%);
  object-fit:cover; object-position:center 14%;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.7));
  animation:pt-float 7s ease-in-out infinite;
}
@keyframes pt-float{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-10px) } }
.pt-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,5,10,.55) 0%, transparent 22%,
                             transparent 58%, rgba(8,5,10,.92) 96%); }
.pt-meta{ position:relative; z-index:2; width:100%; padding:0 20px 22px; text-align:center; }
.pt-name{ display:block; font-family:var(--f-display); font-size:26px; letter-spacing:.16em;
  color:#fff; text-shadow:0 0 20px rgba(226,58,92,.7), 0 2px 8px rgba(0,0,0,.9); }
.pt-erosion{ display:inline-block; margin-top:7px; padding:3px 12px; border-radius:11px;
  font-family:var(--f-num); font-size:11px; letter-spacing:.18em; color:var(--dim);
  background:rgba(8,4,10,.8); border:1px solid var(--line); }
.pt-erosion b{ color:var(--crimson-hi); font-weight:700; }

/* 피격 연출 — 원화가 흔들리고 붉게 물든다 */
.hud-left.hit .portrait img{ animation:pt-hit .42s var(--ease); }
.hud-left.hit::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(70% 50% at 50% 60%, rgba(255,60,90,.55), transparent 72%);
  animation:pt-flash .42s ease-out;
}
@keyframes pt-hit{
  0%{ transform:translateX(-50%) translate(0,0) }
  15%{ transform:translateX(-50%) translate(-9px,3px) rotate(-1.6deg) }
  35%{ transform:translateX(-50%) translate(7px,-2px) rotate(1.2deg) }
  55%{ transform:translateX(-50%) translate(-5px,2px) rotate(-.8deg) }
  75%{ transform:translateX(-50%) translate(3px,-1px) rotate(.4deg) }
  100%{ transform:translateX(-50%) translate(0,0) }
}
@keyframes pt-flash{ from{ opacity:1 } to{ opacity:0 } }

/* 라벨: 양쪽 장식선 (목업의 ·SCORE· 스타일) */
.stat,.chain{ width:100%; }
.stat label,.chain label{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-num); font-size:12.5px; font-weight:700; letter-spacing:.34em;
  color:var(--crimson-hi); margin-bottom:6px; text-indent:.34em;
}
.stat label::before,.stat label::after,.chain label::before,.chain label::after{
  content:""; flex:1; height:1px; max-width:52px; background:currentColor; opacity:.45;
}
.stat label.cy{ color:var(--cyan); }
.chain label{ color:var(--gold); }

.stat output{ display:block; font-family:var(--f-num); font-size:38px; line-height:1.05;
  letter-spacing:.10em; color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(255,255,255,.22); }
.stat output i{ font-style:normal; font-size:.62em; opacity:.75; }
.stat.big output{ font-size:40px; }
/* 우측 패널에 항목이 많아졌으므로 간격을 조인다 */
.hud-right{ gap:11px; padding:20px 20px; justify-content:center; }
.hud-right .stat.sm output{ font-size:26px; }
.hud-right .stat label,.hud-right .chain label{ margin-bottom:3px; font-size:11.5px; letter-spacing:.28em; }
.hud-right .icrow i{ width:31px; height:31px; }
.hud-right .chain output{ font-size:62px; }
.hud-right .framed{ padding:9px 14px 11px; }
.stat output.gold{ color:var(--gold); text-shadow:0 0 20px rgba(232,199,122,.45); }
.stat output.cyan{ color:var(--cyan); text-shadow:0 0 20px rgba(122,215,255,.5); }

/* 프레임 박스 (POWER / CHAIN) */
.framed{ position:relative; padding:12px 16px 14px; border:1px solid rgba(226,58,92,.3); border-radius:8px; }
.framed::before{
  content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none;
  --b:#B08C42; --s:14px; --t:1px;
  background-image:linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
                   linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b));
  background-size:var(--s) var(--t),var(--t) var(--s),var(--s) var(--t),var(--t) var(--s);
  background-position:left 4px top 4px,left 4px top 4px,right 4px bottom 4px,right 4px bottom 4px;
  background-repeat:no-repeat; opacity:.8;
}

/* ── HP 바 ──
   라이프(아이콘)와 다른 층이다. HP 가 0 이 되면 라이프가 1 깎인다.
   세그먼트를 겹쳐 그려 남은 칸이 한눈에 읽히게 한다. */
.hpwrap{ position:relative; }
.stat label.hp{ color:#7CFF9E; }
.stat label.hp::before,.stat label.hp::after{ background:currentColor; }
.hpbar{ position:relative; height:20px; border-radius:3px; overflow:hidden;
  background:rgba(8,20,12,.9); border:1px solid rgba(124,255,158,.45);
  box-shadow:inset 0 0 14px rgba(0,0,0,.7); }
.hpbar span{ display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#1E7A45,#3FE07A 55%,#9CFFC2);
  box-shadow:0 0 16px rgba(63,224,122,.75);
  transition:width .18s var(--ease), background .18s; }
.hpbar em{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-num); font-size:12px; font-style:normal; letter-spacing:.14em;
  color:#05130A; text-shadow:0 1px 0 rgba(255,255,255,.35); }
/* 위험 구간 */
.hpbar.low span{ background:linear-gradient(90deg,#8A5A10,#E8A33A 55%,#FFD98A);
  box-shadow:0 0 16px rgba(232,163,58,.8); }
.hpbar.crit span{ background:linear-gradient(90deg,#7C1226,#E23A5C 55%,#FF8CA4);
  box-shadow:0 0 18px rgba(226,58,92,.9); animation:hp-pulse .7s infinite; }
.hpbar.crit em{ color:#2A0209; }
@keyframes hp-pulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.45) } }
/* 세그먼트 구분선 — 남은 칸 수를 즉시 읽게 한다 */
.hpseg{ position:absolute; left:1px; right:1px; bottom:0; height:20px; pointer-events:none;
  display:flex; }
.hpseg i{ flex:1; border-right:1px solid rgba(4,10,6,.85); }
.hpseg i:last-child{ border-right:0; }

.icrow{ display:flex; gap:10px; justify-content:center; }
.icrow i{ width:38px; height:38px; display:block; opacity:.16; transition:.22s var(--ease); }
.icrow i.on{ opacity:1; filter:drop-shadow(0 0 9px currentColor); }
.pbar{ height:3px; margin-top:9px; background:rgba(255,255,255,.09); border-radius:2px; overflow:hidden; }
.pbar span{ display:block; height:100%; width:25%;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold)); transition:width .2s; }

.chain output{ display:block; font-family:var(--f-num); font-size:86px; line-height:.92;
  color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:.04em;
  text-shadow:0 0 34px rgba(232,199,122,.6); transition:transform .1s, color .1s; }
.chain output.pop{ transform:scale(1.1); color:#FFF0C8; }
.chain .cx{ display:block; font-family:var(--f-num); font-size:14px; letter-spacing:.16em; color:var(--dim); }

.boss-face{ position:absolute; right:14px; top:14px; z-index:3; width:96px; height:96px; margin:0; }
.boss-face[hidden]{ display:none; }
.boss-face img{ width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:2px solid var(--crimson); background:rgba(255,255,255,.04);
  box-shadow:0 0 0 5px rgba(10,6,12,.9), 0 0 22px rgba(226,58,92,.4); }

/* ── TRANCE (목업: 최상단 중앙, 세그먼트 + 화살 캡) ── */
.trance{ position:absolute; left:380px; width:840px; top:6px; text-align:center; }
.tr-label{ font-family:var(--f-num); font-size:13px; font-weight:700; letter-spacing:.62em;
  color:var(--violet); text-indent:.62em; text-shadow:0 0 16px rgba(185,140,255,.7); }
.tr-bar{ display:flex; align-items:center; gap:7px; margin-top:5px; padding:0 24px; }
.tr-cap{ flex:0 0 auto; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; }
.tr-cap.l{ border-right:11px solid rgba(185,140,255,.75); }
.tr-cap.r{ border-left:11px solid rgba(185,140,255,.75); }
.tr-rail{ position:relative; flex:1; height:17px; background:rgba(20,12,28,.85);
  border:1px solid rgba(185,140,255,.4); border-radius:2px; overflow:hidden; }
.tr-rail span{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#5B2FB0,var(--violet) 60%,#E6CCFF);
  box-shadow:0 0 18px rgba(185,140,255,.85); transition:width .12s linear; }
.tr-rail::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(6,3,10,.9) 118px 121px); }
.tr-ready{ margin-top:3px; font-family:var(--f-num); font-size:11px; letter-spacing:.3em;
  color:var(--violet); opacity:0; animation:tr-pulse 1s infinite; }
.trance.ready .tr-ready{ opacity:1; }
.trance.ready .tr-rail{ box-shadow:0 0 30px rgba(185,140,255,.9); border-color:var(--violet); }
@keyframes tr-pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* ── 보스 바 (목업: 플레이필드 바로 위 한 줄) ── */
/* 보스바는 필드 안쪽 상단에 겹쳐 올린다(동방 계열 관례).
   필드 밖으로 빼면 그만큼 보이지 않는 판정 구간이 생긴다. */
.bossbar{ position:absolute; left:396px; width:808px; top:60px;
  text-shadow:0 1px 6px rgba(0,0,0,.9); }
.bossbar[hidden]{ display:none; }
.bb-row{ display:flex; align-items:center; gap:12px; }
.bb-tag{ font-family:var(--f-num); font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--crimson); }
.bb-rail{ flex:1; height:11px; background:rgba(8,3,8,.85);
  border:1px solid rgba(226,58,92,.45); border-radius:2px; overflow:hidden; }
.bb-rail span{ display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#8A0F28,var(--crimson) 55%,#FF5C7A);
  box-shadow:0 0 14px rgba(226,58,92,.8); transition:width .16s; }
.bb-spell{ flex:0 0 auto; max-width:300px; font-family:var(--f-num); font-size:12.5px;
  letter-spacing:.1em; color:var(--gold); text-align:right; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 12px rgba(232,199,122,.5); }
.bb-timer{ flex:0 0 auto; min-width:104px; font-family:var(--f-num); font-size:30px; line-height:1;
  color:var(--crimson-hi); text-align:right; font-variant-numeric:tabular-nums;
  text-shadow:0 0 20px rgba(226,58,92,.8); }
.bb-timer.urgent{ color:#FFD3DC; animation:tr-pulse .55s infinite; }
.bb-sub{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.bb-pips{ display:flex; gap:7px; }
.bb-pips i{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(226,58,92,.5); }
.bb-pips i.on{ background:var(--crimson); box-shadow:0 0 10px var(--crimson); }
.bb-name{ font-family:var(--f-display); font-size:13px; letter-spacing:.2em; color:var(--dim); }

/* 화면 효과 */
.edge-glow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s;
  box-shadow:inset 0 0 130px 22px rgba(185,140,255,.55); }
.edge-glow.on{ opacity:1; }
.edge-glow.veil{ box-shadow:inset 0 0 150px 30px rgba(226,58,92,.7); }
/* --hit-mag 은 uibridge 가 피해량(1~4)에 따라 0.79~1.51 로 넣는다.
   무거운 탄일수록 스캔라인이 진하고 오래 남는다. */
.hit-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; --hit-mag:1;
  background:repeating-linear-gradient(0deg,rgba(226,58,92,.30) 0 2px,transparent 2px 5px); }
.hit-flash.on{ animation:hit-fl calc(.42s * var(--hit-mag)) var(--ease); }
@keyframes hit-fl{ 0%{ opacity:var(--hit-mag) } 100%{ opacity:0 } }

/* ── 화면 일시정지 버튼 ── */
.pause-btn{
  position:absolute; right:1234px; top:14px; z-index:12;
  width:36px; height:36px; display:grid; place-content:center; gap:4px;
  grid-auto-flow:column; pointer-events:auto;
  background:rgba(10,6,12,.82); border:1px solid var(--line); border-radius:8px;
  transition:.16s var(--ease);
}
.pause-btn span{ display:block; width:5px; height:15px; border-radius:1px; background:var(--crimson-hi); }
.pause-btn:hover{ border-color:var(--crimson-hi); background:rgba(60,12,26,.9); transform:scale(1.06); }
.pause-btn:hover span{ background:#fff; }
#hud[hidden] .pause-btn{ display:none; }

.toast-wrap{ position:absolute; left:50%; top:210px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.toast{ padding:9px 26px; font-family:var(--f-display); font-size:19px; letter-spacing:.2em;
  color:var(--gold); background:rgba(8,4,10,.7); border:1px solid var(--line-soft);
  clip-path:var(--clip-6); animation:toast .1s var(--ease), toast-out .5s 1.5s forwards; }
.toast.crit{ color:var(--crimson-hi); border-color:var(--crimson); font-size:26px; }
@keyframes toast{ from{ opacity:0; transform:translateY(-12px) } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(-14px) } }

/* ═══════════════════ PAUSE ═══════════════════ */
.pause-card{ position:absolute; left:50%; top:50%; width:440px; transform:translate(-50%,-50%);
  padding:56px 44px 40px; background:var(--panel-hi); border:1px solid var(--line);
  clip-path:var(--clip-6); }
.pause-card .scr-head{ position:static; margin:0 0 34px; display:block; text-align:center; }
.pause-card .scr-head span{ display:block; font-size:34px; white-space:nowrap; }
.pause-card .scr-head i{ display:block; margin-top:8px; font-size:13px; letter-spacing:.2em; }
.pause-card .scr-head::after{ left:50%; transform:translateX(-50%); width:140px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); }

/* ═══════════════════ RESULT ═══════════════════ */
#scr-result{ background:radial-gradient(90% 70% at 30% 40%,#1A0A12,#060408 70%); }
.res-head{ position:absolute; left:96px; top:88px; margin:0;
  font-family:var(--f-display); font-size:58px; letter-spacing:.16em; color:#fff;
  text-shadow:0 0 40px rgba(226,58,92,.6); }
.res-rule{ position:absolute; left:98px; top:168px; width:520px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent); }
.res-rows{ position:absolute; left:96px; top:214px; width:620px; display:flex; flex-direction:column; gap:11px; }
.res-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 22px;
  background:rgba(18,10,20,.66); border:1px solid var(--line-soft); clip-path:var(--clip-6);
  animation:res-in .4s var(--ease) both; }
.res-row label{ font-family:var(--f-num); font-size:12px; letter-spacing:.26em; color:var(--gold); }
.res-row output{ font-family:var(--f-num); font-size:28px; color:var(--text); font-variant-numeric:tabular-nums; }
.res-row.total{ padding:20px 22px; border-color:var(--crimson);
  background:linear-gradient(100deg,rgba(90,14,34,.6),rgba(18,10,20,.6));
  box-shadow:0 0 34px -10px var(--crimson); }
.res-row.total output{ font-size:44px; color:#fff; text-shadow:0 0 22px rgba(226,58,92,.8); }
@keyframes res-in{ from{ opacity:0; transform:translateX(-22px) } }
.res-art{ position:absolute; right:-20px; bottom:0; width:640px; height:880px;
  display:grid; place-items:end center; pointer-events:none; }
.res-art img{ height:94%; object-fit:contain; filter:drop-shadow(0 20px 60px rgba(0,0,0,.75)); }
.res-foot{ position:absolute; left:96px; bottom:66px; display:flex; gap:14px; }

/* ═══════════════════ GALLERY / OPTIONS ═══════════════════ */
#scr-gallery,#scr-options{ background:linear-gradient(160deg,#09050B,#130910 60%,#09050B); }
.gal-grid{ position:absolute; inset:150px 64px 130px; display:grid; gap:16px;
  grid-template-columns:repeat(5,1fr); grid-auto-rows:180px; overflow:auto; padding-right:8px; }
.gal-cell{ position:relative; overflow:hidden; background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft); clip-path:var(--clip-6); transition:.2s var(--ease); }
.gal-cell img{ width:100%; height:100%; object-fit:cover; }
.gal-cell.lock{ display:grid; place-items:center; color:var(--dim-2); font-size:30px; }
.gal-cell:not(.lock):hover{ border-color:var(--crimson); transform:translateY(-4px);
  box-shadow:0 12px 32px -10px var(--crimson); }
.gal-cell .gc-cap{ position:absolute; left:0; right:0; bottom:0; padding:7px 10px; font-size:11.5px;
  letter-spacing:.06em; background:linear-gradient(0deg,rgba(4,2,6,.94),transparent); }
.gal-view{ position:absolute; inset:0; z-index:6; display:grid; place-items:center;
  background:rgba(3,2,5,.95); }
.gal-view[hidden]{ display:none; }
.gal-view img{ max-height:82%; max-width:74%; object-fit:contain; }
.gv-cap{ margin-top:18px; font-size:14px; letter-spacing:.1em; color:var(--gold); }

.opt-list{ position:absolute; left:50%; top:170px; width:660px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:12px; }
.opt-row{ display:grid; grid-template-columns:190px 1fr 86px; gap:18px; align-items:center;
  padding:16px 24px; background:rgba(18,10,20,.6); border:1px solid var(--line-soft);
  clip-path:var(--clip-6); }
.opt-row > label{ font-size:14.5px; letter-spacing:.05em; color:var(--text); }
.opt-row output{ font-family:var(--f-num); font-size:15px; color:var(--gold); text-align:right; }
.opt-row input[type=range]{ width:100%; accent-color:var(--crimson); }
.opt-seg{ display:flex; gap:6px; }
.opt-seg button{ flex:1; padding:8px 0; font-size:12.5px; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line-soft); clip-path:var(--clip-6); transition:.16s; }
.opt-seg button.on{ color:#fff; background:rgba(226,58,92,.24); border-color:var(--crimson); }

/* ── 데이터 오류 오버레이 (?dev=1 전용) ── */
#dataerr{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:120; width:820px; max-height:76%; overflow:auto; cursor:pointer;
  padding:26px 30px; background:rgba(24,4,10,.97);
  border:1.5px solid var(--crimson); border-radius:10px;
  box-shadow:0 0 60px rgba(0,0,0,.9);
  font-family:var(--f-body); font-size:13.5px; color:var(--text);
}
#dataerr h3{ margin:0 0 14px; font-family:var(--f-display); font-size:22px;
  letter-spacing:.1em; color:var(--crimson-hi); }
#dataerr ol{ margin:0; padding-left:22px; }
#dataerr li{ margin-bottom:10px; line-height:1.65; }
#dataerr b{ color:var(--gold); }
#dataerr code{ font-family:var(--f-num); font-size:12px; color:var(--cyan); }
#dataerr p{ margin:16px 0 0; font-size:12px; color:var(--dim); }

/* ═══════════════════ DEV PANEL ═══════════════════ */
.devpanel{ position:absolute; right:0; top:0; bottom:0; width:430px; z-index:40;
  display:flex; flex-direction:column; background:rgba(6,4,9,.97);
  border-left:1px solid var(--gold-dk); font-family:var(--f-num); }
.devpanel[hidden]{ display:none; }
.devpanel header{ display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line-soft); font-size:12px; letter-spacing:.24em; color:var(--gold); }
.devpanel header small{ flex:1; font-size:10px; letter-spacing:.1em; color:var(--dim-2); }
.dev-tabs{ display:flex; flex-wrap:wrap; gap:5px; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.dev-tabs button{ padding:5px 11px; font-size:11px; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line-soft); }
.dev-tabs button.on{ color:var(--ink); background:var(--gold); }
.dev-body{ flex:1; overflow:auto; padding:14px; }
.dev-field{ display:grid; grid-template-columns:1fr 70px; gap:8px; align-items:center;
  padding:5px 0; font-size:11.5px; color:var(--dim); border-bottom:1px solid rgba(255,255,255,.045); }
.dev-field input{ width:100%; padding:4px 7px; font-family:var(--f-num); font-size:11.5px;
  color:var(--gold); background:rgba(255,255,255,.05); border:1px solid var(--line-soft); }
.dev-group{ margin:14px 0 6px; font-size:11px; letter-spacing:.22em; color:var(--crimson-hi); }

/* PROMPT PANIC v2 — playful cyber-editorial / forum bulletin reskin --------
   Geometry and screen anchors intentionally stay inherited from above. */
#scr-agegate,
#scr-menu,
#scr-charselect,
#scr-result,
#scr-gallery,
#scr-options{
  background-color:var(--color-bg);
  background-image:
    linear-gradient(90deg,rgba(8,7,13,.96),rgba(8,7,13,.78)),
    var(--surface-grid);
  background-size:auto,24px 24px,24px 24px;
}

/* Entry notice */
#scr-agegate{
  background-image:
    radial-gradient(60% 70% at 50% 45%,rgba(72,168,255,.10),transparent 72%),
    var(--surface-grid);
}
.ag-wrap{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);
  clip-path:none;
  box-shadow:12px 12px 0 rgba(0,0,0,.22);
}
.ag-title{ font-family:var(--f-display); font-weight:900; letter-spacing:.06em; color:var(--color-text); }
.ag-body{ color:var(--color-text-muted); }
.ag-body b{ color:var(--color-accent-bright); }

/* Title and common menu language */
.title-art img{
  filter:drop-shadow(-18px 12px 44px rgba(0,0,0,.72));
}
.title-scrim{
  background:
    linear-gradient(90deg,rgba(5,4,9,.98) 0%,rgba(5,4,9,.91) 30%,rgba(5,4,9,.34) 52%,transparent 72%),
    linear-gradient(180deg,rgba(5,4,9,.25),transparent 58%,rgba(5,4,9,.88));
}
#scr-title.is-cleared .title-scrim{
  background:
    linear-gradient(90deg,rgba(5,4,9,.98) 0%,rgba(5,4,9,.88) 30%,rgba(5,4,9,.28) 54%,transparent 72%),
    linear-gradient(180deg,rgba(5,4,9,.3),transparent 55%,rgba(5,4,9,.82));
}
.title-afterword{
  color:var(--color-text-muted);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-status);
  clip-path:none;
}
.ta-en{ color:var(--color-status); }
.ta-ko{ color:var(--color-text); }
.tm-item{
  font-family:var(--f-body);
  font-weight:800;
  letter-spacing:.055em;
  color:var(--color-text-muted);
  background:rgba(16,16,26,.92);
  border:1px solid var(--color-border);
  clip-path:none;
  text-transform:none;
  text-shadow:none;
  box-shadow:none;
  transition:color .14s var(--ease),background-color .14s var(--ease),border-color .14s var(--ease);
}
.tm-item .tm-en{
  color:var(--color-text-faint);
  font-family:var(--f-num);
  letter-spacing:.24em;
  text-transform:uppercase;
}
.tm-item::before{
  left:24px;
  width:9px;
  height:9px;
  margin-top:-4px;
  background:var(--color-accent);
  clip-path:none;
  opacity:.55;
  transform:none;
}
.tm-item::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--color-accent);
  opacity:.5;
}
.tm-item.on,.tm-item:hover{
  color:var(--color-bg-deep);
  border-color:var(--color-text);
  background:var(--color-text);
  text-shadow:none;
  box-shadow:none;
}
.tm-item.on::before,.tm-item:hover::before{ background:var(--color-accent-deep); opacity:1; transform:none; }
.tm-item.on::after,.tm-item:hover::after{ opacity:1; }
.tm-item.on .tm-en,.tm-item:hover .tm-en{ color:#4f5868; }
.title-foot{ color:var(--color-text-faint); }
.title-foot::before{
  content:"SYSTEM // DORMANT";
  position:absolute;
  left:64px;
  bottom:23px;
  color:var(--color-status);
  letter-spacing:.18em;
}
#scr-title.is-cleared .title-foot::before{ content:"SYSTEM // AFTER STORY"; }

/* 풀스크린 일러스트에서도 메뉴가 900px 뷰포트 안에 완전히 들어오게 한다. */
.title-menu{ top:420px; gap:8px; }
.title-menu .tm-item,
#scr-title.is-cleared .tm-item{
  padding:11px 30px 11px 58px;
  font-size:20px;
}
#scr-title.is-cleared .title-menu{ top:420px; gap:8px; }
.corner-orn{ display:block; opacity:.55; }

/* Main menu */
#scr-menu{
  background-image:
    linear-gradient(90deg,rgba(8,7,13,.28) 0%,rgba(8,7,13,.72) 48%,rgba(8,7,13,.97) 70%),
    var(--surface-grid);
}
.menu-art img{ filter:drop-shadow(14px 18px 48px rgba(0,0,0,.72)); }
.menu-plate{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-status);
  clip-path:none;
}
.mp-label{ color:var(--color-status); }
.mp-name{ color:var(--color-text); }
.ms-chip{
  color:var(--color-text-muted);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  clip-path:none;
}
.ms-chip:hover{ color:var(--color-accent-bright); border-color:var(--color-accent); background:var(--color-surface-active); }

/* Character select */
.cs-art img{ filter:drop-shadow(12px 22px 48px rgba(0,0,0,.68)); }
.cs-card,.cs-info{ --cc:var(--color-accent) !important; }
.cs-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  clip-path:none;
  box-shadow:none;
}
.cs-card img{ background:var(--color-surface-active); clip-path:none; }
.cs-card .ccn{ color:var(--color-text); }
.cs-card .cct{ color:var(--color-text-muted); }
.cs-card::after{ background:var(--color-accent); opacity:.35; }
.cs-card.on,.cs-card:hover{
  color:var(--color-text);
  border-color:var(--color-accent);
  background:var(--color-surface-active);
  transform:none;
  box-shadow:none;
}
.cs-info{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-accent);
  clip-path:none;
}
.ci-title{ font-family:var(--f-display); font-weight:900; letter-spacing:.035em; color:var(--color-accent-bright); }
.ci-sub{ color:var(--color-status); letter-spacing:.2em; }
.ci-desc{ color:var(--color-text-muted); }
.ci-stat{ color:var(--color-text-muted); }
.ci-bar{ background:var(--color-surface-active); }
.ci-bar span{ background:var(--color-accent); }
.ci-quote{ color:var(--color-text); border-color:var(--color-border); }

/* Visual novel and log */
#scr-vn{ background:var(--color-bg-deep); }
/* 테마 색만 갈아끼운다. 지오메트리(하단 전용)는 위 규칙을 그대로 따른다.
   여기서 다시 상단을 덮는 그라데이션을 쓰면 프롤로그에 검은 띠가 돌아온다. */
#scr-vn::after{
  background:linear-gradient(180deg,rgba(5,4,9,0) 0%,rgba(5,4,9,.6) 46%,rgba(5,4,9,.9) 100%);
}
.vn-box{ filter:drop-shadow(10px 12px 28px rgba(0,0,0,.55)); }
.vn-box::before{
  background:rgba(10,9,16,.96);
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-accent);
  clip-path:none;
  backdrop-filter:none;
  box-shadow:none;
}
.vn-box::after{
  left:auto;
  right:22px;
  top:20px;
  width:96px;
  height:48px;
  transform:none;
  opacity:.10;
  background:var(--surface-dither);
  background-size:6px 6px;
}
.vn-nameplate{
  margin-bottom:-12px;
  padding:9px 24px 9px 32px;
  font-family:var(--f-body);
  font-size:18px;
  letter-spacing:.05em;
  color:var(--color-bg-deep);
  background:var(--color-accent);
  border:0;
  border-left:3px solid var(--color-text);
  clip-path:none;
  box-shadow:none;
}
.vn-nameplate::before{ content:""; left:14px; width:8px; height:8px; background:var(--color-bg-deep); }
.vn-text{
  font-family:var(--f-body);
  color:var(--color-text);
  text-shadow:none;
  line-height:1.8;
}
.vn-text.narration{ color:var(--color-text-muted); font-style:normal; }
.vn-next{ background:var(--color-accent); }
.vn-next::before{ background:var(--color-bg-deep); }
.vn-ctl::before{ background:var(--color-border); }
.vn-ctl::after{ content:""; width:8px; height:8px; background:var(--color-status); top:-17px; }
.vn-ctl .vbtn{
  color:var(--color-text-muted);
  border:1px solid transparent;
  font-family:var(--f-num);
  letter-spacing:.18em;
  text-shadow:none;
}
.vn-ctl .vbtn + .vbtn::before{ content:""; left:-2px; width:1px; height:14px; background:var(--color-border); }
.vn-ctl .vbtn:hover{ color:var(--color-accent-bright); border-color:var(--color-border); text-shadow:none; }
.vbtn.on{ color:var(--color-status); text-shadow:none; }
.vn-logpanel{
  background:rgba(10,9,16,.98);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);
  clip-path:none;
}
.vl-row{ color:var(--color-text-muted); border-bottom:1px solid var(--color-border-soft); padding-bottom:14px; }
.vl-row b{ color:var(--color-accent-bright); }

/* In-game editor HUD */
.scrim-top{ background:linear-gradient(180deg,rgba(5,4,9,.74),transparent); }
.scrim-bot{ background:linear-gradient(0deg,rgba(5,4,9,.62),transparent); }
.field-frame{
  border:1px solid var(--color-border);
  border-radius:0;
  box-shadow:inset 0 0 30px rgba(72,168,255,.035);
}
.field-frame::before,.field-frame::after{ border-color:var(--color-accent); border-radius:0; }
.hud-panel{
  background:
    linear-gradient(180deg,rgba(16,16,26,.98),rgba(9,8,15,.98)),
    var(--surface-grid);
  border:1px solid var(--color-border);
  border-radius:0;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}
.hud-panel::before{
  inset:0 auto 0 0;
  width:3px;
  border-radius:0;
  background:var(--color-accent);
  opacity:.8;
}
.pt-scrim{
  background:linear-gradient(180deg,rgba(8,7,13,.42),transparent 26%,transparent 58%,rgba(8,7,13,.96) 95%);
}
.pt-name{ font-family:var(--f-display); font-weight:900; letter-spacing:.05em; color:var(--color-text); text-shadow:0 2px 8px rgba(0,0,0,.8); }
.pt-erosion{
  border-radius:0;
  color:var(--color-text-muted);
  background:var(--color-surface);
  border:1px solid var(--color-border);
}
.pt-erosion b{ color:var(--color-status); }
.stat label,.chain label{
  justify-content:flex-start;
  gap:8px;
  color:var(--color-accent-bright);
  letter-spacing:.2em;
  text-indent:0;
}
.stat label::before,.chain label::before{ flex:0 0 8px; height:8px; background:currentColor; opacity:1; }
.stat label::after,.chain label::after{ display:none; }
.stat label.cy{ color:var(--color-info); }
.stat label.hp{ color:var(--color-status); }
.chain label{ color:var(--color-text-muted); }
.stat output{ color:var(--color-text); text-shadow:none; }
.stat output.gold{ color:var(--color-text); text-shadow:none; }
.stat output.cyan{ color:var(--color-info); text-shadow:none; }
.framed{ border:1px solid var(--color-border); border-radius:0; background:var(--color-surface); }
.framed::before{ display:none; }
.hpbar{
  border-radius:0;
  background:var(--color-surface-active);
  border:1px solid var(--color-border);
  box-shadow:none;
}
.hpbar span{ background:var(--color-status); box-shadow:none; }
.hpbar em{ color:var(--color-bg-deep); text-shadow:none; }
.hpbar.low span{ background:var(--color-warning); box-shadow:none; }
.hpbar.crit span{ background:var(--color-danger); box-shadow:none; }
.hpseg i{ border-color:rgba(8,7,13,.55); }
.icrow i.on{ filter:none; }
.pbar{ border-radius:0; background:var(--color-surface-active); }
.pbar span{ background:var(--color-accent); }
.chain output{ color:var(--color-text); text-shadow:none; }
.chain output.pop{ color:var(--color-accent-bright); }
.boss-face img{
  border-radius:0;
  border:2px solid var(--color-accent);
  background:var(--color-surface);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.tr-label{ color:var(--color-accent-bright); text-shadow:none; letter-spacing:.42em; }
.tr-cap{ width:8px; height:17px; border:0; background:var(--color-border); }
.tr-cap.l,.tr-cap.r{ border:0; }
.tr-rail{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:0; }
.tr-rail span{ background:var(--color-accent); box-shadow:none; }
.tr-rail::after{ background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(5,4,9,.72) 118px 121px); }
.tr-ready{ color:var(--color-status); }
.trance.ready .tr-rail{ border-color:var(--color-accent-bright); box-shadow:0 0 0 2px rgba(72,168,255,.16); }

/* Boss bulletin */
.bossbar{
  padding:8px 10px;
  background:rgba(10,9,16,.94);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-danger);
  text-shadow:none;
}
.bb-tag{ color:var(--color-danger); }
.bb-rail{ height:10px; background:var(--color-surface-active); border:1px solid var(--color-border); border-radius:0; }
.bb-rail span{ background:var(--color-danger); box-shadow:none; }
.bb-spell{ color:var(--color-text); text-shadow:none; }
.bb-timer{ color:var(--color-text); text-shadow:none; }
.bb-timer.urgent{ color:var(--color-warning); }
.bb-pips i{ border-radius:0; border-color:var(--color-border); }
.bb-pips i.on{ background:var(--color-danger); box-shadow:none; }
.bb-name{ color:var(--color-text-muted); }
.edge-glow{ box-shadow:inset 0 0 90px 12px rgba(72,168,255,.38); }
.edge-glow.veil{ box-shadow:inset 0 0 110px 18px rgba(89,215,181,.42); }
.hit-flash{ background:repeating-linear-gradient(0deg,rgba(255,98,125,.24) 0 2px,transparent 2px 5px); }

.pause-btn{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:0;
}
.pause-btn span{ border-radius:0; background:var(--color-accent-bright); }
.pause-btn:hover{ border-color:var(--color-accent); background:var(--color-surface-active); transform:none; }
.toast{
  font-family:var(--f-display);
  font-weight:800;
  color:var(--color-text);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-status);
  clip-path:none;
}
.toast.crit{ color:var(--color-danger); border-color:var(--color-danger); }

/* Pause / game-over menu */
.pause-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-accent);
  clip-path:none;
  box-shadow:12px 12px 0 rgba(0,0,0,.28);
}
.pause-card .scr-head{ text-align:left; }
.pause-card .scr-head::after{ left:0; transform:none; background:var(--color-accent); }

/* Result */
#scr-result{
  background-image:
    linear-gradient(90deg,rgba(8,7,13,.98) 0%,rgba(8,7,13,.88) 48%,rgba(8,7,13,.24) 72%),
    var(--surface-grid);
}
.res-head{ font-family:var(--f-display); font-weight:900; letter-spacing:.04em; color:var(--color-text); text-shadow:none; }
.res-rule{ height:3px; background:var(--color-accent); }
.res-row{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-border);
  clip-path:none;
}
.res-row label{ color:var(--color-text-muted); }
.res-row output{ color:var(--color-text); }
.res-row.total{
  border-color:var(--color-accent);
  background:var(--color-surface-active);
  box-shadow:none;
}
.res-row.total label{ color:var(--color-accent-bright); }
.res-row.total output{ color:var(--color-text); text-shadow:none; }

/* Gallery and options */
.gal-cell{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  clip-path:none;
}
.gal-cell.lock{ color:var(--color-text-faint); }
.gal-cell:not(.lock):hover{ border-color:var(--color-accent); transform:none; box-shadow:0 0 0 2px rgba(72,168,255,.14); }
.gal-cell .gc-cap{ color:var(--color-text); background:linear-gradient(0deg,rgba(5,4,9,.96),transparent); }
.gal-view{ background:rgba(5,4,9,.97); }
.gv-cap{ color:var(--color-accent-bright); }
.opt-row{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-border);
  clip-path:none;
}
.opt-row:focus-within{ border-left-color:var(--color-accent); }
.opt-row > label{ color:var(--color-text); }
.opt-row output{ color:var(--color-status); }
.opt-row input[type=range]{ accent-color:var(--color-accent); }
.opt-seg button{
  color:var(--color-text-muted);
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  clip-path:none;
}
.opt-seg button.on{ color:var(--color-bg-deep); background:var(--color-accent); border-color:var(--color-accent-bright); }

/* Error and internal bulletin panels */
#dataerr{
  background:rgba(16,16,26,.99);
  border:1px solid var(--color-danger);
  border-left:3px solid var(--color-danger);
  border-radius:0;
  box-shadow:12px 12px 0 rgba(0,0,0,.35);
}
#dataerr h3{ font-family:var(--f-display); color:var(--color-danger); }
#dataerr b{ color:var(--color-warning); }
#dataerr code{ color:var(--color-info); }
.devpanel{ background:rgba(10,9,16,.99); border-left:3px solid var(--color-accent); }
.devpanel header{ color:var(--color-accent-bright); border-color:var(--color-border); }
.dev-tabs{ border-color:var(--color-border); }
.dev-tabs button{ color:var(--color-text-muted); border-color:var(--color-border); }
.dev-tabs button.on{ color:var(--color-bg-deep); background:var(--color-accent); }
.dev-field{ border-color:var(--color-border-soft); }
.dev-field input{ color:var(--color-status); background:var(--color-surface-raised); border-color:var(--color-border); }
.dev-group{ color:var(--color-accent-bright); }

/* 풀스크린 타이틀 원화 — 각성 전 기본판과 클리어 후 랜덤판의 캔버스 계약을 통일한다. */
#scr-title.is-before-awakening .title-art,
#scr-title.is-cleared .title-art{ inset:0; width:100%; height:100%; }
#scr-title.is-before-awakening .title-art img,
#scr-title.is-cleared .title-art img{
  width:100%; height:100%; object-fit:cover;
  animation:none; filter:none;
}
#scr-title.is-before-awakening .title-scrim{
  background:
    linear-gradient(90deg,rgba(5,4,9,.98) 0%,rgba(5,4,9,.91) 30%,rgba(5,4,9,.34) 52%,transparent 72%),
    linear-gradient(180deg,rgba(5,4,9,.25),transparent 58%,rgba(5,4,9,.88));
}

/* VERIFIED RANKING ------------------------------------------------------- */
#scr-ranking{
  background-color:var(--color-bg);
  background-image:
    linear-gradient(90deg,rgba(8,7,13,.98),rgba(8,7,13,.88)),
    var(--surface-grid);
  background-size:auto,24px 24px,24px 24px;
}
.rank-head{ left:64px; top:48px; }
.rank-config{
  position:absolute; left:64px; top:176px; width:352px;
  padding:24px; display:flex; flex-direction:column; gap:16px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);
}
.rank-config-kicker{
  font-family:var(--f-num); font-size:12px; font-weight:700;
  letter-spacing:.2em; color:var(--color-accent-bright);
}
.rank-field{ display:flex; flex-direction:column; gap:8px; }
.rank-field > span{
  display:flex; justify-content:space-between;
  font-size:13px; font-weight:700; color:var(--color-text);
}
.rank-field small{ font-family:var(--f-num); font-size:11px; font-weight:500; color:var(--color-text-faint); }
.rank-field input,.rank-field select{
  width:100%; min-height:44px; padding:8px 12px;
  font:600 14px/1.4 var(--f-body); color:var(--color-text);
  background:var(--color-surface-raised); border:1px solid var(--color-border);
}
.rank-field input:hover,.rank-field select:hover{ border-color:var(--color-accent); }
.rank-field input:focus-visible,.rank-field select:focus-visible{
  outline:2px solid var(--color-accent-bright); outline-offset:2px;
  border-color:var(--color-accent);
}
.rank-field select option:disabled{ color:var(--color-text-faint); }
.rank-field-error,.rank-challenge-reason{
  margin:-8px 0 0; font-size:12px; line-height:1.5; color:var(--color-danger);
}
.rank-challenge{ width:100%; margin-top:8px; }
.rank-board{ position:absolute; left:464px; right:64px; top:128px; bottom:128px; min-width:0; }
.rank-board-note{
  height:64px; padding:12px 16px; display:flex; flex-direction:column; justify-content:center; gap:4px;
  color:var(--color-text-muted); background:var(--color-surface);
  border:1px solid var(--color-border); border-left:3px solid var(--color-status);
}
.rank-board-note b{ font:700 11px/1.2 var(--f-num); letter-spacing:.2em; color:var(--color-status); }
.rank-board-note span{ font-size:12px; }
.rank-table{
  position:relative; height:calc(100% - 80px); margin-top:16px; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border);
}
.rank-table-head,.rank-row{
  display:grid;
  grid-template-columns:64px minmax(120px,1.3fr) minmax(120px,1fr) 72px minmax(128px,1.1fr) 96px 80px;
  align-items:center; column-gap:12px; padding:0 16px;
}
.rank-table-head{
  min-height:44px; font:700 11px/1.2 var(--f-num); letter-spacing:.12em;
  color:var(--color-accent-bright); background:var(--color-surface-raised);
  border-bottom:1px solid var(--color-border);
}
.rank-table-head span:nth-child(3),.rank-table-head span:nth-child(4){ text-align:right; }
.rank-body{ height:calc(100% - 44px); overflow-y:auto; }
.rank-row{
  min-height:48px; color:var(--color-text-muted); border-bottom:1px solid var(--color-border-soft);
}
.rank-row:hover{ background:var(--color-surface-active); }
.rank-cell{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px;
}
.rank-cell.c0{ font:800 18px/1 var(--f-num); color:var(--color-accent-bright); }
.rank-cell.c1{ color:var(--color-text); font-weight:700; }
.rank-cell.c2,.rank-cell.c3{
  text-align:right; font-family:var(--f-num); font-variant-numeric:tabular-nums;
  color:var(--color-text);
}
.rank-cell.c4,.rank-cell.c5,.rank-cell.c6{ font-family:var(--f-num); letter-spacing:.04em; }
.rank-state{
  position:absolute; inset:44px 0 0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center;
  color:var(--color-text-muted);
}
.rank-state strong{ font-size:16px; color:var(--color-text); }
.rank-state span{ max-width:48ch; font-size:13px; line-height:1.6; }
.rank-state.is-error strong{ color:var(--color-danger); }
.rank-skeleton{
  height:48px; margin:0 16px; border-bottom:1px solid var(--color-border-soft);
  background:linear-gradient(90deg,var(--color-surface) 0%,var(--color-surface-active) 50%,var(--color-surface) 100%);
  background-size:200% 100%; animation:rank-loading 1.2s linear infinite;
}
@keyframes rank-loading{ to{ background-position:-200% 0; } }
.rank-submission{
  position:absolute; left:0; right:0; bottom:-56px; min-height:40px; padding:10px 16px;
  font-size:12px; color:var(--color-text-muted); background:var(--color-surface);
  border:1px solid var(--color-border); border-left:3px solid var(--color-accent);
}
.rank-submission.is-success{ color:var(--color-status); border-left-color:var(--color-status); }
.rank-submission.is-warning{ color:var(--color-warning); border-left-color:var(--color-warning); }
.rank-submission.is-error{ color:var(--color-danger); border-left-color:var(--color-danger); }
.rank-actions{ position:absolute; left:64px; bottom:48px; display:flex; gap:12px; }

/* 최종/EX 보스 전용 우측 대형 원화. 중간보스 hidden 제어는 uibridge가 유지한다. */
.hud-right > .boss-hud-art{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  overflow:hidden; margin:0; pointer-events:none;
}
.hud-right > .boss-hud-art::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(5,4,9,.18),rgba(5,4,9,.72) 40%,rgba(5,4,9,.98) 78%);
}
.hud-right > .boss-hud-art img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  opacity:.64; border:0; border-radius:0; background:transparent; box-shadow:none;
  filter:saturate(.86) contrast(.94);
}
.hud-right > .stat,.hud-right > .chain{ position:relative; z-index:2; }
.hud-right > .boss-hud-art.hit img{ animation:boss-panel-hit .18s var(--ease); }
.hud-right > .boss-hud-art.hit::before{
  content:""; position:absolute; inset:0; z-index:2; background:rgba(255,98,125,.28);
  animation:pt-flash .18s ease-out;
}
@keyframes boss-panel-hit{
  0%{ transform:translateX(0); filter:saturate(.86) contrast(.94); }
  30%{ transform:translateX(-8px); filter:saturate(1.15) contrast(1.08); }
  65%{ transform:translateX(4px); }
  100%{ transform:translateX(0); filter:saturate(.86) contrast(.94); }
}

/* ═══════════════════════════════════════════════════════════════
   v8 — 보스전 HUD 압축 / 보스 말풍선 / VN 노이즈·슬라이드 / 갤러리 그룹
   ═══════════════════════════════════════════════════════════════ */

/* ── 보스전: 우측 패널을 원화에게 통째로 내준다 ──
   기존에는 SCORE·LIVES·VEILS·HP·POWER·GRAZE·CHAIN·STAGE 가 원화 위에 겹쳐
   보스 얼굴이 거의 안 보였다. 전투 중에는 수치를 하단 스트립으로 압축한다. */
.hud-strip{
  position:absolute; left:380px; width:840px; bottom:8px; height:38px;
  display:none; align-items:center; justify-content:space-between;
  gap:6px; padding:0 14px; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,14,.0),rgba(8,6,14,.88) 42%,rgba(8,6,14,.94));
  border-top:1px solid rgba(176,140,66,.42);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
}
#hud.boss-focus .hud-strip{ display:flex; }
.hud-strip span{
  display:flex; align-items:baseline; gap:6px;
  font-size:19px; font-weight:800; letter-spacing:.04em; color:#F1EDE5;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
}
.hud-strip span::before{
  font-size:10px; font-weight:700; letter-spacing:.22em;
  color:#9C93A6; text-shadow:none;
}
.hud-strip [data-k="score"]::before{ content:"SCORE"; }
.hud-strip [data-k="lives"]::before{ content:"LIFE"; }
.hud-strip [data-k="veils"]::before{ content:"VEIL"; }
.hud-strip [data-k="hp"]::before{ content:"HP"; }
.hud-strip [data-k="power"]::before{ content:"PWR"; }
.hud-strip [data-k="graze"]::before{ content:"GRAZE"; }

/* 보스전 하단 스트립 — 위쪽 정식 HUD와 같은 언어(아이콘 개수·게이지)로 읽히게 한다. */
.hud-strip .strip-icons{ display:inline-flex; gap:3px; align-items:center; }
.hud-strip .strip-icons i{ display:block; width:15px; height:15px; opacity:.22; filter:grayscale(1); }
.hud-strip .strip-icons i.on{ opacity:1; filter:none; }
.hud-strip .strip-icons svg{ display:block; width:100%; height:100%; }
.hud-strip .strip-bar{
  display:inline-block; position:relative; width:96px; height:9px; border-radius:5px;
  background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  overflow:hidden; vertical-align:middle;
}
.hud-strip .strip-bar > b{
  position:absolute; inset:0 auto 0 0; width:100%; border-radius:5px;
  background:linear-gradient(90deg,#57E0A8,#9BF0C8);
  transition:width .18s var(--ease), background .18s var(--ease);
}
.hud-strip .strip-bar > b.low{ background:linear-gradient(90deg,#FF5D77,#FF9BAA); }
.hud-strip [data-k="hp"]{ gap:8px; }
.hud-strip [data-k="hp"] u{ text-decoration:none; font-size:15px; font-variant-numeric:tabular-nums; }

/* 우측 보스 패널 하단 이름표 — 좌측 플레이어 패널의 이름 위치와 짝을 맞춘다. */
.hud-right > .boss-hud-art .boss-nameplate{
  position:absolute; left:0; right:0; bottom:8px; z-index:3;
  text-align:center; pointer-events:none;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-size:19px; font-weight:800; letter-spacing:.06em; color:#F4EFE6;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.7);
}
#hud.boss-focus .hud-right > .boss-hud-art .boss-nameplate{ bottom:12px; font-size:21px; }
.hud-strip [data-k="lives"],.hud-strip [data-k="veils"]{ color:#59D7B5; }
.hud-strip [data-k="hp"]{ color:#FF8FA3; }
.hud-strip [data-k="power"]{ color:#E8C77A; }
.hud-strip [data-k="graze"]{ color:#82C7FF; }

/* 전투 중에는 우측 수치 블록을 감추고 원화를 선명하게 올린다 */
#hud.boss-focus .hud-right > .stat,
#hud.boss-focus .hud-right > .chain{ display:none; }
#hud.boss-focus .hud-right > .boss-hud-art img{
  opacity:.98; filter:saturate(1) contrast(1);
}
#hud.boss-focus .hud-right > .boss-hud-art::after{
  background:linear-gradient(180deg,rgba(5,4,9,.06),rgba(5,4,9,.14) 62%,rgba(5,4,9,.62));
}

/* 보스 말풍선은 폐지했다. 스펠 발동은 gamerender 의 스펠 선언 연출이 담당한다. */

/* ── 조작 반전 경고 (젬황 스펠4) ── */
#hud.input-inverted::after{
  content:"⇄ 조작 반전";
  position:absolute; left:380px; width:840px; top:96px; z-index:5;
  text-align:center; font-family:'Roboto Condensed',sans-serif;
  font-size:22px; font-weight:900; letter-spacing:.3em; color:#FF9ED8;
  text-shadow:0 0 18px rgba(255,158,216,.9),0 2px 6px rgba(0,0,0,.9);
  animation:inv-blink .6s steps(2,end) infinite;
}
@keyframes inv-blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:.25 } }

/* ── TRANCE 필살기 진행 중 화면 테두리 발광 ── */
#hud.trance-burst::before{
  content:""; position:absolute; left:380px; width:840px; top:0; bottom:0;
  z-index:4; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(185,140,255,.75), inset 0 0 26px rgba(255,255,255,.5);
  animation:tb-pulse .28s ease-in-out infinite alternate;
}
@keyframes tb-pulse{ from{ opacity:.55 } to{ opacity:1 } }

/* ── VN: CEO 노이즈 대사 ──
   CEO 는 대사가 없다. 깨진 글자와 스캔라인으로 "말이 안 통한다"를 보여 준다. */
#vn-text.garbled{
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  letter-spacing:.06em; color:#9FB2C4;
  text-shadow:1.5px 0 0 rgba(255,60,90,.55), -1.5px 0 0 rgba(60,200,255,.5);
  animation:gb-jitter .18s steps(2,end) infinite;
}
#vn-text.garbled::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.055) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
@keyframes gb-jitter{
  0%{ transform:translate(0,0) } 50%{ transform:translate(-1px,.5px) } 100%{ transform:translate(1px,0) }
}

/* ── VN: 프롤로그 슬라이드 ──
   프롤로그 3장은 **전체화면 일러스트**다. 액자에 담지 않고 화면을 꽉 채우며,
   대사창은 그 위에 얹힌다. 예전에는 대사창 위 영역에만 들어가는 작은 판이라
   "일러스트를 보여 준다"는 느낌이 나지 않았다. */
.vn-slide{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  /* 배경색을 두면 다음 슬라이드가 로딩되는 동안 검은 판이 한 프레임 번쩍인다.
     object-fit:cover 라 이미지가 항상 영역을 채우므로 배경은 필요 없다. */
  border:0; border-radius:0; box-shadow:none; background:transparent;
  animation:vs-fade .5s var(--ease) both;
}
.vn-slide[hidden]{ display:none; }
@keyframes vs-fade{ from{ opacity:0; transform:scale(1.03) } to{ opacity:1; transform:scale(1) } }
/* 전체화면 슬라이드가 깔리면 대사창이 묻히지 않게 하단을 어둡게 눌러 준다. */
#scr-vn.has-slide::after,
#scr-vn:has(.vn-slide:not([hidden]))::after{
  /* 기본 스크림도 이제 하단 전용이라 이건 "슬라이드일 때 조금 더 짧게"일 뿐이다.
     그래도 top:auto 는 남겨 둔다 — top/bottom 을 둘 다 두면 height 가 무시된다. */
  content:""; position:absolute;
  left:0; right:0; top:auto; bottom:0; height:42%; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,2,8,0) 0%, rgba(4,2,8,.55) 40%, rgba(4,2,8,.92) 100%);
}

/* ── 갤러리 그룹 구분 ── */
.gal-cell[data-group="story"]{ outline:1px solid rgba(226,58,92,.34); }
.gal-cell[data-group="stage"]{ outline:1px solid rgba(72,168,255,.28); }
.gal-cell[data-group]::before{
  position:absolute; left:6px; top:6px; z-index:2;
  padding:2px 7px; border-radius:3px;
  font-family:'Roboto Condensed',sans-serif;
  font-size:9.5px; font-weight:800; letter-spacing:.18em;
  background:rgba(8,6,14,.8); color:#C9C2D2;
}
.gal-cell[data-group="character"]::before{ content:"CHARACTER"; }
.gal-cell[data-group="stage"]::before{ content:"STAGE"; color:#82C7FF; }
.gal-cell[data-group="story"]::before{ content:"STORY"; color:#FF8FA3; }
.gal-cell{ position:relative; }

/* ═══════════════════════════════════════════════════════════════
   v9 — 좌우 원화 크기·위치 통일 / 피격 흔들림 안정화
   ═══════════════════════════════════════════════════════════════
   문제: 좌측(플레이어)은 object-position:center 14% + pt-float(±10px),
   우측(보스)은 center top + 부유 없음이라 두 원화의 앉은 높이와 체감 크기가 달랐다.
   게다가 피격 애니메이션이 rotate 를 써서, cover 로 잘린 이미지가 회전하는 순간
   가장자리가 드나들며 "크기가 변한 것처럼" 보였다.
   → 두 패널의 정렬 규칙을 같게 맞추고, 피격은 **평행 이동만** 한다. */

.hud-left .portrait img,
.hud-right > .boss-hud-art img{
  object-fit:cover;
  object-position:center 12%;
  transform-origin:50% 50%;
}

/* 좌측 원화: 기존 translateX(-50%) 기준을 유지하되 부유 폭을 줄인다 */
@keyframes pt-float{
  0%,100%{ transform:translateX(-50%) translateY(0) }
  50%{ transform:translateX(-50%) translateY(-6px) }
}
/* 피격: 회전·확대 없이 좌우로만 흔든다. 크기가 변하지 않는다. */
@keyframes pt-hit{
  0%{ transform:translateX(-50%) translateX(0) }
  15%{ transform:translateX(-50%) translateX(-7px) }
  35%{ transform:translateX(-50%) translateX(6px) }
  55%{ transform:translateX(-50%) translateX(-4px) }
  75%{ transform:translateX(-50%) translateX(2px) }
  100%{ transform:translateX(-50%) translateX(0) }
}
/* 우측 보스 원화도 같은 규칙. filter 로 밝기를 바꾸면 크기가 달라 보이므로 유지만 한다. */
@keyframes boss-panel-hit{
  0%{ transform:translateX(0) }
  15%{ transform:translateX(-7px) }
  35%{ transform:translateX(6px) }
  55%{ transform:translateX(-4px) }
  75%{ transform:translateX(2px) }
  100%{ transform:translateX(0) }
}
.hud-right > .boss-hud-art.hit img{ animation:boss-panel-hit .42s var(--ease); }

/* 중간보스도 우측 패널을 쓴다. 보스 전투 중이 아닐 때는 원화를 조금 눌러 두어
   수치 블록과 겹쳐 읽히지 않게 한다(boss-focus 규칙이 다시 밝게 올린다). */
#hud:not(.boss-focus) .hud-right > .boss-hud-art img{ opacity:.5; }

/* ═══════════════════════════════════════════════════════════════
   v11 — 일시정지·옵션 오버레이는 항상 맨 앞
   ═══════════════════════════════════════════════════════════════
   route() 가 오버레이 화면을 띄울 때 아래 화면을 숨기지 않는다(Codex W2).
   따라서 오버레이가 확실히 위에 오고, 아래가 비쳐 보이도록 스타일을 준다.
   이게 없으면 VN 도중 일시정지가 걸렸을 때 대사창 뒤에 메뉴가 깔려 안 보인다. */
#scr-pause, #scr-options{ z-index:200; }
#scr-pause:not([hidden]), #scr-options:not([hidden]){
  background:rgba(4,2,6,.78);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
/* 오버레이가 떠 있는 동안 아래 화면은 입력을 받지 않는다 */
#ui.has-overlay .screen:not(#scr-pause):not(#scr-options){ pointer-events:none; }

/* ═══════════════════════════════════════════════════════════════
   v13 — 보스 상태창 압축
   ═══════════════════════════════════════════════════════════════
   보스바가 2행(레일+스펠+타이머 / 라이프+이름)으로 약 76px 를 먹어서, 그 아래로
   내려온 보스 전신이 화면 위쪽에서 잘렸다. 한 행으로 합치고 요소를 줄여
   높이를 절반 가까이 줄인다. 정보는 하나도 빼지 않는다. */
.bossbar{
  top:54px; padding:5px 10px 6px;
  left:400px; width:800px;
}
.bossbar .bb-row{ gap:9px; }
.bossbar .bb-tag{ font-size:10px; letter-spacing:.14em; }
.bossbar .bb-rail{ height:7px; border-radius:1px; }
.bossbar .bb-spell{ max-width:264px; font-size:11.5px; letter-spacing:.06em; }
.bossbar .bb-timer{ min-width:74px; font-size:19px; }
/* 2행이던 라이프·이름을 같은 줄로 끌어올린다 */
.bossbar .bb-sub{ margin-top:3px; gap:9px; align-items:center; }
.bossbar .bb-pips{ gap:5px; }
.bossbar .bb-pips i{ width:7px; height:7px; }
.bossbar .bb-name{ font-size:11px; letter-spacing:.14em; }

/* ── 런 종료 후 점수 제출 블록 ──
   결과·게임오버 화면에서 "랭킹에 올릴래?"를 묻는다.
   마크업은 screens.js 가 만들고 여기서 모양만 준다. */
.run-submit{
  margin-top:18px; padding:16px 20px 18px; max-width:560px;
  background:rgba(9,6,14,.9);
  border:1px solid rgba(226,58,92,.5);
  border-left:3px solid var(--crimson);
  border-radius:6px;
}
.rs-title{
  display:block; margin-bottom:10px;
  font-family:var(--f-display),sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.2em; color:var(--gold);
}
.rs-stats{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:14px;
  font-family:var(--f-num),sans-serif; font-size:13px; color:#C9C2D2;
}
.rs-stats b{ color:#F1EDE5; font-weight:800; }
.rs-best{ color:var(--gold); font-weight:800; }
.rs-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rs-row input{
  flex:1 1 200px; min-width:0; padding:9px 12px;
  background:rgba(4,2,8,.85); border:1px solid var(--line); border-radius:4px;
  font-family:var(--f-body),sans-serif; font-size:15px; color:#F1EDE5;
}
.rs-row input:focus{ outline:none; border-color:var(--crimson); }
.rs-msg{ margin-top:10px; font-size:13px; line-height:1.6; color:#C9C2D2; }
.rs-msg.is-success{ color:var(--color-status,#59D7B5); }
.rs-msg.is-warning{ color:var(--color-warning,#E8C77A); }
.rs-msg.is-error{ color:var(--color-danger,#FF6B7D); }
.rs-offline{ margin-top:8px; font-size:12px; color:#8E86A0; }

/* ── 랭킹 화면: 내 기록 요약 ── */
.rank-mine{
  display:flex; flex-wrap:wrap; gap:8px 26px; margin-bottom:14px;
  padding:12px 16px; border:1px solid var(--line); border-radius:6px;
  background:rgba(9,6,14,.72);
  font-family:var(--f-num),sans-serif; font-size:13px; color:#C9C2D2;
}
.rank-mine b{ color:#F1EDE5; font-weight:800; }
.rank-mine .rm-label{ color:#8E86A0; letter-spacing:.12em; font-size:11px; }

/* ═══════════════════════════════════════════════════════════════
   v14 — 우측 보스 원화 전신 노출 / 갤러리 썸네일 상반신 정렬
   ═══════════════════════════════════════════════════════════════ */

/* 보스 패널: 좌측 플레이어 패널과 **완전히 같은 규칙**으로 맞춘다.
   원화 비율(≈0.55)이 패널 비율(352/872≈0.40)보다 넓으므로 cover 는 높이를 꽉 채우고
   좌우만 조금 깎는다 = 전신이 그대로 보인다. contain 으로 두면 폭에 맞춰 축소되어
   좌측 캐릭터보다 눈에 띄게 작아진다(실측). 그래서 cover 를 쓰되 위쪽을 조금 남겨
   머리 위 여유를 준다. */
.hud-right > .boss-hud-art{ display:block; }
.hud-right > .boss-hud-art img{
  object-fit:cover;
  object-position:center 8%;
  width:100%; height:100%;
  padding:0; box-sizing:border-box;
}
/* 전투 중이 아닐 때만 살짝 눌러 두고, 보스전에는 좌측과 같은 밝기로 올린다. */
#hud.boss-focus .hud-right > .boss-hud-art img{ opacity:1; }

/* 갤러리 썸네일: object-fit:cover 인데 object-position 이 없어 기본값 center 가 걸렸다.
   전신 원화(세로로 긴 그림)에서 정중앙은 **허리·다리**라 누가 누군지 안 보였다.
   캐릭터 칸만 위쪽(머리·상반신)으로 당긴다. 배경·스토리 칸은 가운데가 맞다. */
.gal-cell img{ object-position:center 12%; }
.gal-cell[data-group="stage"] img,
.gal-cell[data-group="story"] img{ object-position:center center; }

/* ═══════════════════════════════════════════════════════════════
   v15 — 우측 보스 원화 확대
   ═══════════════════════════════════════════════════════════════
   cover 로 전신이 다 들어오긴 하지만, 패널이 세로로 길어서 인물이 작게 느껴진다.
   확대해 얼굴·상반신을 크게 잡는다. 좌우와 발끝이 조금 잘려도 된다는 판단이다. */
.hud-right > .boss-hud-art img{
  transform:scale(1.28);
  transform-origin:50% 26%;
}
/* 보스전 중에는 수치 블록이 사라지므로 조금 더 크게 세운다 */
#hud.boss-focus .hud-right > .boss-hud-art img{
  transform:scale(1.4);
  transform-origin:50% 24%;
}

/* 갤러리 썸네일 — screens.js 가 흉상(bust)을 넘겨주면 얼굴이 이미 화면 중앙에 있다.
   흉상은 정사각이라 가로로 넓은 칸에서 위아래가 잘리므로 살짝 위로만 당긴다. */
.gal-cell[data-group="character"] img{ object-position:center 22%; }