:root { color-scheme: dark; --bg:#05040a; --fg:#f0e0c0; --gold:#c9a24a; --red:#ff4a5a; --blue:#9ad0ff; --panel:rgba(8,6,16,.86); --line:#6d5126; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; overflow: hidden; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; outline: none; touch-action: none; user-select: none; }
.hidden { display: none !important; }
button { background: #1a1424; color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; font: inherit; cursor: pointer; }
button:hover { background: #2a2038; border-color: var(--gold); }
button.ghost { background: transparent; }
button.primary { background: #3a2a10; border-color: var(--gold); }
button:disabled { opacity: .4; cursor: default; }
input, select { background: #0d0a16; color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font: inherit; }
input:focus { outline: 1px solid var(--gold); }
/* ------------------------------------------------------------ 로그인 */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 30%, #1a1230 0%, #05040a 70%); z-index: 20; }
.title-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.title-art img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.9); }
.title-text { text-align: center; text-shadow: 0 2px 12px #000; }
.title-text h1 { font-family: Hahmlet, serif; font-size: 52px; margin: 0; letter-spacing: 4px; color: #f6e2b8; }
.title-text h1 span { color: var(--red); font-size: 34px; letter-spacing: 8px; }
.title-text p { margin: 4px 0 0; color: #bfae8c; letter-spacing: 2px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; min-width: 340px; backdrop-filter: blur(4px); }
.panel.wide { min-width: 720px; max-width: 92vw; }
.panel h2 { margin: 0 0 12px; font-family: Hahmlet, serif; font-weight: 700; color: var(--gold); }
.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.row label { width: 64px; color: #bfae8c; }
.row input { flex: 1; }
.row.btns { justify-content: flex-end; }
.hint { font-size: 12px; color: #8a7d66; margin-top: 8px; }
#login-error { color: var(--red); min-height: 20px; text-shadow: 0 1px 4px #000; }
#char-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.char-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #332845; border-radius: 6px; cursor: pointer; }
.char-item:hover { border-color: var(--gold); background: #1a1424; }
.char-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.char-item .del { margin-left: auto; color: #8a7d66; }
#job-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.job-card { border: 1px solid #332845; border-radius: 6px; padding: 6px; cursor: pointer; text-align: center; font-size: 12px; }
.job-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 4px; }
.job-card.sel, .job-card:hover { border-color: var(--gold); background: #1a1424; }
#job-detail { margin: 12px 0; min-height: 120px; display: flex; gap: 14px; }
#job-detail img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; }
#job-detail .tree { font-size: 12px; color: #bfae8c; margin-top: 6px; }
#job-detail .tree b { color: var(--blue); }
/* ------------------------------------------------------------ HUD */
#hud > * { position: absolute; }
#top-left { left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.frame { display: flex; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; min-width: 260px; }
.frame img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; border: 1px solid #3a2d4a; }
.frame .bars { flex: 1; }
.frame .nm { font-size: 13px; }
.frame .nm b { color: #f6e2b8; } .frame .nm span { color: #bfae8c; font-size: 12px; }
.bar { position: relative; height: 12px; background: #1a1220; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; transition: width .15s; }
.bar.hp i { background: linear-gradient(#ff6a6a, #c42030); } .bar.res i { background: linear-gradient(#7ab8ff, #2c5cc0); }
.bar.res.stamina i { background: linear-gradient(#ffe36a, #c08a20); } .bar.res.energy i { background: linear-gradient(#c0a0ff, #6a40c0); } .bar.res.rage i { background: linear-gradient(#ff8a3a, #c03010); } .bar.res.ammo i { background: linear-gradient(#ffd080, #a06020); }
.bar.exp { height: 4px; } .bar.exp i { background: #c9a24a; }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
#me-status, #tg-status { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; min-height: 14px; }
.sticon { font-size: 10px; padding: 0 4px; border-radius: 3px; background: #2a2038; border: 1px solid #000; }
#party-frames .frame { min-width: 200px; padding: 4px; } #party-frames .frame img { width: 32px; height: 32px; }
#top-right { right: 10px; top: 10px; text-align: right; }
#zone-name { font-family: Hahmlet, serif; font-size: 18px; color: #f6e2b8; text-shadow: 0 1px 4px #000; }
#minimap { background: rgba(0,0,0,.6); border: 1px solid var(--line); border-radius: 4px; display: block; margin: 4px 0 0 auto; }
#online { font-size: 11px; color: #8a7d66; }
#quest-tracker { right: 10px; top: 170px; width: 260px; font-size: 12px; text-shadow: 0 1px 3px #000; }
#quest-tracker .q { margin-bottom: 6px; background: rgba(0,0,0,.35); padding: 4px 8px; border-left: 2px solid var(--gold); border-radius: 0 4px 4px 0; }
#quest-tracker .q b { color: #f6e2b8; } #quest-tracker .q.side { border-color: #7ab8ff; } #quest-tracker .q .step { color: #bfae8c; }
#boss-bar { left: 50%; top: 14px; transform: translateX(-50%); width: 520px; background: var(--panel); border: 1px solid var(--red); border-radius: 6px; padding: 6px 10px; }
#boss-bar .nm b { color: #ff9a9a; font-family: Hahmlet, serif; } #boss-bar .nm span { margin-left: 8px; color: #bfae8c; font-size: 12px; }
#boss-bar .bar { height: 14px; } #boss-gimmick { font-size: 11px; color: #d0c0a0; margin-top: 2px; }
#bottom { left: 0; right: 0; bottom: 0; height: 150px; display: grid; grid-template-columns: 360px 1fr 100px 1fr; align-items: end; gap: 8px; padding: 0 10px 8px; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#chat { display: flex; flex-direction: column; height: 150px; }
#chat-log { flex: 1; overflow-y: auto; font-size: 12px; background: rgba(0,0,0,.45); border-radius: 6px 6px 0 0; padding: 4px 8px; scrollbar-width: thin; }
#chat-log .zone b { color: #f6e2b8; } #chat-log .all b { color: #7ab8ff; } #chat-log .whisper { color: #e0a0ff; } #chat-log .sys { color: #c9a24a; } #chat-log .loot { color: #9ae6c8; } #chat-log .quest { color: #ffd080; } #chat-log .warn { color: #ff8a8a; }
#chat-row { display: flex; gap: 4px; } #chat-in { flex: 1; } #chat-ch { width: 64px; }
#skillbar { display: flex; gap: 6px; justify-content: center; align-self: end; }
.slot { position: relative; width: 56px; height: 56px; background: #130f1c; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; overflow: hidden; }
.slot .ic { position: absolute; inset: 2px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: Hahmlet, serif; font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 1px 3px #000; text-align: center; line-height: 1.1; padding: 2px; }
.slot .key { position: absolute; left: 3px; top: 1px; font-size: 10px; color: #bfae8c; }
.slot .cd { position: absolute; inset: 0; background: rgba(0,0,0,.72); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.slot .cost { position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #9ad0ff; }
.slot.ult { border-color: var(--red); } .slot.ult.ready { box-shadow: 0 0 12px var(--red); animation: pulse 1s infinite alternate; }
.slot.disabled { opacity: .45; }
@keyframes pulse { from { box-shadow: 0 0 6px var(--red); } to { box-shadow: 0 0 18px var(--red); } }
#gauge-wrap { align-self: end; text-align: center; font-size: 11px; color: #ff9a9a; }
#gauge { width: 90px; height: 10px; background: #1a1220; border: 1px solid var(--red); border-radius: 5px; overflow: hidden; } #gauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff4a5a, #ffd080); transition: width .2s; }
#menu-btns { display: flex; gap: 4px; justify-content: flex-end; align-self: end; flex-wrap: wrap; }
#menu-btns button { padding: 6px 8px; font-size: 12px; }
/* 상태 안내는 채팅 전용. 기존 알림 컨테이너도 화면에 표시하지 않는다. */
#notices { display: none; }
.notice { background: rgba(0,0,0,.6); padding: 4px 14px; border-radius: 14px; font-size: 13px; text-shadow: 0 1px 2px #000; animation: fadeout 4s forwards; }
.notice.quest { color: #ffd080; } .notice.loot { color: #9ae6c8; } .notice.warn { color: #ff8a8a; } .notice.info { color: #f0e0c0; }
@keyframes fadeout { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* 창 */
#win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; max-width: 94vw; max-height: 82vh; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; z-index: 10; }
#win-head { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid #332845; font-family: Hahmlet, serif; color: var(--gold); font-size: 16px; }
#win-head button { margin-left: auto; padding: 2px 8px; }
#win-body { padding: 12px; overflow: auto; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; } .tabs button.on { background: #3a2a10; border-color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.item { position: relative; aspect-ratio: 1; background: #130f1c; border: 1px solid #332845; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; line-height: 1.1; padding: 2px; }
.item.g-uncommon { border-color: #6ab86a; } .item.g-rare { border-color: #4f8fff; } .item.g-epic { border-color: #c070ff; } .item.g-legendary { border-color: #ffb040; }
.item .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #ffd080; } .item .e { position: absolute; left: 2px; top: 0; font-size: 10px; color: #9ae6c8; }
.item:hover { background: #2a2038; }
.tip { position: fixed; z-index: 30; background: rgba(5,4,10,.95); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; max-width: 280px; pointer-events: none; }
.tip b { color: #f6e2b8; } .tip .g { color: #bfae8c; } .tip .s { color: #9ae6c8; } .tip .d { color: #d0c0a0; margin-top: 4px; } .tip .m { color: #ffd080; margin-top: 4px; white-space: pre-wrap; }
.tip.g-uncommon b { color: #6ab86a; } .tip.g-rare b { color: #4f8fff; } .tip.g-epic b { color: #c070ff; } .tip.g-legendary b { color: #ffb040; }
.equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eq-slot { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #332845; border-radius: 4px; margin-bottom: 4px; cursor: pointer; } .eq-slot small { color: #8a7d66; width: 40px; }
.stats { font-size: 12px; columns: 2; } .stats div { display: flex; justify-content: space-between; padding: 1px 0; border-bottom: 1px dotted #2a2038; } .stats span { color: #9ad0ff; }
.skill-row { display: flex; gap: 10px; padding: 8px; border: 1px solid #332845; border-radius: 6px; margin-bottom: 6px; align-items: flex-start; }
.skill-row .ic { width: 48px; height: 48px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: Hahmlet, serif; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; font-size: 13px; text-align: center; line-height: 1.1; }
.skill-row .body { flex: 1; font-size: 12px; } .skill-row .body b { color: #f6e2b8; font-size: 13px; } .skill-row .meta { color: #bfae8c; } .skill-row .motion { color: #d0c0a0; margin-top: 4px; white-space: pre-wrap; font-size: 11px; }
.skill-row.locked { opacity: .5; }
.skill-row .assign { display: flex; gap: 2px; flex-wrap: wrap; width: 96px; } .skill-row .assign button { padding: 1px 6px; font-size: 11px; }
.quest-row { padding: 8px; border: 1px solid #332845; border-radius: 6px; margin-bottom: 6px; font-size: 12px; } .quest-row b { color: #f6e2b8; } .quest-row .type { color: #bfae8c; margin-left: 6px; } .quest-row .step { color: #ffd080; } .quest-row .done { color: #6ab86a; }
.job-tree { display: flex; gap: 10px; align-items: flex-start; } .job-tree .node { border: 1px solid #332845; border-radius: 6px; padding: 8px; font-size: 12px; min-width: 150px; } .job-tree .node.cur { border-color: var(--gold); } .job-tree .node b { color: #f6e2b8; }
.setting { display: flex; align-items: center; gap: 10px; margin: 6px 0; } .setting label { width: 160px; color: #bfae8c; } .setting input[type=range] { flex: 1; }
/* 대화 */
#dialog { left: 50%; bottom: 160px; transform: translateX(-50%); width: 760px; max-width: 94vw; display: flex; align-items: flex-end; gap: 10px; z-index: 9; }
#dlg-portrait { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #0d0a16; }
#dlg-box { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; min-height: 110px; position: relative; cursor: pointer; }
#dlg-who { font-family: Hahmlet, serif; color: var(--gold); margin-bottom: 4px; } #dlg-text { font-size: 15px; line-height: 1.6; min-height: 48px; }
#dlg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } #dlg-next { position: absolute; right: 12px; bottom: 6px; color: #bfae8c; animation: bob 1s infinite alternate; }
@keyframes bob { to { transform: translateY(3px); } }
/* 컷신 */
#cutscene { inset: 0; z-index: 15; background: rgba(0,0,0,.55); }
#cs-bar-top, #cs-bar-bot { position: absolute; left: 0; right: 0; height: 12%; background: #000; } #cs-bar-top { top: 0; } #cs-bar-bot { bottom: 0; }
#cs-portrait { position: absolute; left: 8%; bottom: 14%; width: 220px; height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
#cs-box { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); width: 70%; background: rgba(5,4,10,.9); border: 1px solid var(--line); border-radius: 8px; padding: 16px 22px; cursor: pointer; }
#cs-who { font-family: Hahmlet, serif; color: var(--gold); } #cs-text { font-size: 17px; line-height: 1.7; min-height: 56px; } #cs-hint { font-size: 11px; color: #8a7d66; text-align: right; }
#cs-title { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: Hahmlet, serif; font-size: 40px; color: #f6e2b8; text-shadow: 0 2px 20px #000; letter-spacing: 6px; background: #000; }
#cs-title.on { display: flex; }
/* 컷인 */
#cutin { inset: 0; z-index: 14; display: flex; align-items: center; justify-content: center; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.75) 70%, transparent 100%); animation: cutin .9s forwards; }
#cutin-text { font-family: Hahmlet, serif; font-size: 54px; color: #fff; text-shadow: 0 0 24px var(--red), 0 2px 6px #000; letter-spacing: 6px; transform: skewX(-8deg); }
#cutin-img { position: absolute; left: 10%; bottom: 20%; width: 260px; height: 260px; background-size: cover; background-position: center; border-radius: 8px; opacity: .9; filter: contrast(1.1); }
@keyframes cutin { 0% { opacity: 0; transform: scaleX(1.4); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
#death { inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(60,0,10,.45); }
#death h2 { font-family: Hahmlet, serif; font-size: 40px; color: #ff9a9a; margin: 0; }
#choice { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 520px; background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; padding: 16px; z-index: 16; }
#choice-prompt { font-size: 15px; margin-bottom: 12px; } #choice-opts { display: flex; flex-direction: column; gap: 6px; } #choice-opts button { text-align: left; }
#flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; z-index: 8; }
#touch { left: 0; right: 0; bottom: 160px; height: 160px; pointer-events: none; }
#stick { position: absolute; left: 30px; bottom: 10px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); pointer-events: auto; } #knob { position: absolute; left: 40px; top: 40px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.4); }
#touch-atk { position: absolute; right: 30px; bottom: 20px; width: 80px; height: 80px; border-radius: 50%; pointer-events: auto; font-size: 16px; }
.lineage-tag { font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 1px solid currentColor; }

/* 원작 키보드 조작 안내: 월드 줌과 무관한 HUD */
#action-help { left:50%; bottom:78px; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; width:max-content; max-width:calc(100% - 32px); padding:5px 12px; background:rgba(8,6,16,.82); border:1px solid #6d5126; border-radius:5px; font-size:12px; color:#e3d3b7; pointer-events:none; }
#action-help span { white-space:nowrap; }
#minimap.expanded { width:320px; height:220px; image-rendering:pixelated; }
#touch-dodge { position:absolute; right:115px; bottom:45px; width:65px; height:65px; border-radius:50%; background:rgba(45,56,85,.8); }
@media(max-width:900px) { #action-help { bottom:120px; font-size:10px; gap:2px 7px; } }
@media(pointer:coarse) { #action-help { display:none; } }

/* 퀘스트 표식과 실제 목표 위치 */
#minimap { width:220px; height:150px; }
#minimap.expanded { width:440px; height:300px; }
#quest-legend { display:flex; gap:9px; justify-content:flex-end; font-size:11px; background:rgba(8,6,16,.85);padding:4px 6px;border-radius:3px; }
.quest-available { color:#ffd36a; }.quest-progress { color:#a5a8b0; }.quest-complete { color:#ffe483; }.quest-objective { color:#7ee8ff; }
#quest-destination { width:260px; margin-top:4px; padding:5px 7px; font-size:11px; color:#c9f3ff; background:rgba(8,6,16,.85);white-space:pre-line;border-radius:3px;text-align:left; }
#quest-tracker { top:290px; }
@media(max-width:900px) { #minimap { width:180px;height:123px; } #quest-destination { width:200px;font-size:10px; } #quest-tracker { top:270px;width:200px; } #minimap.expanded { width:320px;height:218px; } }

/* ------------------------------------------------------------ Q/W/E 연계 + R 필살기 (PC·모바일 공용 버튼 4개) */
#skillbar { display:flex; gap:6px; justify-content:center; align-self:end; }
.chain-btn { position:relative; display:block; width:80px; height:70px; padding:0; border-radius:8px; background:linear-gradient(170deg,#261b33,#110b19); border:1px solid var(--line); overflow:hidden; color:#fff; text-align:center; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.chain-btn:focus-visible { outline:2px solid #ffd080; outline-offset:2px; }
.chain-btn .key { position:absolute; left:5px; top:2px; font:900 13px/1.2 Hahmlet, serif; color:var(--gold); text-shadow:0 1px 2px #000; }
.chain-btn .nm { position:absolute; left:3px; right:3px; top:17px; font:700 11px/1.15 Hahmlet, serif; max-height:26px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-shadow:0 1px 3px #000; word-break:keep-all; }
.chain-btn .pips { position:absolute; left:0; right:0; bottom:16px; display:flex; gap:2px; justify-content:center; }
.chain-btn .pips i { width:9px; height:5px; border-radius:2px; background:#3a2d4a; }
.chain-btn .pips i.done { background:#c9a24a; }
.chain-btn .pips i.cur { background:#fff; box-shadow:0 0 5px #ffd080; }
.chain-btn .pips i.off { background:transparent; border:1px dashed #5a4a66; }
.chain-btn .pips i.p5 { width:11px; margin-left:2px; transform:skewX(-20deg); background:#4a2433; }
.chain-btn .pips i.p5.off { background:transparent; }
.chain-btn .pips i.p5.armed { background:#ff4a5a; box-shadow:0 0 6px #ff4a5a; animation:pulse .35s infinite alternate; }
.chain-btn .stage { position:absolute; left:4px; bottom:2px; font-size:10px; line-height:13px; color:#ffd080; white-space:nowrap; max-width:calc(100% - 8px); overflow:hidden; text-overflow:ellipsis; }
.chain-btn .cost { position:absolute; right:4px; top:3px; font-size:9px; line-height:12px; color:#9ad0ff; }
.chain-btn .timer { position:absolute; left:0; right:0; top:0; height:2px; }
.chain-btn .timer i { display:block; height:100%; width:0; background:#ffd080; transition:width .1s linear; }
.chain-btn.ult .timer { top:auto; bottom:0; height:3px; } .chain-btn.ult .timer i { background:linear-gradient(90deg,#ff4a5a,#ffd080); }
.chain-btn .cd { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.66); font-weight:700; font-size:16px; }
.chain-btn.cooling .cd { display:flex; }
.chain-btn .lock { position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center; padding-bottom:6px; background:rgba(0,0,0,.62); color:#bfae8c; font-size:11px; font-weight:700; }
.chain-btn.locked .lock { display:flex; } .chain-btn.locked .pips, .chain-btn.locked .stage { visibility:hidden; }
.chain-btn.disabled { opacity:.5; }
.chain-btn.ult { border-color:var(--red); } .chain-btn.ult.ready { box-shadow:0 0 12px var(--red); animation:pulse 1s infinite alternate; }
.chain-btn.pending5 { border-color:#ff4a5a; }
.chain-btn.fire { border-color:#fff; box-shadow:0 0 10px #ffd080; }
.chain-btn.auto5 { border-color:#ff4a5a; box-shadow:0 0 16px #ff4a5a; }
.chain-btn.reset { animation:chainReset .4s ease-out; }
@keyframes chainReset { 0% { filter:brightness(.35) saturate(.3); } 100% { filter:none; } }
#touch button { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }

/* 기술 창: 연계 구성 */
.chain-loadout h3 { margin:0 0 4px; color:var(--gold); font-family:Hahmlet, serif; }
.chain-explain { margin:0 0 10px; font-size:12px; color:#d0c0a0; line-height:1.6; }
.chain-lane { display:flex; gap:10px; padding:8px; border:1px solid #332845; border-radius:6px; margin-bottom:8px; }
.chain-lane.locked { opacity:.75; }
.chain-lane .lane-key { flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold); border-radius:6px; font:900 16px Hahmlet, serif; color:var(--gold); }
.chain-lane.ult .lane-key { border-color:var(--red); color:#ff9a9a; }
.chain-lane .lane-body { flex:1; min-width:0; font-size:12px; }
.chain-lane .lane-state { color:#f6e2b8; margin-bottom:6px; }
.chain-steps { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.chain-step { padding:5px 6px; border:1px solid #3a2d4a; border-radius:5px; background:#130f1c; }
.chain-step small { display:block; color:#bfae8c; font-size:10px; } .chain-step b { display:block; color:#fff; font-size:12px; }
.chain-step span { display:block; color:#9ae6c8; font-size:10px; } .chain-step.locked span { color:#ff9a9a; }
.chain-step p { margin:3px 0 0; color:#c8b898; font-size:11px; line-height:1.4; }
.chain-step.locked { opacity:.7; border-style:dashed; } .chain-step.auto { border-color:#7a2a3a; }
.chain-lane .lane-cond { margin-top:6px; color:#ff9a9a; }
.chain-lane p { margin:4px 0 0; color:#d0c0a0; }
.legacy-codex { margin-top:12px; border-top:1px solid #332845; padding-top:8px; }
.legacy-codex > summary { cursor:pointer; color:#bfae8c; font-size:12px; padding:6px 0; }
@media(max-width:700px) { .chain-steps { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ------------------------------------------------------------ 터치 기기: 안전 영역 + 엄지 배치 (세로 390x844 · 가로 844x390 기준) */
#hud.touch-ui { --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px); --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); }
#hud.touch-ui #touch { inset:0; height:auto; bottom:0; z-index:6; pointer-events:none; }
#hud.touch-ui #stick { left:calc(14px + var(--sl)); bottom:calc(18px + var(--sb)); width:124px; height:124px; touch-action:none; }
#hud.touch-ui #knob { width:46px; height:46px; left:39px; top:39px; pointer-events:none; }
#hud.touch-ui #touch-atk { right:calc(14px + var(--sr)); bottom:calc(18px + var(--sb)); width:84px; height:84px; font-size:16px; }
#hud.touch-ui #touch-dodge { right:calc(108px + var(--sr)); bottom:calc(18px + var(--sb)); width:60px; height:60px; }
#hud.touch-ui #bottom { display:block; inset:0; height:auto; padding:0; z-index:5; }
#hud.touch-ui #bottom > * { position:absolute; }
#hud.touch-ui #skillbar { z-index:7; right:calc(14px + var(--sr)); bottom:calc(114px + var(--sb)); display:grid; grid-template-columns:repeat(2, 66px); gap:8px; }
#hud.touch-ui .chain-btn { width:66px; height:58px; }
#hud.touch-ui .chain-btn .nm { top:15px; font-size:10.5px; }
#hud.touch-ui .chain-btn .pips { bottom:15px; }
#hud.touch-ui #gauge-wrap { right:calc(14px + var(--sr)); bottom:calc(244px + var(--sb)); width:140px; }
#hud.touch-ui #gauge { width:100%; }
#hud.touch-ui #chat { left:calc(8px + var(--sl)); right:calc(8px + var(--sr)); bottom:calc(276px + var(--sb)); height:104px; }
#hud.touch-ui #chat-log { font-size:11px; }
#hud.touch-ui #menu-btns { left:calc(8px + var(--sl)); right:calc(8px + var(--sr)); bottom:calc(386px + var(--sb)); flex-wrap:nowrap; gap:4px; }
#hud.touch-ui #menu-btns button { flex:1 1 0; min-width:0; min-height:44px; padding:4px 2px; font-size:12px; }
#hud.touch-ui #top-left { left:calc(8px + var(--sl)); top:calc(8px + var(--st)); gap:4px; }
#hud.touch-ui .frame { min-width:0; width:196px; padding:4px; gap:6px; }
#hud.touch-ui .frame img { width:40px; height:40px; }
#hud.touch-ui #party-frames .frame { min-width:0; width:196px; }
#hud.touch-ui #top-right { right:calc(8px + var(--sr)); top:calc(8px + var(--st)); width:150px; }
#hud.touch-ui #zone-name { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud.touch-ui #minimap { width:150px; height:102px; }
#hud.touch-ui #minimap.expanded { width:min(300px, calc(100vw - 230px)); height:auto; aspect-ratio:22/15; }
#hud.touch-ui #quest-legend { flex-wrap:wrap; gap:2px 6px; font-size:10px; }
#hud.touch-ui #quest-destination { width:150px; max-height:40px; overflow:hidden; font-size:10px; }
#hud.touch-ui #quest-tracker { right:calc(8px + var(--sr)); top:calc(258px + var(--st)); width:150px; max-height:72px; overflow:hidden; font-size:10px; }
#hud.touch-ui #boss-bar { left:calc(8px + var(--sl)); right:calc(166px + var(--sr)); width:auto; transform:none; top:auto; bottom:calc(436px + var(--sb)); padding:4px 8px; }
#hud.touch-ui #boss-gimmick { display:none; }
#hud.touch-ui #dialog { bottom:calc(8px + var(--sb)); }
/* 모바일은 가로 전용(세로는 #rotate-gate 로 막힘). 기준: 844x390, 최소 740x360 + 좌우 노치 44px 안전 영역 */
@media (orientation:landscape) {
  #hud.touch-ui #stick { left:calc(14px + var(--sl)); bottom:calc(12px + var(--sb)); width:104px; height:104px; }
  #hud.touch-ui #knob { width:40px; height:40px; left:32px; top:32px; }
  #hud.touch-ui #touch-atk { right:calc(14px + var(--sr)); bottom:calc(12px + var(--sb)); width:80px; height:80px; }
  #hud.touch-ui #touch-dodge { right:calc(104px + var(--sr)); bottom:calc(12px + var(--sb)); width:58px; height:58px; }
  #hud.touch-ui #skillbar { right:calc(172px + var(--sr)); bottom:calc(12px + var(--sb)); grid-template-columns:repeat(4, 58px); gap:6px; }
  #hud.touch-ui .chain-btn { width:58px; height:50px; }
  #hud.touch-ui .chain-btn .nm { top:14px; font-size:10px; max-height:23px; }
  #hud.touch-ui .chain-btn .pips { bottom:14px; }
  #hud.touch-ui #gauge-wrap { right:calc(172px + var(--sr)); bottom:calc(68px + var(--sb)); width:250px; }
  #hud.touch-ui #gauge { width:120px; margin:0 auto; }
  /* 왼쪽: 내 정보(컴팩트) → 대상 → 채팅 → 조이스틱 */
  #hud.touch-ui #top-left { left:calc(8px + var(--sl)); top:calc(4px + var(--st)); gap:4px; }
  #hud.touch-ui .frame { width:180px; padding:3px; gap:5px; }
  #hud.touch-ui .frame img { width:34px; height:34px; }
  #hud.touch-ui .frame .nm { font-size:11px; line-height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #hud.touch-ui .frame .bar { height:10px; margin-top:2px; } #hud.touch-ui .frame .bar span { font-size:9px; line-height:10px; }
  #hud.touch-ui .frame .bar.exp { height:3px; }
  #hud.touch-ui #me-status, #hud.touch-ui #tg-status { min-height:0; margin-top:1px; }
  #hud.touch-ui #party-frames .frame { width:180px; }
  #hud.touch-ui #chat { left:calc(8px + var(--sl)); right:auto; width:250px; bottom:calc(120px + var(--sb)); height:68px; }
  #hud.touch-ui #chat-in, #hud.touch-ui #chat-ch { padding:2px 6px; }
  /* 가운데 위: 메뉴 2줄(4+3) → 보스 바 */
  #hud.touch-ui #menu-btns { left:calc(196px + var(--sl)); right:calc(156px + var(--sr)); top:calc(4px + var(--st)); bottom:auto; flex-wrap:wrap; gap:4px; }
  #hud.touch-ui #menu-btns button { flex:1 0 calc(25% - 3px); min-width:44px; min-height:44px; font-size:11px; }
  #hud.touch-ui #boss-bar { left:calc(196px + var(--sl)); right:calc(156px + var(--sr)); top:calc(100px + var(--st)); bottom:auto; }
  /* 오른쪽 위: 지도·목표 */
  #hud.touch-ui #top-right { right:calc(8px + var(--sr)); top:calc(4px + var(--st)); width:140px; }
  #hud.touch-ui #zone-name { font-size:13px; line-height:18px; }
  #hud.touch-ui #minimap { width:120px; height:82px; }
  #hud.touch-ui #quest-legend { font-size:9px; padding:2px 4px; }
  #hud.touch-ui #quest-destination { width:140px; max-height:28px; font-size:9px; padding:3px 5px; }
  #hud.touch-ui #online { display:none; }
  #hud.touch-ui #quest-tracker { right:calc(8px + var(--sr)); top:calc(178px + var(--st)); width:140px; max-height:44px; font-size:9px; }
}
#hud.touch-ui #touch button, #hud.touch-ui #stick { pointer-events:auto; }
#hud.touch-ui #chat-in, #hud.touch-ui #chat-ch { font-size:16px; padding:4px 6px; }
/* JS가 터치 모드로 판정한 경우(하이브리드·에뮬레이션 포함)에도 키보드 안내는 숨긴다. #action-help 는 #hud 의 자식 */
#hud.touch-ui #action-help { display:none; }
/* 모바일 기술 창: 연계 목록 전체가 창 안에서 스크롤 */
#hud.touch-ui #win { max-height:calc(100% - var(--st) - var(--sb) - 16px); max-width:calc(100% - var(--sl) - var(--sr) - 12px); }
#hud.touch-ui #win-body { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }

/* ------------------------------------------------------------ 가로 전용 게이트 (#app 밖, 닫기·건너뛰기 없음) */
#rotate-gate { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px)); background:#05040a; color:var(--fg); text-align:center; outline:none; }
#rotate-gate h2 { margin:0; font-family:Hahmlet, serif; font-size:22px; color:#f6e2b8; }
#rotate-gate p { margin:0; max-width:320px; font-size:14px; line-height:1.6; color:#d0c0a0; }
#rotate-gate #rotate-status { min-height:1.6em; color:#ffd080; font-size:13px; }
#rotate-gate button { min-height:48px; min-width:160px; font-size:16px; background:#3a2a10; border-color:var(--gold); }
#rotate-gate button[hidden] { display:none; }
.rotate-phone { width:56px; height:92px; border:3px solid var(--gold); border-radius:10px; position:relative; animation:rotatePhone 2.4s ease-in-out infinite; }
.rotate-phone i { position:absolute; left:50%; bottom:6px; width:12px; height:3px; margin-left:-6px; border-radius:2px; background:var(--gold); }
@keyframes rotatePhone { 0%, 25% { transform:rotate(0deg); } 55%, 85% { transform:rotate(-90deg); } 100% { transform:rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation:none; transform:rotate(-90deg); } }
/* 4단계 시전·5단계 조건 판정 중(서버 lock): 잠김이 아님 */
.chain-btn.busy { border-color:#ffd080; }
.chain-btn.busy .stage { color:#ff9a9a; }

/* 서버 확정 성장: 기존 금색/보라 패널 안에서만 배분 */
#growth-badge { color:var(--gold); font-size:11px; line-height:1.5; }
.growth-panel { margin:0 0 16px; padding:12px; background:#16111eee; border:1px solid var(--line); border-radius:6px; }
.growth-panel h3 { color:var(--gold); margin:0 0 8px; font-size:15px; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }
.growth-panel h3 span { color:#f6e2b8; font-size:13px; }
.growth-panel p { color:#bfae8c; font-size:12px; line-height:1.6; margin:6px 0; }
.growth-panel .growth-status { color:#d0c0a0; }
.growth-attributes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.growth-attribute { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:6px; border:1px solid #332845; border-radius:4px; }
.growth-attribute span { margin-left:auto; font-size:12px; }
.growth-panel button { min-width:44px; min-height:44px; touch-action:manipulation; }
.growth-panel button:disabled { opacity:.55; cursor:not-allowed; }
.growth-lane { margin-top:14px; }
.growth-lane h4 { color:#ffd080; margin:0 0 6px; font-size:13px; }
.growth-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.growth-skill { display:flex; flex-direction:column; gap:5px; padding:10px; min-width:0; overflow-wrap:anywhere; background:#211929; border:1px solid #49334f; border-radius:5px; font-size:12px; color:#d0c0a0; }
.growth-skill b { color:#f6e2b8; }
.growth-skill small { color:#d4b470; }
.growth-skill p { flex:1; margin:0; }
.growth-skill button { margin-top:4px; width:100%; }
.growth-skill.locked { border-color:#332845; }
#win-body { min-height:0; overscroll-behavior:contain; }
#hud.touch-ui #menu-btns button { min-height:44px; min-width:44px; }
@media (max-width:600px) { .growth-skill-grid,.growth-attributes { grid-template-columns:minmax(0,1fr); } .equip-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-height:500px) and (orientation:landscape) { #win { max-height:calc(100dvh - 12px); } #win-body { touch-action:pan-y; overflow-y:auto; -webkit-overflow-scrolling:touch; } #win-close { min-width:44px; min-height:44px; } }