/* 내부 해상도 640×360 을 정수 배율(--s)로 확대한다. UI 크기도 같은 배율을 따른다. */ :root { --s: 1; --ink: #1b1f33; --paper: #f2f0e8; --gold: #f2c94c; --gold-d: #c9962e; --red: #c8383b; --navy: #2b4380; --page: #0f1118; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--page); overflow: hidden; } body { display: grid; place-items: center; font-family: Galmuri11, "Malgun Gothic", monospace; color: var(--paper); } #stage { position: relative; image-rendering: pixelated; } #game { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; } /* ---- HUD ---- */ #muteBtn { position: absolute; right: calc(8px * var(--s)); top: calc(8px * var(--s)); z-index: 3; font: inherit; font-size: calc(8px * var(--s)); padding: calc(2px * var(--s)) calc(5px * var(--s)); background: rgba(27, 31, 51, .78); color: var(--paper); cursor: pointer; border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; } #muteBtn.off { color: #8a8fa3; } #hud { position: absolute; left: calc(8px * var(--s)); top: calc(8px * var(--s)); } .panel { background: rgba(27, 31, 51, .78); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; padding: calc(4px * var(--s)) calc(6px * var(--s)); width: calc(150px * var(--s)); font-size: calc(9px * var(--s)); } .row { display: flex; justify-content: space-between; gap: calc(6px * var(--s)); line-height: 1.5; } .row.small { font-size: calc(8px * var(--s)); color: #cfcbbe; } .row b { color: var(--gold); } .bar { position: relative; height: calc(7px * var(--s)); background: #000; margin: calc(2px * var(--s)) 0; border: calc(1px * var(--s)) solid #000; } .bar i { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .15s; } .bar.hp i { background: linear-gradient(#ff7b6b 0 40%, #c8383b 40%); } .bar.xp { height: calc(4px * var(--s)); } .bar.xp i { background: #8fd06a; } .bar.boss i { background: linear-gradient(#ff8a7a 0 40%, #c8383b 40%); } .bar em { position: absolute; inset: 0; font-style: normal; font-size: calc(7px * var(--s)); line-height: calc(6px * var(--s)); text-align: center; color: #fff; text-shadow: 0 1px 0 #000; } #bossBar { position: absolute; left: 50%; top: calc(10px * var(--s)); transform: translateX(-50%); width: calc(260px * var(--s)); font-size: calc(9px * var(--s)); text-align: center; text-shadow: 0 1px 0 #000; } #bossBar .bar { height: calc(8px * var(--s)); } /* 보스 슈퍼아머 = 체력 막대 바로 아래 (겹치지 않게) 강철색 막대 (깨지면 붉은 바탕), 왼쪽 끝 방패 = 슈퍼아머 표시 */ #bossBar .bossSub { position: relative; margin: calc(2px * var(--s)) calc(8px * var(--s)) 0; } /* 체력 막대와 겹치지 않게 아래로 띄움 */ #bossSaIcon { position: absolute; left: calc(-3.6px * var(--s)); top: 50%; transform: translateY(-50%); z-index: 1; line-height: 0; } #bossSaIcon svg { width: calc(7.2px * var(--s)); height: calc(8px * var(--s)); } /* 아이콘 가운데가 막대 왼쪽 끝 = 막대 끝과 반쯤 겹침 */ #bossSaIcon path { fill: #b9c3d2; stroke: #1b1f33; stroke-width: 1; } #bossBar .broken + #bossSaIcon path, #bossSaIcon.broken path { fill: #6a3a3e; } #bossBar .bar.sa { height: calc(4px * var(--s)); margin: 0; } .bar.sa i { background: linear-gradient(#e8eef7 0 40%, #8a94a6 40%); transition: none; } .bar.sa.broken { background: #4a1f22; } /* 훈련장: 무예 트리 */ #treeUI { position: absolute; inset: calc(10px * var(--s)); background: rgba(20, 23, 38, .95); border: calc(2px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold-d); padding: calc(8px * var(--s)) calc(10px * var(--s)); font-size: calc(9px * var(--s)); display: flex; flex-direction: column; gap: calc(6px * var(--s)); } #treeUI[hidden] { display: none; } #treeUI .tHead { display: flex; justify-content: space-between; align-items: baseline; } #treeUI .tHead > b { color: var(--gold); font-weight: normal; font-size: calc(12px * var(--s)); } #treeUI .tHead span b { color: var(--gold); font-weight: normal; } #treeUI .tBody { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(10px * var(--s)); min-height: 0; } #treeUI .tGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6px * var(--s)); } #treeUI .tCol { display: flex; flex-direction: column; align-items: center; } #treeUI .tBr { font-size: calc(12px * var(--s)); text-align: center; margin-bottom: calc(4px * var(--s)); } #treeUI .tBr small { display: block; font-size: calc(7px * var(--s)); color: #a9b3c2; } #treeUI .tLine { width: calc(3px * var(--s)); height: calc(12px * var(--s)); } #treeUI .tNode { position: relative; width: calc(52px * var(--s)); height: calc(52px * var(--s)); display: grid; place-items: center; cursor: pointer; border: calc(2px * var(--s)) solid #3a3f55; background: #11131f; } #treeUI .tNode canvas { width: calc(48px * var(--s)); height: calc(48px * var(--s)); image-rendering: pixelated; } #treeUI .tNode.can { border-color: #cfcbbe; } #treeUI .tNode.learned { border-color: var(--c); box-shadow: 0 0 calc(6px * var(--s)) var(--c); } #treeUI .tNode.sel { outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(2px * var(--s)); } #treeUI .tRank { position: absolute; right: calc(-4px * var(--s)); bottom: calc(-4px * var(--s)); background: #1b1f33; border: calc(1px * var(--s)) solid #000; color: #fff6c8; font-size: calc(7px * var(--s)); padding: 0 calc(2px * var(--s)); } /* 훈련장 「능력」 목록: 아이콘 · 이름 · 지금 값 · 찍은 정도 막대 · 점수 */ #treeUI .aList { display: flex; flex-direction: column; gap: calc(5px * var(--s)); } /* 능력 수련 (PD 11-09 개편): 능력치·무예 묶음 · 비용 · 단계 칸 */ #treeUI .dojo .aCol { display: flex; flex-direction: column; min-height: 0; } #treeUI .dojo .aList { gap: calc(2px * var(--s)); overflow-y: auto; flex: 1; min-height: 0; } #treeUI .dojo .aGrp { color: var(--gold); font-size: calc(9px * var(--s)); border-bottom: calc(1px * var(--s)) solid #4a5170; padding: calc(2px * var(--s)) 0; margin-top: calc(2px * var(--s)); } #treeUI .dojo .aRow { grid-template-columns: calc(20px * var(--s)) 1fr calc(44px * var(--s)) calc(30px * var(--s)) calc(40px * var(--s)); padding: calc(1px * var(--s)) calc(4px * var(--s)); } #treeUI .dojo .aRow canvas { width: calc(18px * var(--s)); height: calc(18px * var(--s)); } #treeUI .dojo .aGrp { padding: 0; margin-top: calc(1px * var(--s)); } #treeUI .dojo .aRow.full b { opacity: .85; } #treeUI .aCost { justify-self: center; padding: 0 calc(3px * var(--s)); border: calc(1px * var(--s)) solid #6a7190; color: #cfd8e3; font-size: calc(8px * var(--s)); } #treeUI .aRow.can .aCost { border-color: var(--gold); color: var(--gold); } #treeUI .aBox { display: flex; gap: calc(2px * var(--s)); justify-content: flex-end; } #treeUI .aBox i { width: calc(7px * var(--s)); height: calc(7px * var(--s)); background: #1a1d2c; border: calc(1px * var(--s)) solid #000; } #treeUI .aBox i.on { background: var(--c); } #treeUI .aPlus { text-align: right; color: #a9b3c2; } #treeUI .tInfo .aNow .aCost { display: inline-block; margin-left: calc(4px * var(--s)); } #treeUI .tInfo .aNote { line-height: 1.6; } #treeUI .dojo .aReset { margin-top: calc(4px * var(--s)); border-style: dashed; --c: #ff8a6a; flex: none; } #treeUI .dojo .aReset.off { opacity: .5; } #treeUI .aRow { display: grid; grid-template-columns: calc(34px * var(--s)) 1fr calc(48px * var(--s)) 1fr calc(34px * var(--s)); align-items: center; gap: calc(6px * var(--s)); padding: calc(3px * var(--s)) calc(6px * var(--s)); background: rgba(43, 49, 80, .45); border: calc(1px * var(--s)) solid #3a3f55; cursor: pointer; } #treeUI .aRow canvas { width: calc(32px * var(--s)); height: calc(32px * var(--s)); image-rendering: pixelated; } #treeUI .aRow b { font-weight: normal; font-size: calc(10px * var(--s)); color: var(--c); } #treeUI .aRow .aVal { text-align: right; color: #fff6c8; } #treeUI .aRow .aPips { height: calc(5px * var(--s)); background: #1a1d2c; border: calc(1px * var(--s)) solid #000; } #treeUI .aRow .aPips i { display: block; height: 100%; background: var(--c); } #treeUI .aRow .aRank { text-align: right; color: #a9b3c2; } #treeUI .aRow.can { border-color: #6a7190; } #treeUI .aRow.sel { outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(1px * var(--s)); background: rgba(60, 68, 110, .7); } #treeUI .tInfo { background: rgba(43, 49, 80, .6); border: calc(1px * var(--s)) solid #4a5170; padding: calc(6px * var(--s)); overflow-y: auto; } #treeUI .tInfo canvas { width: calc(72px * var(--s)); height: calc(72px * var(--s)); image-rendering: pixelated; float: left; margin: 0 calc(6px * var(--s)) calc(4px * var(--s)) 0; } #treeUI .tInfo h3 { margin: 0 0 calc(4px * var(--s)); font-weight: normal; font-size: calc(11px * var(--s)); } #treeUI .tInfo h3 small { color: #a9b3c2; font-size: calc(8px * var(--s)); } #treeUI .tInfo p { margin: calc(2px * var(--s)) 0; line-height: 1.5; } #treeUI .tInfo b { color: #9fe08a; font-weight: normal; } #treeUI .dim { color: #a9b3c2; } #treeUI .no { color: #ff8a5a; } #treeUI .tBtns { clear: both; display: flex; flex-direction: column; gap: calc(3px * var(--s)); margin-top: calc(6px * var(--s)); } #treeUI .tBtns button { font: inherit; font-size: calc(9px * var(--s)); padding: calc(3px * var(--s)); background: #2b3150; color: var(--paper); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; cursor: pointer; text-align: left; } #treeUI .tBtns button:first-child:not(:disabled) { background: var(--navy); outline-color: var(--gold); } #treeUI .tBtns button:disabled { opacity: .4; cursor: default; } #treeUI .tKeys { font-size: calc(8px * var(--s)); color: #a9b3c2; } /* 스테이지 완료 연출 */ #clearFx { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; } #clearFx span { font-size: calc(40px * var(--s)); letter-spacing: .06em; color: #ffe27a; transform: scale(2.4); text-shadow: 0 calc(2px * var(--s)) 0 #8c6420, 0 calc(4px * var(--s)) 0 #1b1f33, 0 0 calc(12px * var(--s)) rgba(255, 210, 90, .8); } #clearFx.on { animation: clearFade 2.6s ease-out forwards; } #clearFx.on span { animation: clearPop 2.6s cubic-bezier(.2, 1.6, .4, 1) forwards, clearShine .35s steps(2) 6; } @keyframes clearFade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes clearPop { 0% { transform: scale(2.4) translateY(-30%); } 18% { transform: scale(1) translateY(0); } 100% { transform: scale(1.05); } } @keyframes clearShine { 50% { color: #fff6c8; } } /* 지도 아래 지역 정보 */ /* 지도 오른쪽 지역 설명 칸 (지도는 왼쪽 384px) */ #mapInfo { position: absolute; left: calc(400px * var(--s)); right: calc(8px * var(--s)); top: calc(24px * var(--s)); height: calc(328px * var(--s)); box-sizing: border-box; z-index: 2; background: rgba(20, 23, 38, .94); border: calc(1px * var(--s)) solid var(--gold-d); padding: calc(6px * var(--s)) calc(8px * var(--s)); font-size: calc(8px * var(--s)); line-height: 1.45; overflow-y: auto; color: #e8e2d4; } #mapInfo[hidden] { display: none; } #mapInfo p { margin: calc(3px * var(--s)) 0; } #mapInfo .mHead { border-bottom: calc(1px * var(--s)) solid #3a3f55; padding-bottom: calc(4px * var(--s)); margin-bottom: calc(4px * var(--s)); } #mapInfo .mHead small { color: #a99f8e; } #mapInfo .mHead i { float: right; font-style: normal; padding: 0 calc(4px * var(--s)); border: calc(1px * var(--s)) solid currentColor; } #mapInfo h2 { margin: calc(1px * var(--s)) 0 0; font-weight: normal; font-size: calc(13px * var(--s)); color: var(--gold); } #mapInfo h2 span { font-size: calc(10px * var(--s)); color: #cfcbbe; } #mapInfo h4 { margin: calc(6px * var(--s)) 0 calc(2px * var(--s)); font-weight: normal; color: #a99f8e; font-size: calc(8px * var(--s)); } #mapInfo .mCard { display: flex; gap: calc(6px * var(--s)); align-items: flex-start; background: rgba(43, 49, 80, .55); border: calc(1px * var(--s)) solid #3a3f55; padding: calc(4px * var(--s)); margin-bottom: calc(3px * var(--s)); } #mapInfo .mCard .mBody { flex: none; width: calc(52px * var(--s)); height: calc(60px * var(--s)); background: radial-gradient(ellipse at 50% 90%, #3a3f55, #1a1d2c 70%); border: calc(1px * var(--s)) solid #000; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } #mapInfo .mCard .mBody img { width: 100%; height: 100%; image-rendering: auto; } /* town.js bodyImg 가 칸 크기 그대로 그려 둔다 */ #mapInfo .mCard .mBody span { align-self: center; color: var(--gold); font-size: calc(14px * var(--s)); } #mapInfo .mCard small { display: block; color: #a99f8e; font-size: calc(7px * var(--s)); } #mapInfo .mCard b { font-weight: normal; color: #fff6c8; font-size: calc(10px * var(--s)); } #mapInfo .mCard p { margin: calc(1px * var(--s)) 0 0; color: #cfcbbe; } #mapInfo .mNotes { margin-top: calc(4px * var(--s)); } #mapInfo .mNotes .hid { color: #c9a0ff; } /* 숨은 지역 출처 줄 */ #mapInfo .mKeys { margin-top: calc(6px * var(--s)); } #mapInfo .dim { color: #a99f8e; } #mapInfo .ok { color: #9fe08a; } #mapInfo .no { color: #ff8a5a; } #mapInfo .go { color: #ffd25a; } #mapInfo .boss { color: #fff; background: #8e2328; padding: 0 calc(3px * var(--s)); } #banner, #toast { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .25s; text-shadow: 0 calc(1px * var(--s)) 0 #000, 0 0 calc(4px * var(--s)) #000; white-space: nowrap; } #banner { top: 34%; font-size: calc(20px * var(--s)); color: var(--gold); } #toast { top: 46%; font-size: calc(11px * var(--s)); color: #9fe08a; } #toast.top { top: 14%; } #banner.on, #toast.on { opacity: 1; } #stage:has(#treeUI:not([hidden])) #toast { top: 3%; } /* 병기창·주점 화면에서는 위쪽에 (설명 글과 겹치지 않게) */ /* ---- 화면 오버레이 ---- */ #screen { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(10, 12, 20, .55); } /* 타이틀 그림(#title) 위에 */ #screen[hidden] { display: none; } #screen.side { place-items: center start; padding-left: calc(10px * var(--s)); background: linear-gradient(90deg, rgba(10, 12, 20, .55), rgba(10, 12, 20, 0) 55%); } #screen.side .card { min-width: calc(220px * var(--s)); max-width: calc(250px * var(--s)); } .card { max-height: calc(344px * var(--s)); overflow-y: auto; background: rgba(27, 31, 51, .94); border: calc(2px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold-d); padding: calc(14px * var(--s)) calc(20px * var(--s)); min-width: calc(260px * var(--s)); max-width: calc(420px * var(--s)); text-align: center; } .card h1 { margin: 0 0 calc(8px * var(--s)); font-size: calc(16px * var(--s)); color: var(--gold); font-weight: normal; line-height: 1.4; } .card .logo { font-size: calc(24px * var(--s)); letter-spacing: .1em; } .card p, .card ul { font-size: calc(9px * var(--s)); line-height: 1.6; margin: calc(4px * var(--s)) 0; } .card ul { list-style: none; padding: 0; } .card b { color: var(--gold); font-weight: normal; } .card .dim { color: #a9b3c2; } .card ul.classes { text-align: left; margin: calc(6px * var(--s)) 0; } .card ul.classes li { margin: calc(2px * var(--s)) 0; } .keys { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3px * var(--s)) calc(10px * var(--s)); text-align: left; font-size: calc(8px * var(--s)); color: #cfcbbe; margin: calc(8px * var(--s)) 0; } kbd { border: calc(1px * var(--s)) solid #6a7190; border-bottom-width: calc(2px * var(--s)); padding: 0 calc(3px * var(--s)); font-family: inherit; color: #fff; } #screenActions { display: flex; flex-direction: column; gap: calc(4px * var(--s)); margin-top: calc(10px * var(--s)); } #screenActions button { font: inherit; font-size: calc(9px * var(--s)); text-align: left; padding: calc(4px * var(--s)); cursor: pointer; background: #2b3150; color: var(--paper); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; } #screenActions button.sel { background: var(--navy); outline-color: var(--gold); color: #fff; } #screenActions button.sel::before { content: "▶ "; color: var(--gold); } #screenActions button:disabled { opacity: .4; cursor: default; } code { font-family: inherit; color: var(--gold); } /* 보스 무기 기술 칸 (숫자키 1~4) */ #skillBar { position: absolute; left: calc(8px * var(--s)); bottom: calc(8px * var(--s)); display: flex; gap: calc(3px * var(--s)); z-index: 2; } #skillBar[hidden] { display: none; } #skillBar .sk { position: relative; width: calc(46px * var(--s)); padding: calc(2px * var(--s)) calc(3px * var(--s)); background: rgba(27, 31, 51, .8); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; font-size: calc(7px * var(--s)); color: #8a8fa3; overflow: hidden; } #skillBar .sk.ready { color: var(--paper); outline-color: var(--gold); } #skillBar .sk b { color: var(--gold); margin-right: calc(2px * var(--s)); } #skillBar .sk i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55); pointer-events: none; } /* HD-2D 시험: WebGL 캔버스(#gl)를 밑에, 기존 2D 캔버스(#game)를 투명하게 위에 겹친다 */ #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; image-rendering: auto; } /* 큰 화면에서 줄여 그린 3D 화면을 부드럽게 늘린다 (도트는 셰이더 픽셀아트 필터가 고르게 — 소수 배율 도트 늘림으로 다시 깨지지 않게) */ /* 2D 캔버스는 3D 화면(#gl) 바로 위, 메뉴·HUD 등 HTML 화면(문서에서 뒤에 오는 것들)보다는 아래 */ #game { position: relative; z-index: 0; } /* 지도 버튼: 아군 군영으로 · 출전 */ #mapBtns { position: absolute; left: calc(16px * var(--s)); width: calc(368px * var(--s)); top: calc(324px * var(--s)); display: flex; gap: calc(6px * var(--s)); z-index: 2; } #mapBtns button { flex: 1; } #mapBtns button.sel { outline-color: var(--gold) !important; color: #fff; background: #4a3f58; } #mapBtns[hidden] { display: none; } #mapBtns button { font: inherit; font-size: calc(9px * var(--s)); padding: calc(3px * var(--s)) calc(6px * var(--s)); cursor: pointer; background: rgba(27, 31, 51, .88); color: var(--paper); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; } #mapBtns button:hover:not(:disabled) { outline-color: var(--gold); color: #fff; } #mapBtns button:disabled { opacity: .45; cursor: default; } #mapBtns kbd { font: inherit; font-size: calc(7px * var(--s)); color: #a99f8e; margin-left: calc(3px * var(--s)); } /* 군영 대화 상자 */ #dialog, #stageTalk { position: absolute; left: calc(40px * var(--s)); right: calc(40px * var(--s)); bottom: calc(10px * var(--s)); z-index: 3; cursor: pointer; background: rgba(27, 31, 51, .94); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold); padding: calc(6px * var(--s)) calc(10px * var(--s)); font-size: calc(9px * var(--s)); } #dialog[hidden], #stageTalk[hidden] { display: none; } /* 대화창 얼굴 (PD 11-09, talk.js): 왼쪽 얼굴 칸 + 오른쪽 이름·대사 */ #dialog, #stageTalk { display: flex; gap: calc(8px * var(--s)); align-items: flex-start; min-height: calc(62px * var(--s)); } #dialog[hidden], #stageTalk[hidden] { display: none; } #dialog .dFace, #stageTalk .dFace { flex: none; width: calc(56px * var(--s)); height: calc(56px * var(--s)); background: #141725; border: calc(1px * var(--s)) solid var(--gold-d); outline: calc(1px * var(--s)) solid #000; } #dialog .dFace canvas, #stageTalk .dFace canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; } #dialog.noFace .dFace, #stageTalk.noFace .dFace { display: none; } #dialog .dBody, #stageTalk .dBody { flex: 1; min-width: 0; } #dialog.narr .dBody p, #stageTalk.narr .dBody p { color: #e6dcc4; font-style: italic; } #dialog b, #stageTalk b { color: var(--gold); font-weight: normal; font-size: calc(10px * var(--s)); } #dialog p, #stageTalk p { margin: calc(3px * var(--s)) 0; line-height: 1.5; } #dialog span, #stageTalk span { position: absolute; right: calc(8px * var(--s)); bottom: calc(4px * var(--s)); color: #a99f8e; font-size: calc(7px * var(--s)); } /* 시설 화면 카드 (대장간 무기·동료) */ #screen.side.wide .card { min-width: calc(260px * var(--s)); max-width: calc(290px * var(--s)); } .fc { display: flex; gap: calc(6px * var(--s)); align-items: center; text-align: left; margin: calc(4px * var(--s)) 0; padding: calc(4px * var(--s)); background: rgba(15, 17, 28, .6); border: calc(1px * var(--s)) solid #3a3f5c; font-size: calc(8px * var(--s)); line-height: 1.5; } .fci { flex: none; width: calc(64px * var(--s)); height: calc(40px * var(--s)); display: grid; place-items: center; background: rgba(255, 255, 255, .04); } .fci img { max-width: 100%; max-height: 100%; image-rendering: pixelated; } /* 병기창 (키보드): 왼쪽 무기 그림 칸, 오른쪽 설명·할 일. 틀은 #treeUI (훈련장과 같은 창) */ #treeUI .wBody { grid-template-columns: 1fr 1.25fr; } #treeUI .wGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(4px * var(--s)); align-content: start; overflow-y: auto; } #treeUI .wnone { grid-column: 1 / -1; text-align: center; padding: calc(20px * var(--s)) 0; } #treeUI .wCell { position: relative; height: calc(40px * var(--s)); display: grid; place-items: center; background: rgba(15, 17, 28, .7); border: calc(1px * var(--s)) solid #3a3f5c; padding: calc(3px * var(--s)); } #treeUI .wCell img { max-width: 100%; max-height: 100%; image-rendering: pixelated; } #treeUI .wCell.cur { border-color: var(--gold); outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(1px * var(--s)); } #treeUI .wCell.held { outline-color: var(--gold-d); } #treeUI .wCell i { position: absolute; left: calc(2px * var(--s)); top: calc(2px * var(--s)); font-style: normal; font-size: calc(7px * var(--s)); line-height: 1; color: #1b1f33; background: var(--gold); padding: calc(1px * var(--s)) calc(2px * var(--s)); } #treeUI .wCell em { position: absolute; right: calc(2px * var(--s)); bottom: calc(1px * var(--s)); font-style: normal; font-size: calc(7px * var(--s)); color: var(--gold); } #treeUI .wInfo p { margin: calc(2px * var(--s)) 0; } #treeUI .wInfo h3 small { color: #a9b3c2; font-size: calc(7px * var(--s)); } #treeUI .wInfo .ok { color: #9fe08a; } #treeUI .wInfo .no { color: #ff8a5a; } #treeUI .wInfo .dim { color: #a99f8e; } #treeUI .wBig { height: calc(30px * var(--s)); display: grid; place-items: center; margin-bottom: calc(4px * var(--s)); background: rgba(255, 255, 255, .04); } #treeUI .wBig img { max-width: 100%; max-height: 100%; image-rendering: pixelated; } #treeUI .wActs { margin-top: calc(6px * var(--s)); display: flex; flex-direction: column; gap: calc(2px * var(--s)); } #pad .ps .dq { position: absolute; left: 50%; bottom: calc(-4px * var(--s)); transform: translateX(-50%); display: flex; gap: calc(1px * var(--s)); text-decoration: none; z-index: 2; } /* 회피 남은 횟수 (PD 11-09) */ #pad .ps .dq i { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: #3a3f5c; border: calc(0.5px * var(--s)) solid #000; } #pad .ps .dq i.on { background: #9fe08a; } /* 주점 동료 성장 (PD 11-09 UI 개선) */ #treeUI .aLvBar { display: flex; align-items: center; gap: calc(6px * var(--s)); margin: calc(2px * var(--s)) 0 calc(4px * var(--s)); } #treeUI .aLvBar b { color: var(--gold); font-weight: normal; font-size: calc(12px * var(--s)); } #treeUI .aLvPips, #treeUI .aSkPips { display: inline-flex; gap: calc(2px * var(--s)); } #treeUI .aLvPips i { width: calc(9px * var(--s)); height: calc(7px * var(--s)); background: #1a1d2c; border: calc(1px * var(--s)) solid #000; } #treeUI .aLvPips i.on { background: var(--gold); } #treeUI .aLvPips i.nx, #treeUI .aSkPips i.nx { background: #9fe08a; animation: pipNx 0.7s ease-in-out infinite alternate; } @keyframes pipNx { from { opacity: .35; } to { opacity: 1; } } #treeUI .aLvBar em { font-style: normal; color: #a9b3c2; font-size: calc(8px * var(--s)); } #treeUI .aSks + p, #treeUI .wInfo > p.dim:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 주점: 소개 글·상태 한 줄 */ #treeUI .wInfo .aBig { width: calc(48px * var(--s)); height: calc(48px * var(--s)); } #treeUI .wInfo .wActs { margin-top: calc(3px * var(--s)); display: flex; flex-direction: column; } /* 영웅각 할 일 = 한 줄에 하나 (↑↓, PD 11-09) */ #treeUI .wInfo .aNext { margin: calc(2px * var(--s)) 0; } #treeUI .aSk > small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 기술 설명 한 줄 (주점 칸이 넘치지 않게) */ #treeUI .aSkTop { display: flex; align-items: center; gap: calc(4px * var(--s)); flex-wrap: wrap; } #treeUI .aSkPips { margin-left: auto; } #treeUI .aSkPips i { width: calc(6px * var(--s)); height: calc(6px * var(--s)); background: #1a1d2c; border: calc(1px * var(--s)) solid #000; } #treeUI .aSkPips i.on { background: #8fb8ff; } #treeUI .aLock { margin-left: auto; color: #cfd8e3; border: calc(1px * var(--s)) solid #6a7190; padding: 0 calc(4px * var(--s)); } #treeUI .aOpen { margin-left: auto; color: var(--gold); border: calc(1px * var(--s)) solid var(--gold); padding: 0 calc(4px * var(--s)); animation: pipNx 0.7s ease-in-out infinite alternate; } #treeUI .aNext { border: calc(1px * var(--s)) solid #9fe08a; background: rgba(40, 70, 40, .35); padding: calc(3px * var(--s)) calc(5px * var(--s)); margin: calc(4px * var(--s)) 0; } #treeUI .aNext.max { border-color: var(--gold); color: var(--gold); background: none; } #treeUI .aNh { color: #9fe08a; margin-bottom: calc(2px * var(--s)); } #treeUI .aNx { line-height: 1.5; } #treeUI .aNx b { color: #fff6c8; font-weight: normal; } #treeUI .aNx small { display: block; color: #cfd8e3; padding-left: calc(8px * var(--s)); } #treeUI .aNx small b { color: #9fe08a; } #treeUI .aNx.new { color: var(--gold); } /* 동료 기술 상태 표시 (PD 11-08): 동그라미 = 부여 · 마름모 = 터뜨림 · 별 = 속성 강화 */ .stTag { display: inline-flex; align-items: center; gap: calc(2px * var(--s)); vertical-align: middle; font-style: normal; } .stTag i { position: relative; display: inline-grid; place-items: center; width: calc(10px * var(--s)); height: calc(10px * var(--s)); background: var(--c); border-radius: 50%; font-style: normal; font-size: calc(6px * var(--s)); color: #14121c; flex: none; } .stTag i img { width: 80%; height: 80%; display: block; image-rendering: auto; position: relative; } .stTag.burst i { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .stTag.burst i::before { content: ""; position: absolute; inset: 12%; background: #1b1f33; clip-path: inherit; } .stTag.burst i img { width: 58%; height: 58%; } .stTag.star i { border-radius: 0; clip-path: polygon(50% 0, 61.8% 35.4%, 100% 38.2%, 69.1% 61.8%, 80.9% 100%, 50% 76.4%, 19.1% 100%, 30.9% 61.8%, 0 38.2%, 38.2% 35.4%); } .stTag.star i img { width: 50%; height: 50%; margin-top: 15%; } .stTag b { color: var(--c); font-weight: normal; font-size: .9em; } #treeUI .tcC .stTag, #treeUI .tcOpt .stTag { margin-right: calc(3px * var(--s)); } /* 동료 전술 설정 (PD 11-08, js/ui/tactics.js) */ #treeUI .tacUI { flex: 1; display: flex; flex-direction: column; gap: calc(3px * var(--s)); min-height: 0; overflow: hidden; } #treeUI .tacHelp { color: #a9a59b; margin: 0; } #treeUI .tacHelp b { color: var(--gold); font-weight: normal; } #treeUI .tcRow, #treeUI .tcHd { display: grid; grid-template-columns: calc(14px * var(--s)) 1.1fr 1.3fr 1fr; gap: calc(4px * var(--s)); align-items: center; } #treeUI .tcHd { color: #8d897f; font-size: calc(8px * var(--s)); border-bottom: calc(1px * var(--s)) solid #3a3f5c; padding-bottom: calc(2px * var(--s)); } #treeUI .tcRow { padding: calc(1px * var(--s)) 0; } #treeUI .tcRow.cur { background: rgba(58, 91, 160, .18); } #treeUI .tcRow.lift { background: rgba(242, 201, 76, .22); outline: calc(1px * var(--s)) dashed var(--gold); } #treeUI .tcMode { grid-template-columns: auto 1fr; } #treeUI .tcMode em, #treeUI .tcNo { color: var(--gold); font-style: normal; font-weight: normal; text-align: center; } #treeUI .tcEnd { grid-template-columns: auto auto 1fr; margin-top: calc(2px * var(--s)); } #treeUI .tcW { display: flex; gap: calc(3px * var(--s)); } #treeUI .tcW .tcC:first-child { flex: 1; } #treeUI .tcC { padding: calc(1px * var(--s)) calc(4px * var(--s)); border: calc(1px * var(--s)) solid #3a3f5c; background: rgba(15, 17, 28, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #treeUI .tcC.none { border-color: transparent; background: none; color: #6a7190; text-align: center; } #treeUI .tcC.sel { border-color: var(--gold); background: var(--navy); color: #fff; } #treeUI .tcC.open { border-color: var(--gold); background: #5a4a1a; color: #fff; } #treeUI .tcDesc { margin-top: auto; min-height: calc(18px * var(--s)); padding: calc(3px * var(--s)) calc(5px * var(--s)); border-top: calc(1px * var(--s)) solid #3a3f5c; color: #cfcbbe; } #treeUI .tcPick { margin-top: auto; border: calc(1px * var(--s)) solid var(--gold-d); background: rgba(10, 12, 20, .95); max-height: 45%; overflow: auto; } #treeUI .tcOpt { padding: calc(1px * var(--s)) calc(5px * var(--s)); } #treeUI .tcOpt small { color: #8d897f; margin-left: calc(6px * var(--s)); } #treeUI .tcOpt.sel { background: var(--navy); color: #fff; } #treeUI .tcOpt.sel small { color: #cfcbbe; } #treeUI .wAct { padding: calc(2px * var(--s)) calc(5px * var(--s)); border: calc(1px * var(--s)) solid #3a3f5c; background: rgba(15, 17, 28, .6); } #treeUI .wAct.off { color: #6a7190; } #treeUI .wAct.sel { border-color: var(--gold); background: var(--navy); color: #fff; } #treeUI .wAct.sel::before { content: "▶ "; color: var(--gold); } .fct { flex: 1; } .fct b { color: var(--gold); font-weight: normal; font-size: calc(9px * var(--s)); } .fct em { font-style: normal; font-size: calc(7px * var(--s)); color: #1b1f33; background: var(--gold-d); padding: 0 calc(3px * var(--s)); } .fct small { color: #8a8fa3; } .fct .ok { color: #9fe08a; } .fct .no { color: #ff8a5a; } .fct .dim { color: #a99f8e; } /* 주점 (키보드): 병기창과 같은 틀. 왼쪽 동료 얼굴 칸, 오른쪽 설명·할 일 */ #treeUI .aGrid { grid-template-columns: repeat(3, 1fr); } #treeUI .aCell { height: calc(58px * var(--s)); padding: calc(2px * var(--s)) calc(2px * var(--s)) calc(10px * var(--s)); } #treeUI .aCell em { left: 0; right: 0; bottom: calc(1px * var(--s)); text-align: center; color: #e8e2d4; font-size: calc(7px * var(--s)); } #treeUI .aCell.cur em { color: var(--gold); } #treeUI .aCell.lock img { filter: grayscale(1) brightness(.45); } #treeUI .aCell.lock em { color: #6a7190; } #treeUI .aCell i.rest { background: #6a7190; color: #e8e2d4; } #treeUI .aCell .aCellLv { position: absolute; right: calc(2px * var(--s)); bottom: calc(11px * var(--s)); font-weight: normal; font-size: calc(7px * var(--s)); line-height: 1; color: var(--gold); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; } /* 얼굴 칸 레벨 (PD 11-09) */ @keyframes aUpFlash { 0%, 60% { background: rgba(120, 220, 110, .35); box-shadow: 0 0 calc(6px * var(--s)) #9fe08a; } 100% { background: transparent; box-shadow: none; } } #treeUI .aUp { animation: aUpFlash .9s ease-out; } /* 레벨업 직후 (PD 11-09) */ #treeUI .aCell .aNew { position: absolute; right: calc(2px * var(--s)); top: calc(2px * var(--s)); text-decoration: none; font-size: calc(7px * var(--s)); line-height: 1; color: #fff; background: #c8383b; padding: calc(1px * var(--s)) calc(2px * var(--s)); } #treeUI .aBig { float: left; width: calc(60px * var(--s)); height: calc(60px * var(--s)); margin: 0 calc(6px * var(--s)) calc(4px * var(--s)) 0; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: calc(1px * var(--s)) solid #4a5170; } #treeUI .aBig img { width: 100%; height: 100%; image-rendering: pixelated; } #treeUI .wInfo .wActs { clear: both; } #treeUI .wAct small { color: #a9b3c2; } /* 세력 선택: 화면 가운데 네 나라 카드 (위·촉·오·한) */ #factionUI { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: calc(300px * var(--s)); background: rgba(20, 23, 38, .96); border: calc(2px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold-d); padding: calc(8px * var(--s)) calc(10px * var(--s)); text-align: center; color: var(--paper); font-size: calc(8px * var(--s)); } #factionUI[hidden] { display: none; } #factionUI h2 { margin: 0; font-weight: normal; font-size: calc(13px * var(--s)); color: var(--gold); } #factionUI .fAsk { margin: calc(3px * var(--s)) 0 calc(7px * var(--s)); color: #cfcbbe; } #factionUI .fRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6px * var(--s)); } #factionUI .fCard { position: relative; padding: calc(5px * var(--s)) calc(3px * var(--s)) calc(4px * var(--s)); background: rgba(15, 17, 28, .7); border: calc(1px * var(--s)) solid #3a3f5c; display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); } #factionUI .fCard.cur { border-color: var(--gold); outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(1px * var(--s)); background: rgba(43, 49, 80, .9); } #factionUI .fKd { position: absolute; left: calc(3px * var(--s)); top: calc(2px * var(--s)); font-size: calc(10px * var(--s)); color: var(--gold-d); } #factionUI .fFace { width: 100%; height: calc(100px * var(--s)); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 92%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 70%); border: calc(1px * var(--s)) solid #4a5170; } #factionUI .fFace img { width: calc(88px * var(--s)); height: calc(100px * var(--s)); max-width: 100%; object-fit: cover; image-rendering: auto; } /* bodyImg 88×100 */ #factionUI .fFace .fSur { align-self: center; } #factionUI .fSur { font-size: calc(30px * var(--s)); line-height: 1; color: #cfcbbe; font-family: serif; } #factionUI .fCard.han .fSur { color: var(--gold); text-shadow: 0 0 calc(4px * var(--s)) rgba(240, 200, 80, .5); } #factionUI .fCard b { font-weight: normal; font-size: calc(10px * var(--s)); } #factionUI .fCard.cur b { color: var(--gold); } #factionUI .fCard small { color: #a9b3c2; font-size: calc(7px * var(--s)); } #factionUI .fDesc { min-height: calc(22px * var(--s)); margin: calc(7px * var(--s)) 0 calc(4px * var(--s)); line-height: 1.5; } #factionUI .fKeys { margin: 0; color: #a9b3c2; font-size: calc(7px * var(--s)); } #factionUI .fKeys span { color: #8a8fa3; } #factionUI .fOk { margin: 0; color: #fff3b0; } #factionUI kbd { font: inherit; background: #2b3150; border: calc(1px * var(--s)) solid #4a5170; padding: 0 calc(3px * var(--s)); } /* 군영 표시 (HTML 글자: 또렷하게). 위치는 town.js 가 3D 화면 좌표로 맞춘다 */ #campUI { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } /* 화면 밖 이름표는 잘라낸다 */ #campUI[hidden] { display: none; } #campUI .cl { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; } #campUI .cl b { display: inline-block; font-weight: normal; font-size: calc(9px * var(--s)); color: #e8e2d4; background: rgba(27, 31, 51, .75); padding: calc(1px * var(--s)) calc(5px * var(--s)); border: calc(1px * var(--s)) solid #000; } #campUI .cl.newAlly b::after { content: " NEW"; color: #ff8a5a; } /* 새 동료가 합류했는데 아직 주점을 안 봄 */ #campUI .cl.newAlly { animation: campNew 1s ease-in-out infinite; } @keyframes campNew { 50% { margin-top: calc(-3px * var(--s)); } } #campUI .cl.on b { color: var(--gold); background: rgba(43, 67, 128, .92); outline: calc(1px * var(--s)) solid var(--gold); } #campUI .ck { display: flex; width: max-content; margin: 0 auto calc(3px * var(--s)); align-items: center; gap: calc(3px * var(--s)); font-size: calc(8px * var(--s)); color: #fff3b0; background: rgba(27, 31, 51, .9); padding: calc(1px * var(--s)) calc(4px * var(--s)) calc(1px * var(--s)) calc(1px * var(--s)); border: calc(1px * var(--s)) solid var(--gold); } #campUI .ck em { font-style: normal; } #campUI .ck kbd { font: inherit; color: #1b1f33; background: var(--gold); padding: 0 calc(3px * var(--s)); border-bottom: calc(1px * var(--s)) solid var(--gold-d); } #campUI .cb { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: calc(8px * var(--s)); color: #1b1f33; background: rgba(242, 240, 232, .96); padding: calc(2px * var(--s)) calc(6px * var(--s)); border: calc(1px * var(--s)) solid #1b1f33; } #campUI .cb::after { content: ""; position: absolute; left: 50%; bottom: calc(-4px * var(--s)); margin-left: calc(-3px * var(--s)); border: calc(3px * var(--s)) solid transparent; border-top-color: #1b1f33; border-bottom: 0; } /* ---- 하단 HUD: 캐릭터가 활동하는 화면 아래쪽에 (시선 이동을 줄임) ---- */ #hud { position: absolute; left: calc(8px * var(--s)); top: auto; bottom: calc(8px * var(--s)); display: flex; align-items: flex-end; gap: calc(4px * var(--s)); z-index: 2; } #hud[hidden] { display: none; } #hudLvRing { position: relative; width: calc(34px * var(--s)); height: calc(34px * var(--s)); flex: none; } #hudLvRing svg { width: 100%; height: 100%; transform: rotate(-90deg); } #hudLvRing circle { fill: rgba(27, 31, 51, .9); stroke-width: 3; } #hudLvRing circle.bg { stroke: #000; } #hudXpArc { fill: none !important; stroke: #8fd06a; stroke-linecap: butt; transition: stroke-dashoffset .3s; } #hudLvRing span { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; line-height: 1; color: var(--gold); } #hudLvRing small { font-size: calc(6px * var(--s)); color: #a99f8e; } #hudLvRing b { font-size: calc(11px * var(--s)); font-weight: normal; } #hudBars { display: flex; flex-direction: column; gap: calc(1px * var(--s)); padding: calc(2px * var(--s)) calc(4px * var(--s)); background: rgba(27, 31, 51, .7); border: calc(1px * var(--s)) solid #000; } #hudTier { font-size: calc(7px * var(--s)); color: var(--gold); } #hudBars .bar { margin: 0; transition: width .4s; } #hudBars .bar.hp { height: calc(11px * var(--s)); } /* 시안 높이 11 (11-06) */ #hudBars .bar.hp em { line-height: calc(9px * var(--s)); } .bar.mp { height: calc(4px * var(--s)); } .bar.mp i { background: linear-gradient(#9fd0ff 0 50%, #3a7be0 50%); transition: none; } .bar.mp.fail { outline: calc(1px * var(--s)) solid #8fb8ff; } #hudMpBar { position: relative; } #hudMpNeed { position: absolute; top: 0; bottom: 0; background: rgba(232, 48, 40, .6); pointer-events: none; } #hudMpNeed[hidden] { display: none; } #hudRes { position: absolute; right: calc(8px * var(--s)); top: calc(24px * var(--s)); display: flex; gap: calc(6px * var(--s)); font-size: calc(8px * var(--s)); padding: calc(2px * var(--s)) calc(5px * var(--s)); background: rgba(27, 31, 51, .7); border: calc(1px * var(--s)) solid #000; z-index: 2; } #hudRes[hidden] { display: none; } #hudRes b { color: var(--gold); font-weight: normal; } #hudRes .jade b { color: #7fe0c0; } /* 옥패 (PD 11-09) */ #hudAllies .alT { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-style: normal; font-size: calc(6px * var(--s)); color: #fff6c8; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; pointer-events: none; } /* 재합류 남은 초 */ /* 금화·옥패 아이콘 (PD 11-09: 글자 대신 그림, hud.js resIcons) */ .res { display: inline-flex; align-items: center; gap: calc(2px * var(--s)); } .resIco { display: inline-flex; justify-content: center; min-width: calc(5px * var(--s)); height: calc(9px * var(--s)); vertical-align: middle; } /* 그림 비율 유지 (옥패 = 세로로 김) */ #hudSeals { position: absolute; display: flex; gap: calc(2px * var(--s)); pointer-events: none; } #hudSeals[hidden] { display: none; } #hudHst { position: absolute; display: flex; gap: calc(4px * var(--s)); pointer-events: none; font-size: calc(7px * var(--s)); } #hudHst[hidden] { display: none; } #hudHst span { display: inline-flex; align-items: center; gap: calc(1px * var(--s)); } #hudHst b { font-weight: normal; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; } #hudSeals .resIco { height: calc(11px * var(--s)); } .resIco canvas, #treeUI .resIco canvas { width: auto !important; height: 100% !important; margin: 0 auto !important; display: block; image-rendering: pixelated; float: none !important; margin: 0 !important; } /* 설명 칸 큰 그림 규칙(.tInfo canvas)을 덮어씀 */ .resIco.dim canvas { filter: grayscale(1) brightness(.45); } /* 아직 없는 인장 */ #treeUI .aLvBar .aLvBtn { margin-left: auto; padding: calc(1px * var(--s)) calc(6px * var(--s)); white-space: nowrap; } /* 레벨업 단추 = 게이지 오른쪽 */ #hudWeapon { color: #a99f8e; } /* 기술 칸은 HUD 오른쪽에 (화면 아래) */ #hud #skillBar { position: static; align-self: flex-end; } #hudLvRing circle { stroke-width: 3.5; } #hudXpArc { stroke: #a6e07a; } #hud #skillBar .sk { width: auto; min-width: calc(40px * var(--s)); white-space: nowrap; } #skillBar .sk.empty { opacity: .5; } /* 훈련장 탭 (무예 · 기술) */ #treeUI .tTabs { display: flex; gap: calc(2px * var(--s)); margin-right: auto; } #treeUI .tHead { gap: calc(8px * var(--s)); } #treeUI .tTabs button { font: inherit; font-size: calc(10px * var(--s)); padding: calc(2px * var(--s)) calc(8px * var(--s)); background: #2b3150; color: #a9b3c2; border: calc(1px * var(--s)) solid #000; cursor: pointer; } #treeUI .tTabs button.on { background: var(--navy); color: var(--gold); outline: calc(1px * var(--s)) solid var(--gold); } #treeUI .tGrid { grid-template-columns: repeat(4, 1fr); } #treeUI .tSlots { font-size: calc(9px * var(--s)); color: var(--paper); } #treeUI .tSlots small { color: #a9b3c2; } #treeUI .sGrid { overflow-y: auto; display: flex; flex-direction: column; gap: calc(2px * var(--s)); } #treeUI .sGroup { font-size: calc(9px * var(--s)); color: var(--gold); margin-top: calc(3px * var(--s)); } #treeUI .sGroup small { color: #8fb8ff; font-size: calc(7px * var(--s)); } #treeUI .sRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(3px * var(--s)); } #treeUI .sCard { position: relative; padding: calc(3px * var(--s)); background: #22263a; border: calc(1px * var(--s)) solid #3a3f55; cursor: pointer; color: #6a7190; } #treeUI .sCard b { display: block; font-weight: normal; font-size: calc(9px * var(--s)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #treeUI .sCard small { font-size: calc(7px * var(--s)); } #treeUI .sCard.can { color: var(--paper); border-color: #cfcbbe; } #treeUI .sCard.learned { color: var(--paper); border-color: #8fb8ff; background: #26305a; } #treeUI .sCard.learned b { color: #9fe08a; } #treeUI .sCard.sel { outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(1px * var(--s)); } #treeUI .sCard i { position: absolute; right: calc(2px * var(--s)); top: calc(2px * var(--s)); font-style: normal; font-size: calc(8px * var(--s)); background: var(--gold); color: #000; padding: 0 calc(3px * var(--s)); } /* ---- 보스 컷인: 화면을 가로지르는 비스듬한 띠, 왼쪽 초상, 오른쪽 이름 ---- */ #cutin { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; } #cutin[hidden] { display: none; } #cutin .ciBand { position: absolute; left: -10%; right: -10%; top: 30%; height: 38%; transform: skewY(-6deg) scaleX(0); transform-origin: left; background: linear-gradient(90deg, rgba(10,8,14,.92), rgba(70,16,20,.92) 60%, rgba(10,8,14,.85)); border-top: calc(2px * var(--s)) solid var(--gold); border-bottom: calc(2px * var(--s)) solid var(--gold); transition: transform .28s cubic-bezier(.2,.9,.3,1); } #cutin.defeat .ciBand { background: linear-gradient(90deg, rgba(10,8,14,.9), rgba(40,40,48,.9) 60%, rgba(10,8,14,.85)); border-color: #cfd8e3; } #cutin canvas { position: absolute; left: 6%; top: 20%; width: calc(184px * var(--s)); height: calc(128px * var(--s)); image-rendering: pixelated; transform: translateX(-140%); transition: transform .35s .1s cubic-bezier(.2,.9,.3,1); filter: drop-shadow(0 0 calc(4px * var(--s)) rgba(0,0,0,.8)); } #cutin .ciText { position: absolute; left: 40%; top: 36%; display: flex; flex-direction: column; gap: calc(2px * var(--s)); opacity: 0; transform: translateX(20%); transition: opacity .3s .2s, transform .35s .2s cubic-bezier(.2,.9,.3,1); text-shadow: 0 calc(1px * var(--s)) 0 #000; } #cutin .ciTitle { font-size: calc(9px * var(--s)); color: #e0b040; letter-spacing: .1em; } #cutin .ciName { font-size: calc(26px * var(--s)); font-weight: normal; color: #fff6c8; } #cutin.defeat .ciName { color: #ffd25a; } #cutin .ciLine { margin: 0; font-size: calc(10px * var(--s)); color: var(--paper); max-width: calc(320px * var(--s)); } #cutin.on .ciBand { transform: skewY(-6deg) scaleX(1); } #cutin.on canvas { transform: none; } #cutin.on .ciText { opacity: 1; transform: none; } /* 안개 판: 스테이지 fog / 장보의 모래 폭풍 (진하기 = js/ui/hud.js) */ #fog { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s, background .6s; background: radial-gradient(ellipse at 50% 70%, rgba(210,222,216,.55), rgba(196,208,204,.92)); } #fog.sand { background: radial-gradient(ellipse at 50% 70%, rgba(214,186,130,.55), rgba(196,160,104,.92)); } /* 고화질 지도 캔버스 (게임 캔버스 위, 지도 정보·버튼 아래) */ #mapHi { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } #mapHi[hidden] { display: none; } /* ---- 타이틀 (js/ui/title.js) ---- */ #title { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; grid-template-rows: 1fr auto auto 1fr; justify-items: center; } #title[hidden] { display: none; } #title button { pointer-events: auto; } #title .tLogo { align-self: end; text-align: center; margin-bottom: calc(10px * var(--s)); } #title .tMain { font-size: calc(34px * var(--s)); line-height: 1.1; letter-spacing: calc(2px * var(--s)); background: linear-gradient(#fff6c8 0%, #f2c94c 45%, #c8862a 60%, #ffe8a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 calc(2px * var(--s)) 0 #3a1a10) drop-shadow(calc(1px * var(--s)) 0 0 #3a1a10) drop-shadow(calc(-1px * var(--s)) 0 0 #3a1a10) drop-shadow(0 0 calc(6px * var(--s)) rgba(255, 140, 60, .55)); animation: tIn 1.6s ease-out both; } #title .tMain.en { font-size: calc(30px * var(--s)); letter-spacing: calc(3px * var(--s)); } #title .tSub { font-size: calc(11px * var(--s)); color: #f3e2b8; letter-spacing: calc(3px * var(--s)); text-shadow: 0 calc(1px * var(--s)) 0 #000; margin-top: calc(4px * var(--s)); animation: tIn 1.6s .5s ease-out both; } @keyframes tIn { from { opacity: 0; transform: translateY(calc(6px * var(--s))) scale(.96); } to { opacity: 1; transform: none; } } #title .tPress { font-size: calc(10px * var(--s)); color: #fff6c8; text-shadow: 0 calc(1px * var(--s)) 0 #000; animation: tBlink 1.4s 1.2s ease-in-out infinite both; min-height: calc(14px * var(--s)); } @keyframes tBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } #title .tMenu, #title .tLang { display: flex; flex-direction: column; gap: calc(4px * var(--s)); min-width: calc(150px * var(--s)); } #title .tMenu[hidden], #title .tLang[hidden] { display: none; } #title .tMenu button, #title .tLang button { font: inherit; font-size: calc(10px * var(--s)); color: #e6e3da; background: rgba(20, 16, 28, .72); border: calc(1px * var(--s)) solid #6a5030; padding: calc(4px * var(--s)) calc(12px * var(--s)); cursor: pointer; display: flex; justify-content: space-between; gap: calc(10px * var(--s)); } #title button small { color: #a89a7a; font-size: calc(8px * var(--s)); align-self: center; } #title button.sel { color: #fff6c8; border-color: #f2c94c; background: rgba(90, 50, 20, .85); } #title button:disabled { color: #6f6a62; cursor: default; } #title.lang .tLogo { opacity: .9; } #title .tVer { position: absolute; right: calc(8px * var(--s)); bottom: calc(6px * var(--s)); font-size: calc(7px * var(--s)); color: #c9bda0; opacity: .7; } /* 그림 타이틀 (assets/title/title_{언어}.webp, 로고가 그림에 들어 있음) */ #title .tBg, #title .tFx { position: absolute; inset: 0; width: 100%; height: 100%; display: none; } #title .tBg { background: #120a14 center / cover no-repeat; } #title .tFx { image-rendering: pixelated; } #title.art .tBg, #title.art .tFx { display: block; } #title.art .tLogo { display: none; } #title.art { grid-template-rows: 60fr auto auto 9fr; } #title.art .tPress { text-shadow: 0 0 calc(4px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; } #title .tLogo { grid-row: 1; } #title .tPress { grid-row: 2; } #title .tMenu, #title .tLang { grid-row: 3; } #title .tLogo, #title .tPress, #title .tMenu, #title .tLang, #title .tVer { position: relative; z-index: 1; } #title .tVer { position: absolute; } /* 레이어 타이틀 (2026-11-03, js/ui/title.js sceneOf — 시안 A·B·C): 배경 .tLay 캔버스, 위쪽 가운데 언어별 로고 그림, 아래 메뉴 */ #title .tLay { position: absolute; inset: 0; width: 100%; height: 100%; display: none; } #title.lay .tLay, #title.lay .tFx { display: block; } #title .tLogoImg { display: none; } #title.lay { grid-template-rows: auto 1fr auto auto auto; } #title.lay .tLogo { grid-row: 1; align-self: start; margin: calc(10px * var(--s)) 0 0; } #title.lay .tPress { grid-row: 3; } #title.lay .tMenu, #title.lay .tLang { grid-row: 4; } #title.lay .tKeys { grid-row: 5; margin-bottom: calc(10px * var(--s)); } #title.lay.logoImg .tMain, #title.lay.logoImg .tSub { display: none; } #title.lay.logoImg .tLogoImg { display: block; width: calc(290px * var(--s)); height: auto; image-rendering: auto; animation: tDrop 1.4s .2s ease-out both; position: relative; } @keyframes tDrop { from { opacity: 0; transform: translateY(calc(-10px * var(--s))); } to { opacity: 1; transform: none; } } /* 로고 뒤 은은한 빛: A·C 약하게, B(밤비)·D(노을) 따뜻하게 */ #title.lay .tLogo::before { content: ""; position: absolute; left: -12%; right: -12%; top: -20%; bottom: -20%; pointer-events: none; animation: tIn 2s .4s ease-out both; background: radial-gradient(ellipse at center, rgba(255, 236, 190, .22) 0%, rgba(255, 220, 170, .08) 45%, rgba(255, 220, 170, 0) 70%); } #title.lay.scD .tLogo::before, #title.lay.scB .tLogo::before { background: radial-gradient(ellipse at center, rgba(255, 170, 80, .34) 0%, rgba(255, 130, 50, .12) 45%, rgba(255, 120, 40, 0) 70%); } #title.lay .tPress { text-shadow: 0 0 calc(4px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; } #title.lay .tKeys { align-self: end; } /* D 「노을의 결전」: 가운데 아래가 여포·관우·장비 다리와 주인공 창끝 → 메뉴를 2열(언어는 3열)로 낮게 깔아 장수들 발밑 흙길에 둔다. 로고는 오른쪽 언덕 위 장수들 머리와 겹치지 않게 조금 왼쪽으로 (title.js 의 ←→ 도 이 배치에서만 옆 칸으로) */ #title.lay.scD .tLogo { margin-right: calc(110px * var(--s)); } #title.lay.scD .tMenu:not([hidden]) { display: flex; flex-direction: column; align-items: stretch; gap: calc(3px * var(--s)); width: calc(150px * var(--s)); justify-self: center; } /* PD 11-09: 세로 한 줄 */ #title.lay.scD .tLang:not([hidden]) { display: grid; grid-template-columns: repeat(3, calc(80px * var(--s))); } #title.lay.scD .tMenu button, #title.lay.scD .tLang button { padding: calc(3px * var(--s)) calc(8px * var(--s)); white-space: nowrap; } #title .tKeys { grid-row: 4; align-self: start; margin-top: calc(5px * var(--s)); position: relative; z-index: 1; font-size: calc(7px * var(--s)); color: #e6dcc4; text-shadow: 0 0 calc(3px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; } #treeUI .aCell img { height: calc(46px * var(--s)); width: calc(46px * var(--s)); image-rendering: auto; } /* 동료 얼굴: town.js faceImg 가 화면 픽셀 크기로 그려 둠 */ #treeUI .aBig img { image-rendering: auto; } #treeUI .aCell img { width: calc(72px * var(--s)); height: calc(44px * var(--s)); max-width: 100%; object-fit: cover; } /* 동료 전신 (allyBody 72×44) */ #treeUI .aBig img { width: 100%; height: 100%; } /* 행동 아이콘 (회피 X · 무기 바꾸기 Q) — js/ui/hud.js actBar. 쓰면 흑백·어둡게, 대기 동안 아래부터 색이 차오른다 */ #actBar { display: flex; gap: calc(3px * var(--s)); align-self: flex-end; } #actBar .act { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(2px * var(--s)); background: rgba(27, 31, 51, .8); outline: calc(1px * var(--s)) solid #3a3f5c; min-width: calc(30px * var(--s)); } #actBar .act.ready { outline-color: var(--gold); } #actBar .act.off { outline-color: #5a2a2a; } #actBar .aIc { position: relative; width: calc(24px * var(--s)); height: calc(24px * var(--s)); } #actBar .aIc canvas { position: absolute; left: 0; top: 0; width: calc(24px * var(--s)); height: calc(24px * var(--s)); image-rendering: pixelated; } #actBar .aIc .dim { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; height: 0; } /* 남은 대기만큼 위에서부터 흑백 */ #actBar .aIc .gray canvas { filter: grayscale(1) brightness(.45); } #actBar .act b { position: absolute; left: calc(1px * var(--s)); top: 0; font-weight: normal; color: var(--gold); font-size: calc(7px * var(--s)); text-shadow: 0 0 calc(2px * var(--s)) #000; } #actBar .act em { font-style: normal; font-size: calc(6px * var(--s)); color: #cfcbbe; white-space: nowrap; } #actBar .act.off em { color: #8a6a6a; } #actBar .aIc canvas.hi { image-rendering: auto; } /* ================= 2026-10-30 HUD 개편 (js/ui/hud.js) ================= */ #skillBar, #actBar { display: none !important; } /* 예전 칸 (행동 칸 #pad 로 옮김) */ #hud { flex-wrap: wrap; align-items: flex-end; max-width: calc(260px * var(--s)); } #hudAllies { flex-basis: 100%; display: flex; gap: calc(3px * var(--s)); margin-bottom: calc(2px * var(--s)); } #hudAllies[hidden] { display: none; } #hudAllies .al { display: flex; align-items: center; gap: calc(2px * var(--s)); padding: calc(1px * var(--s)) calc(3px * var(--s)) calc(1px * var(--s)) calc(1px * var(--s)); background: rgba(20, 23, 38, .8); border: calc(1px * var(--s)) solid #3a3f5c; border-radius: calc(9px * var(--s)); } #hudAllies .al canvas { width: calc(16px * var(--s)); height: calc(16px * var(--s)); border-radius: 50%; background: #2b3150; image-rendering: pixelated; } #hudAllies .alBar { width: calc(30px * var(--s)); height: calc(3px * var(--s)); background: #1b1f33; outline: calc(1px * var(--s)) solid #000; } #hudAllies .alBar i { display: block; height: 100%; background: linear-gradient(#9fe08a 0 50%, #4fae4a 50%); } #hudAllies .al.out { opacity: .45; filter: grayscale(1); } #hudLvRing { width: calc(40px * var(--s)); height: calc(40px * var(--s)); } #hudFace { position: absolute; inset: 14%; border-radius: 50%; overflow: hidden; background: radial-gradient(#3a4166, #1b1f33); } #hudFace canvas { width: 100%; height: 100%; image-rendering: pixelated; } #hudLvRing span { inset: auto; right: calc(-3px * var(--s)); bottom: calc(-3px * var(--s)); width: calc(15px * var(--s)); height: calc(15px * var(--s)); border-radius: 50%; background: #1b1f33; border: calc(1px * var(--s)) solid var(--gold-d); z-index: 1; } #hudLvRing small { display: none; } #hudLvRing b { font-size: calc(8px * var(--s)); } #hudHpBar { position: relative; } #hudHpBar #hudHpLag { position: absolute; left: 0; top: 0; bottom: 0; background: #ff5a4a; opacity: .75; transition: none; } #hudHpBar #hudHp { position: relative; } /* 오른쪽 아래 행동 칸 */ #pad { position: absolute; right: 0; bottom: 0; width: calc(130px * var(--s)); height: calc(120px * var(--s)); z-index: 2; pointer-events: none; } #pad[hidden] { display: none; } #pad .ps { position: absolute; border-radius: calc(3px * var(--s)); /* PD 11-11: 칸은 모두 사각형 (전 원형 50%) */ background: rgba(20, 23, 38, .85); outline: calc(1px * var(--s)) solid #3a3f5c; overflow: visible; } #pad .ps.ready { outline: calc(1px * var(--s)) solid var(--gold); box-shadow: 0 0 calc(4px * var(--s)) rgba(242, 201, 76, .45); } #pad .ps.off { outline-color: #6a2a2a; } #pad .ps.empty { opacity: .35; } #pad .ps .col, #pad .ps .dim { position: absolute; inset: 8%; border-radius: calc(2px * var(--s)); overflow: hidden; } #pad .ps .dim { bottom: auto; height: 0; border-radius: calc(2px * var(--s)) calc(2px * var(--s)) 0 0; } #pad .ps.atk.hit, #pad .ps.grd.hit { outline: calc(1.5px * var(--s)) solid #fff1c8; box-shadow: 0 0 calc(6px * var(--s)) rgba(255, 241, 200, .7); } /* 기본 공격 칸: 공격하는 동안 밝게 (PD 11-11) */ #pad .ps canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #pad .ps .dim .gray { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; } #pad .ps .gray canvas { filter: grayscale(1) brightness(.4); } /* 기술 칸 연계 표시 (PD 11-08): 원 = 거는 상태, 마름모 = 터뜨리는 상태 */ #pad .ps .stb { position: absolute; left: 50%; top: 0; transform: translate(-50%, -62%); width: 46%; aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-size: calc(7px * var(--s)); color: #14121c; z-index: 2; } #pad .ps .stb img { width: 100%; height: 100%; display: block; image-rendering: auto; } #pad .ps .stb.burst { background: #1b1f33; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* 마름모 (PD 11-08) */ #pad .ps .stb.burst::before { content: ""; position: absolute; inset: 8%; background: var(--c); clip-path: inherit; } #pad .ps .stb.burst img { position: relative; width: 62%; height: 62%; } #pad .ps.sk.up { outline: calc(1.5px * var(--s)) solid var(--uc); outline-offset: calc(1px * var(--s)); animation: skUp 0.55s ease-in-out infinite alternate; z-index: 3; } /* 속성 강화로 바뀌는 기술 (PD 11-08): 상태 색 테두리 + 맥박 빛 */ #hudBuff { position: absolute; display: flex; gap: calc(3px * var(--s)); pointer-events: none; } /* 주인공 속성 강화 (PD 11-08): 상태마다 별 배지 + 아래 남은 초 */ #hudBuff .bb { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 0 calc(2px * var(--s)) var(--c)); } #hudBuff .star { position: relative; width: calc(20px * var(--s)); aspect-ratio: 1; display: grid; place-items: center; background: var(--c); clip-path: polygon(50% 0, 61.8% 35.4%, 100% 38.2%, 69.1% 61.8%, 80.9% 100%, 50% 76.4%, 19.1% 100%, 30.9% 61.8%, 0 38.2%, 38.2% 35.4%); } #hudBuff .star::before { content: ""; position: absolute; inset: 9%; background: #1b1f33; clip-path: inherit; } #hudBuff .star img, #hudBuff .star i { position: relative; width: 46%; height: 46%; margin-top: 12%; display: block; font-style: normal; font-size: calc(6px * var(--s)); color: var(--c); text-align: center; image-rendering: auto; } #hudBuff em { font-style: normal; font-size: calc(8px * var(--s)); line-height: 1; margin-top: calc(-1px * var(--s)); color: #f2f0e8; text-shadow: 0 0 calc(2px * var(--s)) #000, 0 0 calc(1px * var(--s)) #000; } #hudBuff .bb.end { opacity: .45; } @keyframes skUp { from { filter: brightness(1); box-shadow: 0 0 calc(4px * var(--s)) calc(1px * var(--s)) var(--uc), inset 0 0 calc(3px * var(--s)) var(--uc); } to { filter: brightness(1.55) saturate(1.3); box-shadow: 0 0 calc(12px * var(--s)) calc(5px * var(--s)) var(--uc), inset 0 0 calc(6px * var(--s)) var(--uc); } } #pad .ps b { position: absolute; right: calc(-2px * var(--s)); bottom: calc(-2px * var(--s)); min-width: calc(9px * var(--s)); padding: 0 calc(1px * var(--s)); text-align: center; font-weight: normal; font-size: calc(7px * var(--s)); line-height: calc(9px * var(--s)); color: #fff6c8; background: #1b1f33; border: calc(1px * var(--s)) solid var(--gold-d); border-radius: calc(3px * var(--s)); } #pad .ps.wpn { background: radial-gradient(#3a4166, #141726); outline: calc(2px * var(--s)) solid var(--gold-d); } #pad .ps.wpn b { display: none; } #pad .ps.wpn em { position: absolute; left: 50%; bottom: calc(-9px * var(--s)); transform: translateX(-50%); font-style: normal; white-space: nowrap; font-size: calc(6px * var(--s)); color: #e8dcc0; text-shadow: 0 0 calc(2px * var(--s)) #000; } #pad .ps canvas.sub { left: auto; top: auto; right: -20%; top: -20%; width: 55%; height: 55%; border-radius: 50%; background: #1b1f33; outline: calc(1px * var(--s)) solid #6a7190; image-rendering: pixelated; } #pad .ps.sk em { position: absolute; left: 50%; top: calc(100% + 1px * var(--s)); transform: translateX(-50%); font-style: normal; white-space: nowrap; font-size: calc(7px * var(--s)); color: #fff6c8; text-shadow: 0 0 calc(2px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; opacity: 0; pointer-events: none; } #pad .ps.sk em.show { animation: skName 1.4s ease-out both; } @keyframes skName { 0% { opacity: 0; transform: translate(-50%, calc(3px * var(--s))); } 15% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; } } #hudWeapon { display: none; } #hudLvRing svg { position: relative; z-index: 1; } #hudLvRing circle { fill: none !important; } /* 고리만 (가운데는 얼굴) */ #hudFace { z-index: 0; inset: 9%; } /* HUD 장식 틀 (Codex 789 → assets/ui/hud_*.png): 초상·무기 원·작은 칸 테두리, 막대 판, 레벨 배지 */ #hudLvRing::after { content: ""; position: absolute; left: -11%; right: -11%; top: -21%; bottom: -21%; background: url(../assets/ui/hud_portrait.png) center / 100% 100% no-repeat; z-index: 2; pointer-events: none; image-rendering: pixelated; } #hudLvRing span { background: url(../assets/ui/hud_badge.png) center / 100% 100% no-repeat !important; border: none !important; z-index: 3 !important; } #pad .ps::after { content: ""; position: absolute; left: -8%; right: -8%; top: -15%; bottom: -8%; background: url(../assets/ui/hud_slot.png) center / 100% 100% no-repeat; z-index: 1; pointer-events: none; image-rendering: pixelated; } #pad .ps.wpn::after { left: -21%; right: -21%; top: -21%; bottom: -21%; background-image: url(../assets/ui/hud_weapon.png); } #pad .ps, #pad .ps.ready, #pad .ps.wpn { outline: none; } #pad .ps.ready::after { filter: brightness(1.25) drop-shadow(0 0 calc(2px * var(--s)) rgba(242, 201, 76, .8)); } #pad .ps.off::after { filter: sepia(1) hue-rotate(-40deg) saturate(2.5) brightness(.8); } #pad .ps b, #pad .ps canvas.sub, #pad .ps em { z-index: 2; } /* 막대 판 그림(hud_bars.png)은 뺌 (2026-11-05 PD: 막대가 최대치만큼 길어지는데 판은 그대로라 이상함). 빈 칸 색은 .bar 바탕이 길이를 따라간다 */ #hudBars { background: none !important; border: none !important; padding: 0 !important; } /* 주점: 동료 유형 · 레벨 · 기술 (동료 성장 2026-10-30) */ #treeUI .aRole { font-size: .72em; border: calc(1px * var(--s)) solid; border-radius: calc(3px * var(--s)); padding: 0 calc(3px * var(--s)); vertical-align: middle; } #treeUI .aLv { font-size: .8em; color: var(--gold); } #treeUI .aLv small { color: #a9b3c2; } #treeUI .aSks { clear: both; display: grid; gap: calc(2px * var(--s)); margin: calc(3px * var(--s)) 0; } #treeUI .aSk { padding: calc(2px * var(--s)) calc(4px * var(--s)); border-left: calc(2px * var(--s)) solid var(--gold); background: rgba(15, 17, 28, .45); line-height: 1.3; } #treeUI .aSk.lock { border-left-color: #4a5070; color: #8a8fa3; } #treeUI .aSk em { font-style: normal; color: var(--gold); } #treeUI .aSk small { font-size: .8em; } #treeUI .aSk .ok { color: #9fe08a; } /* 진행감 (js/ui/hud.js progress·goal·fade, docs/levels/branching_design.md F1·F2) — 위치는 hud.js PROG 상수 */ #prog { position: absolute; left: 50%; transform: translateX(-50%); height: calc(10px * var(--s)); z-index: 2; pointer-events: none; } #prog[hidden] { display: none; } #prog i { position: absolute; display: block; } #prog .pTr { top: 50%; height: calc(2px * var(--s)); margin-top: calc(-1px * var(--s)); background: rgba(27, 31, 51, .75); box-shadow: 0 0 0 calc(1px * var(--s)) rgba(0, 0, 0, .5); } #prog .pTr b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #c9962e; } #prog .pTr.alt { background: rgba(60, 66, 90, .7); } /* 갈림: 계획 경로가 아닌 갈래 (고르기 전) */ #prog .pTr.off, #prog .pEnc.off { opacity: .3; } /* 고르지 않은 갈래 */ #prog .pEnc.alt { background: #8a4a4c; } #prog .pTick { top: 15%; width: calc(1px * var(--s)); height: 70%; background: #e6dcc4; opacity: .8; } #prog .pEnc { top: 50%; width: calc(4px * var(--s)); height: calc(4px * var(--s)); margin: calc(-2px * var(--s)) 0 0 calc(-2px * var(--s)); transform: rotate(45deg); background: #c8383b; outline: calc(1px * var(--s)) solid #1b1f33; } #prog .pEnc.done { background: #5a5f72; } #prog .pEnc.now { background: #ffd25a; } #prog .pBoss { top: 0; width: calc(5px * var(--s)); height: calc(5px * var(--s)); margin-left: calc(-1px * var(--s)); background: #8e2328; border-left: calc(1px * var(--s)) solid #e6dcc4; box-shadow: 0 0 0 calc(1px * var(--s)) #1b1f33; } #prog .pBoss::after { content: ""; position: absolute; left: calc(-1px * var(--s)); top: 0; width: calc(1px * var(--s)); height: calc(10px * var(--s)); background: #e6dcc4; } /* 비밀 (branching_design 6.3): 찾은 비밀 입구 = 금색 점, 지나는 비밀 구간 = 금색 점선 줄 (찾기 전엔 안 보임) */ #prog .pSec { top: 50%; width: calc(3px * var(--s)); height: calc(3px * var(--s)); margin: calc(-4px * var(--s)) 0 0 calc(-1px * var(--s)); border-radius: 50%; background: #ffd25a; box-shadow: 0 0 0 calc(1px * var(--s)) #1b1f33, 0 0 calc(3px * var(--s)) #ffd25a; } #prog .pSecTr { top: 50%; height: 0; margin-top: calc(-1px * var(--s)); border-top: calc(2px * var(--s)) dashed #ffd25a; opacity: .9; } #prog .pMe { top: 50%; width: calc(4px * var(--s)); height: calc(4px * var(--s)); margin: calc(-2px * var(--s)) 0 0 calc(-2px * var(--s)); border-radius: 50%; background: #8fd8ff; box-shadow: 0 0 0 calc(1px * var(--s)) #1b1f33, 0 0 calc(3px * var(--s)) #8fd8ff; } #goal { position: absolute; right: calc(14px * var(--s)); top: calc(104px * var(--s)); z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; font-size: calc(9px * var(--s)); color: var(--gold); white-space: nowrap; text-shadow: 0 calc(1px * var(--s)) 0 #000, 0 0 calc(3px * var(--s)) #000; } #goal.on { opacity: 1; animation: goalNudge 1s ease-in-out infinite; } @keyframes goalNudge { 50% { transform: translateX(calc(3px * var(--s))); } } #segFade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: #07080d; } #banner { z-index: 3; } /* PD 요청 (2026-10-31): 진행 막대·목표 안내 글을 숨기고 없는 상태로 본다 — 되살리려면 이 두 줄을 지운다 */ #prog { display: none !important; } #goal { display: none !important; } /* ================= 2026-11-02 HUD 시안 배치 (PD: assets-src/ui/layout/ui_layout.json) ================= 좌표는 js/ui/hud.js LAYOUT 한곳에서 정한다 (논리 640×360 × --s). 여기는 칸들을 화면 전체 기준 절대 위치로 바꾸는 틀만 */ #hud { left: 0; top: 0; bottom: auto; width: calc(640px * var(--s)); height: calc(360px * var(--s)); max-width: none; display: block; pointer-events: none; } #hud > #hudLvRing, #hud > #hudBars, #hudAllies .al { position: absolute; } #hudLvRing { z-index: 2; } /* 초상이 막대 판 왼쪽 장식 위로 */ #hudTier { display: none; } /* 승급·무기 글자: 시안에 없음 */ #hudAllies { position: absolute; left: 0; top: 0; margin: 0; } #hudRes { right: auto; align-items: center; white-space: nowrap; } #pad { left: 0; top: 0; right: auto; bottom: auto; width: calc(640px * var(--s)); height: calc(360px * var(--s)); } #pad .ps.wpn { display: none; } /* 무기 큰 원: 시안에 없음 */ /* 무기 칸 (2026-11-05 시안, hud.js wpnSlot): 위 = 지금 든 무기, 아래 = 바꿔 들 무기(어둡게), 비면 빈 틀. 무기 바꾸기 단추는 두 칸 사이에 걸쳐 위로 */ #pad .wSlot { position: absolute; z-index: 1; } #pad .wSlot canvas { display: block; width: 100%; height: 100%; image-rendering: auto; } #pad .wSlot:not(.on) canvas { filter: brightness(.7) saturate(.7); } #pad .wSlot.none { opacity: .55; } #pad .wSlot.pop canvas { animation: wSlotPop .22s ease-out; } @keyframes wSlotPop { 0% { transform: scale(.92); filter: brightness(1.6); } 100% { transform: none; filter: none; } } #pad .ps.swap { z-index: 3; } #hudPotion { z-index: 2; } #pad #hudPotion .pi canvas { position: static; } /* 약병은 칸 가운데 (.ps canvas 의 왼쪽 위 고정을 따르지 않음) */ #bossBar { transform: none; text-align: left; height: calc(32px * var(--s)); } #bossBar #bossName { position: absolute; left: 0; top: 0; line-height: calc(12px * var(--s)); white-space: nowrap; } #bossBar .bar.boss, #bossBar .bossSub { position: absolute; margin: 0; } #bossBar .bar.sa { height: 100%; } /* ================= 2026-11-02 UI 해상도 ================= #stage 의 pixelated 가 HUD 에 물려 내려가, 큰 장식 틀 그림(hud_*.png, 그림 7픽셀 ≈ 게임 1픽셀)을 최근접으로 줄여 선이 들쭉날쭉·보라 테가 튀었다 → 부드럽게 줄인다. HUD 캔버스(초상·동료 얼굴·행동/기술 아이콘·컷인)는 hud.js 가 실제 화면 픽셀 크기로 그리므로 늘림 없이 그대로 */ #hudLvRing::after, #hudLvRing span, #pad .ps::after, #hudBars { image-rendering: auto; } #hudFace canvas, #hudAllies .al canvas, #pad .ps canvas, #cutin canvas { image-rendering: auto; } /* ================= 2026-11-03 제한 시간 · GO 안내 (hud.js timer · goHints) ================= */ /* 남은 시간: 칸(LAYOUT.time) 가운데 정렬. 30초 아래 = 주황, 시간 초과 = 붉게 「+0:12 ×2.0」, blink = GO 와 같은 깜빡임 (hud.js timer) */ #timeLeft { position: absolute; z-index: 2; pointer-events: none; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: center; font-size: calc(10px * var(--s)); line-height: 1; letter-spacing: .04em; color: #f2f0e8; text-shadow: 0 calc(1px * var(--s)) 0 #1b1f33, 0 0 calc(3px * var(--s)) #000; } #timeLeft[hidden] { display: none; } #timeLeft.warn { color: #ffb04a; } #timeLeft.blink { opacity: .35; } #timeLeft { white-space: pre; } #timeLeft.over { color: #ff5a4a; text-shadow: 0 calc(1px * var(--s)) 0 #4a0d0d, 0 0 calc(4px * var(--s)) rgba(255, 60, 40, .7); } /* GO 안내: STAGE CLEAR 글꼴·색 계열. 자리 = 출구 위 (글자 아래 가운데가 그 자리), 화면 밖이면 가장자리 */ #goHints { position: absolute; inset: 0; z-index: 2; pointer-events: none; } #goHints[hidden] { display: none; } #goHints b { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-weight: normal; font-size: calc(16px * var(--s)); letter-spacing: .06em; color: #ffe27a; text-shadow: 0 calc(1px * var(--s)) 0 #8c6420, 0 calc(2px * var(--s)) 0 #1b1f33, 0 0 calc(6px * var(--s)) rgba(255, 210, 90, .8); } #goHints b[hidden] { display: none; } #goHints b.edge { transform: translate(-50%, -50%); } #goHints.blink b { opacity: .35; } /* 11-03 Codex 887 그림: 남은 시간 판 (평상시 금테 · 초과 붉은 판 — 크기는 hud.js timer 가 칸 높이 ×1.5 로), 글자는 모래시계 오른쪽 어두운 칸 가운데 (좌우 여백도 hud.js) */ #timeLeft { box-sizing: border-box; background: url(../assets/ui/timer_plate.png) center / 100% 100% no-repeat; image-rendering: auto; } #timeLeft.over { background-image: url(../assets/ui/timer_plate_over.png); color: #ffe2c8; text-shadow: 0 calc(1px * var(--s)) 0 #3a0808, 0 0 calc(3px * var(--s)) rgba(255, 70, 40, .8); } /* GO 그림 (go_sign): GO→ · GO↓ 한 장, 화면 왼쪽 밖이면 뒤집은 화살표 + GO */ #goHints b i { display: inline-block; vertical-align: bottom; background: center / 100% 100% no-repeat; image-rendering: auto; } #goHints b:has(i) { font-size: 0; line-height: 0; text-shadow: none; filter: drop-shadow(0 0 calc(3px * var(--s)) rgba(255, 210, 90, .7)); } #goHints b .gr { width: calc(41px * var(--s)); height: calc(16px * var(--s)); background-image: url(../assets/ui/go_goright.png); } #goHints b .gd { width: calc(22px * var(--s)); height: calc(30px * var(--s)); background-image: url(../assets/ui/go_godown.png); } #goHints b .go { width: calc(24px * var(--s)); height: calc(16px * var(--s)); background-image: url(../assets/ui/go_go.png); } #goHints b .ar { width: calc(17px * var(--s)); height: calc(16px * var(--s)); margin-right: calc(1px * var(--s)); background-image: url(../assets/ui/go_right.png); } #goHints b .fl { transform: scaleX(-1); } /* ---- 선택지 (하비 여포 분기, PD 11-03 — js/ui/hud.js choice · 판 그림 paintChoiceCard) ---- */ #choiceBox { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 52%, rgba(10, 8, 14, .72), rgba(10, 8, 14, .3) 72%); } #choiceBox[hidden] { display: none; } #choiceBox .chTitle { margin: 0 0 calc(10px * var(--s)); font-size: calc(13px * var(--s)); color: var(--gold); text-shadow: 0 calc(1px * var(--s)) 0 #000, 0 0 calc(4px * var(--s)) #000; } #choiceBox .chRow { display: flex; } #choiceBox .chCard { position: relative; padding: 0; border: 0; background: none; font: inherit; color: var(--paper); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; opacity: .72; transition: opacity .12s, transform .12s; touch-action: manipulation; } #choiceBox .chCard.on { opacity: 1; transform: translateY(calc(-2px * var(--s))); } #choiceBox .chCard:focus { outline: none; } #choiceBox .chCard canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } #choiceBox .chCard b, #choiceBox .chCard span, #choiceBox .chCard small { position: relative; text-shadow: 0 calc(1px * var(--s)) 0 #000; } #choiceBox .chCard b { margin-top: calc(18px * var(--s)); font-weight: normal; font-size: calc(17px * var(--s)); color: #fff6c8; } #choiceBox .chCard.on b { color: var(--gold); } #choiceBox .chCard span { margin-top: calc(12px * var(--s)); font-size: calc(9px * var(--s)); color: var(--gold); } #choiceBox .chCard small { margin-top: calc(5px * var(--s)); font-size: calc(7px * var(--s)); color: #a9a3b8; } #choiceBox .chHint { margin: calc(10px * var(--s)) 0 0; font-size: calc(8px * var(--s)); color: #cfd8e3; text-shadow: 0 calc(1px * var(--s)) 0 #000; } /* 개발용 「적 없음」 (?dev&nospawn · F7) */ #noSpawnTag { position: absolute; right: calc(8px * var(--s)); top: calc(24px * var(--s)); z-index: 3; pointer-events: none; font-size: calc(7px * var(--s)); padding: calc(1px * var(--s)) calc(4px * var(--s)); color: #ffb08a; background: rgba(27, 31, 51, .78); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #8a4a3a; } #noSpawnTag[hidden] { display: none; } /* 새로 시작: 무기 고르기 (screens.js ZY.WeaponPick). 금·청동 틀 + 먹색 바탕. 커서 = 밝은 테두리, 선택 = 금테 + 순번 */ #wpick { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5px * var(--s)); background: radial-gradient(ellipse at 50% 40%, #24211f, #0b0a0d 78%); text-align: center; } #wpick[hidden] { display: none; } #wpick h1 { margin: 0; font-weight: normal; font-size: calc(15px * var(--s)); line-height: 1.25; color: var(--gold); text-shadow: 0 calc(1px * var(--s)) 0 #000; } #wpick .wpHint { margin: 0; min-height: calc(12px * var(--s)); font-size: calc(8px * var(--s)); line-height: 1.4; color: #d8cfb8; padding: 0 calc(8px * var(--s)); } #wpick .wpHint.warn { color: #ff9a6a; } #wpick .wpCards { display: flex; justify-content: center; gap: calc(6px * var(--s)); margin-top: calc(2px * var(--s)); } #wpick .wpCard { position: relative; width: calc(150px * var(--s)); height: calc(234px * var(--s)); display: flex; flex-direction: column; cursor: pointer; background: #17151a; border: calc(3px * var(--s)) solid #6f5428; box-shadow: inset 0 0 0 calc(1px * var(--s)) #000; } #wpick .wpCard.off { cursor: default; opacity: .45; } #wpick .wpCard.cur { outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(1px * var(--s)); } #wpick .wpCard.sel { border-color: var(--gold); background: #231d15; box-shadow: inset 0 0 0 calc(1px * var(--s)) #000, 0 0 calc(7px * var(--s)) rgba(242, 201, 76, .55); } #wpick .wpCard.shake { animation: wpShake .28s linear; } @keyframes wpShake { 25% { transform: translateX(calc(-3px * var(--s))); } 75% { transform: translateX(calc(3px * var(--s))); } } #wpick .wpArt { position: relative; flex: none; width: 100%; height: calc(130px * var(--s)); overflow: hidden; border-bottom: calc(1px * var(--s)) solid #6f5428; background: radial-gradient(ellipse at 50% 88%, #4a4338, #1a1820 68%); } #wpick .wpCard.sel .wpArt { background: radial-gradient(ellipse at 50% 88%, #6e5a2c, #211c1c 68%); border-bottom-color: var(--gold-d); } #wpick .wpArt canvas { display: block; width: 100%; height: 100%; } #wpick .wpNo:empty, #wpick .wpTag:empty { display: none; } #wpick .wpNo { position: absolute; left: calc(4px * var(--s)); top: calc(4px * var(--s)); width: calc(16px * var(--s)); height: calc(16px * var(--s)); font-style: normal; font-size: calc(11px * var(--s)); line-height: calc(15px * var(--s)); color: #1b1408; background: var(--gold); border: calc(1px * var(--s)) solid #000; } #wpick .wpTag { position: absolute; right: calc(4px * var(--s)); top: calc(5px * var(--s)); font-style: normal; font-size: calc(8px * var(--s)); color: var(--gold); text-shadow: 0 calc(1px * var(--s)) 0 #000; } #wpick .wpText { flex: 1; min-height: 0; padding: calc(4px * var(--s)) calc(6px * var(--s)); text-align: left; overflow: hidden; } #wpick .wpText b { display: block; font-weight: normal; font-size: calc(11px * var(--s)); line-height: 1.3; color: #f0d890; } #wpick .wpCard.sel .wpText b { color: var(--gold); } #wpick .wpText p { margin: calc(3px * var(--s)) 0 0; font-size: calc(8px * var(--s)); line-height: 1.45; color: #cfc8b6; } #wpick .wpBtns { display: flex; gap: calc(8px * var(--s)); margin-top: calc(2px * var(--s)); } #wpick .wpBtns button { font: inherit; font-size: calc(10px * var(--s)); min-width: calc(90px * var(--s)); padding: calc(3px * var(--s)) calc(10px * var(--s)); cursor: pointer; color: var(--paper); background: #1f1b1a; border: calc(2px * var(--s)) solid #6f5428; } #wpick .wpBtns button.go:not(:disabled) { color: #fff6c8; background: #4a3a18; border-color: var(--gold); } #wpick .wpBtns button:disabled { opacity: .4; cursor: default; } #wpick .wpBtns button.cur { outline: calc(2px * var(--s)) solid #fff6c8; outline-offset: calc(1px * var(--s)); } #wpick .wpKeys { font-size: calc(7px * var(--s)); line-height: 1.5; color: #a99f8e; } /* 보스 상태 아이콘 (js/game/status.js, 시험판) */ #bossStatus { position: absolute; top: 0; height: calc(12px * var(--s)); display: flex; align-items: center; gap: calc(4px * var(--s)); } /* left = 이름·면역 표시 뒤 (status.js hud) */ #bossStatus i { position: relative; display: block; width: calc(11px * var(--s)); height: calc(11px * var(--s)); border-radius: 50%; color: #14121c; font-style: normal; font-size: calc(7px * var(--s)); line-height: calc(11px * var(--s)); text-align: center; } #bossStatus i.ready { box-shadow: 0 0 0 calc(1px * var(--s)) #fff3b0; } #bossImmune { position: absolute; top: 0; height: calc(12px * var(--s)); display: flex; align-items: center; gap: calc(4px * var(--s)); } /* left = 이름 폭 뒤 (status.js hud) */ #bossImmune i { position: relative; display: inline-block; width: calc(11px * var(--s)); height: calc(11px * var(--s)); border-radius: 50%; color: #14121c; font-style: normal; font-size: calc(7px * var(--s)); line-height: calc(11px * var(--s)); text-align: center; } #bossImmune i b { position: absolute; right: calc(-3px * var(--s)); bottom: calc(-3px * var(--s)); font-weight: normal; font-size: calc(8px * var(--s)); line-height: 1; color: #ff5a4a; text-shadow: 0 0 calc(1px * var(--s)) #000, 0 0 calc(2px * var(--s)) #000; } #bossStatus i.stacking { color: #e8e4d8; } #bossStatus i.imm { opacity: .55; } #bossStatus i.imm em { position: absolute; left: calc(-3px * var(--s)); bottom: calc(-3px * var(--s)); font-style: normal; font-size: calc(8px * var(--s)); line-height: 1; color: #ff5a4a; text-shadow: 0 0 calc(1px * var(--s)) #000, 0 0 calc(2px * var(--s)) #000; } #bossStatus i b { position: absolute; right: calc(-3px * var(--s)); bottom: calc(-3px * var(--s)); font-weight: normal; font-size: calc(8px * var(--s)); line-height: 1; color: #fff; text-shadow: 0 0 calc(1px * var(--s)) #000, 0 0 calc(2px * var(--s)) #000; } /* 옵션 (js/ui/options.js, PD 11-08) */ #options { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(10, 12, 20, .6); } #options[hidden] { display: none; } .optCard { width: calc(440px * var(--s)); background: rgba(27, 31, 51, .96); border: calc(2px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold-d); padding: calc(10px * var(--s)) calc(16px * var(--s)); color: #e8e4d8; } .optCard h1 { margin: 0 0 calc(6px * var(--s)); font-size: calc(14px * var(--s)); color: var(--gold); font-weight: normal; text-align: center; } .optCard button { font: inherit; font-size: calc(9px * var(--s)); color: #e8e4d8; background: #2b3150; border: calc(1px * var(--s)) solid #4a5170; padding: calc(2px * var(--s)) calc(4px * var(--s)); cursor: pointer; } .optCard button:hover { border-color: #8a91b0; } .optCard button.sel { border-color: var(--gold); color: #fff; background: #3a4470; } .optTabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4px * var(--s)); margin-bottom: calc(8px * var(--s)); } .optTabs button { padding: calc(4px * var(--s)); } .optTabs button.cur { color: var(--gold); background: #3a4470; } .optList { display: grid; gap: calc(7px * var(--s)); min-height: calc(110px * var(--s)); align-content: start; padding: calc(4px * var(--s)) 0; } .optRow { display: grid; grid-template-columns: calc(80px * var(--s)) 1fr; align-items: center; font-size: calc(9px * var(--s)); } .optRow > div { display: flex; gap: calc(4px * var(--s)); } .optRow button { flex: 1; min-height: calc(18px * var(--s)); } .optRow button em { font-style: normal; margin-left: calc(8px * var(--s)); } .optBar { display: inline-flex; gap: calc(2px * var(--s)); vertical-align: middle; } .optBar i { display: block; width: calc(14px * var(--s)); height: calc(9px * var(--s)); background: #171a2c; border: calc(1px * var(--s)) solid #4a5170; } .optBar i.on { background: var(--gold); border-color: var(--gold-d); } .optKeys { display: grid; grid-template-columns: 1fr calc(50px * var(--s)) calc(50px * var(--s)) 1fr calc(50px * var(--s)) calc(50px * var(--s)); gap: calc(2px * var(--s)) calc(3px * var(--s)); align-items: center; font-size: calc(9px * var(--s)); } .optKeys span { padding-left: calc(3px * var(--s)); } .optKeys span:nth-child(6n + 4) { padding-left: calc(10px * var(--s)); } .optKeys button { white-space: nowrap; overflow: hidden; } .optKeys button.none { color: #7d8299; } .optRow button.lock { color: #7d8299; background: #20243a; cursor: default; } .optKeys button.lock { color: #7d8299; background: #20243a; cursor: default; } .optKeys button.wait { color: #1b1f33; background: var(--gold); border-color: var(--gold); } .optMsg { margin: calc(5px * var(--s)) 0 0; min-height: calc(12px * var(--s)); font-size: calc(8px * var(--s)); text-align: center; color: #a9b3c2; } .optMsg.wait { color: var(--gold); } .optMsg.warn { color: #ff8a7a; } .optFoot { display: flex; justify-content: center; gap: calc(6px * var(--s)); margin-top: calc(6px * var(--s)); } .optFoot button { min-width: calc(90px * var(--s)); padding: calc(3px * var(--s)) calc(8px * var(--s)); } .optHint { margin: calc(5px * var(--s)) 0 0; font-size: calc(7px * var(--s)); text-align: center; color: #8a8fa3; } /* ---- 새로 시작 연출 (PD 11-09, js/ui/prologue.js): A 무기 각성 컷인 → B 서막 ---- */ #prologue { position: absolute; inset: 0; z-index: 6; overflow: hidden; background: #07060a; cursor: pointer; } #prologue[hidden] { display: none; } #prologue.plA .plLines { position: absolute; inset: -20%; background: repeating-linear-gradient(100deg, transparent 0 calc(14px * var(--s)), rgba(255,255,255,.05) calc(14px * var(--s)) calc(15px * var(--s))); animation: plLines .5s linear infinite; } @keyframes plLines { to { transform: translateX(calc(-30px * var(--s))); } } /* 무기가 붉은 띠의 가운데 선(47%, 띠 기울기 -2.25°)을 따라 왼쪽 밖 → 오른쪽 밖으로 가르며 날아감. 뒤에 남는 빛줄기 = 가른 자국 → 그 자리에서 띠가 위아래로 벌어진다 */ #prologue .plCutLine { position: absolute; left: 0; right: 0; top: 47%; height: 0; transform: rotate(-2.25deg); animation: plCutFade .35s ease-in 1.05s forwards; } @keyframes plCutFade { to { opacity: 0; } } #prologue .plRider { position: absolute; top: 0; left: -22%; animation: plRide .45s cubic-bezier(.75,0,.25,1) .3s forwards; } @keyframes plRide { to { left: 125%; } } #prologue .plWpn { position: absolute; left: 0; top: 0; width: calc(200px * var(--s)); image-rendering: pixelated; transform: translate(-50%, -50%); filter: drop-shadow(0 0 calc(4px * var(--s)) #fff) drop-shadow(0 0 calc(8px * var(--s)) var(--pl)); } #prologue .plTrail { position: absolute; right: calc(70px * var(--s)); top: calc(-1.5px * var(--s)); width: calc(1000px * var(--s)); height: calc(3px * var(--s)); background: linear-gradient(90deg, var(--pl) 0%, #fff 92%, rgba(255,255,255,0) 100%); box-shadow: 0 0 calc(6px * var(--s)) var(--pl), 0 0 calc(14px * var(--s)) var(--pl); } #prologue .plFlash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: plFlash .3s ease-out .66s forwards; } @keyframes plFlash { 0% { opacity: .4; } 100% { opacity: 0; } } #prologue .plSplit { position: absolute; left: 0; right: 0; top: 18%; height: 58%; background: linear-gradient(100deg, rgba(120,20,16,.0), rgba(140,28,20,.85) 30%, rgba(60,10,10,.9) 70%, rgba(0,0,0,0)); clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); transform: scaleY(0); animation: plSplit .3s cubic-bezier(.2,.9,.3,1) .8s forwards; } @keyframes plSplit { to { transform: scaleY(1); } } #prologue .plHero { position: absolute; left: 6%; bottom: 0; height: 115%; image-rendering: pixelated; transform: translateX(-60%); opacity: 0; animation: plHero .45s cubic-bezier(.2,.9,.3,1) .95s forwards; } @keyframes plHero { to { transform: translateX(0); opacity: 1; } } #prologue .plStamp { position: absolute; right: 14%; top: 38%; text-align: center; opacity: 0; transform: scale(3); animation: plStamp .35s cubic-bezier(.3,1.6,.5,1) 1.45s forwards; } #prologue .plStamp b { display: block; font-size: calc(46px * var(--s)); line-height: 1; color: #f2c94c; letter-spacing: calc(4px * var(--s)); font-weight: normal; text-shadow: 0 calc(2px * var(--s)) 0 #5a2a10, 0 0 calc(10px * var(--s)) var(--pl), calc(2px * var(--s)) 0 0 #1b0a0a, calc(-2px * var(--s)) 0 0 #1b0a0a; } #prologue .plStamp small { display: block; margin-top: calc(4px * var(--s)); font-size: calc(12px * var(--s)); color: #e6dcc4; letter-spacing: calc(8px * var(--s)); } @keyframes plStamp { to { opacity: 1; transform: scale(1); } } #prologue.plB { background: radial-gradient(ellipse at 50% 120%, #7a2412 0%, #2a0c08 45%, #07060a 75%); animation: plGlow 6.5s ease-in forwards; } @keyframes plGlow { 0% { filter: brightness(.4); } 100% { filter: brightness(1.15); } } #prologue .plEmber { position: absolute; bottom: -5%; width: calc(2px * var(--s)); height: calc(2px * var(--s)); background: #ffb35a; box-shadow: 0 0 calc(3px * var(--s)) #ff7a3a; animation: plEmber 4s linear infinite; } @keyframes plEmber { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(20px * var(--s)), calc(-200px * var(--s))); opacity: 0; } } #prologue .plText { position: absolute; left: 10%; right: 10%; top: 30%; text-align: center; } #prologue .plText p { margin: calc(10px * var(--s)) 0; font-size: calc(12px * var(--s)); color: #e6dcc4; opacity: 0; transform: translateY(calc(6px * var(--s))); animation: plLine 1.2s ease-out forwards; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) #000; } #prologue .plText p.last { color: #f2c94c; font-size: calc(14px * var(--s)); } @keyframes plLine { to { opacity: 1; transform: translateY(0); } } #prologue .plSkip { position: absolute; right: calc(10px * var(--s)); bottom: calc(8px * var(--s)); font-size: calc(7px * var(--s)); color: #8a8070; } #prologue .plHero.plCut { left: 5%; top: 8%; bottom: auto; height: 70%; image-rendering: auto; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); filter: drop-shadow(calc(-2px * var(--s)) 0 0 var(--pl)) drop-shadow(0 0 calc(6px * var(--s)) rgba(0,0,0,.6)); } /* 인장 아이콘 빛남 (PD 11-09): 이 구간에 그 인장으로 열 수 있는 봉인 입구가 있을 때 */ #hudSeals i.glow { position: relative; animation: sealGlow 1.1s ease-in-out infinite; z-index: 1; } #hudSeals i.glow::after { content: ""; position: absolute; inset: calc(-3px * var(--s)); border-radius: 50%; background: radial-gradient(circle, rgba(255,240,170,.75) 0%, rgba(255,210,90,.35) 45%, transparent 72%); z-index: -1; animation: sealHalo 1.1s ease-in-out infinite; pointer-events: none; } @keyframes sealGlow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 #ffe28a); transform: scale(1); } 50% { filter: brightness(1.45) drop-shadow(0 0 calc(3px * var(--s)) #ffe28a); transform: scale(1.18); } } @keyframes sealHalo { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } } /* ---- 엔딩 (PD 11-09, js/ui/ending.js): 내레이션 → 이름 입력 → 「대장군 ○○!」 → 마무리 ---- */ #ending { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: #07060a; } #ending[hidden] { display: none; } #ending.enNarr { background: radial-gradient(ellipse at 50% 120%, #7a5a12 0%, #2a1a08 45%, #07060a 75%); } #ending .plEmber, #ending .plText, #ending .plSkip { /* 서막과 같은 모양 (#prologue 규칙을 빌림) */ } #ending .plEmber { position: absolute; bottom: -5%; width: calc(2px * var(--s)); height: calc(2px * var(--s)); background: #ffd27a; box-shadow: 0 0 calc(3px * var(--s)) #ffb03a; animation: plEmber 4s linear infinite; } #ending .plText { position: absolute; left: 10%; right: 10%; top: 32%; text-align: center; } #ending .plText p { margin: calc(10px * var(--s)) 0; font-size: calc(12px * var(--s)); color: #e6dcc4; opacity: 0; transform: translateY(calc(6px * var(--s))); animation: plLine 1.2s ease-out forwards; text-shadow: 0 calc(1px * var(--s)) calc(2px * var(--s)) #000; } #ending .plText p.last { color: #f2c94c; font-size: calc(14px * var(--s)); } #ending.enOutro .plText p.last { font-size: calc(20px * var(--s)); letter-spacing: calc(2px * var(--s)); } #ending .plSkip { position: absolute; right: calc(10px * var(--s)); bottom: calc(8px * var(--s)); font-size: calc(7px * var(--s)); color: #8a8070; } #ending.enName { background: radial-gradient(ellipse at 50% 60%, #3a2410 0%, #120a06 60%, #07060a 90%); display: grid; place-items: center; } #ending .enBox { width: calc(310px * var(--s)); padding: calc(14px * var(--s)) calc(16px * var(--s)); background: rgba(20,14,10,.92); border: calc(2px * var(--s)) solid #c9962e; box-shadow: 0 0 calc(18px * var(--s)) rgba(242,201,76,.25); text-align: center; animation: enIn .5s ease-out; } @keyframes enIn { from { opacity: 0; transform: scale(.94); } } #ending .enBox h2 { margin: 0 0 calc(4px * var(--s)); font-size: calc(16px * var(--s)); color: #f2c94c; letter-spacing: calc(3px * var(--s)); font-weight: normal; } #ending .enBox .dim { margin: 0 0 calc(10px * var(--s)); font-size: calc(8px * var(--s)); color: #b8ab92; } #ending #enInput { width: 86%; box-sizing: border-box; padding: calc(5px * var(--s)) calc(8px * var(--s)); font: inherit; font-size: calc(14px * var(--s)); text-align: center; color: #fff3d0; background: #0e0a08; border: calc(1px * var(--s)) solid #8a6a2a; outline: none; } #ending #enInput:focus { border-color: #f2c94c; box-shadow: 0 0 calc(6px * var(--s)) rgba(242,201,76,.5); } #ending .enHint { margin: calc(6px * var(--s)) 0 calc(10px * var(--s)); font-size: calc(7px * var(--s)); color: #8a8070; } #ending .enBtns button { font: inherit; font-size: calc(10px * var(--s)); padding: calc(4px * var(--s)) calc(16px * var(--s)); color: #1b1408; background: #f2c94c; border: none; cursor: pointer; } #ending.enChant { background: radial-gradient(ellipse at 50% 110%, #8a3a12 0%, #3a1408 40%, #07060a 80%); text-align: center; } #ending .enCrowd { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: repeating-linear-gradient(90deg, rgba(10,6,4,.95) 0 calc(9px * var(--s)), rgba(30,16,8,.95) calc(9px * var(--s)) calc(11px * var(--s))); -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); } #ending .enCrowd::before { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 40%; background: repeating-linear-gradient(90deg, transparent 0 calc(13px * var(--s)), rgba(220,200,160,.55) calc(13px * var(--s)) calc(14px * var(--s)), transparent calc(14px * var(--s)) calc(27px * var(--s))); animation: enSpears 1.1s ease-in-out infinite alternate; } @keyframes enSpears { to { transform: translateY(calc(-6px * var(--s))); } } #ending .enLead { position: absolute; left: 0; right: 0; top: 16%; font-size: calc(11px * var(--s)); color: #e6dcc4; opacity: 0; animation: plLine 1s ease-out .2s forwards; } #ending .enCalls { position: absolute; left: 0; right: 0; top: 28%; } #ending .enCalls b { display: block; margin: calc(4px * var(--s)) 0; font-weight: normal; color: #f2c94c; font-size: calc(20px * var(--s)); letter-spacing: calc(2px * var(--s)); text-shadow: 0 calc(2px * var(--s)) 0 #5a2a10, 0 0 calc(10px * var(--s)) rgba(255,200,90,.7); animation: enCall .4s cubic-bezier(.3,1.6,.5,1) forwards; } #ending .enCalls b.c1 { font-size: calc(24px * var(--s)); } #ending .enCalls b.c2 { font-size: calc(30px * var(--s)); } @keyframes enCall { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } } #ending.shake { animation: enShake .35s linear; } @keyframes enShake { 20% { transform: translate(calc(3px * var(--s)), calc(-2px * var(--s))); } 40% { transform: translate(calc(-3px * var(--s)), calc(2px * var(--s))); } 60% { transform: translate(calc(2px * var(--s)), 0); } 80% { transform: translate(calc(-1px * var(--s)), calc(1px * var(--s))); } } #ending .enFlash { position: absolute; inset: 0; background: #ffe7a0; opacity: 0; pointer-events: none; } #ending.gold .enFlash { animation: plFlash .6s ease-out forwards; } #ending.enArt { background: #000; } #ending .enPic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; animation: enIn 1.2s ease-out; } #ending .enCap { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-size: calc(16px * var(--s)); color: #f2c94c; text-shadow: 0 calc(2px * var(--s)) calc(3px * var(--s)) #000; opacity: 0; animation: plLine 1.2s ease-out 1s forwards; } /* 엔딩 외침 + 궁성 전경 겹침 (PD 11-10) */ #ending .enView { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); pointer-events: none; } #ending.hasView .enView { animation: enView 5.5s ease-out .6s forwards; } @keyframes enView { 0% { opacity: 0; transform: scale(1.08); } 45% { opacity: .55; } 100% { opacity: .9; transform: scale(1); } } #ending.hasView .enCrowd { display: none; } #ending.hasView .enLead, #ending.hasView .enCalls b { text-shadow: 0 calc(2px * var(--s)) 0 #3a1408, 0 0 calc(6px * var(--s)) #000, 0 0 calc(12px * var(--s)) rgba(255,200,90,.6); } #ending.hasView .enLead { color: #fff3d8; } #ending.hasView .enLead, #ending.hasView .enCalls { left: 40%; right: 1%; } /* 궁성 전경의 주인공(왼쪽)을 가리지 않게 */ /* 보스 체력바 칸이 깨질 때 (PD 11-10) */ #bossBar .bar.boss.layerBreak { animation: layerBreak .35s ease-out; } @keyframes layerBreak { 0% { box-shadow: 0 0 calc(10px * var(--s)) #fff, inset 0 0 0 calc(8px * var(--s)) rgba(255,255,255,.85); } 100% { box-shadow: none; } } /* 세이브 옮기기 코드 칸 (PD 11-10) */ .saveCode { display: block; width: 100%; min-width: calc(260px * var(--s)); height: calc(70px * var(--s)); margin-top: calc(6px * var(--s)); padding: calc(4px * var(--s)); background: #10131f; color: #cfe3ff; border: 1px solid #4a5370; font: calc(6px * var(--s)) / 1.3 monospace; word-break: break-all; resize: none; } /* PD 11-11: 칸은 모두 사각형 — 둥근 테두리 그림(hud_slot.png) 대신 회복약 칸과 같은 금테 사각 (hud.js paintWpnFrame 모양을 css 로) */ #pad .ps:not(.wpn) { border-radius: calc(2px * var(--s)); background: linear-gradient(rgba(46,40,58,.92), rgba(23,19,29,.92)); box-shadow: inset 0 0 0 calc(0.6px * var(--s)) #000, inset 0 0 0 calc(1.6px * var(--s)) #c9962e, inset calc(1.6px * var(--s)) calc(1.6px * var(--s)) 0 calc(-1px * var(--s)) #f2c94c, inset 0 0 0 calc(2.3px * var(--s)) #000, 0 0 0 calc(0.6px * var(--s)) #000; } #pad .ps:not(.wpn)::after { background: none; } #pad .ps:not(.wpn) .col, #pad .ps:not(.wpn) .dim { inset: 14%; border-radius: calc(1px * var(--s)); } #pad .ps.ready:not(.wpn) { box-shadow: inset 0 0 0 calc(0.6px * var(--s)) #000, inset 0 0 0 calc(1.6px * var(--s)) #f2c94c, inset 0 0 0 calc(2.3px * var(--s)) #000, 0 0 calc(3px * var(--s)) rgba(242, 201, 76, .55); } #pad .ps.off:not(.wpn) { box-shadow: inset 0 0 0 calc(0.6px * var(--s)) #000, inset 0 0 0 calc(1.6px * var(--s)) #8a3a2a, inset 0 0 0 calc(2.3px * var(--s)) #000; } #pad .ps.atk.hit, #pad .ps.grd.hit { box-shadow: inset 0 0 0 calc(0.6px * var(--s)) #000, inset 0 0 0 calc(1.6px * var(--s)) #fff1c8, inset 0 0 0 calc(2.3px * var(--s)) #000, 0 0 calc(6px * var(--s)) rgba(255, 241, 200, .8); } /* 튜토리얼 (PD 11-11): 대화창 위로 · 가리킨 칸만 밝게 (나머지 어둡게) */ #stageTalk.top, #dialog.top { top: calc(10px * var(--s)); bottom: auto; z-index: 6; } #tutDim { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } #tutDim[hidden] { display: none; } #tutDim i { position: absolute; border: calc(1px * var(--s)) solid var(--gold); border-radius: calc(3px * var(--s)); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62), 0 0 calc(6px * var(--s)) rgba(242, 201, 76, .8); animation: tutPulse 1s ease-in-out infinite alternate; } #tutDim i[hidden] { display: none; } @keyframes tutPulse { from { border-color: var(--gold); } to { border-color: #fff6c8; } } #dialog.tut, #stageTalk.tut { z-index: 6; } #treeUI.pop { z-index: 4; background: rgb(20, 23, 38); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); } /* 스테이지 안 훈련장 (교관 튜토리얼): HUD 위로, 뒤 게임 화면은 어둡게 */ /* 훈련장 상세 단추 고르기 (PD 11-11): Enter 로 오른쪽 단추에 들어가면 고른 단추만 강조 */ #treeUI .tBtns.act button:first-child:not(:disabled) { background: #2b3150; } #treeUI .tBtns button.sel { background: var(--navy) !important; outline: calc(2px * var(--s)) solid #fff6c8; } #treeUI .tBtns button.sel::before { content: "▶ "; color: var(--gold); } /* 컷씬 그림 (PD 11-11): 대화 동안 화면 가득, 대화창은 그 위 */ #storyArt { position: absolute; inset: 0; z-index: 5; background: #000; pointer-events: none; } #storyArt[hidden] { display: none; } #storyArt img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; } #storyArt.in { animation: storyIn .5s ease-out; } @keyframes storyIn { from { opacity: 0; } to { opacity: 1; } } body.storyOn #stageTalk, body.storyOn #dialog { z-index: 6; } /* 보스 챌린지 (PD 11-12) */ #chalUI { position: absolute; inset: calc(10px * var(--s)); z-index: 4; background: rgba(20, 23, 38, .97); border: calc(2px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold-d); padding: calc(8px * var(--s)); display: flex; flex-direction: column; gap: calc(6px * var(--s)); font-size: calc(8px * var(--s)); color: var(--paper); } #chalUI[hidden] { display: none; } #chalUI .cHead { display: flex; justify-content: space-between; align-items: baseline; } #chalUI .cHead > b { color: var(--gold); font-weight: normal; font-size: calc(12px * var(--s)); } #chalUI .cHead span b { color: var(--gold); font-weight: normal; } #chalUI .cGrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(3px * var(--s)); align-content: start; } #chalUI .cCell { position: relative; background: #1e2236; border: calc(1px * var(--s)) solid #3a3f5c; padding: calc(2px * var(--s)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: pointer; min-height: calc(64px * var(--s)); overflow: hidden; } #chalUI .cCell.cur { outline: calc(2px * var(--s)) solid #fff6c8; background: rgba(60, 68, 110, .8); } #chalUI .cCell.lock { opacity: .4; cursor: default; } #chalUI .cCell.done { border-color: var(--gold-d); } #chalUI .cCell.final { border-color: #c8383b; } #chalUI .cCell.pick { border-color: var(--gold); background: rgba(80, 70, 30, .6); } #chalUI .cCell em { font-style: normal; font-size: calc(8px * var(--s)); text-align: center; line-height: 1.2; } #chalUI .cCell small { color: #9fe08a; font-size: calc(7px * var(--s)); } #chalUI .cCell.lock small, #chalUI .cCell:not(.done) small { color: #a9b3c2; } #chalUI .cNo { position: absolute; left: calc(2px * var(--s)); top: calc(1px * var(--s)); font-style: normal; font-size: calc(6px * var(--s)); color: #a9b3c2; } #chalUI .cNH, #chalUI .cTag { position: absolute; right: calc(1px * var(--s)); top: calc(1px * var(--s)); text-decoration: none; font-size: calc(6px * var(--s)); color: #1b1f33; background: var(--gold); padding: 0 calc(2px * var(--s)); } #chalUI .cInfo .cNH { position: static; } #chalUI .cFace { width: calc(34px * var(--s)); height: calc(34px * var(--s)); display: flex; align-items: center; justify-content: center; } #chalUI .cFace canvas { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; } #chalUI .cInfo { display: flex; gap: calc(8px * var(--s)); align-items: center; background: rgba(43, 49, 80, .6); border: calc(1px * var(--s)) solid #4a5170; padding: calc(4px * var(--s)); } #chalUI .cBig { width: calc(56px * var(--s)); height: calc(56px * var(--s)); flex: none; } #chalUI .cBig canvas { width: 100%; height: 100%; image-rendering: pixelated; } #chalUI .cInfo h3 { margin: 0; font-weight: normal; font-size: calc(11px * var(--s)); color: var(--gold); } #chalUI .cInfo h3 small { color: #a9b3c2; font-size: calc(7px * var(--s)); } #chalUI .cInfo b { color: #9fe08a; font-weight: normal; } #chalUI .cBtns { display: flex; gap: calc(6px * var(--s)); justify-content: center; } #chalUI .cBtns button { font: inherit; font-size: calc(9px * var(--s)); padding: calc(3px * var(--s)) calc(10px * var(--s)); background: #2b3150; color: var(--paper); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; cursor: pointer; } #chalUI .cBtns button.sel { background: var(--navy); outline-color: var(--gold); } #chalUI .cKeys { color: #a9b3c2; font-size: calc(7px * var(--s)); } #chalTimer { position: absolute; left: 50%; top: calc(8px * var(--s)); transform: translateX(-50%); z-index: 3; font-size: calc(14px * var(--s)); color: #fff6c8; text-shadow: 0 0 calc(3px * var(--s)) #000, 0 calc(1px * var(--s)) 0 #000; pointer-events: none; } #chalTimer[hidden] { display: none; } #chalTimer.hit { color: #e8e2d4; } #chalUI.weapons .cCell { min-height: calc(62px * var(--s)); } #chalUI.weapons .cCell em { min-height: calc(19px * var(--s)); } #chalUI .cCell small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* 보스 챌린지 2판 (PD 11-12): 왼쪽 목록 4열 + 오른쪽 정보 */ #chalUI .cHead > b small { font-size: calc(7px * var(--s)); color: #ff8a6a; border: calc(1px * var(--s)) solid #ff8a6a; padding: 0 calc(2px * var(--s)); vertical-align: middle; } #chalUI .cBody { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(8px * var(--s)); } #chalUI .cBody .cGrid { grid-template-columns: repeat(4, 1fr); } #chalUI .cBody .cInfo { display: flex; flex-direction: column; align-items: stretch; gap: calc(2px * var(--s)); overflow-y: auto; } #chalUI .cInfo .cBig { width: calc(72px * var(--s)); height: calc(72px * var(--s)); align-self: center; } #chalUI .cInfo h3 { text-align: center; } #chalUI .cInfo p { margin: 0; } #chalUI .cInfo h4 { margin: calc(4px * var(--s)) 0 0; color: var(--gold); font-weight: normal; font-size: calc(8px * var(--s)); border-bottom: calc(1px * var(--s)) solid #4a5170; } #chalUI .cMy b { font-size: calc(12px * var(--s)); } #chalUI .cNHb { text-decoration: none; color: #1b1f33; background: var(--gold); padding: 0 calc(3px * var(--s)); font-size: calc(7px * var(--s)); } #chalUI .cRank { margin: 0; padding-left: calc(14px * var(--s)); } #chalUI .cRank li { margin: calc(1px * var(--s)) 0; } #chalUI .cRank li span { color: #a9b3c2; } #chalUI .cGo { margin-top: auto; font: inherit; font-size: calc(10px * var(--s)); padding: calc(4px * var(--s)); background: var(--navy); color: #fff; border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold); cursor: pointer; } #chalUI .cNH { color: #1b1f33; } /* 보스 챌린지 단추 (PD 11-12): 왼쪽 목록 아래 고정 — 목록만 스크롤 */ #treeUI .wCol { display: flex; flex-direction: column; min-height: 0; gap: calc(4px * var(--s)); } #treeUI .wCol .wGrid { flex: 1; min-height: 0; } #treeUI .wNext, #treeUI .aStart { flex: none; font: inherit; font-size: calc(10px * var(--s)); padding: calc(4px * var(--s)); background: var(--navy); color: #fff; border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold-d); cursor: pointer; } #treeUI .aStart { margin-top: calc(4px * var(--s)); width: 100%; } #treeUI .wNext.sel, #treeUI .aStart.sel { outline: calc(2px * var(--s)) solid #fff6c8; background: #3a56a8; } /* 첫 실행 키 배치 고르기 (PD 11-12): 카드 두 장 — 배치마다 키·역할 */ #title .tKeyPick { position: absolute; inset: 0; z-index: 3; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6px * var(--s)); background: rgba(8, 6, 12, .78); color: #e6e3da; } #title .tKeyPick[hidden] { display: none; } #title .tKeyPick h2 { margin: 0; font-weight: normal; font-size: calc(14px * var(--s)); color: var(--gold); } #title .kpRow { display: flex; gap: calc(10px * var(--s)); } #title .kpCard { font: inherit; color: inherit; text-align: left; width: calc(200px * var(--s)); padding: calc(6px * var(--s)) calc(8px * var(--s)); cursor: pointer; background: rgba(20, 23, 38, .94); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid #4a5170; opacity: .72; } #title .kpCard.sel { outline: calc(2px * var(--s)) solid var(--gold); opacity: 1; background: rgba(36, 48, 92, .96); } #title .kpCard h3 { margin: 0; font-weight: normal; font-size: calc(11px * var(--s)); color: var(--gold); } #title .kpCard.sel h3::before { content: "▶ "; } #title .kpCard p { margin: calc(1px * var(--s)) 0 calc(4px * var(--s)); font-size: calc(7px * var(--s)); color: #a9adc0; } #title .kpKeys { display: grid; grid-template-columns: auto 1fr; gap: calc(2px * var(--s)) calc(8px * var(--s)); font-size: calc(8px * var(--s)); } #title .kpKeys span { color: #a9adc0; } #title .kpKeys b { font-weight: normal; color: #fff6c8; } #title .kpKeys small { color: #8a8fa6; font-size: calc(7px * var(--s)); } #title .kpNote { margin: calc(2px * var(--s)) 0 0; font-size: calc(9px * var(--s)); color: var(--gold); } #title .kpHint { margin: 0; font-size: calc(7px * var(--s)); color: #a9adc0; } /* 영웅각 출전·대기 (PD 11-12): 레벨업 단추 위 한 줄 두 단추 · 기술 줄의 다음 레벨업 효과 */ #treeUI .aParty { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3px * var(--s)); margin: calc(3px * var(--s)) 0 calc(1px * var(--s)); } #treeUI .aParty .wAct { text-align: center; } #treeUI .aParty .wAct.off { opacity: .55; } #treeUI .aSkNx { display: block; color: #9fe08a; } #treeUI .aSkNx b { color: #c8f5b8; font-weight: normal; } #treeUI .aSks { grid-template-columns: minmax(0, 1fr); } /* 긴 줄이 칸을 넓히지 않게 */ #treeUI .aSk > small.aSkNx { white-space: normal; overflow: visible; } /* 병기창·영웅각 마우스 (PD 11-12) */ #treeUI .wCell, #treeUI .wActs .wAct, #treeUI .aParty .wAct, #treeUI .aLvBtn { cursor: pointer; pointer-events: auto; } #treeUI .wActs .wAct:not(.off):hover, #treeUI .aParty .wAct:not(.off):hover, #treeUI .aLvBtn:not(.off):hover { border-color: var(--gold-d); } /* 영웅각 (PD 11-12): 초상 아래 지금 전술 · 제목 옆 안내 */ #treeUI .aBig { position: relative; } #treeUI .aBig .aTac { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: calc(7px * var(--s)); color: #fff6c8; background: rgba(10, 12, 22, .82); border-top: calc(1px * var(--s)) solid var(--gold-d); padding: calc(1px * var(--s)) 0; white-space: nowrap; } #treeUI .tHead > b .tSub { font-size: calc(8px * var(--s)); color: #a9adc0; margin-left: calc(4px * var(--s)); } #treeUI .aBig .aTac { white-space: normal; line-height: 1.15; font-size: calc(6.5px * var(--s)); } /* 전술 꼬리표 (PD 11-12): 동료 칸 왼쪽 아래 · 큰 초상 아래 — 잘 보이게 금색 바탕 */ #treeUI .aCell .aCellTac { position: absolute; left: calc(2px * var(--s)); bottom: calc(11px * var(--s)); font-weight: normal; font-size: calc(7px * var(--s)); line-height: 1; color: #1b1f33; background: var(--gold); padding: calc(1px * var(--s)) calc(2px * var(--s)); } #treeUI .aBig .aTac { color: #1b1f33; background: var(--gold); border-top: none; font-size: calc(7px * var(--s)); padding: calc(1px * var(--s)) 0; } /* 여포 도주 시계 글자 (PD 11-12) */ #timeLabel { position: absolute; z-index: 2; pointer-events: none; text-align: center; font-size: calc(8px * var(--s)); color: #ffd9a0; text-shadow: 0 calc(1px * var(--s)) 0 #000, calc(1px * var(--s)) 0 0 #000, calc(-1px * var(--s)) 0 0 #000, 0 calc(-1px * var(--s)) 0 #000; white-space: nowrap; } #timeLabel[hidden] { display: none; } /* 군영 「출전 ▶」 단추 (PD 11-12): 소리 단추 아래 — 누르면 지휘소까지 걸어가 부관과 이야기 */ #campGo { position: absolute; right: calc(62px * var(--s)); top: calc(7px * var(--s)); z-index: 3; font: inherit; font-size: calc(10px * var(--s)); cursor: pointer; color: #fff6c8; background: var(--navy); border: calc(1px * var(--s)) solid #000; outline: calc(1px * var(--s)) solid var(--gold); padding: calc(3px * var(--s)) calc(8px * var(--s)); } #campGo:hover { background: #3a56a8; } #campGo[hidden] { display: none; } #campGo kbd { font-size: calc(7px * var(--s)); margin-left: calc(3px * var(--s)); } /* 대화창 글자 키우기 · 조작키 색 (PD 11-12) */ #dialog, #stageTalk { font-size: calc(11px * var(--s)); } #dialog b, #stageTalk b { font-size: calc(11.5px * var(--s)); } #dialog p, #stageTalk p { line-height: 1.45; } #dialog span, #stageTalk span { font-size: calc(8px * var(--s)); } #dialog em.tk, #stageTalk em.tk { font-style: normal; color: #6fe3ff; text-shadow: 0 0 calc(3px * var(--s)) rgba(80, 200, 255, .45); } /* 병기창 상세 개편 (PD 11-12): 강화 게이지 · 기술 카드 · 상태 연계 설명 */ #treeUI .wInfo h3 { margin-bottom: 0; } #treeUI .wUpBar .aLvPips i { width: calc(8px * var(--s)); } #treeUI .wUpBar .wUpBtn { margin-left: auto; padding: calc(1px * var(--s)) calc(6px * var(--s)); white-space: nowrap; cursor: pointer; } #treeUI .wDesc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #treeUI .wSks { gap: calc(3px * var(--s)); } #treeUI .wSk { display: flex; gap: calc(4px * var(--s)); align-items: flex-start; } #treeUI .wSkIco { flex: none; width: calc(20px * var(--s)); height: calc(20px * var(--s)); } #treeUI .wSkIco canvas { width: 100%; height: 100%; image-rendering: pixelated; } #treeUI .wSk.lock .wSkIco { filter: grayscale(1) brightness(.6); } #treeUI .wSkBody { flex: 1; min-width: 0; } #treeUI .wSk kbd { font: inherit; font-size: calc(7px * var(--s)); color: #fff6c8; background: #2b3150; border: calc(1px * var(--s)) solid #6a7190; padding: 0 calc(3px * var(--s)); } #treeUI .wSk .aSkTop b { color: #e8e2d4; font-weight: normal; } #treeUI .wSk.lock .aSkTop b { color: #8a8fa3; } #treeUI .wBadge { color: var(--c); border: calc(1px * var(--s)) solid var(--c); padding: 0 calc(3px * var(--s)); font-size: calc(7px * var(--s)); } #treeUI .wBadge.burst { background: color-mix(in srgb, var(--c) 22%, transparent); } #treeUI .wSkNum { display: block; color: #8fb8ff; font-size: calc(7px * var(--s)); } #treeUI .wLegend { flex: none; background: rgba(15, 17, 28, .6); border: calc(1px * var(--s)) solid #4a5170; padding: calc(3px * var(--s)) calc(4px * var(--s)); font-size: calc(7px * var(--s)); line-height: 1.4; } #treeUI .wLegend p { margin: 0 0 calc(2px * var(--s)); color: #cfd3e0; } #treeUI .wLegend p b { color: var(--gold); font-weight: normal; } #treeUI .wLegK { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1px * var(--s)) calc(4px * var(--s)); } #treeUI .wLegK span { display: flex; align-items: center; gap: calc(2px * var(--s)); opacity: .4; color: #a9b3c2; } #treeUI .wLegK span.on { opacity: 1; color: #e8e2d4; } #treeUI .wLegK span b { color: var(--c); font-weight: normal; margin-right: calc(2px * var(--s)); } #treeUI .wLegK img { width: calc(10px * var(--s)); height: calc(10px * var(--s)); image-rendering: pixelated; } #treeUI .wSkBody > small.dim { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #treeUI .wSkBody > small.wSkNum { display: inline; margin-left: 0; } #treeUI .wInfo .wBig { height: calc(30px * var(--s)); } #treeUI .wLegK { grid-template-columns: 1fr; } #treeUI .wLegK span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 병기창 장착 단추 한 줄 (PD 11-12) */ #treeUI .wEquipRow { display: flex; gap: calc(4px * var(--s)); margin: calc(3px * var(--s)) 0 0; } #treeUI .wEquipRow .wAct { flex: 1; text-align: center; } #treeUI .wEquipRow .wAct.sel::before { content: none; } #treeUI .wUpBar .wUpBtn.sel::before { content: none; } #treeUI .wLegStar { margin: calc(2px * var(--s)) 0 0 !important; color: #cfd3e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #treeUI .wLegStar b { color: #fff6c8; font-weight: normal; } /* 중국어 (PD 11-12): Galmuri 에 없는 간체·번체 글자는 시스템 중국어 글꼴로 */ html:lang(zh-CN) body { font-family: Galmuri11, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; } html:lang(zh-TW) body { font-family: Galmuri11, "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", sans-serif; } /* 만든 사람들 (PD 11-12): 배경 = 타이틀 시안 C, 주인공 일행은 왼쪽 → 글은 오른쪽 */ #screen.credits { place-items: center end; padding-right: calc(28px * var(--s)); background: linear-gradient(90deg, rgba(10,12,20,0) 30%, rgba(10,12,20,.55) 70%), url("../assets/title/credits_bg.webp") center / cover no-repeat; } #screen.credits .card { min-width: calc(250px * var(--s)); max-width: calc(270px * var(--s)); background: rgba(16, 19, 34, .86); font-family: Galmuri11, monospace; } #screen.credits h1 { text-align: center; letter-spacing: calc(2px * var(--s)); } #screen.credits .crRow { text-align: center; margin: calc(7px * var(--s)) 0; } #screen.credits .crRow small { display: block; font-size: calc(8px * var(--s)); color: #9aa3c0; letter-spacing: calc(1px * var(--s)); text-transform: uppercase; } #screen.credits .crRow b { display: block; font-weight: normal; font-size: calc(11px * var(--s)); color: #fff6c8; margin-top: calc(2px * var(--s)); } #screen.credits .crThanks { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1px * var(--s)) calc(10px * var(--s)); margin: calc(3px * var(--s)) 0 0 !important; } #screen.credits .crThanks li { font-size: calc(9px * var(--s)); color: #e8e4d6; } #screen.credits .crAll { text-align: center; color: var(--gold); margin-top: calc(9px * var(--s)) !important; } #screen.credits #screenActions button { text-align: center; }