@font-face {
  font-family: 'MinePixel';
  src: url('../fonts/MinePixel.woff') format('woff'); /* 발열 5차 (B-20): 웹뷰는 늘 woff 를 씀 → 한 번도 안 읽던 같은 글꼴 TTF(2.3MB)는 앱에서 뺌 */
  font-display: block;
}
/* v2.33: 일본어·중국어 간체/번체는 한자·가나·문장부호를 그 지역 글자꼴로 */
@font-face { font-family: 'MinePixelJP'; src: url('../fonts/MinePixelJP.woff') format('woff'); font-display: block; }
@font-face { font-family: 'MinePixelSC'; src: url('../fonts/MinePixelSC.woff') format('woff'); font-display: block; }
@font-face { font-family: 'MinePixelTC'; src: url('../fonts/MinePixelTC.woff') format('woff'); font-display: block; }

:root {
  --u: calc(min(100vw, 100vh) / 100);
  --btn: #8e8ac0;
  --btn-hl: #c4c0ec;
  --btn-dk: #4e4a78;
  --line: #0c0a14;
  --panel: #221c2a;
  --card: #322a3c;
  --text: #f4ecd8;
  --sub: #b4a8b8;
  --gold: #f7c83a;
  --green: #5ec04a;
  --red: #e05a4a;
  --pink: #ff7ac0;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; color: var(--text); overflow: hidden;
  font-family: 'MinePixel', 'Noto Sans KR', sans-serif;
  font-size: clamp(14px, calc(var(--u) * 3.9), 22px);
  -webkit-user-select: none; user-select: none; -webkit-font-smoothing: none;
  touch-action: none; overscroll-behavior: none;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; background: #000; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#hqfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* v2.89 고화질 글자 층 (떠오르는 숫자·콤보): 게임 캔버스 바로 위 · 터치는 아래로 */

.shadow-t { text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000; }

/* ───── 도트 버튼 ───── */
.sq {
  position: relative; width: calc(var(--u) * 11); height: calc(var(--u) * 11); min-width: 40px; min-height: 40px; padding: 0;
  background: var(--btn); border: 2px solid var(--line);
  box-shadow: inset 2px 2px 0 var(--btn-hl), inset -2px -2px 0 var(--btn-dk);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
}
.sq img { width: 60%; height: 60%; }
.sq:active { transform: translateY(2px); }
.sq.sm { width: calc(var(--u) * 9); height: calc(var(--u) * 9); min-width: 34px; min-height: 34px; }
.sq i { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.sq small { font-size: 11px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 #000; margin-top: -2px; }
.sq.toggle img { width: 50%; height: 50%; }
.sq.toggle { background: #3a3448; box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; }
.sq.toggle.on { background: #3a7a3a; box-shadow: inset 2px 2px 0 #7ad06a, inset -2px -2px 0 #1e4a1e; }
.sq.empty { opacity: 0.45; }
.dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; background: var(--red); border: 2px solid var(--line); }

/* ───── 왼쪽 HUD ───── */
#hudL {
  position: absolute; left: calc(6px + var(--safe-l)); bottom: calc(6px + var(--safe-b));
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); pointer-events: none;
}
#hudL > * { pointer-events: auto; }
.tlv { color: #6ae05a; font-size: 1em; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000; }
.tlv em { font-style: normal; color: #9af08a; }
/* v2.80.4 Total Lv가 오르면 글자 바로 옆에 떠오르는 '+N' (캔 만큼 레벨이 오르는 게 보이게) — 오른손: 'Total Lv.' 왼쪽 · 왼손: (?) 오른쪽 */
.tlv .tlv-gw { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: top; }
html.hand-l .tlv .gw-l, html:not(.hand-l) .tlv .gw-r { display: none; }
.tlv .tlv-gain { position: absolute; top: 0; color: #c8ff9a; font-size: 0.95em; font-weight: bold; white-space: nowrap; pointer-events: none; opacity: 0; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000; }
.tlv .gw-l .tlv-gain { right: 0.4em; }
.tlv .gw-r .tlv-gain { left: 0.4em; }
.tlv .tlv-gain.pop { animation: tlvGain 1.2s ease-out forwards; }
@keyframes tlvGain { 0% { opacity: 0; transform: translateY(8px) scale(0.85); } 14% { opacity: 1; transform: translateY(0) scale(1.1); } 30% { transform: translateY(-2px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.tlv.awk { color: #ffd23a; animation: tlvAwk 2.4s ease-in-out infinite; }
@keyframes tlvAwk { 50% { color: #ffb0ff; } }
.awklv { color: #ffd23a; font-size: 0.85em; }
.upb { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; text-align: left; }
.upb .pic {
  width: calc(var(--u) * 8); height: calc(var(--u) * 8); min-width: 30px; min-height: 30px;
  background: var(--btn); border: 2px solid var(--line); box-shadow: inset 2px 2px 0 var(--btn-hl), inset -2px -2px 0 var(--btn-dk);
  display: grid; place-items: center;
}
.upb .pic img { width: 64%; height: 64%; }
.upb:active .pic { transform: translateY(2px); }
.upb.no .pic { filter: saturate(0.3) brightness(0.8); }
.uinfo { display: flex; flex-direction: column; line-height: 1.15; font-size: 0.92em; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000; }
.ulv { color: #fff; }
.ulv em { font-style: normal; color: #9af08a; }
.ustat { color: #bfe8ff; font-size: 0.75em; line-height: 1.1; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
.ucost { display: flex; align-items: center; gap: 3px; color: #fff3c0; }
.ucost i { font-style: normal; }
.ucost img { width: 1em; height: 1em; }
.upb.no .ucost { color: #ff9a8a; }
.money { display: flex; align-items: center; gap: 5px; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000; }
.money img { width: 1.2em; height: 1.2em; }
.money b { font-weight: normal; color: #fff; }

/* ───── 오른쪽 HUD ───── */
#hudTL { position: absolute; top: calc(6px + var(--safe-t)); left: calc(6px + var(--safe-l)); display: flex; gap: 6px; }
#hudTR { position: absolute; top: calc(6px + var(--safe-t)); right: calc(6px + var(--safe-r)); display: flex; gap: 6px; }
#hudBR { position: absolute; bottom: calc(6px + var(--safe-b)); right: calc(6px + var(--safe-r)); display: flex; gap: 6px; }
.sq.big { width: calc(var(--u) * 13); height: calc(var(--u) * 13); background: #3a3448; box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; }
.sq.big i { font-size: 13px; }
.autorow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-self: flex-start; }
.autorow .autoup { justify-content: flex-start; white-space: nowrap; }
.hprow { display: flex; align-items: center; gap: 4px; }
.hpall { flex: none; font-size: 0.72em; padding: 2px 4px; color: #fff; background: #2e6a2e; border: 2px solid var(--line); box-shadow: inset 2px 2px 0 #6ac85a, inset -2px -2px 0 #1a3a1a; }
.hpall.no { background: #3a3448; box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; color: #aaa; }
.hpall:active { transform: translateY(1px); }
.autoup { display: flex; align-items: center; gap: 3px; padding: 1px 5px 1px 2px; font-size: 0.78em; background: #3a3448; border: 2px solid var(--line); box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; align-self: flex-start; }
.autoup img { width: 1.3em; height: 1.3em; }
.autoup i { font-style: normal; color: #ff8a7a; }
.autoup.on { background: #2e6a2e; box-shadow: inset 2px 2px 0 #6ac85a, inset -2px -2px 0 #1a3a1a; }
.autoup.on i { color: #b0ff9a; }
.upbox { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); padding: 3px; background: rgba(40, 36, 60, 0.45); }

#buffs { position: absolute; top: calc(max(var(--u) * 11, 40px) + 14px + var(--safe-t)); left: calc(6px + var(--safe-l)); display: flex; gap: 4px; }
.buff { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 2px; background: rgba(0, 0, 0, 0.6); border: 2px solid var(--line); font-size: 12px; }
.buff img { width: 20px; height: 20px; }

#toasts { position: absolute; left: 22%; right: 22%; top: calc(6px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px;
  background: rgba(40, 36, 44, 0.9); border: 2px solid #0c0a14; box-shadow: inset 0 0 0 1px #5a5460;
  animation: tin 0.2s steps(3); line-height: 1.3; text-align: center;
}
.toast img { width: 1.6em; height: 1.6em; flex: none; }
.toast.gold { box-shadow: inset 0 0 0 2px var(--gold); color: #fff3c0; }
.toast.pink { box-shadow: inset 0 0 0 2px var(--pink); }
.toast.red { box-shadow: inset 0 0 0 2px var(--red); }
.toast.green { box-shadow: inset 0 0 0 2px #9aff3a; } /* v2.99.1 이계 각성 */
.toast.out { opacity: 0; transition: opacity 0.3s steps(3); }
/* v2.49 등급 알림: 단계가 높을수록 화려하게 */
.toast .gtag-t { font-style: normal; display: inline-block; padding: 0 5px; margin-right: 4px; color: #1a1020; background: var(--gc); box-shadow: 0 0 0 1px #000; font-weight: bold; }
.toast.ga1 { box-shadow: inset 0 0 0 2px var(--gc); }
.toast.ga2 { box-shadow: inset 0 0 0 2px var(--gc), 0 0 0 2px #000, 0 0 8px var(--gc); background: linear-gradient(180deg, rgba(40, 20, 60, 0.95), rgba(10, 6, 20, 0.95)); }
.toast.ga3 { box-shadow: inset 0 0 0 2px var(--gc), inset 0 0 0 4px var(--gc2), 0 0 12px var(--gc); background: linear-gradient(180deg, #2a1440, #0a0414); animation: ga-pulse 0.8s steps(4) infinite; font-size: 1.05em; }
.toast.ga4 { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--gc), 0 0 18px var(--gc), 0 0 30px var(--gc2); background: linear-gradient(90deg, #3a0020, #200a40, #002a3a, #3a0020); background-size: 300% 100%; animation: ga-flow 1.2s steps(8) infinite, ga-shake 0.3s steps(2) 3; font-size: 1.12em; padding-block: 6px; }
.toast.ga5 { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000, inset 0 0 0 6px var(--gc), 0 0 24px var(--gc), 0 0 48px var(--gc2); background: radial-gradient(circle at 50% 50%, #3a2a00, #0a0004 70%); animation: ga-pulse 0.5s steps(4) infinite, ga-shake 0.25s steps(2) 6; font-size: 1.2em; padding-block: 8px; color: #fff6c0; }
.toast.ga4 .gtag-t, .toast.ga5 .gtag-t { background: linear-gradient(90deg, var(--gc), var(--gc2), var(--gc)); background-size: 200% 100%; animation: ga-flow 0.8s steps(6) infinite; }
.toast.ga3 img, .toast.ga4 img, .toast.ga5 img { filter: drop-shadow(0 0 3px var(--gc)); width: 2em; height: 2em; }
@keyframes ga-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes ga-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes ga-shake { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }
@keyframes tin { from { transform: translateY(-8px); opacity: 0; } }

#hint {
  position: absolute; left: 50%; top: calc(var(--u) * 26); transform: translateX(-50%);
  max-width: 60%; padding: 6px 12px; line-height: 1.4; text-align: center;
  background: #fff4d0; color: #3a2410; border: 3px solid #3a2410; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none; animation: bob 1.2s steps(2) infinite;
}
@keyframes bob { 50% { margin-top: -3px; } }

#banner {
  position: absolute; left: 0; right: 0; top: 60%; text-align: center; line-height: 1.3;
  padding: 10px 0; background: rgba(0, 0, 0, 0.7); border-top: 3px solid #0c0a14; border-bottom: 3px solid #0c0a14;
  pointer-events: none; animation: tin 0.3s steps(3);
}
#banner b { display: block; font-size: 1.8em; font-weight: normal; color: #fff; text-shadow: 2px 2px 0 #000; }
#banner small { color: var(--sub); font-size: 1em; }

/* ───── 마을 ───── */
#homeUI { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: calc(var(--u) * 6); pointer-events: none; }
.hbox {
  pointer-events: auto; min-width: 46%; max-width: 70%; padding: 10px 14px 12px; text-align: center;
  background: rgba(34, 28, 42, 0.92); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px #5a5070, 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.hbox h2 { margin: 0; font-size: 1.5em; font-weight: normal; color: var(--gold); text-shadow: 2px 2px 0 #3a2400; }
.hsub { margin: 4px 0 8px; color: var(--sub); line-height: 1.4; }
#floorBtns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.btn {
  padding: 6px 10px 5px; min-width: 70px;
  background: var(--green); color: #fff; border: 2px solid var(--line);
  box-shadow: inset 0 -3px 0 #2e7a24, inset 0 2px 0 #8ae070;
  line-height: 1.2; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.btn small { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 0.85em; color: #fff8d0; }
.btn small img { width: 1.1em; height: 1.1em; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { background: #5a4a58; box-shadow: inset 0 -3px 0 #3a2e3a, inset 0 2px 0 #6a5a6a; color: #b0a0a8; }
.btn:disabled small { color: #e09080; }
.btn.blue { background: #4a8ae0; box-shadow: inset 0 -3px 0 #2a5aa0, inset 0 2px 0 #8ab8ff; }
.btn.pink { background: #d04a9a; box-shadow: inset 0 -3px 0 #8a2a60, inset 0 2px 0 #ff9ad0; }
.btn.red { background: var(--red); box-shadow: inset 0 -3px 0 #9a2a20, inset 0 2px 0 #ff9a8a; }
.btn.gray { background: #6a5a6a; box-shadow: inset 0 -3px 0 #4a3a4a, inset 0 2px 0 #8a7a8a; }
.btn.big { padding: 9px 16px; font-size: 1.15em; }
.btn.wide { width: 100%; padding: 9px; }

/* ───── 시트 (상점/도감/환생/설정) ───── */
#sheet { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 10; padding: calc(var(--u) * 3); padding-left: max(calc(var(--u) * 3), var(--safe-l)); padding-right: max(calc(var(--u) * 3), var(--safe-r)); }
.sbox { width: min(640px, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px #5a5070; animation: tin 0.15s steps(3); }
.shead { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px; border-bottom: 3px solid var(--line); background: #1a1420; }
.stabs { display: flex; gap: 4px; flex-wrap: wrap; }
.stabs button { padding: 5px 10px; background: #2e2638; border: 2px solid var(--line); color: var(--sub); }
.stabs button.on { background: var(--gold); color: #3a2400; }
.sbody { flex: 1; overflow-y: auto; padding: 8px; line-height: 1.35; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.sec { margin: 6px 2px; color: var(--sub); display: flex; justify-content: space-between; align-items: center; }
.card { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; background: var(--card); border: 2px solid var(--line); box-shadow: inset 0 2px 0 #40364c; }
.card .ic { width: 40px; height: 40px; flex: none; background: #1a1420; border: 2px solid var(--line); display: grid; place-items: center; }
.card .ic img { width: 32px; height: 32px; }
.card .mid { flex: 1; min-width: 0; }
.card .nm { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.card .nm small { color: var(--gold); font-size: 0.9em; }
.card .ds { color: var(--sub); font-size: 0.9em; }
.card .ds em { font-style: normal; color: #9ae07a; }
.card.dim { opacity: 0.55; }
.card.done { box-shadow: inset 0 0 0 2px #7a6a2a; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.cell { background: var(--card); border: 2px solid var(--line); padding: 6px 2px 4px; text-align: center; font-size: 0.85em; line-height: 1.2; min-height: 66px; }
.cell img { width: 32px; height: 32px; display: block; margin: 0 auto 3px; }
.cell.unk { color: #6a6070; }
.cell.unk img { filter: brightness(0) opacity(0.35); }
.box { background: #1a1420; border: 2px solid var(--line); padding: 8px; margin-bottom: 8px; color: var(--sub); line-height: 1.5; }
.box b { color: var(--text); font-weight: normal; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; margin-bottom: 8px; }
.stat { background: #1a1420; border: 2px solid var(--line); padding: 4px 6px; color: var(--sub); font-size: 0.9em; line-height: 1.25; }
.stat b { display: block; color: var(--text); font-weight: normal; }
.tgl { display: flex; align-items: center; justify-content: space-between; padding: 8px; background: var(--card); border: 2px solid var(--line); margin-bottom: 6px; }
.sw { width: 48px; height: 24px; background: #1a1420; border: 2px solid var(--line); position: relative; flex: none; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #6a5a6a; }
.sw.on { background: #2e7a24; }
.sw.on::after { left: 26px; background: var(--green); }
textarea { width: 100%; height: 80px; background: #0e0a12; color: var(--text); border: 2px solid var(--line); font: 12px monospace; padding: 6px; -webkit-user-select: text; user-select: text; }
.gold-t { color: var(--gold); }
.pink-t { color: var(--pink); }
.green-t { color: #9ae07a; }
.red-t { color: #ff8a7a; }

/* ───── 모달 ───── */
#modal { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; z-index: 20; padding: 16px; }
.mbox { width: 100%; max-width: 380px; max-height: 92%; overflow-y: auto; background: var(--panel); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px #5a5070, 4px 4px 0 rgba(0, 0, 0, 0.5); padding: 12px; line-height: 1.5; animation: tin 0.15s steps(3); }
.mbox h3 { margin: 0 0 6px; font-size: 1.3em; font-weight: normal; color: var(--gold); text-align: center; }
#mBody .center { text-align: center; }
#mBody img.big { width: 56px; height: 56px; display: block; margin: 2px auto; }
#mBtns { display: flex; gap: 8px; margin-top: 10px; }
#mBtns .btn { flex: 1; padding: 8px; }

/* ───── 타이틀 ───── */
#title { position: absolute; inset: 0; z-index: 30; background: #0e1230; overflow: hidden; cursor: pointer; text-align: center; }
#tCanvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
#title .t-logo { position: absolute; left: 0; right: 0; top: 11%; display: flex; flex-direction: column; align-items: center; }
#title .t-badge { font-size: 16px; line-height: 16px; color: #ffd98a; background: #1a1230cc; border: 2px solid #5a4478; box-shadow: 0 2px 0 #0a0814; padding: 4px 10px; margin-bottom: 10px; letter-spacing: 1px; }
#title h1 { margin: 0; font-weight: normal; font-size: 64px; line-height: 72px; letter-spacing: 2px; animation: tFloat 3s steps(6) infinite; }
#title h1 span { display: inline-block; }
#title h1 .a { color: #ffffff; text-shadow: 0 4px 0 #6a7aa8, 4px 0 0 #140a20, -4px 0 0 #140a20, 0 -4px 0 #140a20, 0 8px 0 #140a20, 4px 4px 0 #140a20, -4px 4px 0 #140a20, 4px 8px 0 #0a0510; }
#title h1 .b { color: #ffd23a; text-shadow: 0 4px 0 #c07a10, 4px 0 0 #140a20, -4px 0 0 #140a20, 0 -4px 0 #140a20, 0 8px 0 #140a20, 4px 4px 0 #140a20, -4px 4px 0 #140a20, 4px 8px 0 #0a0510; margin-left: 12px; }
#title .t-sub { font-size: 16px; color: #bfe8ff; margin: 18px 0 0; text-shadow: 2px 2px 0 #140a20; }
#title .t-bottom { position: absolute; left: 0; right: 0; bottom: 7%; }
#title .t-tap { display: inline-block; font-size: 16px; color: #fff; background: #140a20f0; border: 2px solid #ffd23a; box-shadow: 0 3px 0 #6a4a10; padding: 8px 16px; margin: 0; animation: blink 1.2s steps(2) infinite; }
#title .t-ver { position: absolute; right: 10px; bottom: -5%; margin: 0; font-size: 16px; color: #8a80a0; text-shadow: 2px 2px 0 #140a20; }
@keyframes tFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 380px), (max-height: 330px) { #title h1 { font-size: 48px; line-height: 56px; } }
@media (orientation: landscape) { #title .t-logo { top: 8%; } }
#title.out { opacity: 0; transition: opacity 0.4s steps(4); pointer-events: none; }

/* 세로 화면에서는 버튼을 조금 작게 */
@media (orientation: portrait) {
  #toasts { left: calc(max(var(--u) * 11, 40px) * 2 + 22px); right: 3%; top: calc(var(--u) * 16); } /* v2.40 왼쪽 HUD 버튼을 가리지 않게 */
  .hbox { max-width: 92%; }
}
#hudTL .sq img { width: 48%; height: 48%; }
#hudTL .sq small { margin-top: 1px; }
.colcnt { display:block; font-size: 0.8em; color: var(--gold); }
.cell .clv { display:block; font-size: 0.8em; color: #9af08a; }
.skin-card .ic { width: 52px; height: 52px; }
.skin-card .ic img { width: 44px; height: 44px; }

#hudBR { flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
#hudBR .sq { background: #3a3448; box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; }
#hudBR .sq img { width: 62%; height: 62%; }
.enh { font-size: 1.1em; color: #7ae0ff; }
.rate { color: #9ae07a; }

body, button { text-rendering: optimizeSpeed; }
.toast { font-size: 1em; }
.card .ds { font-size: 0.95em; line-height: 1.4; }
.mbox { font-size: 1em; }
#mBtns .btn small { display: block; }

/* v1.3: 가이드 · 프리미엄 */
.btn.green { background: #4aa83a; box-shadow: inset 0 -3px 0 #2a6a1e, inset 0 2px 0 #9ae07a; }
.btn.gold { background: #d8a020; color: #2a1a04; text-shadow: none; box-shadow: inset 0 -3px 0 #8a6010, inset 0 2px 0 #ffe27a; min-width: 74px; }
.card.hot { box-shadow: inset 0 0 0 2px #d04a9a; background: linear-gradient(90deg, rgba(208, 74, 154, 0.18), transparent 60%); }
.guide { text-align: center; }
.guide h4 { margin: 4px 0; font-size: 1.2em; font-weight: normal; color: #fff; }
.guide p { margin: 0 0 6px; text-align: left; background: rgba(0, 0, 0, 0.25); padding: 8px 10px; border: 2px solid #0c0a14; min-height: 5.6em; }
.gdots { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.gdots i { width: 9px; height: 9px; background: #4a4058; border: 1px solid #0c0a14; cursor: pointer; }
.gdots i.on { background: var(--gold); }
#mBtns .btn:disabled { opacity: 0.45; }

/* v1.6: 장비 · 던전 */
.moneys { display: flex; gap: 10px; }
.item-card .nm { font-size: 1em; }
.gtag { display: inline-block; padding: 0 4px; margin-right: 4px; border: 1px solid currentColor; font-size: 0.8em; }
.stat-line { display: block; font-size: 0.88em; color: #d8d0e0; }
.stat-line.suf { color: #9ae0ff; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.slot { background: rgba(0,0,0,0.3); border: 2px solid #3a3448; padding: 4px; text-align: center; font-size: 0.82em; min-height: 64px; cursor: pointer; }
.slot img { width: 28px; height: 28px; display: block; margin: 0 auto 2px; image-rendering: pixelated; }
.slot.empty { opacity: 0.5; }

.abil { display: inline-block; background: #3a2a5a; color: #ffe27a; border: 2px solid #0c0a14; padding: 0 4px; margin: 0 2px 2px 0; font-weight: normal; }

/* v1.8.1 가로 화면: 왼손은 조이스틱 → 업그레이드는 오른쪽 아래, 소모품은 오른쪽 위(설정·집 버튼 아래) */
@media (orientation: landscape) {
  #hudL { left: auto; right: calc(6px + var(--safe-r)); align-items: flex-end; }
  #hudL .autoup { align-self: flex-end; }
  #hudL .autorow { align-self: flex-end; direction: rtl; }
  #hudL .autorow .autoup { direction: ltr; }
  #hudL .hprow { flex-direction: row-reverse; }
  #hudL .tlv { text-align: right; }
  #hudL .upb { flex-direction: row-reverse; text-align: right; }
  #hudL .uinfo { align-items: flex-end; }
  #hudL .moneys { justify-content: flex-end; }
  #hudBR { bottom: auto; top: calc(max(var(--u) * 11, 40px) + 14px + var(--safe-t)); max-width: 40%; }
}
.btn.fire { background: #e06a1a; box-shadow: inset 0 -3px 0 #8a3a0a, inset 0 2px 0 #ffc07a; }
.btn.awk { background: #8a2ad0; box-shadow: inset 0 -3px 0 #3a0a6a, inset 0 2px 0 #e0a0ff; color: #fff6c0; }
.btn.dimc { background: linear-gradient(90deg, #1a9ab0, #b02a98); box-shadow: inset 0 -3px 0 #2a0a3a, inset 0 2px 0 #b0fff8; color: #ffffff; } /* v2.81 차원 */
.btn.owc { background: linear-gradient(90deg, #3a9a1a, #6a2ab0); box-shadow: inset 0 -3px 0 #1a0a2a, inset 0 2px 0 #d8ffb0; color: #ffffff; } /* v2.99.1 이계 각성 */
.card.awkd { border-color: #b03aff; box-shadow: 0 0 0 1px #3a0a6a, 0 0 8px rgba(176,58,255,0.35); }
/* 가이드: 글이 길어도 버튼이 항상 보이게 본문만 스크롤 */
.guide p { max-height: 40vh; overflow-y: auto; }
@media (orientation: landscape) {
  .guide img.big { width: 36px !important; height: 36px !important; }
  .mbox:has(.guide) { max-width: 560px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chips .btn { min-width: 0; padding: 4px 8px; }
/* 스킨 진화 */
.card .btns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.evo-stars { color: #ffd23a; letter-spacing: 1px; text-shadow: 1px 1px 0 #3a2400; }
.evo-stars i { color: #4a4058; font-style: normal; text-shadow: none; }
.evo-name { font-size: 0.9em; }
.evo-name.evo1 { color: #c8c0d8; } .evo-name.evo2 { color: #7ae0ff; } .evo-name.evo3 { color: #9aff7a; } .evo-name.evo4 { color: #ffb03a; } .evo-name.evo5 { color: #ff6ad8; }
.skin-card.evo4 { box-shadow: inset 0 0 0 2px #b0701a; }
.skin-card.evo5 { box-shadow: inset 0 0 0 2px #d04ab0, 0 0 0 1px #ffd23a; }
@keyframes hop { 50% { transform: translateY(-6px); } }
@keyframes blink { 50% { opacity: 0; } }
.money.shard b { color: #9ae8ff; }
.money.hsh b { color: #ffe070; }
.money.ash b { color: #d05aff; }
.money.ash em { font-style: normal; font-size: 0.8em; color: #ffd23a; margin-left: 2px; }
.money.ash.on { animation: ashGlow 1.2s ease-in-out infinite; }
/* v3.1 발열 (시안 승인): 각성 · 폭주 파편 칸 반짝임 — 같은 모양 빛(drop-shadow)을 칸 뒤 사본(.glw)에 한 번만 칠해 두고 진하기(opacity)만 바꿈 · 예전엔 빛 번짐을 매 프레임 다시 칠했음 (메인 스레드 · 메모리 정리) */
.money .glw { display: none; }
.money.ash.on:not(.osh):not(.dsh) { animation: none; z-index: 0; } /* 폭주 파편 칸(rsh)도 ash 클래스가 있어 여기 걸림 (아래 .money.rsh.on 보다 셈) */
.money.ash.on:not(.osh):not(.dsh) > .glw { display: inherit; flex-direction: inherit; align-items: inherit; justify-content: inherit; gap: inherit; padding: inherit; position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: opacity; animation: shGlowOp 1.2s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(208, 90, 255, 0.9)); }
.money.rsh.on:not(.osh):not(.dsh) > .glw { filter: drop-shadow(0 0 4px #ff2a2a); }
@keyframes ashGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(208,90,255,0)); } 50% { filter: drop-shadow(0 0 4px rgba(208,90,255,0.9)); } }
/* 확률 정보 표 */
.prob-wrap { font-size: 0.85em; line-height: 1.5; max-height: 60vh; overflow-y: auto; text-align: left; }
.prob-wrap h4 { margin: 10px 0 4px; color: #ffd23a; font-weight: normal; }
table.prob { width: 100%; border-collapse: collapse; margin: 2px 0 4px; }
table.prob th, table.prob td { border: 1px solid #4a3a5a; padding: 2px 6px; text-align: center; }
table.prob th { background: #2a2038; color: #c8c0d8; font-weight: normal; }
.slot.pick-slot { display: flex; align-items: center; gap: 8px; text-align: left; margin-bottom: 6px; min-height: 0; padding: 6px 8px; }
.slot.pick-slot img { margin: 0; width: 32px; height: 32px; }
.slot.pick-slot > div { flex: 1; }

/* 곡괭이 오로라 */
.aurora-t { animation: aurora 3s steps(12) infinite; }
@keyframes aurora { 0% { color: #5affb0; } 25% { color: #5ae0ff; } 50% { color: #8a7aff; } 75% { color: #ff7ad8; } 100% { color: #5affb0; } }
.card.skin-card.passive { box-shadow: inset 0 0 0 2px #bfa0ff; }
.btn.purple { background: #7a4ad0; box-shadow: inset 0 -3px 0 #3a1a7a, inset 0 2px 0 #c0a0ff; }
.lang-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* 아랍어: 글 영역만 오른쪽→왼쪽 (화면 배치는 그대로) */
.rtl .sbody, .rtl .mbox, .rtl .toast, .rtl .banner, .rtl .guide { direction: rtl; }
.sq.snack { background: #6a4a1a; box-shadow: inset 2px 2px 0 #ffd23a, inset -2px -2px 0 #8a5a10; }
.snack-star { position: absolute; left: 2px; top: 0; font-weight: normal; font-size: 12px; color: #ffe070; text-shadow: 1px 1px 0 #000; }
.buff.sp { border-color: #ffd23a; color: #ffe070; }

/* v2.28 레이아웃: 메뉴는 왼쪽 벽 2줄(접기 가능), 업그레이드는 왼쪽 아래(축소) */
#hudTL { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; align-items: start; justify-items: start; }
#hudTL .sq { width: calc(var(--u) * 9); height: calc(var(--u) * 9); min-width: 34px; min-height: 34px; }
#hudTL .sq small { font-size: 10px; }
#hudTL .sq img { width: 46%; height: 46%; }
#hudTL .fold { grid-column: span 2; width: 100%; height: 18px; padding: 0; background: #2a2438; border: 2px solid var(--line); box-shadow: inset 1px 1px 0 #4a4460; color: #d8d0e8; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; }
#hudTL .fold:active { transform: translateY(1px); }
#hudTL.folded { grid-template-columns: auto; }
#hudTL.folded .sq { display: none; }
#hudTL.folded .fold { grid-column: auto; width: 26px; }
#hudTL.folded .dotany { display: block; }
#hudTL .dotany { display: none; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; background: var(--red); border: 2px solid var(--line); }
#hudTL .fold { position: relative; }
#hudL { font-size: 0.84em; gap: calc(var(--u) * 0.9); }
#hudL .upb .pic { width: calc(var(--u) * 7); height: calc(var(--u) * 7); min-width: 28px; min-height: 28px; }
#hudL .upbox { gap: calc(var(--u) * 0.6); padding: 2px; }
#hudL .autoup { font-size: 0.72em; }
#hudL .money img { width: 1.05em; height: 1.05em; }
@media (orientation: portrait) {
  #hudL { font-size: 0.8em; }
}
#buffs { top: calc(6px + var(--safe-t)); left: calc(6px + var(--safe-l) + 2 * max(var(--u) * 9, 34px) + 14px); }
#hudTL.folded ~ #buffs { left: calc(6px + var(--safe-l) + 40px); }

/* ───────── 인트로 만화 ───────── */
#intro { position: fixed; inset: 0; z-index: 9000; background: #0c0a0e; perspective: 1800px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; animation: iIn 0.5s ease-out; }
#intro.out { opacity: 0; transition: opacity 0.55s; pointer-events: none; }
@keyframes iIn { from { opacity: 0; } }
/* 발열 5차 (UI-24 · W-13): 불투명한 덮개가 화면을 다 덮는 동안 그 밑 게임 화면(#app — HUD 반짝임 등)은 칠하지 않음 (덮개 밑이라 보이는 것은 같음)
   · 숨은 도전(#bwc, z 95, 바탕 #07060a)은 켜지는 순간부터 · 컷신(#intro, z 9000)은 들어오는 연출 0.5초가 끝난 뒤(0.6초) · 엔딩 크레딧(#credits.on, z 9001)은 0.9초 연출 뒤(1초)
   · 덮개가 걷히기 시작하면(.out · 닫힘) 같은 순간 다시 보임 · #app 안에 포커스가 있으면 숨기지 않음 (키보드 포커스 그대로) · :has 를 모르는 옛 웹뷰는 예전 그대로 */
html.bwc-on #app:not(:focus-within) { visibility: hidden; }
body:has(> #intro:not(.out)) #app:not(:focus-within) { animation: cvHide 0s 0.6s forwards; }
body:has(> #credits.on:not(.out)) #app:not(:focus-within) { animation: cvHide 0s 1s forwards; }
@keyframes cvHide { to { visibility: hidden; } }
#intro .ipage { position: absolute; inset: 0; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #efe4c8; background-image: radial-gradient(rgba(90,60,30,0.10) 1px, transparent 1.2px), linear-gradient(90deg, rgba(0,0,0,0.18), transparent 3%, transparent 97%, rgba(0,0,0,0.12));
  background-size: 5px 5px, 100% 100%; display: grid; gap: 9px; transform-origin: 0% 50%; backface-visibility: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.6); will-change: transform; }
#intro .ipage.full { grid-template: 1fr / 1fr; }
#intro .ipage.row2 { grid-template: 1fr / 1fr 1fr; }
#intro .ipage.row3 { grid-template: 1fr / 1fr 1fr 1fr; }
#intro .ipage.hashead { grid-template-rows: auto 1fr; }
#intro .ipage.hashead .ihead { grid-column: 1 / -1; }
@media (orientation: portrait) {
  #intro .ipage.row2 { grid-template: 1fr 1fr / 1fr; }
  #intro .ipage.row3 { grid-template: 1fr 1fr 1fr / 1fr; }
  #intro .ipage.row3.hashead { grid-template: auto 1fr 1fr 1fr / 1fr; }
}
#intro .ipage.turn { animation: iTurn 0.7s cubic-bezier(0.55, 0.05, 0.6, 0.95) forwards; z-index: 5 !important; }
#intro .ipage.turn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5)); animation: iShade 0.7s forwards; pointer-events: none; }
@keyframes iTurn { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(-112%) rotate(-7deg); } }
@keyframes iShade { from { opacity: 0; } to { opacity: 1; } }
#intro .ipanel { position: relative; overflow: hidden; background: #000; border: 3px solid #120c10; box-shadow: 3px 3px 0 rgba(18,12,16,0.85); transform: rotate(var(--tilt)) scale(0.94); opacity: 0; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); min-height: 0; min-width: 0; }
#intro .ipage.full .ipanel { --tilt: 0deg !important; }
#intro .ipanel.show { opacity: 1; transform: rotate(var(--tilt)) scale(1); }
#intro .ipanel canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
#intro .icap, #intro .ihead { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 12px); background: #fff3b0; color: #1a1014; border: 2px solid #120c10; box-shadow: 2px 2px 0 #120c10; padding: 4px 8px; font-size: clamp(11px, 2.3vmin + 4px, 19px); line-height: 1.35; opacity: 0; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
#intro .ihead { position: relative; left: 0; top: 0; justify-self: start; font-size: clamp(13px, 3vmin + 4px, 24px); background: #1a1014; color: #fff3b0; box-shadow: 3px 3px 0 #8a2a2a; }
#intro .icap.on, #intro .ihead.on, #intro .ibub.on { opacity: 1; }
#intro .icap.huge { left: 50%; top: 16%; transform: translateX(-50%); background: none; border: none; box-shadow: none; color: #fff3b0; font-size: clamp(34px, 13vmin, 96px); letter-spacing: 0.08em; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 0 0 18px rgba(255,200,80,0.6); }
#intro .ibub { position: absolute; transform: translate(-50%, -100%); background: #fff; color: #120c10; border: 2px solid #120c10; border-radius: 14px; padding: 5px 10px; font-size: clamp(11px, 2.2vmin + 4px, 18px); line-height: 1.35; opacity: 0; white-space: pre-line; max-width: 46%; box-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
#intro .ibub::after { content: ''; position: absolute; left: 30%; bottom: -10px; border: 8px solid transparent; border-top-color: #120c10; border-bottom: 0; }
#intro .ibub::before { content: ''; position: absolute; left: calc(30% + 2px); bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; z-index: 1; }
#intro .ibub.r::after { left: auto; right: 30%; } #intro .ibub.r::before { left: auto; right: calc(30% + 2px); }
#intro .ibub.at { transform: translate(calc(-30% - 8px), calc(-100% - 10px)); } /* v2.81.1 꼬리 끝 = 말하는 사람 머리 위 (글자가 늘어도 꼬리 자리는 그대로) */
#intro .ibub.c { transform: translate(-50%, -50%); max-width: 80%; text-align: center; }
#intro .ibub.c::after, #intro .ibub.c::before { display: none; }
#intro .ibub.dark { background: #0a0508; color: #ff5a4a; border: 3px solid #ff3a2a; border-radius: 4px; box-shadow: 0 0 0 2px #0a0508, 0 0 22px rgba(255,40,20,0.65); text-shadow: 0 0 8px rgba(255,60,30,0.8); font-size: clamp(13px, 3vmin + 4px, 26px); clip-path: polygon(0 8%, 4% 0, 30% 5%, 55% 0, 80% 4%, 100% 0, 97% 30%, 100% 60%, 96% 100%, 70% 94%, 45% 100%, 20% 95%, 0 100%, 3% 60%); padding: 12px 20px; }
#intro .ibub.dark.big { font-size: clamp(14px, 3.6vmin + 4px, 30px); }
#intro .ibub.dark.on { animation: iShake 0.35s 2; }
@keyframes iShake { 0%, 100% { margin-left: 0; } 25% { margin-left: -3px; } 75% { margin-left: 3px; } }
/* v2.49 이계의 신: 핏빛 글자 · 독한 초록 테 · 찢어진 가장자리 */
#intro .ibub.red { background: #030002; color: #ff0033; border: 3px solid #ff0033; border-radius: 2px; box-shadow: inset 0 0 0 2px #0a0005, inset 0 0 14px rgba(255,210,58,0.28); text-shadow: 0 0 6px rgba(255,0,51,0.95), 1px 1px 0 #3a0010, -1px 0 0 rgba(255,210,58,0.5); font-size: clamp(13px, 3vmin + 4px, 26px); font-weight: bold; letter-spacing: 0.02em; clip-path: polygon(0 12%, 6% 0, 18% 6%, 33% 0, 47% 7%, 62% 0, 78% 5%, 92% 0, 100% 10%, 97% 34%, 100% 58%, 96% 82%, 100% 100%, 84% 94%, 68% 100%, 52% 93%, 36% 100%, 20% 94%, 5% 100%, 2% 76%, 0 50%, 3% 28%); padding: 14px 22px; }
#intro .ibub.red.big { font-size: clamp(14px, 3.6vmin + 4px, 30px); }
#intro .ibub.red.on { animation: iShake 0.3s 3, iRedPulse 1.4s 0.9s infinite; }
#intro .ibub.red::after, #intro .ibub.red::before { display: none; }
@keyframes iRedPulse { 0%, 100% { color: #ff0033; } 50% { color: #ff4a6a; } }
#intro .istamp.red { color: #ff0033; text-shadow: 3px 3px 0 #2a0008, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 0 18px rgba(255,0,51,0.9), 0 0 34px rgba(255,170,40,0.5); }
#intro .istamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg) scale(2.2); opacity: 0; color: #ffd23a; font-size: clamp(22px, 8vmin, 60px); letter-spacing: 0.06em; text-shadow: 3px 3px 0 #5a2a00, -2px -2px 0 #1a0a00, 2px -2px 0 #1a0a00, -2px 2px 0 #1a0a00, 0 0 20px rgba(255,210,58,0.7); white-space: nowrap; pointer-events: none; }
#intro .ipanel.show .istamp { animation: iStamp 0.5s 1.6s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
@keyframes iStamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }
/* v2.81 다차원: 무지갯빛 도장 · 붉은 광산의 신 말풍선(불티 테) · 차원의 신 말풍선 */
#intro .istamp.dim { color: #ffffff; text-shadow: 3px 3px 0 #1a1050, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 0 14px rgba(90,255,255,0.9), 0 0 28px rgba(255,90,216,0.7); }
#intro .ipanel.show .istamp.dim { animation: iStamp 0.5s 1.6s cubic-bezier(0.3, 1.6, 0.5, 1) forwards, iPrism 2.4s 2.1s linear infinite; }
@keyframes iPrism { 0% { color: #ffffff; } 20% { color: #9afff0; } 40% { color: #ffd8ff; } 60% { color: #fff3b0; } 80% { color: #c8d8ff; } 100% { color: #ffffff; } }
#intro .ibub.ember { background: #1a0605; color: #ffe0d0; border: 2px solid #ff5a2a; box-shadow: 0 0 0 2px #1a0605, 0 0 18px rgba(255,70,20,0.6); }
#intro .ibub.ember::after { border-top-color: #ff5a2a; } #intro .ibub.ember::before { border-top-color: #1a0605; }
#intro .ibub.dimc { background: #07061e; color: #e8e4ff; border: 2px solid #8a7aff; box-shadow: 0 0 0 2px #07061e, 0 0 16px rgba(90,255,255,0.55), 0 0 26px rgba(255,90,216,0.35); }
#intro .ibub.dimc::after { border-top-color: #8a7aff; } #intro .ibub.dimc::before { border-top-color: #07061e; }
#intro .iskip { position: absolute; z-index: 20; bottom: max(8px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); background: rgba(18,12,16,0.8); color: #fff3b0; border: 2px solid #fff3b0; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; opacity: 0.85; }
#intro .ihint { position: absolute; z-index: 20; right: max(12px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); color: #fff3b0; background: rgba(18,12,16,0.75); padding: 2px 8px; border-radius: 4px; font-size: 12px; animation: iBlink 1.2s infinite; pointer-events: none; }
@keyframes iBlink { 50% { opacity: 0.3; } }
#intro.rtl .icap, #intro.rtl .ihead, #intro.rtl .ibub { direction: rtl; }

/* 설정 슬라이더 */
.rng { width: 100%; margin-top: 8px; accent-color: #ffd23a; height: 22px; }

/* ── 다국어: 긴 단어(독일어·러시아어 등)가 칸을 넘지 않게 ── */
html:not([lang="ko"]) .sbody, html:not([lang="ko"]) .mbox, #toasts, #banner, #hint { hyphens: auto; -webkit-hyphens: auto; }
.card .mid, .cell, .stat, .box, #mBody { overflow-wrap: anywhere; }
.btn { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.btn small { flex-wrap: wrap; }
#mBtns.wrap { flex-wrap: wrap; }
#mBtns.wrap .btn { flex: 1 1 auto; }
#mBtns.wrap .btn.full { flex: 1 1 100%; } /* v2.73.6 한 줄 전체 버튼 */
#hudTL .sq small { white-space: nowrap; }
/* 아랍어: 문단마다 방향 자동 (숫자·영문이 섞여도 순서 유지) */
.rtl .card .mid, .rtl .box, .rtl #mBody, .rtl .toast, .rtl .cell, .rtl .stat { unicode-bidi: plaintext; }
#mBtns.probe .btn, #mBtns.probe .btn small { min-width: auto; overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; flex-wrap: nowrap; white-space: nowrap; }
.rtl #app div, .rtl #app span, .rtl #app b, .rtl #app small, .rtl #app button, .rtl #app i, .rtl #app em, .rtl #app h3, .rtl #app p { unicode-bidi: plaintext; }
/* 긴 번역으로 배너가 여러 줄이 되면 아래(층 표시)를 덮지 않게 위로 늘어나도록 */
#banner { transform: translateY(min(0px, calc(5.6em - 100%))); }
/* 인트로 큰 글자: 가운데 정렬을 화면 전체 폭 기준으로 (반 폭에서 줄바꿈되던 문제) */
#intro .icap.huge { left: 6px; right: 6px; transform: none; max-width: none; text-align: center; }

/* ── 손잡이 설정 (v2.33) ── */
/* 세로 화면 · 오른손: 업그레이드 패널을 오른쪽 아래, 소모품을 왼쪽 아래로 */
@media (orientation: portrait) {
  html.hand-r #hudL { left: auto; right: calc(6px + var(--safe-r)); align-items: flex-end; }
  html.hand-r #hudL .autoup { align-self: flex-end; }
  html.hand-r #hudL .autorow { align-self: flex-end; direction: rtl; } /* v2.71.5 세로: 자동 강화·난이도 버튼도 오른쪽 끝에 (패널이 넓을 때 가운데로 밀리던 문제) */
  html.hand-r #hudL .autorow .autoup { direction: ltr; }
  html.hand-r #hudL .tlv { text-align: right; }
  html.hand-r #hudL .upb { flex-direction: row-reverse; text-align: right; }
  html.hand-r #hudL .uinfo { align-items: flex-end; }
  html.hand-r #hudL .moneys { justify-content: flex-end; }
  html.hand-r #hudBR { right: auto; left: calc(6px + var(--safe-l)); justify-content: flex-start; }
}
/* 가로 화면 · 왼손: 업그레이드는 왼쪽 아래, 메뉴는 오른쪽 위, 설정·집·소모품은 왼쪽 위 (조이스틱은 오른손) */
@media (orientation: landscape) {
  html.hand-l #hudL { right: auto; left: calc(6px + var(--safe-l)); align-items: flex-start; }
  html.hand-l #hudL .autoup { align-self: flex-start; }
  html.hand-l #hudL .autorow { align-self: flex-start; direction: ltr; } /* v2.71.5 가로·왼손: 버튼 줄도 왼쪽 끝에 */
  html.hand-l #hudL .tlv { text-align: left; }
  html.hand-l #hudL .upb { flex-direction: row; text-align: left; }
  html.hand-l #hudL .uinfo { align-items: flex-start; }
  html.hand-l #hudL .moneys { justify-content: flex-start; }
  html.hand-l #hudTL { left: auto; right: calc(6px + var(--safe-r)); justify-items: end; }
  html.hand-l #hudTR { right: auto; left: calc(6px + var(--safe-l)); }
  html.hand-l #hudBR { right: auto; left: calc(6px + var(--safe-l)); justify-content: flex-start; }
  html.hand-l #buffs { left: auto; right: calc(6px + var(--safe-r) + 2 * max(var(--u) * 9, 34px) + 14px); }
  html.hand-l #hudTL.folded ~ #buffs { left: auto; right: calc(6px + var(--safe-r) + 40px); }
}

/* ── 언어별 글꼴 (v2.33) ── */
html.f-ja, html.f-ja body, html.f-ja button { font-family: 'MinePixelJP', 'MinePixel', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif; }
html.f-zh, html.f-zh body, html.f-zh button { font-family: 'MinePixelSC', 'MinePixel', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif; }
html.f-zt, html.f-zt body, html.f-zt button { font-family: 'MinePixelTC', 'MinePixel', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif; }
/* 태국어·아랍어·힌디어: 도트로 만들 수 없는 글자라 기기의 Noto 글꼴로, 조금 크게 + 줄 간격 넉넉히 (위아래 부호가 잘리지 않게) */
html.f-th body, html.f-th button { font-family: 'MinePixel', 'Noto Sans Thai UI', 'Noto Sans Thai', 'Sarabun', sans-serif; }
html.f-ar body, html.f-ar button { font-family: 'MinePixel', 'Noto Sans Arabic UI', 'Noto Naskh Arabic UI', 'Noto Sans Arabic', sans-serif; }
html.f-hi body, html.f-hi button { font-family: 'MinePixel', 'Noto Sans Devanagari UI', 'Noto Sans Devanagari', 'Poppins', sans-serif; }
html.f-th body, html.f-ar body, html.f-hi body { font-size: clamp(15px, calc(var(--u) * 4.2), 23px); }
html.f-th :is(.uinfo, .ustat, .card .ds, .card .nm, .box, .btn, .toast, #mBody, .stat, .cell, .tgl, #banner, .sq small),
html.f-hi :is(.uinfo, .ustat, .card .ds, .card .nm, .box, .btn, .toast, #mBody, .stat, .cell, .tgl, #banner, .sq small),
html.f-ar :is(.uinfo, .ustat, .card .ds, .card .nm, .box, .btn, .toast, #mBody, .stat, .cell, .tgl, #banner, .sq small) { line-height: 1.5; }
/* 선명한 글꼴(설정): 도트 대신 기기 기본 글꼴 — 작은 화면에서 읽기 편함. lang 속성에 맞춰 한자 모양도 지역별로 */
html.f-smooth, html.f-smooth body, html.f-smooth button { font-family: 'Noto Sans', 'Roboto', system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; }
html.f-smooth.f-ko body { font-family: 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif !important; }
/* v2.34 폭주 난이도 버튼 */
.btn.ramp { background: #c01a1a; box-shadow: inset 0 -3px 0 #5a0808, inset 0 2px 0 #ff8a7a, 0 0 6px rgba(255, 40, 40, 0.5); color: #fff0e0; }
/* v2.36 폭주의 파편 */
.money.rsh b { color: #ff6a5a; }
.money.rsh.on { animation: rshGlow 1.2s ease-in-out infinite; }
@keyframes rshGlow { 50% { filter: drop-shadow(0 0 4px #ff2a2a); } }
/* v2.36: 창이 화면보다 길면 본문만 스크롤, 버튼 줄은 항상 보이게 · 가로 화면에선 창을 넓게 */
.mbox { display: flex; flex-direction: column; }
.mbox > h3, #mBtns { flex: none; }
#mBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (orientation: landscape) { .mbox { max-width: 560px; max-height: 94%; } }
.stat-line.suf.hero { color: #d0a0ff; }
.stat-line.suf.top { color: #ffb03a; text-shadow: 0 0 4px rgba(255, 176, 58, 0.5); }
/* v2.39 장비 강화·개조 창 */
.fg-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--gc); background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)); box-shadow: 0 0 12px -2px var(--gc), inset 0 0 18px -8px var(--gc); }
.fg-head .fg-ic img { width: 40px; height: 40px; }
.fg-head .fg-t { flex: 1; min-width: 0; line-height: 1.35; }
.fg-sub { font-size: 0.78em; color: var(--sub); }
.fg-e { font-size: 1.6em; color: #ffe070; text-shadow: 0 0 8px rgba(255, 210, 58, 0.6); }
.fg-pips { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; margin: 6px 0 2px; }
.fg-pips i { height: 6px; background: #221c30; border: 1px solid #3a3050; }
.fg-pips i.on { background: #ffd23a; border-color: #fff0a0; box-shadow: 0 0 4px #ffd23a; }
.fg-pips i.on.hi { background: #ff6a3a; border-color: #ffc0a0; box-shadow: 0 0 5px #ff6a3a; }
.fg-sec { margin: 10px 0 4px; color: #bfa0ff; font-size: 0.86em; letter-spacing: 1px; border-bottom: 1px solid #3a3050; padding-bottom: 2px; }
.fg-sec small { color: var(--sub); letter-spacing: 0; }
.fg-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fg-l { flex: 1 1 60%; min-width: 0; }
.fg-nx { color: #9af08a; font-size: 0.86em; }
.fg-opt { padding: 6px 8px; margin: 4px 0; background: rgba(20, 16, 34, 0.7); border-left: 3px solid #5a5070; }
.fg-opt.hero { border-left-color: #c07aff; } .fg-opt.top { border-left-color: #ffb03a; } .fg-opt.top6 { border-left-color: #ff4a4a; box-shadow: inset 0 0 12px -6px #ff4a4a; }
.fg-rng { display: flex; align-items: center; gap: 6px; font-size: 0.78em; color: var(--sub); margin: 3px 0; }
.fg-rng em { font-style: normal; color: #ffe070; min-width: 3em; text-align: right; }
.fg-capn { font-size: 0.72em; color: var(--sub); text-align: right; margin: -2px 0 2px; } /* v2.92 장비 합계 최대 */
.ptag { display: inline-block; font-size: 0.72em; font-weight: normal; color: #1a1206; background: #ffd23a; border-radius: 3px; padding: 0 4px; margin-right: 4px; vertical-align: 1px; line-height: 1.35; } /* v2.92 개성 칸 */
.fg-pool .ptag { margin: 0 4px 0 0; }
.fg-bar { position: relative; flex: 1; height: 6px; background: linear-gradient(90deg, #3a2a4a, #6a5a8a, #ffd23a); border: 1px solid #1a1424; }
.fg-bar i { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 4px #fff; }
.fg-btns { display: flex; gap: 6px; margin-top: 4px; }
.fg-btns .btn { flex: 1; }
.fg-note { margin-top: 8px; font-size: 0.8em; color: var(--sub); line-height: 1.5; }
.fg-pool { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.fg-pool span { padding: 1px 5px; background: #1a1428; border: 1px solid #3a3050; color: #c8c0e0; }
.fg-pool span.hero { color: #d0a0ff; } .fg-pool span.top { color: #ffb03a; } .fg-pool span.top6 { color: #ff6a6a; }
.fg-enh { margin-top: 10px; padding: 8px 10px; border: 2px solid #6a3a1a; background: linear-gradient(180deg, rgba(90, 40, 10, 0.35), rgba(20, 10, 4, 0.5)); line-height: 1.5; }
.gname.g8, .gtag.g8 { animation: rbText 2s linear infinite; }
@keyframes rbText { 0% { color: #ff7a7a; } 20% { color: #ffd23a; } 40% { color: #6af06a; } 60% { color: #5ae0ff; } 80% { color: #c07aff; } 100% { color: #ff7a7a; } }
.gtag.g6, .gtag.g7, .gtag.g8 { text-shadow: 0 0 6px currentColor; }


.fg-raw{color:var(--sub,#9a9ab0);font-size:10px;margin-left:4px;font-weight:normal}
.fg-hint{display:block;margin-left:0;margin-top:1px} /* v2.92.2 공격 세기 안내는 옵션 이름 아래 줄에 */
/* v2.88 옵션 개조 2칸 제한: 칸 수 표시 · 개조한 칸 */
.fg-ro{display:inline-block;margin-left:6px;white-space:nowrap;font-style:normal;font-size:0.92em;letter-spacing:0;color:#d0b0ff;padding:0 6px;border:1px solid #5a4a7a;background:rgba(40,28,64,.6)}
.fg-ro.full{color:#ffb070;border-color:#7a4a2a}
.fg-rot{display:inline-block;margin-left:5px;padding:0 4px;font-size:10px;color:#e0c8ff;border:1px solid #7a5aaa;background:rgba(90,60,140,.35);vertical-align:1px}
.fg-opt.ro{box-shadow:inset 0 0 0 1px rgba(160,120,255,.35)}

/* v2.39 축복 '시스템' · 스킨 레벨 */
.skl{display:flex;align-items:center;gap:6px;margin:3px 0 2px}
.skl-lv{font-weight:bold;color:var(--c);text-shadow:0 0 6px var(--c);min-width:44px;font-size:12px}
.skl-bar{flex:1;height:7px;background:#0c0a14;border:1px solid #2a2440;position:relative;overflow:hidden}
.skl-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--c),#ffffff);box-shadow:0 0 6px var(--c)}
.skl small{color:var(--sub,#9a9ab0);font-size:10px;min-width:70px;text-align:right}
.bless-box{position:relative;border-color:#fff0b0 !important;background:linear-gradient(135deg,rgba(255,240,176,0.10),rgba(90,255,255,0.06) 50%,rgba(255,90,255,0.08)) !important;box-shadow:0 0 14px rgba(255,240,176,0.25) inset}
.bless-sig{font-family:monospace;letter-spacing:4px;font-size:11px;color:#5affff;text-shadow:0 0 6px #5affff;margin-bottom:4px;animation:blessSig 2.4s ease-in-out infinite}
@keyframes blessSig{0%,100%{opacity:.65}50%{opacity:1;text-shadow:0 0 12px #5affff,0 0 2px #fff}}

/* v2.39 지존 이상 장비 카드: 등급 색 테두리 빛 + 흐르는 광택 */
.item-card.ig{position:relative;border-color:var(--gc) !important;box-shadow:0 0 10px -2px var(--gc),inset 0 0 12px -6px var(--gc);overflow:hidden}
.item-card.ig::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.14),transparent);animation:igShine 3.2s ease-in-out infinite;pointer-events:none}
.item-card.ig5::after{animation-duration:4.5s}
.item-card.ig8{animation:igRb 3s linear infinite}
@keyframes igShine{0%{left:-40%}60%,100%{left:130%}}
@keyframes igRb{0%{box-shadow:0 0 12px -2px #ff5a5a}33%{box-shadow:0 0 12px -2px #5affff}66%{box-shadow:0 0 12px -2px #ffd23a}100%{box-shadow:0 0 12px -2px #ff5a5a}}

/* v2.39 시스템 창: 홀로그램 패널 */
.sys-panel{position:relative;border:1px solid #5affff;background:linear-gradient(180deg,rgba(10,40,60,.55),rgba(6,12,28,.75)),repeating-linear-gradient(0deg,rgba(90,255,255,.05) 0 1px,transparent 1px 3px);box-shadow:0 0 16px rgba(90,255,255,.18),inset 0 0 18px rgba(90,255,255,.08);padding:10px 10px 8px;margin-bottom:8px}
.sys-panel::before,.sys-panel::after{content:'';position:absolute;width:12px;height:12px;border:2px solid #5affff}
.sys-panel::before{left:-2px;top:-2px;border-right:0;border-bottom:0}.sys-panel::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.sys-tag{font-family:monospace;font-size:10px;letter-spacing:3px;color:#5affff;text-shadow:0 0 6px #5affff;margin-bottom:6px}
.sys-lock{text-align:center;color:var(--sub,#9a9ab0);line-height:1.6}
.sys-top{display:flex;gap:10px;align-items:center}
.sys-ring{position:relative;flex:none}
.sys-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.sys-ring circle{fill:none;stroke-width:6}
.sys-ring .bg{stroke:rgba(90,255,255,.12)}
.sys-ring .fg{stroke:var(--c);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--c));transition:stroke-dasharray .4s}
.sys-ic{position:absolute;inset:14px;display:flex;align-items:center;justify-content:center}
.sys-ic img{width:44px;height:44px;image-rendering:pixelated}
.sys-lv{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);background:#06101e;border:1px solid var(--c);color:var(--c);font-size:11px;padding:0 5px;white-space:nowrap;text-shadow:0 0 6px var(--c)}
.sys-info{flex:1;min-width:0}
.sys-name{font-weight:bold;font-size:14px}
.sys-title{font-size:12px;margin:1px 0 4px;text-shadow:0 0 6px currentColor}
.sys-xp{display:flex;align-items:center;gap:6px}
.sys-xp .skl-bar{flex:1;height:8px}
.sys-xp small{font-size:10px;color:var(--sub,#9a9ab0);white-space:nowrap}
.sys-eta{font-size:11px;color:#bfefff;margin-top:3px}
.sys-next{font-size:11px;margin-top:5px;padding:4px 6px;border-left:2px solid #ffd23a;background:rgba(255,210,58,.07)}
.sys-next small{color:var(--sub,#9a9ab0)}
.sys-track{position:relative;height:26px;margin:6px 14px 2px}
.sys-line{position:absolute;left:0;right:0;top:9px;height:4px;background:rgba(90,255,255,.12)}
.sys-line i{position:absolute;left:0;top:0;bottom:0;box-shadow:0 0 6px currentColor}
.sys-node{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:1px}
.sys-node span{display:block;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:2px solid rgba(90,255,255,.35);background:#06101e;font-size:9px;line-height:18px;color:var(--sub,#9a9ab0)}
.sys-node em{display:block;width:64px;margin-left:-32px;font-style:normal;font-size:9px;color:var(--sub,#9a9ab0);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-node.on span{border-color:var(--c);color:#fff;background:var(--c);box-shadow:0 0 8px var(--c)}
.sys-node.on em{color:var(--c)}
.sys-miles{display:grid;gap:3px;margin-bottom:8px}
.sys-mile{font-size:11px;padding:3px 6px;border:1px solid rgba(255,255,255,.06);opacity:.6}
.sys-mile small{display:block;color:var(--sub,#9a9ab0)}
.sys-mile.on{opacity:1;border-color:var(--c);box-shadow:inset 3px 0 0 var(--c)}
.sys-mile b{color:var(--c)}
.sys-sec{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:#5affff;margin:8px 0 4px;letter-spacing:1px}
.sys-sort{display:flex;gap:4px}
.sys-sort button{font:inherit;font-size:10px;padding:2px 6px;background:#0c1424;color:var(--sub,#9a9ab0);border:1px solid #2a3a50}
.sys-sort button.on{color:#06101e;background:#5affff;border-color:#5affff}
.sys-chips{display:flex;flex-wrap:wrap;gap:4px}
.sys-chip{font-size:11px;padding:2px 6px;border:1px solid rgba(90,255,255,.35);background:rgba(90,255,255,.06)}
.sys-chip b{color:#9af08a}
.sys-chip.wind{border-color:#8af0ff}
.sys-note{font-size:11px;color:#fff0b0;margin-top:4px}
.sys-list{display:grid;gap:4px}
.sys-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border:1px solid #2a2440;background:var(--card);box-shadow:inset 3px 0 0 var(--c)}
.sys-row.on{border-color:var(--c);box-shadow:inset 3px 0 0 var(--c),0 0 10px -4px var(--c)}
.sys-row .ic img{width:32px;height:32px;image-rendering:pixelated}
.sys-row .mid{flex:1;min-width:0}
.sys-row .nm{font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sys-row .skl-bar{height:5px;margin:3px 0}
.sys-row small{font-size:10px;color:var(--sub,#9a9ab0)}
.sys-row small b{color:#9af08a}
.sys-row .btns{display:flex;flex-direction:column;gap:3px}
.sys-row .t{font-style:normal;font-size:9px;padding:0 4px;border:1px solid currentColor}
.sys-row .t.on{color:#ffd23a}.sys-row .t.bd{color:#6af06a}.sys-row .t.ps{color:#bfa0ff}.sys-row .t.st{color:#fff6c0;text-shadow:0 0 6px #fff6c0}
.btn.sys-open{margin-top:6px;background:#0a2a3a;border-color:#5affff;color:#5affff;width:100%}

.sklb{position:absolute;left:1px;top:1px;font-style:normal;font-size:8px;line-height:9px;padding:0 2px 2px;color:var(--sc);background:var(--sb);border:1px solid var(--sc);white-space:nowrap;pointer-events:none;text-shadow:0 0 4px var(--sc);box-shadow:0 0 5px -1px var(--sc)}

/* v2.40 대장간 머리: 시스템 창과 같은 모서리 괄호 · 태그 */
.fg-head{position:relative}
.fg-head::before,.fg-head::after{content:'';position:absolute;width:10px;height:10px;border:2px solid #fff;opacity:.8}
.fg-head::before{left:-4px;top:-4px;border-right:0;border-bottom:0}.fg-head::after{right:-4px;bottom:-4px;border-left:0;border-top:0}
.fg-tag{font-family:monospace;font-size:10px;letter-spacing:3px;color:var(--gc);text-shadow:0 0 6px var(--gc);margin:0 0 4px 2px}

.rtl .fg-rng{direction:ltr}
.fg-head{margin:0 4px}

/* v2.40 시각 QA 반영 */
.sys-row .btns{flex:none;width:84px}
.sys-row .btns .btn{font-size:11px;padding:3px 4px;min-height:26px;width:100%}
.sys-sec{flex-wrap:wrap}
.sys-sort button{white-space:nowrap}
.sys-mile{opacity:1;color:#8a90a8;border-style:dashed}
.sys-mile.on{border-style:solid;color:inherit}
.sys-mile:not(.on) b{color:#6a7890}
.skin-card .skl{flex-wrap:wrap}
.skin-card .skl small{min-width:0}
.lang-ko .sys-panel,.lang-ko .sys-row,.lang-ko .sys-miles,.lang-ko .bless-box,.lang-ko .fg-opt,.lang-ko .skl{word-break:keep-all;overflow-wrap:anywhere}
/* v3.0.2 한국어 줄 바꿈은 어디서나 낱말 단위 (선민 10-25 · 추천안) — '세집니/다'처럼 낱말 가운데서 끊기지 않게 · 칸보다 긴 낱말만 끝에서 끊음 */
html.lang-ko body{word-break:keep-all;overflow-wrap:anywhere}
.fg-head::before,.fg-head::after{border-color:var(--gc);opacity:1}
.fg-sec{color:#5affff;letter-spacing:2px;border-bottom-color:rgba(90,255,255,.25)}
.fg-pips i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.item-card.ig::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);mix-blend-mode:screen}
.bless-box.center{text-align:left}
.rtl .sys-mile.on,.rtl .sys-row{box-shadow:inset -3px 0 0 var(--c)}
.rtl .sys-row.on{box-shadow:inset -3px 0 0 var(--c),0 0 10px -4px var(--c)}
@media (max-height:480px){
  .fg-head{padding:4px 6px}
  .fg-head .fg-ic img{width:28px;height:28px}
  .fg-pips{display:none}
  .fg-tag{display:none}
}

#mBody .bless-box{text-align:left}

.stat-line .cmp{font-style:normal;font-size:10px;margin-left:4px;padding:0 3px;border-radius:2px}
.stat-line .cmp.up{color:#06200a;background:#6af06a}
.stat-line .cmp.dn{color:#fff;background:#b03a3a}

.prob-x{overflow-x:auto;max-width:100%}
table.prob th,table.prob td{overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
table.prob small.prob-s{display:block;font-size:.82em;color:#a89cb8;white-space:normal;line-height:1.3} /* v3.0.2 시안 5차: 등급 · 스킨 칸 둘째 줄 (특수능력 크기 · 등급 이름) */
.cut-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px}
.cut-row span{font-size:12px;color:var(--sub,#9a9ab0);margin-right:2px}
.cut-row .btn{flex:1 1 auto}
.cell.hig{box-shadow:inset 0 0 0 1px var(--hg),0 0 6px -2px var(--hg)}
.cell.rbw{animation:igRb 3s linear infinite}
.cell.unk .clv{color:var(--sub,#9a9ab0)}

.rbt{animation:rbText 2s linear infinite;text-shadow:0 0 6px rgba(255,255,255,.5)}

/* v2.40 세부 등급: 고급은 은은한 빛, 고대는 맥동하는 빛 */
.gtag.sub1{box-shadow:0 0 5px -1px currentColor}
.gtag.sub2{box-shadow:0 0 8px currentColor;animation:subPulse 1.6s ease-in-out infinite}
@keyframes subPulse{0%,100%{box-shadow:0 0 4px currentColor}50%{box-shadow:0 0 12px currentColor,0 0 2px #fff}}
.gname.g8.sub2,.gtag.g8.sub2{animation:rbText 2s linear infinite,subPulse 1.6s ease-in-out infinite}
.btn.sys-open{font-size:12px;padding:6px 8px;line-height:1.3}

/* v2.40 작은 화면 QA */
.skin-card .btns{flex:none;width:84px}
.skin-card .btns .btn{width:100%;font-size:12px;padding:5px 4px}
.skin-card{align-items:flex-start}
#intro .ibub{width:max-content}
.lang-ko #intro .ibub,.lang-ko #intro .icap,.lang-ko .fg-head{word-break:keep-all}
#intro .ibub.big{font-size:clamp(13px,2.8vmin + 5px,22px)}
@media (max-height:480px){#mBtns{margin-top:6px}#mBtns .btn{padding:4px 6px}.fg-sub{display:none}}
@media (max-width:340px){#mBtns .btn{font-size:12px;padding:6px 4px}}

.skin-help{margin-bottom:6px}
.skin-help>summary{cursor:pointer;padding:6px 8px;background:var(--card);border:2px solid var(--line);font-size:12px;color:#bfa0ff;list-style:none}
.skin-help>summary::before{content:'▶ ';font-size:10px}
.skin-help[open]>summary::before{content:'▼ '}
.skin-help>summary::-webkit-details-marker{display:none}
/* v2.40 콘텐츠 패키지: 작은 안내 줄 (확인 누르면 사라짐) · NEW 표시 · 탭 점 */
.pk-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 8px; background: #2a2236; border: 2px solid #c9a24a; font-size: 0.85em; color: #ffe8a8; }
.pk-note img { width: 1.3em; height: 1.3em; image-rendering: pixelated; }
.pk-note span { flex: 1; }
.pk-note .btn { padding: 3px 10px; }
.pk-new { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 0.7em; line-height: 1.5; vertical-align: 0.15em; background: var(--red); color: #fff; }
.card.pk-card { border-color: #7a6030; }
.stabs button { position: relative; }
.stabs button.has-dot::after { content: ''; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background: var(--red); border: 2px solid var(--line); }
.pk-stg-row { flex: 0 0 100%; line-height: 1; }
.pk-stage { display: inline-block; margin: 0; padding: 0 4px; font-size: 0.72em; line-height: 1.45; border: 1px solid; background: rgba(0,0,0,0.35); vertical-align: 0.1em; white-space: nowrap; }
.card.pk-card .btn[disabled] { filter: grayscale(1); opacity: 0.55; }
/* v2.40 스킨 통합 스킬 트리 */
.st-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; padding: 6px 8px; background: #0a1420; border: 2px solid #2a4a5a; }
.st-pts { display: flex; flex-direction: column; align-items: center; min-width: 58px; line-height: 1.1; }
.st-pts b { font-size: 1.9em; color: #fff0b0; text-shadow: 0 0 8px rgba(255, 220, 120, 0.6); }
.st-pts small { font-size: 0.72em; color: var(--sub); }
.st-sub { flex: 1; font-size: 0.82em; line-height: 1.35; }
.st-sub small { color: var(--sub); }
.st-btns { display: flex; flex-direction: column; gap: 4px; }
.st-btns .btn { padding: 4px 8px; }
.st-wrap { position: relative; width: 100%; aspect-ratio: 1; max-height: 64vh; overflow: hidden; background: radial-gradient(circle at 50% 50%, #1c1830 0, #0c0a16 70%); border: 2px solid #2e2638; touch-action: pan-x pan-y; }
.st-wrap.zoom { overflow: auto; }
.st-svg { display: block; height: auto; margin: 0 auto; }
.st-wrap.pt .st-svg { width: 100%; height: 100%; }
.st-e { stroke: #3a3448; stroke-width: 4; stroke-linecap: round; }
.st-e.on { stroke: var(--c); stroke-width: 8; }
.st-e.pv { stroke: #ffffff; stroke-dasharray: 10 8; stroke-width: 4; opacity: 0.85; }
.st-n { cursor: pointer; }
.st-n .st-hit { fill: transparent; }
.st-n .st-s { fill: #1a1624; stroke: #4a4258; stroke-width: 4; }
.st-n .st-k2 { fill: none; stroke: #4a4258; stroke-width: 3; stroke-dasharray: 6 5; }
.st-n.av .st-s { stroke: var(--c); stroke-width: 5; animation: stPulse 1.4s ease-in-out infinite; }
.st-n.av .st-k2 { stroke: var(--c); }
.st-n.on .st-s { fill: var(--c); stroke: #ffffff; stroke-width: 4; }
.st-n.on .st-k2 { stroke: var(--c); stroke-dasharray: none; stroke-width: 4; }
.st-n.pv .st-s { stroke: #ffffff; stroke-dasharray: 6 5; stroke-width: 4; }
.st-n.sel .st-s { stroke: #ffffff; stroke-width: 7; }
.st-n .st-glow { fill: var(--c); opacity: 0.22; display: none; }
.st-n.on .st-glow, .st-n.sel .st-glow { display: inline; }
.st-n.sel .st-glow { fill: #ffffff; opacity: 0.18; }
.st-n.start .st-s { fill: #3a3020; stroke: #fff0b0; stroke-width: 5; }
.st-star { fill: #fff0b0; }
.st-t { font: bold 30px sans-serif; paint-order: stroke; stroke: #0c0a16; stroke-width: 6px; }
@keyframes stPulse { 50% { stroke-opacity: 0.35; } }
.st-panel { margin-top: 6px; padding: 7px 9px; background: #14101e; border: 2px solid var(--c, #4a4258); }
.st-panel.empty { color: var(--sub); font-size: 0.85em; --c: #3a3448; }
.st-pn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.st-pn b { color: var(--c); font-size: 1.1em; }
.st-pn i { font-style: normal; font-size: 0.75em; padding: 0 4px; border: 1px solid #4a4258; color: var(--sub); }
.st-pe { margin: 4px 0; font-size: 0.9em; }
.st-pa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-pa small { color: var(--sub); font-size: 0.8em; }
.st-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.st-lg { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 6px; background: #14101e; border: 2px solid #3a3448; color: var(--c); text-align: start; }
.st-lg small { color: var(--sub); font-size: 0.72em; }
.st-lg.on { border-color: var(--c); box-shadow: inset 0 0 8px -2px var(--c); }
.btn.sys-open.st-go { background: #2a2210; border-color: #fff0b0; color: #fff0b0; animation: stPulse2 1.6s ease-in-out infinite; }
@keyframes stPulse2 { 50% { box-shadow: 0 0 10px -2px #fff0b0; } }
.st-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.st-mode button { padding: 6px; background: #1a1624; border: 2px solid #3a3448; color: var(--sub); }
.st-mode button.on { background: #2a2210; border-color: #fff0b0; color: #fff0b0; }
.st-mode button b { display: inline-block; min-width: 1.4em; padding: 0 3px; background: var(--red); color: #fff; font-size: 0.85em; }
.st-r { font: bold 17px sans-serif; fill: #0c0a16; pointer-events: none; }
.st-n.not .st-r { font-size: 20px; }
.st-wrap.pt { aspect-ratio: 350 / 320; max-height: 46vh; }
.st-t.pt { font-size: 17px; stroke-width: 4px; }
.pt-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 4px 6px; background: #14101e; border: 2px solid #3a3448; }
.pt-nav span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.pt-nav span img { width: 22px; height: 22px; image-rendering: pixelated; }
.pt-nav .btn { padding: 2px 8px; }
.pt-nav .t { font-style: normal; font-size: 0.75em; padding: 0 3px; border: 1px solid #fff0b0; color: #fff0b0; }

.st-wrap.big { aspect-ratio: auto; height: min(62vh, 520px); max-height: none; overflow: auto; }
.st-wrap.big .st-svg { width: 400%; height: auto; margin: 0; }
.st-wrap.big .st-e { stroke-width: 6; }
.st-zb { display: flex; gap: 4px; }
.st-zb .btn { flex: 1; min-width: 34px; font-size: 1.1em; }
.st-pn .st-loc { margin-left: auto; padding: 1px 8px; }
.st-t.kn { font-size: 40px; stroke-width: 8px; }
.st-t.pk { font-size: 19px; stroke-width: 5px; }
.st-wrap.pt { aspect-ratio: 1000 / 495; max-height: 48vh; }
.pk-list { display: grid; grid-template-columns: 1fr; gap: 4px; }
.pk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 8px; background: #14101e; border: 2px solid #3a3448; border-left: 5px solid var(--c); color: var(--c); text-align: start; }
.pk-card small { color: var(--txt, #e8e0f0); font-size: 0.78em; line-height: 1.35; }
.pk-card.on { border-color: var(--c); box-shadow: inset 0 0 10px -3px var(--c); }
.st-legend { grid-template-columns: repeat(2, 1fr); }
.st-n.blk { opacity: 0.35; }
.st-n.blk .st-s { stroke-dasharray: 4 4; }
.st-n.awk .st-s { stroke: #ffe890; stroke-width: 6; animation: stAwk 1.6s ease-in-out infinite; }
@keyframes stAwk { 50% { stroke: #c070ff; } }
.awk-t { color: #d98aff; }
.pk-card.awk { box-shadow: inset 0 0 12px -2px #d98aff; border-color: #d98aff; }
.pk-card small.br { color: var(--c); opacity: 0.8; font-size: 0.72em; }

/* v2.49 스킨 탭: 보유 오브를 늘 위에 · 진화 표 */
.orb-sticky { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 10px; margin: -2px 0 6px; background: #1a1024; box-shadow: inset 0 0 0 2px #ff7ad8, 0 3px 0 rgba(0, 0, 0, 0.45); font-size: 1.05em; }
.orb-sticky img { width: 1.3em; height: 1.3em; }
.orb-sticky small { margin-left: auto; color: var(--sub); }
.evo-cur { color: #cfe8ff; }
.evo-tbl { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.evo-tbl td { padding: 2px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.evo-tbl td:first-child { color: var(--sub); }
/* v2.49 이계의 파편 */
.money.osh b { color: #9aff3a; }
.money.osh.on { position: relative; z-index: 0; box-shadow: inset 0 0 0 1px rgba(154, 255, 58, 0.3); } /* v3.0 발열 (사용자 승인 시안): 반짝임 빛은 한 번만 칠해 두고 진하기만 바꿈 — 예전엔 box-shadow 를 매 프레임 다시 칠했음 */
.money.osh.on::before, .money.dsh.on::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: opacity; animation: shGlowOp 1.2s ease-in-out infinite; }
.money.osh.on, .money.dsh.on { animation: none; } /* v3.1 버그: v3.0 에서 이 두 칸의 반짝임을 ::before 로 옮기면서 .money.ash.on 의 보라 반짝임(ashGlow · 매 프레임 칠함)까지 겹쳐 돌던 것 — 예전처럼 제 빛만 */
.money.osh.on::before { box-shadow: inset 0 0 0 2px #9aff3a, 0 0 6px #9aff3a; }
@keyframes shGlowOp { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* v2.81 차원 파편 · 다차원 파편 */
.money.dsh b { color: #5affff; }
.money.dsh.on { position: relative; z-index: 0; }
.money.dsh.on::before { box-shadow: 0 0 8px rgba(90, 255, 255, 0.55); }
.money.msh b { color: #ff9ae8; text-shadow: 0 0 4px rgba(255, 90, 216, 0.6); }
.btn.ow7 { background: #1a3a0a; box-shadow: inset 0 0 0 2px #9aff3a; }
.btn.ow8 { background: #0a2a3a; box-shadow: inset 0 0 0 2px #3affff; }
.btn.ow9 { background: #2a0a3a; box-shadow: inset 0 0 0 2px #b000ff; }
.btn.ow10 { background: #3a0a24; box-shadow: inset 0 0 0 2px #ff3aa0; }
.btn.ow11 { background: #3a0008; box-shadow: inset 0 0 0 2px #ff0033, 0 0 6px #ff0033; }
/* v2.49 곡괭이 진화 트리 */
.pevo-head { display: flex; gap: 8px; align-items: center; }
.pevo-ic { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 0 4px #9aff3a); }
.pevo-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.pevo-col { display: flex; flex-direction: column; gap: 4px; }
.pevo-br { text-align: center; font-weight: bold; color: var(--pc); padding: 3px; box-shadow: inset 0 0 0 2px var(--pc); background: #120a1a; }
.pevo-node { display: flex; flex-direction: column; gap: 2px; padding: 5px; background: #1a1224; box-shadow: inset 0 0 0 1px #3a2a4a; font-size: 0.85em; }
.pevo-node small { color: var(--sub); }
.pevo-node i { font-style: normal; color: #9aff3a; }
.pevo-node.got { box-shadow: inset 0 0 0 2px var(--pc, #9aff3a); background: #1c2a14; }
.pevo-node.can { box-shadow: inset 0 0 0 2px #fff0b0; }
.pevo-node.lock { opacity: 0.55; }
.pevo-final { --pc: #ffffff; text-align: center; background: linear-gradient(90deg, #2a0a10, #1a0a2a, #0a2a14); }

/* v2.50 위쪽 알림을 작게: 기본 글자 0.85em, 파편 합산 알림은 더 작게 */
#toasts .toast { font-size: 0.85em; padding: 2px 8px 2px 4px; max-width: 100%; }
#toasts .toast img { width: 1.35em; height: 1.35em; }
#toasts .toast.mini { font-size: 0.78em; background: rgba(20, 16, 28, 0.72); gap: 4px; }
#toasts .toast.mini img { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
#toasts .toast.ga3, #toasts .toast.ga4, #toasts .toast.ga5 { font-size: 0.95em; }
/* v2.54 장비 탭: 착용 6칸 · 일괄 관리 · 가방 작은 칸 */
.eqrow { display: grid; grid-template-columns: repeat(6, minmax(0, 64px)); justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.eqc { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.72em; color: var(--sub); min-width: 0; }
.eqc small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.itile { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gc) 22%, #1a1420), #120e18 72%); border: 2px solid var(--gc); padding: 2px; color: var(--gc); font: inherit; cursor: pointer; box-shadow: inset 0 0 8px -3px var(--gc); }
.itile img { width: 60%; height: auto; image-rendering: pixelated; }
.itile .ig-g { font-size: 0.72em; line-height: 1; white-space: nowrap; }
.itile .ig-e { position: absolute; top: 1px; right: 3px; font-size: 0.72em; color: #fff; text-shadow: 1px 1px 0 #000; }
.itile .ig-l { position: absolute; top: 0; left: 2px; font-size: 0.62em; }
.itile .ig-up { position: absolute; bottom: 1px; right: 3px; font-size: 0.7em; color: #5aff7a; text-shadow: 1px 1px 0 #000; }
.itile .ig-up.sm { color: #b8e8b0; opacity: 0.85; } /* v2.90.1 착용 장비보다 조금(10% 이하) 센 장비: 분해는 안 되고 자동 장착은 안 함 */
.itile.empty { --gc: #3a3448; opacity: 0.55; cursor: default; color: var(--sub); }
.itile.lk { box-shadow: inset 0 0 0 1px #ffd23a, inset 0 0 8px -3px var(--gc); }
.itile.g5, .itile.g6, .itile.g7 { box-shadow: 0 0 8px -2px var(--gc), inset 0 0 10px -3px var(--gc); }
.itile.rbw { animation: igRb 3s linear infinite; }
.itile:active { transform: scale(0.96); }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; margin-top: 6px; }
.gmgr { background: #17121d; border: 2px solid var(--line); padding: 4px 8px; margin-bottom: 8px; }
.gm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #2c2436; }
.gm-row:last-child { border-bottom: 0; }
.gm-l { display: flex; flex-direction: column; color: var(--text); font-size: 0.92em; min-width: 0; }
.gm-l small { color: var(--sub); font-size: 0.8em; }
.gm-c { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.gm-c .btn { min-width: 0; padding: 3px 7px; font-size: 0.9em; }
.gdet { background: #1a1420; border: 2px solid var(--line); padding: 6px 8px; margin-bottom: 6px; }
.gdet summary { cursor: pointer; color: var(--gold, #ffd23a); list-style: none; }
.gdet summary::before { content: '▸ '; }
.gdet[open] summary::before { content: '▾ '; }
.gsum { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0; }
.invf { margin-top: 0; }
.invf small { opacity: 0.7; }
@media (orientation: portrait) { .gm-row { flex-direction: column; align-items: stretch; } .gm-c { justify-content: flex-start; } }
/* v2.55 소모품 자동 먹기: AUTO 버튼 · 켜면 소모품 칸이 작아짐 */
#hudBR .sq.autoc { background: #2a2432; }
#hudBR .sq.autoc b { font-size: 11px; color: #9a90a8; letter-spacing: 0.5px; font-weight: normal; }
#hudBR .sq.autoc i { right: auto; left: 50%; transform: translateX(-50%); font-size: 10px; color: #9a90a8; }
#hudBR .sq.autoc.on { background: #2a4a2a; box-shadow: inset 2px 2px 0 #4a7a4a, inset -2px -2px 0 #1a2e1a, 0 0 8px -2px #5aff7a; }
#hudBR .sq.autoc.on b, #hudBR .sq.autoc.on i { color: #9aff9a; }
#hudBR.mini { gap: 3px; }
#hudBR.mini .sq { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); min-width: 26px; min-height: 26px; opacity: 0.85; }
#hudBR.mini .sq i { font-size: 9px; }
#hudBR.mini .sq.autoc b { font-size: 8px; }
/* v2.55 스킬 트리: 고른 노드 효과를 트리 위에 띄움 (가로 화면에서 아래로 내려야 보이던 문제) */
.st-area { position: relative; }
.st-panel.st-float { position: absolute; left: 6px; right: 6px; top: 6px; margin: 0; z-index: 2; background: rgba(20, 16, 30, 0.94); box-shadow: 0 0 12px -2px var(--c), 0 4px 10px rgba(0,0,0,0.6); max-height: 55%; overflow: auto; }
.st-float .st-pn { padding-right: 26px; }
.st-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; background: #2a2432; border: 1px solid #4a4258; color: var(--sub); font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
/* v2.56 통합 트리: 전체가 한눈에 · 두 손가락 확대 · 설명 칸은 아래 */
.st-wrap.big.fit { aspect-ratio: auto; max-height: none; overflow: hidden; touch-action: none; cursor: grab; }
.st-wrap.big.fit .st-svg { width: auto; height: auto; margin: 0; max-width: none; }
.st-zb.fl { position: absolute; top: 6px; right: 6px; z-index: 2; gap: 3px; }
.st-zb.fl .btn { min-width: 30px; padding: 2px 6px; font-size: 1em; opacity: 0.9; }
.st-head.sm { padding: 4px 8px; margin-bottom: 4px; }
.st-head.sm .st-pts { flex-direction: row; align-items: baseline; gap: 3px; min-width: 0; }
.st-head.sm .st-pts b { font-size: 1.5em; }
.st-head.sm .st-sub { font-size: 0.78em; line-height: 1.3; }
.st-btns.row { flex-direction: row; }
.st-panel.st-low { margin-top: 5px; padding: 5px 8px; font-size: 0.9em; }
.st-panel.st-low .st-pn { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.st-panel.st-low .st-pe { margin: 2px 0; }
.st-panel.st-low .st-pa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* v2.56 화면을 덜 가리게: 오른쪽 레벨 UI · 소모품 칸 축소 */
#hudL { font-size: 0.7em; gap: calc(var(--u) * 0.6); }
#hudL .upb .pic { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); min-width: 24px; min-height: 24px; }
#hudL .upb { gap: 4px; }
#hudL .uinfo { line-height: 1.08; }
#hudL .upbox { gap: calc(var(--u) * 0.4); padding: 2px; }
@media (orientation: portrait) { #hudL { font-size: 0.72em; } }
#hudBR { gap: 4px; }
#hudBR .sq { width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5); min-width: 30px; min-height: 30px; }
#hudBR .sq i { font-size: 10px; }
#hudBR.mini { gap: 3px; }
#hudBR.mini .sq { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); min-width: 22px; min-height: 22px; }
/* v2.57 대장간 */
.pk-res { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-bottom: 6px; }
.pk-res img { width: 1.2em; height: 1.2em; }
.pk-res b { margin-right: 6px; font-weight: normal; }
.pk-prog { background: #17121d; border: 2px solid var(--line); padding: 5px 8px; margin-bottom: 6px; }
.pk-pt { display: flex; gap: 8px; align-items: baseline; color: var(--sub); font-size: 0.9em; }
.pk-pt b { color: #fff0b0; font-weight: normal; }
.pk-pt small { margin-left: auto; color: #8a7aa0; }
.pk-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(6px, 1fr)); gap: 2px; margin-top: 4px; }
.pk-bar i { height: 8px; background: #2a2432; display: block; }
.pk-card { background: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--pc) 16%, #1a1420), #14101c 70%); border: 2px solid var(--pc); padding: 8px; margin-bottom: 8px; box-shadow: 0 0 10px -4px var(--pc); }
.pk-top { display: flex; align-items: center; gap: 8px; }
.pk-ic img { width: 44px; height: 44px; image-rendering: pixelated; }
.pk-nm { flex: 1; min-width: 0; line-height: 1.3; }
.pk-nm b { color: #fff; font-weight: normal; }
.pk-nm i { font-style: normal; font-size: 0.72em; border: 1px solid #5a5068; padding: 0 4px; margin-left: 4px; color: var(--sub); }
.pk-e { color: var(--pc); font-size: 1.2em; }
.smi-stage { position: relative; display: block; width: auto; align-self: stretch; height: 8px; background: #221c2a; margin: 8px 0 6px; border: 1px solid #0c0a14; }
.smi-fill { height: 100%; background: linear-gradient(90deg, #ffd23a, #ff7aff 45%, #d05aff); }
.smi-stage em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff6c0; opacity: 0.6; }
.pk-cost { font-size: 0.9em; color: var(--sub); margin-bottom: 6px; }
.pk-cost img { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.pk-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.pk-btns .btn { flex: 1 1 auto; min-width: 0; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; margin-bottom: 8px; }
.pk-t { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #17121d; border: 2px solid var(--pc, #3a3448); color: var(--pc, #c8c8d0); font: inherit; padding: 1px; cursor: pointer; }
.pk-t img { width: 58%; height: auto; image-rendering: pixelated; }
.pk-t b { font-weight: normal; font-size: 0.72em; line-height: 1; }
.pk-t.sel { box-shadow: 0 0 0 2px #fff, 0 0 10px -2px var(--pc); }
.pk-t.eq::after { content: '●'; position: absolute; top: 0; right: 2px; font-size: 8px; color: #5aff7a; }
.pk-t.lock { --pc: #2a2432; cursor: default; color: #5a5068; }
.pk-t.lock img { filter: brightness(0) opacity(0.3); }
.st-wrap.pt.fit { aspect-ratio: auto; max-height: none; overflow: hidden; touch-action: none; cursor: grab; }
.st-wrap.pt.fit .st-svg { width: auto; height: auto; margin: 0; max-width: none; }
/* v2.58 스킨 창: 착용·동료·패시브 한 줄 · 작은 칸 그리드 */
.sk-load { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.sk-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 62px; background: #17121d; border: 2px solid #3a3448; color: var(--sub); font: inherit; padding: 2px; cursor: pointer; }
.sk-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.sk-slot small { font-size: 0.72em; line-height: 1.1; }
.sk-slot i { font-style: normal; font-size: 1.4em; color: #4a4258; line-height: 32px; }
.sk-slot.main { border-color: #ffd23a; color: #ffd23a; }
.sk-slot.bud { border-color: #6af06a; color: #6af06a; }
.sk-slot.pas { border-color: #bfa0ff; color: #bfa0ff; }
.sk-slot:disabled { opacity: 0.45; cursor: default; }
.sk-bulk { display: flex; gap: 6px; margin: 6px 0 2px; } /* v2.83.1 모두 구매 · 모두 진화 */
.sk-bulk .btn { flex: 1 1 0; min-width: 0; }
.sk-bulk .btn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-bulk-ic { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-bottom: 6px; max-height: 40vh; overflow-y: auto; }
.sk-bulk-ic img { width: 28px; height: 28px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; margin: 6px 0 8px; }
.sk-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 3px; background: #17121d; border: 2px solid #3a3448; color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.sk-t img { width: 34px; height: 34px; image-rendering: pixelated; }
.sk-t small { font-size: 0.66em; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-t .sk-st { font-size: 0.55em; color: #ffd23a; letter-spacing: -1px; line-height: 1; }
.sk-t.no { opacity: 0.55; }
.sk-t.no img { filter: grayscale(0.7); }
.sk-t.sel { border-color: #fff; box-shadow: 0 0 8px -2px #fff; }
.sk-t.on { border-color: #ffd23a; }
.sk-t .b { position: absolute; top: 1px; right: 1px; font-style: normal; font-size: 0.55em; padding: 0 2px; line-height: 1.3; background: #000a; }
.sk-t .b.main { color: #ffd23a; } .sk-t .b.bud { color: #6af06a; } .sk-t .b.pas { color: #bfa0ff; } .sk-t .b.evo { color: #5aff7a; }

/* v2.58 스킨 창 축복 상자 (짧게) */
.bless-mini{padding:6px 8px !important;font-size:12px;line-height:1.45}
.bless-mini .bless-sig{font-size:9px;margin-bottom:2px}
.bless-btns{display:flex;gap:6px;margin-top:6px}
.bless-btns .btn.sys-open{margin-top:0;flex:1 1 0;min-width:0}
/* v2.58.1 스킬 트리 편의: 핵심 한 줄 바로가기 · 가로 화면은 설명 칸을 트리 옆에 · 이름은 확대와 상관없이 읽히는 크기 */
.st-kbar { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 5px; margin-bottom: 2px; scrollbar-width: thin; }
.st-kc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; font-size: 0.78em; background: #14101e; border: 2px solid #3a3448; color: var(--c); white-space: nowrap; }
.st-kc i { width: 7px; height: 7px; background: #3a3448; border: 1px solid var(--c); }
.st-kc.on { border-color: var(--c); box-shadow: inset 0 0 8px -2px var(--c); }
.st-kc.on i { background: var(--c); }
.st-kc.sel { background: #2a2210; outline: 2px solid #fff0b0; outline-offset: -2px; }
.st-wrap.big .st-t.kn { font-size: var(--kfs, 40px); stroke-width: var(--kfw, 8px); }
.btn.st-go-btn { padding: 6px 16px; font-size: 1.05em; }
@media (orientation: landscape) and (min-width: 600px) {
  .st-lay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 36%); gap: 6px; align-items: stretch; }
  .st-lay > .st-panel.st-low { margin-top: 0; overflow: auto; align-self: stretch; }
  .st-mode button { padding: 3px 6px; }
}
/* v2.58.3 장비 대장간 (한 번에 강화) */
.gforge { margin: 6px 0; padding: 6px 8px; background: #1a1210; border: 2px solid #8a5a2a; }
.gf-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.gf-top > b { color: #ffb070; }
.gf-top .pk-res { margin: 0; }
.gf-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 8px; margin: 4px 0 6px; }
.gf-b { display: grid; grid-template-columns: 3.2em 1fr 2.6em; align-items: center; gap: 5px; font-size: 0.8em; }
.gf-b span { color: var(--gc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-b b { text-align: end; color: #fff0b0; font-variant-numeric: tabular-nums; }
.gf-bar { position: relative; height: 7px; background: #0a0806; border: 1px solid #3a2a1a; }
.gf-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a5a2a, var(--gc)); }
.gf-bar em { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #ff8a4a; }
.gf-b.pop b, .itile.pop, .fg-e.pop { animation: gePop 0.9s ease-out; }
@keyframes gePop { 0% { transform: scale(1.5); filter: brightness(2.2); } 60% { transform: scale(0.95); } 100% { transform: scale(1); filter: none; } }
.gf-tg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.gf-tg .btn { padding: 5px 2px; }
.gf-tg .btn small { display: block; font-size: 0.72em; }
.gf-tg .btn small img { width: 1em; height: 1em; vertical-align: -0.15em; }
.gf-opt { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 0.85em; }
.gf-opt small { display: block; color: var(--sub); font-size: 0.85em; }
.gf-note { display: block; margin-top: 3px; color: var(--sub); font-size: 0.72em; }
.fg-many { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: stretch; }
.fg-many .btn { flex: 1 1 auto; }
.fg-many .btn small img { width: 1em; height: 1em; vertical-align: -0.15em; }
.fg-last { margin-top: 5px; padding: 4px 6px; background: #0a1a0a; border: 1px solid #3a6a3a; font-size: 0.85em; text-align: center; }
.ger { display: grid; gap: 3px; margin-bottom: 6px; }
.ger-row { display: grid; grid-template-columns: 24px 1fr auto auto auto; align-items: center; gap: 6px; padding: 2px 6px; background: #14101e; border-left: 3px solid var(--gc, #3a3448); }
.ger-row img { width: 22px; height: 22px; }
.ger-row i { font-style: normal; color: var(--sub); }
.gf-opt .btn { min-width: 3.4em; white-space: nowrap; }
details.fg-note summary { cursor: pointer; color: var(--sub); }
/* v2.58.3 구매 수량 */
.qty-bar { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 4px 6px; background: #14101e; border: 2px solid #3a3448; }
.qty-bar span { flex: 1; font-size: 0.82em; color: var(--sub); }
.qty-bar .btn { min-width: 3.2em; }
/* v2.58.3 시트 탭 한 줄 */
.stabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 5px; margin-top: -5px; min-width: 0; flex: 1; }
.stabs::-webkit-scrollbar { display: none; }
.stabs button { flex: 0 0 auto; white-space: nowrap; }
.stabs.ovf { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.stabs.ovl.ovf { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent); }
.stabs.ovl:not(.ovf) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.fg-res { justify-content: center; margin: 2px 0 4px; font-size: 0.9em; }
/* v2.59 장비 던전 단계 표시 */
.itile .ig-t { position: absolute; top: 1px; left: 3px; font-size: 0.62em; color: #9ad8ff; text-shadow: 1px 1px 0 #000; }
.dg-tier { color: #9ad8ff; font-weight: normal; }
/* v2.59 작은 AUTO 버튼 (소모품 자리) */
#hudBR .sq.autoc.sm { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); min-width: 24px; min-height: 24px; align-self: flex-start; }
#hudBR .sq.autoc.sm b { font-size: 8px; }
#hudBR .sq.autoc.sm i { font-size: 8px; }
/* v2.60 옵션 개조 비교 · 자동 개조 */
.fg-btns { flex-wrap: wrap; }
.ao-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-top: 8px; }
.ao-vs > i { font-style: normal; color: var(--sub); }
.ao-vs small { display: block; color: var(--sub); font-size: 0.75em; }
.ao-cmp { padding: 5px 6px; background: #14101e; border: 2px solid #3a3050; }
.ao-cmp.top { border-color: #ffb03a; box-shadow: inset 0 0 8px -2px #ffb03a; }
.ao-cmp small { display: block; color: var(--sub); font-size: 0.75em; }
.ao-pool { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; justify-content: center; }
.ao-pool .btn.hero { color: #d0a0ff; } .ao-pool .btn.top { color: #ffb03a; } .ao-pool .btn.top6 { color: #ff6a6a; }
.ao-pool .btn.blue { color: #fff; }
#hudBR .sq.autoc.big { width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); min-width: 34px; min-height: 34px; }
#hudBR .sq.autoc.big b { font-size: 10px; color: #9aff9a; }
#hudBR .sq.autoc.big i { font-size: 11px; font-weight: bold; }
#hudBR .sq.autoc b { white-space: nowrap; }

/* v2.67 환생할 수 있을 때 환생 버튼이 반짝임 */
/* 발열 2차 (사용자 10-23 넣기): 환생 버튼 반짝임 — 버튼 뒤 분홍 빛 층을 한 번 칠해 두고 진하기(opacity)만 바꿈 (예전: 필터 drop-shadow · brightness 애니메이션 = 매 프레임 다시 칠함 · 게임 멈춘 화면 CPU +0.10 → +0.04 코어)
   #hudTL 을 반짝이는 동안만 쌓임 맥락으로 (z-index 0 · 형제와 칠하는 차례는 그대로) → 빛 층(z −1)이 버튼 바탕 · 테두리 바로 뒤 (예전 그림자 자리) · 다른 점: 가장 밝을 때 아이콘 · 글자가 25% 밝아지던 것만 빠짐 */
#hudTL:has(.prest-ready:not(.newm)) { z-index: 0; }
html.u3-open button.sq.prest-ready::before { content: none; } /* 창이 열려 위 메뉴 줄이 된 때(버튼 바탕이 투명)는 예전처럼 그림 모양 따라 빛남 — 게임 화면은 안 칠하는 때 */
html.u3-open button.sq.prest-ready:not(.newm) { animation: prestGlow 1.2s ease-in-out infinite; } /* 새 메뉴 반짝임(.newm)이 같이 있으면 예전처럼 그쪽이 이김 */
@keyframes prestGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,120,220,0)); } 50% { filter: drop-shadow(0 0 5px rgba(255,120,220,1)) brightness(1.25); } }
button.sq.prest-ready:not(.newm)::before { content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: rgb(255, 142, 240); box-shadow: 0 0 7px 1px rgba(255, 150, 255, 0.8); opacity: 0; will-change: opacity; animation: shGlowOp 1.2s ease-in-out infinite; }

/* v2.68 상점 재화 막대 (스크롤해도 위에 붙어 있음) */
.cur-bar { flex-wrap: wrap; gap: 4px 12px; }
.cur-bar .cur-i { display: inline-flex; align-items: center; gap: 4px; }
.cur-bar .cur-i small { margin-left: 2px; }
/* v2.81.0 강화하면: 쓴 재화가 '-값'으로 떠오르고 숫자가 번쩍 · 오른 단계가 톡 튀어 오름 */
.cur-bar .cur-i { position: relative; }
.cur-bar .cur-i.hit b { animation: curHit 0.6s ease-out; display: inline-block; }
@keyframes curHit { 0% { transform: scale(1.4); filter: brightness(1.9); } 60% { transform: scale(0.94); } 100% { transform: none; filter: none; } }
.cur-fly { position: absolute; left: 0; top: 100%; color: #ff8a8a; font-weight: bold; font-size: 0.95em; text-shadow: 0 1px 0 #000; background: rgba(24, 8, 20, 0.92); border: 1px solid #ff5a6a; border-radius: 3px; padding: 0 4px; line-height: 1.35; pointer-events: none; white-space: nowrap; animation: curFly 1.05s ease-out forwards; z-index: 3; }
@keyframes curFly { 0% { opacity: 0; transform: translateY(-5px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }
.lvp { display: inline; }
[data-lv].lv-pop { animation: lvPop 0.75s ease-out; display: inline-block; }
div[data-lv].lv-pop { display: block; }
@keyframes lvPop { 0% { transform: scale(1.14); filter: brightness(2) drop-shadow(0 0 6px #fff); } 55% { transform: scale(0.98); } 100% { transform: none; filter: none; } }
.pk-sticky { position: sticky; top: 0; z-index: 3; background: #1a1024; padding: 5px 8px; box-shadow: inset 0 0 0 2px #ffd23a, 0 3px 0 rgba(0, 0, 0, 0.45); }

/* v2.69.1 스킨 각성 전/후 비교 */
.awk-cmp { margin-top: 4px; border: 1px solid #6a3a8a; border-radius: 4px; padding: 4px 6px; background: rgba(208, 90, 255, 0.07); }
.awk-cmp-h { color: #d05aff; font-weight: bold; margin-bottom: 2px; }
.awk-cmp.dimc { border-color: #2ad0e0; background: linear-gradient(90deg, rgba(42, 208, 224, 0.09), rgba(224, 58, 184, 0.09)); }
.awk-cmp.dimc .awk-cmp-h { color: #5affff; }
.awk-cmp.dimc .awk-cmp-h img { width: 1.2em; height: 1.2em; vertical-align: -0.25em; image-rendering: pixelated; }
.awk-cmp.dimc b { color: #9afff8; }
.abil.dimc { background: #12304a; color: #9afff8; }
.awk-cmp.rampc { border-color: #ff5a4a; background: rgba(255, 90, 74, 0.07); } /* v2.99.1 폭주 각성 */
.awk-cmp.rampc .awk-cmp-h { color: #ff7a5a; }
.awk-cmp.rampc b { color: #ff9a7a; }
.abil.rampc { background: #4a1a12; color: #ffb08a; }
.awk-cmp.owc { border-color: #7ad83a; background: linear-gradient(90deg, rgba(122, 216, 58, 0.08), rgba(150, 70, 230, 0.08)); } /* v2.99.1 이계 각성 */
.awk-cmp.owc .awk-cmp-h { color: #9aff3a; }
.awk-cmp.owc b { color: #c8ff9a; }
.abil.owc { background: #1e2a12; color: #c8ff9a; }
.awk-cmp table { border-collapse: collapse; width: 100%; font-size: 0.92em; }
.awk-cmp td { padding: 1px 4px 1px 0; vertical-align: top; }
.awk-cmp td:first-child { color: var(--sub); width: 36%; padding-right: 8px; word-break: keep-all; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } /* v2.74.3 긴 번역에서 오른쪽 칸이 한 글자씩 꺾이지 않게 */
.awk-cmp-fx { margin-top: 3px; font-size: 0.92em; }

/* v2.70 경로째 배우기 효과 합계 */
.st-way { margin: 4px 0; padding: 4px 6px; border: 1px dashed var(--c, #fff0b0); border-radius: 4px; font-size: 0.9em; background: rgba(255, 255, 255, 0.04); }
.st-way > b { color: var(--c, #fff0b0); display: block; margin-bottom: 1px; }
.st-way small { color: var(--sub); }
.st-way-path { color: #bff0ff; }

/* ───────── v2.72 (?) 설명 버튼 · 처음 시작 안내 · 스포트라이트 ───────── */
.qm { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; padding: 0; margin: 0 0.1em 0 0.25em; vertical-align: 0.05em;
  font: inherit; font-size: 0.78em; line-height: 1; font-style: normal; font-weight: normal; color: #ffe070; background: #3a2c56; border: 2px solid #ffe070; border-radius: 50%;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); cursor: pointer; text-shadow: none; flex: none; }
.qm::after { content: ''; position: absolute; inset: -8px; } /* 눌리는 자리는 넉넉하게 */
.qm:active { transform: translateY(1px); background: #5a4486; }
.qm-ic { pointer-events: none; }
.tlv .qm.hq { font-size: 0.95em; vertical-align: 0.1em; margin-left: 0.5em; } /* v2.90.5 레벨이 숫자 그대로라(+168976) 숫자 테두리가 ? 에 닿지 않게 0.35 → 0.5em */
html.hand-l #hudL .tlv .qm.hq { margin-left: 0.5em; }
.qhelp { flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); min-width: 34px; min-height: 34px; padding: 0; border-radius: 50%;
  font: inherit; font-size: 1.15em; line-height: 1; color: #ffe070; background: #3a2c56; border: 2px solid #ffe070; box-shadow: inset -2px -2px 0 #241a38, 2px 2px 0 rgba(0, 0, 0, 0.5); cursor: pointer; }
.qhelp:active { transform: translateY(2px); }
.qhelp-b { line-height: 1.65; }
.qhelp-f { margin-top: 8px; font-size: 0.85em; color: var(--sub); }
.welcome { display: flex; flex-direction: column; gap: 8px; }
.wl-row { display: flex; align-items: center; gap: 10px; background: #2c2438; border: 2px solid var(--line); box-shadow: inset 0 0 0 2px #3c3250; padding: 6px 10px; }
.wl-n { flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: #ffd23a; color: #2a1a08; font-size: 0.9em; }
.wl-row img { flex: none; width: 34px; height: 34px; image-rendering: pixelated; }
.wl-row p { margin: 0; line-height: 1.45; }
.wl-foot { margin-top: 2px; font-size: 0.88em; line-height: 1.6; color: var(--sub); text-align: center; }
.wl-foot img { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin-right: 0.15em; image-rendering: pixelated; }
.wl-foot b { color: #fff; }
#spot { position: absolute; inset: 0; z-index: 15; }
#spot .sp-hole { position: absolute; border-radius: 6px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.62); outline: 3px solid #ffe070; outline-offset: 0; animation: spPulse 1.1s ease-in-out infinite; cursor: pointer; }
@keyframes spPulse { 0%, 100% { outline-color: #ffe070; outline-offset: 0; } 50% { outline-color: #fff6c0; outline-offset: 3px; } }
#spot .sp-bub { position: absolute; background: var(--panel); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px #ffe070, 4px 4px 0 rgba(0, 0, 0, 0.5); padding: 10px 12px; line-height: 1.55; animation: tin 0.15s steps(3); }
#spot .sp-txt small { color: var(--sub); }
#spot .sp-btns { display: flex; gap: 6px; margin-top: 8px; }
#spot .sp-btns .btn { flex: 1; }
#spot .sp-arr { position: absolute; bottom: -10px; width: 0; height: 0; border: 8px solid transparent; border-top-color: #ffe070; border-bottom: 0; }
#spot .sp-bub.below .sp-arr { bottom: auto; top: -10px; border: 8px solid transparent; border-bottom-color: #ffe070; border-top: 0; }
@media (orientation: landscape) {
  .welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .welcome .wl-foot { grid-column: 1 / -1; }
  .wl-row { padding: 5px 8px; gap: 8px; }
  .wl-row img { width: 28px; height: 28px; }
}
@media (max-height: 460px) { .wl-row p { line-height: 1.3; } .wl-foot { line-height: 1.45; } }

/* ───────── v2.73 스킨 맛보기 ───────── */
.trial-card { text-align: center; }
.trial-card .tc-pic { position: relative; width: 128px; height: 128px; margin: 2px auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #4a3a10 0%, #2a2040 62%, #1a1424 100%); box-shadow: inset 0 0 0 3px #ffe030, 0 0 14px rgba(255, 224, 48, 0.35); transition: box-shadow 0.08s; }
.trial-card .tc-pic img { width: 108px; height: 108px; image-rendering: pixelated; object-fit: contain; }
.trial-card .tc-pic.hit { box-shadow: inset 0 0 0 3px #fff6a0, 0 0 26px rgba(255, 240, 120, 0.85); background: radial-gradient(circle, #8a7a20 0%, #3a3050 62%, #1a1424 100%); }
.trial-card h4 { margin: 0 0 2px; color: #ffe030; font-size: 1.15em; }
.trial-card .tc-ab { margin: 0 0 6px; font-size: 0.9em; color: #e8e0f0; line-height: 1.5; }
.trial-card .tc-q { margin: 6px 0 2px; line-height: 1.55; }
.trial-card .tc-s { color: var(--sub); }
.trial-syn { margin-top: 8px; padding-top: 8px; border-top: 2px dashed #3c3250; font-size: 0.9em; }
.trial-syn p { margin: 0 0 6px; line-height: 1.5; text-align: center; }
.ts-row { display: flex; align-items: center; gap: 6px; background: #2c2438; border: 2px solid var(--line); padding: 4px 8px; margin-top: 4px; }
.ts-row img { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.ts-row i { font-style: normal; color: var(--sub); }
.ts-row span { display: flex; flex-direction: column; text-align: left; margin-left: 4px; line-height: 1.35; }
.ts-row small { color: var(--sub); }
.buff.trial { border-color: #ffe030; box-shadow: 0 0 6px rgba(255, 224, 48, 0.6); }
.buff.trial small { font-size: 0.75em; margin: 0 2px; color: #ffe070; }
@media (max-height: 460px) { .trial-card .tc-pic { width: 92px; height: 92px; } .trial-card .tc-pic img { width: 78px; height: 78px; } .trial-card .tc-ab { margin-bottom: 2px; } }
@media (orientation: landscape) {
  .trial-lay { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items: center; }
  .trial-lay .trial-syn { margin-top: 0; padding: 0 0 0 12px; border-top: 0; border-left: 2px dashed #3c3250; }
  .trial-lay .trial-syn p { text-align: left; }
  .trial-card.row { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; text-align: left; align-items: center; }
  .trial-card.row .tc-pic { grid-row: 1 / span 4; margin: 0; }
  .trial-card.row .tc-q, .trial-card.row .tc-s { grid-column: 2; }
}
@media (orientation: landscape) and (max-height: 400px) {
  .trial-card .tc-pic { width: 76px; height: 76px; } .trial-card .tc-pic img { width: 64px; height: 64px; }
  .trial-card h4 { font-size: 1em; } .trial-card .tc-ab, .trial-card .tc-q { font-size: 0.88em; line-height: 1.4; margin: 2px 0; }
}
button.ts-row { width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.ts-row:active { transform: translateY(1px); background: #3a3050; }
.ts-row em { margin-left: auto; font-style: normal; color: #ffe070; font-size: 1.1em; padding-left: 6px; animation: tsPlay 1.2s ease-in-out infinite; }
@keyframes tsPlay { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.ts-row b { color: #ffe070; }
.ts-hint { display: block; text-align: center; color: var(--sub); margin-top: 4px; }
#synTest { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); top: calc(6px + var(--safe-t, 0px)); width: min(calc(100% - 200px), 440px); min-width: 200px;
  background: rgba(26, 18, 34, 0.94); border: 2px solid #ffe030; box-shadow: 0 0 10px rgba(255, 224, 48, 0.45), 3px 3px 0 rgba(0, 0, 0, 0.5); padding: 4px 6px; font-size: 13px; }
#synTest .st-top { display: flex; align-items: center; gap: 4px; }
#synTest .st-top img { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
#synTest .st-top i { font-style: normal; color: var(--sub); }
#synTest .st-top b { color: #ffe070; font-weight: normal; margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#synTest .st-time { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; padding: 0 4px; }
#synTest .btn.sm { flex: none; padding: 2px 8px; font-size: 12px; }
#synTest .st-note { font-size: 11px; color: #ffd0a0; line-height: 1.35; margin-top: 2px; }
#synTest .st-note b { color: #ff9a6a; font-weight: normal; }
@media (orientation: portrait) { #synTest { top: auto; bottom: auto; top: calc(var(--u, 4px) * 34 + 6px); width: min(calc(100% - 24px), 440px); } }
#synTest .st-tip { font-size: 12px; color: #fff; margin-top: 2px; animation: tsPlay 1.4s ease-in-out infinite; }
@media (orientation: landscape) and (max-height: 400px) {
  .welcome { gap: 4px; } .wl-row { padding: 3px 6px; gap: 6px; } .wl-row img { width: 22px; height: 22px; }
  .wl-row p { font-size: 0.84em; line-height: 1.3; } .wl-foot { font-size: 0.78em; line-height: 1.35; } .wl-n { width: 1.4em; height: 1.4em; }
}
/* v2.73.7 난이도가 열리는 순서 표 */
.dl-tbl { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.dl-tbl td { padding: 3px 4px; border-top: 1px solid rgba(255,255,255,0.08); vertical-align: middle; }
.dl-tbl td:first-child { white-space: nowrap; }
.dl-tbl td:last-child { width: 1.4em; text-align: center; color: #7aff8a; }
.dl-tbl tr:not(.on) td:nth-child(2) { color: var(--sub); }

/* v2.74.3 히어로 각성 카드: 버튼을 아래 줄 오른쪽으로 */
.card.awkc { flex-wrap: wrap; }
.card.awkc > .mid { flex: 1 1 calc(100% - 56px); }
.awk-modal .card.awkc > .ic { display: none; } /* v2.75 각성 창: 제목에 이름이 있으니 아이콘 칸을 빼서 표를 넓게 */
.awk-modal .card.awkc > .mid { flex: 1 1 100%; }
.card.awkc .awk-btns { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.card.awkc .awk-btns .btn { flex: 1 1 0; min-width: auto; } /* v2.99.1 버튼이 넷(각성 · 폭주 · 이계 · 차원)까지 → 낱말 가운데서 끊기지 않게 (영어 'Rampag|e') · 모자라면 다음 줄로 */
/* v2.76 난이도 장비 표시 */
.dtag { display: inline-block; font-size: 0.78em; padding: 0 4px; margin-right: 4px; border: 1px solid var(--dc); color: var(--dc); border-radius: 3px; line-height: 1.35; vertical-align: 1px; background: color-mix(in srgb, var(--dc) 14%, transparent); white-space: nowrap; }
.stat-line.suf.dsuf, .fg-opt.dsuf .fg-l { color: #ff9a5a; }
.itile .ig-d { position: absolute; top: 1px; right: 3px; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.62em; color: var(--dc); text-shadow: 1px 1px 0 #000; } /* v2.76 난이도 장비 */
.itile .ig-d ~ .ig-e { top: 12px; }
/* v2.76.1 도감: 난이도 광물 등급 줄 */
.dx-h { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 4px; padding: 2px 6px; border-left: 3px solid #ffd23a; background: linear-gradient(90deg, rgba(255, 210, 58, 0.14), transparent); color: #ffd23a; font-size: 0.9em; }
.dx-h small { color: var(--sub); } .dx-h small i { font-style: normal; opacity: 0.6; }
.cell.dx { position: relative; }
.cell.dx .dx-t { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: 0.75em; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.cell.dx.lock { opacity: 0.55; border-style: dashed; }
.cell.dx.lock img { filter: brightness(0) opacity(0.3); }

/* v2.79 업글 창 탭마다 테마 색 (--th 강조색 · --thd 어두운 바탕) */
#sheet[data-th="shop"] { --th: #5ad8ff; --thd: #0e2a36; }
#sheet[data-th="star"] { --th: #ffe070; --thd: #2e2810; }
#sheet[data-th="orbshop"] { --th: #ff6ad0; --thd: #2e1028; }
#sheet[data-th="wup"] { --th: #5affff; --thd: #0c2a2c; }
#sheet[data-th="awkup"] { --th: #c05aff; --thd: #22103a; }
#sheet[data-th="rampup"] { --th: #ff4a3a; --thd: #340c0c; }
#sheet[data-th="oshop"] { --th: #9aff3a; --thd: #1a2a0a; }
#sheet[data-th="mineup"] { --th: #ffa03a; --thd: #2e1a08; }
#sheet[data-th="cons"] { --th: #6af06a; --thd: #0e2a12; }
#sheet[data-th="smith"] { --th: #c8d0e0; --thd: #20242c; }
#sheet[data-th] .sbox { border-color: var(--th); box-shadow: inset 0 0 0 2px var(--thd), 0 0 18px -6px var(--th); }
#sheet[data-th] .shead { background: linear-gradient(180deg, var(--thd), #1a1420); border-bottom-color: var(--th); }
#sheet[data-th] .stabs button.on { background: var(--th); border-color: var(--th); color: #120a14; text-shadow: none; }
#sheet[data-th] .sbody { background: linear-gradient(180deg, var(--thd) 0, rgba(0, 0, 0, 0) 220px); }
#sheet[data-th] .sbody .card { border-color: var(--line); border-color: color-mix(in srgb, var(--th) 40%, var(--line)); box-shadow: inset 3px 0 0 var(--th), inset 0 2px 0 #40364c; }
#sheet[data-th] .sbody .card.done { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--th) 40%, #000), inset 0 2px 0 #40364c; }
#sheet[data-th] .sbody .sec span { color: var(--th); }
#sheet[data-th] .sbody .box { border-color: var(--line); border-color: color-mix(in srgb, var(--th) 30%, var(--line)); }
#sheet[data-th="gearenh"] { --th: #ff8a3a; --thd: #2e1608; }
#sheet[data-th="pickenh"] { --th: #c8d0e0; --thd: #20242c; }

/* ───────── v2.80 설정창: 묶음별 · 한 줄 = 한 설정 (왼쪽 이름 · 오른쪽 조작) · 긴 설명은 (?) ───────── */
.sgrp-h { display: flex; align-items: center; gap: 6px; margin: 14px 2px 6px; color: #ffd23a; font-size: 0.92em; line-height: 1.25; text-shadow: 1px 1px 0 #000; }
.scol:first-child > .sgrp-h:first-child { margin-top: 2px; }
.sgrp-h img { width: 1.45em; height: 1.45em; flex: none; }
.sgrp-h::after { content: ''; flex: 1 1 0; min-width: 12px; height: 2px; margin-inline-start: 4px; background: linear-gradient(90deg, rgba(255, 210, 58, 0.45), rgba(255, 210, 58, 0)); }
.rtl .sgrp-h::after { background: linear-gradient(270deg, rgba(255, 210, 58, 0.45), rgba(255, 210, 58, 0)); }
.sgrp { background: var(--card); border: 2px solid var(--line); box-shadow: inset 0 2px 0 #40364c; }
.srow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%; min-height: 50px; padding: 6px 10px; text-align: start; line-height: 1.3; }
.sgrp > * + .srow { border-top: 2px solid #241c2c; }
.srow .sl { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; }
.srow .sc { flex: 0 1 auto; margin-inline-start: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.srow.tg, .srow.act { cursor: pointer; }
.srow.tg:active, .srow.act:active { background: rgba(255, 255, 255, 0.07); }
button.srow { display: flex; background: none; border: 0; border-radius: 0; font: inherit; color: inherit; }
.srow.act::after { content: '›'; flex: none; margin-inline-start: auto; padding-inline-start: 6px; color: var(--sub); font-size: 1.5em; line-height: 0.8; }
.rtl .srow.act::after { content: '‹'; }
.srow.danger .sn { color: #ff8a7a; }
/* 슬라이더 줄 (값은 이름 옆) */
.srow.sld .sc { flex: 1 1 150px; max-width: 250px; }
.srow .rng { flex: 1 1 auto; width: 100%; height: 32px; margin: 0; }
.rng-v { margin-inline-start: 0.4em; color: #ffd23a; font-weight: normal; font-variant-numeric: tabular-nums; }
/* v2.84 음량 줄: − 슬라이더 + (1%씩) */
.srow.vol { flex-wrap: nowrap; }
.srow.vol .sc { flex: 0 0 196px; flex-wrap: nowrap; gap: 6px; }
.vb { flex: none; width: 34px; height: 34px; padding: 0; background: #2a2236; border: 2px solid var(--line); color: #ffd23a; font: inherit; font-size: 1.2em; line-height: 1; box-shadow: inset 0 2px 0 #3a3048; }
.vb:active { transform: translateY(1px); background: #3a3048; }
/* 켜기/끄기 스위치 (설정 · 장비 강화 · 대장간 공통) */
.sw { width: 52px; height: 28px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5); }
.sw::after { width: 20px; height: 20px; background: #7a6a7a; box-shadow: inset -2px -2px 0 #4a3a4a, inset 2px 2px 0 #a89aa8; }
.sw.on { background: #2e7a24; }
.sw.on::after { left: 26px; background: #7ae06a; box-shadow: inset -2px -2px 0 #3a9a2a, inset 2px 2px 0 #c0ffb0; }
/* 여러 개 중 하나 고르기 (붙은 버튼) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; background: var(--line); border: 2px solid var(--line); }
.seg button { flex: 1 1 auto; min-height: 38px; padding: 4px 11px; background: #2a2236; border: 0; color: #cfc4d8; line-height: 1.2; box-shadow: inset 0 2px 0 #3a3048; }
.seg button.on { background: #4a8ae0; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 -3px 0 #2a5aa0, inset 0 2px 0 #8ab8ff; }
.seg button:active { transform: translateY(1px); }
/* 지금 값 + 누르면 목록 (언어 · 등급) */
.selb { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px 4px 12px; background: #1a1420; border: 2px solid var(--line); box-shadow: inset 0 0 0 1px #4a4058; color: var(--text); }
.selb::after { content: '▾'; color: #ffd23a; }
.selb:active { transform: translateY(1px); }
/* 도움말 칸 (게임 가이드 · 기능 안내 · 인트로) — 긴 낱말은 끊지 않고 글자를 줄임 (.fitx) */
.shelp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.shelp .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; padding: 8px 4px 7px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.shelp .btn img { width: 28px; height: 28px; flex: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)); }
.fitx { display: block; max-width: 100%; overflow-wrap: normal; word-break: keep-all; -webkit-hyphens: manual; hyphens: manual; }
/* 능력치 · 기록 (접어 둠) */
details.sfold { margin-top: 12px; }
details.sfold > summary { display: block; list-style: none; cursor: pointer; padding: 0 10px; background: var(--card); border: 2px solid var(--line); box-shadow: inset 0 2px 0 #40364c; }
details.sfold > summary::-webkit-details-marker { display: none; }
details.sfold > summary .sgrp-h { margin: 0; min-height: 46px; }
details.sfold > summary .sgrp-h::after { content: '▸'; flex: none; min-width: 0; height: auto; margin-inline-start: auto; background: none; color: var(--sub); font-size: 1.05em; }
details.sfold[open] > summary .sgrp-h::after { content: '▾'; }
.rtl details.sfold > summary .sgrp-h::after { content: '◂'; }
details.sfold > summary:active { background: #3a3046; }
details.sfold > .stats { margin: 0; padding: 6px; background: var(--card); border: 2px solid var(--line); border-top: 0; }
.sver { margin: 14px 0 6px; text-align: center; color: var(--sub); font-size: 0.8em; }
/* 고르기 창 (언어 · 등급 · 컷신) */
.pick-d { color: var(--sub); font-size: 0.9em; line-height: 1.5; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; margin: 10px 0 8px; }
.pick-grid .btn { min-height: 44px; padding: 6px 4px; }
.pick-grid.lang { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); margin-top: 2px; }
.pick-grid.cut { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
html.f-th :is(.srow, .seg button, .selb, .shelp .btn, .sgrp-h), html.f-hi :is(.srow, .seg button, .selb, .shelp .btn, .sgrp-h), html.f-ar :is(.srow, .seg button, .selb, .shelp .btn, .sgrp-h) { line-height: 1.5; }
/* 가로 화면: 설정창은 넓게 두 칸 (왼쪽 도움말·일반·소리·화면 / 오른쪽 게임·능력치·기록·데이터·정보) */
@media (orientation: landscape) and (min-width: 700px) {
  #sheet[data-sheet="set"] .sbox { width: min(900px, 100%); }
  #sheet[data-sheet="set"] .sbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: start; }
  #sheet[data-sheet="set"] .scol > .sgrp-h:first-child { margin-top: 2px; }
}
/* 높이가 낮은 화면(가로): 설정 줄·도움말 칸을 조금 촘촘하게 (줄은 44px 이상 유지) */
@media (max-height: 480px) {
  .srow { min-height: 44px; padding-block: 4px; }
  .shelp { padding: 6px; }
  .shelp .btn { min-height: 56px; padding: 5px 4px; gap: 2px; }
  .shelp .btn img { width: 24px; height: 24px; }
  .sgrp-h { margin: 10px 2px 5px; }
  details.sfold { margin-top: 10px; }
  details.sfold > summary .sgrp-h { min-height: 42px; }
}

/* ───────── v2.80 전체 UI: 쉽고 간편하게 ───────── */
/* 탭·작은 버튼은 손가락 크기 (최소 40px) · 세로 화면은 탭이 옆으로 숨지 않게 여러 줄 */
.stabs button { min-height: 40px; padding: 5px 12px; }
.shead .qhelp, .shead .sq.sm { min-width: 40px; min-height: 40px; }
@media (orientation: portrait) {
  .shead { align-items: flex-start; }
  .stabs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; }
}
.chips .btn, .qty-bar .btn, .gm-c .btn, .st-mode button, .pt-nav .btn, #mBtns .btn { min-height: 40px; }
.st-zb.fl .btn { min-width: 36px; min-height: 36px; }
/* 긴 설명 상자: 처음엔 두 줄만 + ▾ (누르면 펼침) · 합계 줄은 위에 따로 */
.box.more { position: relative; cursor: pointer; padding-inline-end: 28px; }
.box.more:not(.open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; padding-bottom: 0; border-bottom: 8px solid transparent; box-shadow: 0 2px 0 var(--line); margin-bottom: 10px; }
.box.more .more-i { position: absolute; inset-inline-end: 7px; bottom: 6px; font-style: normal; line-height: 1; color: #ffd23a; pointer-events: none; }
.box.more .more-i::after { content: '▾'; }
.box.more.open .more-i::after { content: '▴'; }
.box.more:active { background: #221a2a; }
.box.sumline { color: var(--text); text-align: center; margin-bottom: 6px; }
/* 켜기/끄기는 어디서나 같은 스위치 (줄 전체를 눌러도 됨) */
.tgrow { cursor: pointer; }
.tgrow:active { background: rgba(255, 255, 255, 0.06); }
.tgrow > .sw { flex: none; margin-inline-start: auto; }
.gm-row.tgrow { flex-direction: row !important; align-items: center !important; min-height: 46px; }
.swb { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 4px; background: none; border: 0; color: var(--sub); }
.swb small { font-size: 0.85em; }
/* 관리 줄 이름: (?) 가 이름 옆에 붙게 */
.gm-l { display: block; }
.gm-l small { display: block; }
/* 묶음 제목은 또렷하게 (시트 안 .sec) · 재화 막대 테두리는 탭 색 */
.sec { margin: 10px 2px 6px; padding-bottom: 3px; border-bottom: 2px solid rgba(255, 210, 58, 0.22); }
.sec > span:first-child { color: #ffd23a; }
#sheet[data-th] .sbody .sec { border-bottom-color: color-mix(in srgb, var(--th) 35%, transparent); }
#sheet[data-th] .orb-sticky { box-shadow: inset 0 0 0 2px var(--th), 0 3px 0 rgba(0, 0, 0, 0.45); }
/* HUD: 자주 누르는 작은 버튼을 손가락 크기로 (자동 강화 · 난이도 · MAX · 메뉴) — 업그레이드 목록 크기는 그대로 */
#hudL .autoup { font-size: 0.84em; min-height: 28px; padding: 3px 8px 3px 4px; gap: 4px; }
#hudL .autoup img { width: 1.45em; height: 1.45em; }
.hpall { min-height: 28px; min-width: 36px; font-size: 0.82em; padding: 3px 6px; }
#hudTL .sq { min-width: 40px; min-height: 40px; }
#hudTL .fold { height: 22px; }
#buffs { left: calc(6px + var(--safe-l) + 2 * max(var(--u) * 9, 40px) + 14px); }
@media (orientation: landscape) { html.hand-l #buffs { left: auto; right: calc(6px + var(--safe-r) + 2 * max(var(--u) * 9, 40px) + 14px); } }
/* 곡괭이 진화 3갈래: 긴 번역(독일어 등)이 칸 밖으로 넘치지 않게 (예전부터 있던 넘침) */
.pevo-tree { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pevo-br, .pevo-node { min-width: 0; overflow-wrap: anywhere; }

/* ───── v2.81.1 불편한 UI 고침 ───── */
/* 재화가 많아지면 숫자와 단위가 두 줄로 깨지던 문제 → 재화마다 한 줄 · 넘치면 다음 줄로 */
.moneys { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.money b { white-space: nowrap; }
/* 모자란(누를 수 없는) 색 버튼: 노란·주황·초록 버튼 위 분홍 비용 글씨가 거의 안 보이고 누를 수 있는 버튼과 구별이 안 되던 문제 → 색을 빼고 어둡게 · 비용 글씨는 또렷하게 */
.btn.gold:disabled, .btn.green:disabled, .btn.blue:disabled, .btn.pink:disabled, .btn.red:disabled, .btn.fire:disabled, .btn.awk:disabled, .btn.dimc:disabled, .btn.owc:disabled, .btn.purple:disabled, .btn.ramp:disabled { filter: saturate(0.35) brightness(0.78); }
.btn:disabled small { color: #ffd2c8; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.5); }
/* 다차원 강화 탭: 테마 색이 없어서 고른 탭 글자가 안 보이던 문제 */
#sheet[data-th="dimup"] { --th: #b09aff; --thd: #16123a; }
/* 재화 줄 + 구매 수량 줄: 세로 화면은 예전처럼 (재화 줄만 위에 붙음) · 가로 화면은 한 줄로 합쳐 함께 위에 붙음 (낮은 화면에서 목록이 더 많이 보이게) */
.cq-row { display: contents; }
@media (orientation: landscape) {
  .cq-row { display: flex; gap: 6px; align-items: stretch; position: sticky; top: 0; z-index: 3; margin: -2px 0 6px; background: #120e1a; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
  .cq-row > .orb-sticky { position: static; margin: 0; flex: 1 1 50%; box-shadow: inset 0 0 0 2px #ff7ad8; }
  #sheet[data-th] .cq-row > .orb-sticky { box-shadow: inset 0 0 0 2px var(--th); }
  .cq-row > .qty-bar { margin: 0; flex: 1 1 50%; }
}
/* 고르기 칸(등급 알림 등): '다차원 1등/급'처럼 낱말 가운데서 끊기던 문제 → 띄어쓰기에서만 줄바꿈 */
.pick-grid .btn { word-break: keep-all; }
/* 업글 칸에서 산 뒤 오른 단계가 톡 (각성 창의 단계 표시와 같은 움직임) */
.card .nm small.lv-pop { animation: lvPop 0.75s ease-out; display: inline-block; }

/* v2.81.1 가로 화면: 탭 9개(업그레이드)가 한 줄에 다 보이게 좌우 여백만 줄임 (넘치면 지금처럼 옆으로 넘김) */
@media (orientation: landscape) { .stabs button { padding-inline: 7px; min-width: 38px; } }
/* v2.82 파편 특별 강화: 이름 옆 '특별' 표 · 지금 단계 효과 */
.sp-b{display:inline-block;font-size:0.7em;line-height:1.25;padding:0 3px;margin-left:2px;border-radius:2px;background:linear-gradient(90deg,#ff7a3a,#ffd23a);color:#2a0a06;vertical-align:1px;font-weight:normal}
.sp-now{color:#ffe8a0;font-weight:normal}

/* v2.82 세계 마을 대화 창 */
#talk { position: absolute; inset: 0; z-index: 18; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l)); background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 50%); cursor: pointer; }
#talk.hidden { display: none; }
#talk .tbox { width: min(680px, 100%); display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px #5a5070, 4px 4px 0 rgba(0, 0, 0, 0.5); padding: 10px 14px 12px 10px; position: relative; animation: tin 0.15s steps(3); }
#talk .tbox.me { box-shadow: inset 0 0 0 2px #5a9a6a, 4px 4px 0 rgba(0, 0, 0, 0.5); }
#talk .tface { width: 64px; height: 64px; flex: none; background: #3a3448; box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; }
#talk .tface canvas { width: 64px; height: 64px; image-rendering: pixelated; display: block; }
#talk .tmain { flex: 1; min-width: 0; }
#talk .tname { color: var(--gold); margin-bottom: 4px; text-shadow: 1px 1px 0 #000; }
#talk .tbox.me .tname { color: #9aff9a; }
#talk .ttext { color: var(--text); line-height: 1.55; min-height: 3.1em; white-space: pre-wrap; }
#talk .tbox.nar { box-shadow: inset 0 0 0 2px #6a5a3a, 4px 4px 0 rgba(0, 0, 0, 0.5); background: #1c1622; } /* v3.1 해설 줄 */
#talk .tbox.nar .tface, #talk .tbox.nar .tname { display: none; }
#talk .tbox.nar .ttext { text-align: center; color: #e8dcb4; padding: 4px 6px 0; }
#talk .tnext { position: absolute; right: 10px; bottom: 4px; color: var(--sub); font-size: 0.8em; animation: bob 0.8s steps(2) infinite; }
#talk .tskip { order: -1; align-self: flex-end; margin: 0 max(0px, calc((100% - 680px) / 2)) 6px 0; background: rgba(0, 0, 0, 0.55); color: var(--sub); border: 2px solid var(--line); padding: 3px 10px; font: inherit; font-size: 0.85em; cursor: pointer; }
html.f-th #talk .ttext, html.f-hi #talk .ttext, html.f-ar #talk .ttext { line-height: 1.7; }
html[lang="ko"] #talk .ttext { word-break: keep-all; }
img.ti { width: 1.15em; height: 1.15em; vertical-align: -0.22em; image-rendering: pixelated; } /* v2.83 알림 안 작은 재화 아이콘 */

/* ───── v2.86 장비: 잠금 · 골라서 정리(선택 분해) · 목표대로 맞추기 ───── */
.itile .ig-l { top: auto; bottom: 1px; left: 3px; font-size: 0.6em; line-height: 1; } /* 🔒가 광산 번호(D##)를 덮지 않게 왼쪽 아래로 */
.inv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-head .btn { min-height: 34px; }
.isel-hint { display: block; color: var(--sub); font-size: 0.78em; margin: 2px 0 4px; }
.isel-bar { position: sticky; top: 0; z-index: 3; background: #1a1430; border: 2px solid #5ab0ff; padding: 6px 8px; margin: 4px 0 6px; box-shadow: 0 4px 10px -4px #000; }
.isel-top, .isel-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.isel-top b { margin-right: auto; color: #9ad8ff; }
.isel-acts { margin-top: 5px; }
.isel-acts .btn { flex: 1 1 auto; min-height: 38px; }
.isel-acts .btn small { display: block; font-size: 0.78em; }
.isel-acts .btn small img { width: 1em; height: 1em; vertical-align: -0.15em; }
.isel-note { display: block; color: var(--sub); font-size: 0.75em; margin-top: 4px; }
.itile.picking { cursor: pointer; }
.itile.sel { outline: 3px solid #5ab0ff; outline-offset: -3px; filter: brightness(1.12); }
.itile .ig-sel { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 1.25em; height: 1.25em; line-height: 1.25em; text-align: center; border-radius: 50%; background: rgba(40, 120, 255, 0.8); color: #fff; font-size: 0.85em; font-weight: bold; box-shadow: 0 0 6px #5ab0ff; pointer-events: none; }
.itile.sel::after { content: ''; position: absolute; inset: 0; background: rgba(60, 140, 255, 0.18); pointer-events: none; }
.fg-tools { display: flex; gap: 6px; margin: 6px 0 2px; }
.fg-tools .btn { flex: 1; min-height: 36px; }
.ot-cur { display: grid; gap: 3px; margin-top: 6px; }
.ot-c { display: grid; grid-template-columns: 1fr 70px 38px; align-items: center; gap: 6px; padding: 3px 6px; background: rgba(20, 16, 34, 0.7); border-left: 3px solid #5a5070; font-size: 0.85em; }
.ot-c.ok { border-left-color: #5aff7a; }
.ot-c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-c i { display: block; height: 6px; background: linear-gradient(90deg, #5ab0ff var(--p), #2a2438 var(--p)); border: 1px solid #3a3050; }
.ot-c b { text-align: right; font-size: 0.9em; }
.ot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
.ot-row .ot-l { color: var(--sub); font-size: 0.82em; margin-right: 4px; min-width: 4.5em; }
.ot-row .btn { min-height: 36px; padding: 3px 9px; }
.ot-row .btn small { margin-left: 3px; opacity: 0.75; }
.ot-list { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
.ot-k { padding: 2px 6px; background: #1a1428; border: 1px solid #3a3050; color: #c8c0e0; font-size: 0.82em; }
.ot-k.hero { color: #d0a0ff; } .ot-k.top { color: #ffb03a; } .ot-k.top6 { color: #ff6a6a; } .ot-k.dsuf { color: #ff9a5a; }
.ot-k.ok { border-color: #5aff7a; box-shadow: inset 0 0 6px -2px #5aff7a; }
.ot-k.want { border-color: #5ab0ff; box-shadow: inset 0 0 6px -2px #5ab0ff; }
.ot-k.over, .ot-k.no { opacity: 0.45; }
.ot-k.no { text-decoration: line-through; }
.ot-leg { display: block; color: var(--sub); font-size: 0.74em; margin: 2px 0 4px; line-height: 1.45; }
.ot-go { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ot-go .btn { flex: 1 1 30%; min-height: 44px; }
.ot-go .btn small { display: block; font-size: 0.74em; opacity: 0.85; }
.ot-eq { margin-top: 8px; }
.oe-list { display: grid; gap: 3px; margin: 6px 0; }
.oe-row { display: grid; grid-template-columns: 1.6em 1fr auto auto auto; align-items: center; gap: 4px; padding: 3px 6px; background: rgba(20, 16, 34, 0.75); border-left: 3px solid #5a5070; }
.oe-row.hero { border-left-color: #c07aff; } .oe-row.top { border-left-color: #ffb03a; } .oe-row.top6 { border-left-color: #ff4a4a; } .oe-row.dsuf { border-left-color: #ff9a5a; }
.oe-row b { color: #9ad8ff; text-align: center; }
.oe-row span { font-size: 0.86em; line-height: 1.25; }
.oe-row span small { display: block; color: var(--sub); font-size: 0.8em; }
.oe-row .btn { min-width: 36px; min-height: 34px; padding: 2px 6px; }
.oe-g { margin: 6px 0; }
.oe-g > small { display: block; color: var(--sub); font-size: 0.78em; margin-bottom: 3px; }
.oe-add { display: flex; flex-wrap: wrap; gap: 4px; }
.oe-add .btn { min-height: 34px; padding: 3px 8px; font-size: 0.85em; }
.oe-add .btn.hero { color: #d0a0ff; } .oe-add .btn.top { color: #ffb03a; } .oe-add .btn.top6 { color: #ff6a6a; } .oe-add .btn.dsuf { color: #ff9a5a; }
.oe-add .btn.in { opacity: 0.35; }
.lang-ko .oe-row span, .lang-ko .ot-c span { word-break: keep-all; }

/* ───────── v2.86 HUD 편의 ───────── */
.dot.y, #hudTL .dotany.y { background: #ffd23a; } /* 노랑 = 새 소식 · 빨강 = 지금 할 수 있음 */
#hudTL .sq.newm { animation: newMenu 1.1s ease-in-out 6; }
@keyframes newMenu { 0%, 100% { box-shadow: inset 2px 2px 0 #5a5468, inset -2px -2px 0 #221c2a; } 50% { box-shadow: 0 0 0 2px #ffd23a, 0 0 12px 2px #ffd23a; } }
#hudL .money[data-cur] { cursor: pointer; position: relative; }
#hudL .money[data-cur]::after { content: ''; position: absolute; inset: -6px -4px; } /* 눌리는 자리 넉넉하게 */
#hudL .money.cf { display: none; }
#hudL.mini .ustat { display: none; }
#hudL.mini.peek .ustat { display: block; }
#hudL.mini #tlvRow { cursor: pointer; }
.hpall { position: relative; min-width: 40px; min-height: 30px; overflow: hidden; }
.hpall::after { content: ''; position: absolute; inset: -6px; }
.hpall.hold::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 240, 160, 0.45); animation: holdFill 0.65s linear forwards; pointer-events: none; }
@keyframes holdFill { to { width: 100%; } }
#hudBR .sq.autoc { width: calc(var(--u) * 7); height: calc(var(--u) * 7); min-width: 36px; min-height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
#hudBR .sq.autoc img { width: 50%; height: 50%; filter: grayscale(0.8) brightness(0.8); }
#hudBR .sq.autoc.on img { filter: none; }
#hudBR .sq.autoc i { position: static; transform: none; font-size: 10px; line-height: 1; margin-top: 1px; }
#hudBR .sq { -webkit-touch-callout: none; user-select: none; }
.buff.pz { opacity: 0.7; filter: grayscale(0.5); }
#banner.sm { font-size: 0.72em; }
#toasts { z-index: 12; } /* v2.86 버그: 창(시트)이 열려 있으면 알림이 뒤에 가려짐 */
#banner { z-index: 11; }
/* 재화 안내 */
.cur-top { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 2px 0 8px; }
.cur-top img { width: 40px; height: 40px; image-rendering: pixelated; }
.cur-top div { display: flex; flex-direction: column; }
.cur-top b { font-size: 1.15em; font-weight: normal; }
.cur-top span { color: #fff; }
.cur-rows > div { display: flex; gap: 8px; padding: 4px 2px; border-bottom: 1px solid #3a3448; font-size: 0.92em; }
.cur-rows i { flex: none; width: 4.6em; font-style: normal; color: var(--sub); }
.cur-here { margin: 6px 0; text-align: center; color: #ffe070; font-size: 0.9em; }
.cur-all { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; justify-content: center; }
.cur-c { display: flex; align-items: center; gap: 3px; padding: 3px 6px; background: #241e30; border: 2px solid #3a3448; font: inherit; font-size: 0.85em; color: #fff; min-height: 32px; }
.cur-c img { width: 18px; height: 18px; image-rendering: pixelated; }
.cur-c b { font-weight: normal; }
.cur-c.on { border-color: #ffd23a; background: #3a3020; }
.cur-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: #241e30; border: 2px solid #3a3448; font: inherit; color: #e8e0d0; text-align: left; }
.cur-fold > span:first-child { display: flex; flex-direction: column; }
.cur-fold b { font-weight: normal; }
.cur-fold small { color: var(--sub); font-size: 0.8em; }
.chk { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 8px; font-size: 0.85em; color: var(--sub); }
.chk input { width: 18px; height: 18px; accent-color: #5ab0ff; }
/* 자동 강화 설정 */
.au-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid #3a3448; }
.au-row b { font-weight: normal; color: #ffe070; }
.au-row small { color: var(--sub); font-size: 0.8em; }
.au-seg { display: flex; flex-wrap: wrap; }
.au-seg button { flex: 1 1 auto; min-height: 34px; }
/* ───────── v2.86 장비 편의 ───────── */
.itile .ig-new { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: #ffd23a; border: 2px solid #1a1420; box-shadow: 0 0 6px #ffd23a; pointer-events: none; }
.itile .ig-up { font-size: 0.6em; }
button.itile.empty { cursor: pointer; opacity: 0.75; }
button.itile.empty:active { transform: scale(0.96); }
.gm-best { margin-bottom: 6px; padding: 4px 6px; background: rgba(90, 255, 122, 0.08); border: 2px solid #2e6a2e; }
details.gmfold > summary small { display: block; color: var(--sub); font-size: 0.8em; }
.chips.invs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.chips.invs small { color: var(--sub); margin-right: 2px; }
.fg-tools .fg-nav { min-width: 40px; flex: 0 0 auto; }
.stat-line .cmp.nw { color: #2a2008; background: #ffe070; }
.stat-line.lost { opacity: 0.55; }
/* 유물 격자 */
.rl-sum b { font-weight: normal; color: #ffe070; }
.rl-tot { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 0.88em; }
.rl-tot b { color: #9aff9a; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; margin-top: 6px; }
.rl-c { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: #1e1828; border: 2px solid #3a3448; font: inherit; color: var(--sub); min-height: 70px; }
.rl-c img { width: 28px; height: 28px; image-rendering: pixelated; opacity: 0.5; }
.rl-c.got { border-color: #8a6a2a; background: #2a2218; color: #ffe8b0; }
.rl-c.got img { opacity: 1; }
.rl-c small { font-size: 0.72em; line-height: 1.15; text-align: center; width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rl-c b { font-weight: normal; font-size: 0.75em; color: #9aff9a; min-height: 1em; }
.rl-c:active { transform: scale(0.96); }
/* ───────── v2.86 히어로 편의 ───────── */
.sk-off { font-size: 0.85em; border-color: #6a5a9a; }
.lo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.lo-row > small { color: var(--sub); margin-right: 2px; }
.lo-row .btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.lo-row .btn img { width: 20px; height: 20px; image-rendering: pixelated; }
.lo-row .btn i { font-style: normal; width: 20px; text-align: center; }
.lo-slot { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #3a3448; }
.lo-slot > img, .lo-slot .lo-e { width: 32px; height: 32px; flex: none; image-rendering: pixelated; font-style: normal; text-align: center; line-height: 32px; color: var(--sub); border: 2px dashed #3a3448; }
.lo-slot > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lo-slot b { font-weight: normal; color: #ffe070; }
.lo-slot small { color: var(--sub); font-size: 0.8em; }
.lo-b { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.sk-t small.fitx { white-space: nowrap; overflow: hidden; display: block; max-width: 100%; }
.skin-card .sk-mini { margin-left: 6px; padding: 0 6px; min-width: 28px; min-height: 24px; font: inherit; font-size: 0.8em; background: #2a2236; color: #cfc4d8; border: 2px solid #3a3448; vertical-align: middle; }
.skin-card.mini .ds { display: none; }
.awk-modal .awk-btns { position: sticky; bottom: -12px; z-index: 2; background: var(--panel); padding: 6px 0 4px; box-shadow: 0 -6px 8px -4px rgba(0, 0, 0, 0.6); }
.sys-sort button { min-height: 32px; padding: 2px 10px; }
.sys-row .btn { min-height: 32px; }
/* ───────── v2.86 업글 편의 ───────── */
.qty-bar .qb-all { margin-left: auto; }
.ba-seg { display: flex; width: 100%; margin-bottom: 6px; }
.ba-seg button { flex: 1; }
.ba-list { display: flex; flex-direction: column; gap: 1px; max-height: 40vh; overflow-y: auto; margin: 4px 0; }
.ba-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px; background: #1e1828; font-size: 0.9em; }
.ba-list b { font-weight: normal; color: #9aff9a; }
.ba-sum { text-align: center; margin: 6px 0 2px; }
.ba-sum img { width: 1.2em; height: 1.2em; vertical-align: -0.25em; image-rendering: pixelated; }
.ba-sum b { font-weight: normal; color: #ffb0a0; }
.ba-note { display: block; text-align: center; color: var(--sub); font-size: 0.8em; }
.pt-tip { font-size: 0.9em; }
.pt-tip.rec { border-color: #3a8a4a; background: rgba(90, 255, 122, 0.07); }
.btn.wide small { display: block; font-size: 0.75em; opacity: 0.85; }
/* #37 가로 화면: 업글 카드 2열 (스크롤 절반) */
@media (orientation: landscape) {
  #sheet[data-sheet="up"] .sbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; align-content: start; align-items: stretch; }
  #sheet[data-sheet="up"] .sbody > :not(.card) { grid-column: 1 / -1; }
  #sheet[data-sheet="up"] .sbody > .card { margin-bottom: 6px; }
}
#sheet[data-th="slotenh"] { --th: #5affff; --thd: #0c2a2c; } /* v2.86 버그: 슬롯 강화 탭에 테마 색이 없어서 고른 탭 글자가 거의 안 보임 */
/* ───────── v2.86 도감·상점 편의 ───────── */
.col-bar { position: sticky; top: -8px; z-index: 3; background: #120e1a; margin: -8px -8px 6px; padding: 6px 8px 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.col-chips { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.col-chips .btn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; }
.col-chips .btn b { font-weight: normal; color: #ffe070; }
.col-chips .btn small { opacity: 0.85; }
.col-f { display: flex; gap: 4px; margin-top: 2px; }
button.cell { font: inherit; color: inherit; cursor: pointer; }
.ach-bar { height: 6px; margin-top: 4px; background: #1a1420; border: 1px solid #0c0a14; }
.ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb03a, #ffe070); }
.ach-n { color: var(--sub); font-size: 0.8em; }
.prem-go { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

/* ───── v2.86 마을·설정·진행 ───── */
/* 입구 돌 모두 열기 (기본 마을 오른쪽 아래) */
#hudBR .gateall { display: flex; align-items: center; gap: 6px; height: calc(var(--u) * 7.5); min-height: 36px; padding: 0 10px 0 6px; border: 0; border-radius: 6px; background: #4a3a1a; color: #ffe8a0; font: inherit; font-size: 12px; line-height: 1.1; box-shadow: inset 2px 2px 0 #7a6a3a, inset -2px -2px 0 #2a2010, 0 0 10px -3px #ffd23a; cursor: pointer; white-space: nowrap; }
#hudBR .gateall img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); min-width: 22px; min-height: 22px; image-rendering: pixelated; }
#hudBR .gateall b { min-width: 18px; padding: 1px 5px; border-radius: 9px; background: #ffd23a; color: #3a2a00; font-size: 11px; text-align: center; }
#hudBR .gateall:active { transform: translateY(1px); }
/* 창 버튼: 층 이름이 '지하40 / 층'으로 끊기지 않게 */
#mBtns .btn.nw, #mBtns .btn.nw small { white-space: nowrap; }
/* 무한 광산 · 레이드: 기록을 맨 위에 */
.end-rec { margin: 0 0 6px; line-height: 1.5; }
/* 자동 백업 목록 */
.bk-c { align-items: center; }
.bk-c .nm small { color: var(--sub); font-weight: normal; }
.bk-c .ds { font-size: 0.85em; color: var(--sub); }
.bk-c .btn.sm { flex: none; min-width: 72px; }
.srow .bk-t { display: block; font-size: 0.78em; color: var(--sub); font-weight: normal; }
/* v2.86 HUD 겹침 고치기: 버프가 설정·집 버튼까지 가지 않게 (넘치면 두 줄) · 세로 화면 소모품 줄은 재화 줄 위로 */
#buffs { right: calc(6px + var(--safe-r) + 2 * max(var(--u) * 9, 40px) + 18px); flex-wrap: wrap; row-gap: 3px; pointer-events: none; }
#hudTL.folded ~ #buffs { right: calc(6px + var(--safe-r) + 2 * max(var(--u) * 9, 40px) + 18px); }
@media (orientation: landscape) {
  html.hand-l #buffs, html.hand-l #hudTL.folded ~ #buffs { left: calc(6px + var(--safe-l) + 2 * max(var(--u) * 9, 40px) + 18px); justify-content: flex-end; }
}
@media (orientation: portrait) {
  #hudBR { bottom: calc(6px + var(--safe-b) + var(--mny-h, 40px) + 6px); }
}
/* v2.86 버그: 고정 줄 위 틈(시트 안쪽 여백 8px)으로 아래 내용이 비치던 것 → 고정 줄을 여백까지 올려 붙임 */
.orb-sticky, .pk-sticky, .cq-row, .isel-bar { top: -8px; }
/* v2.99 엔딩 크레딧 — 플레이어의 추억 (밤 → 아침 하늘 · 쌓이는 폴라로이드 · 함께한 영웅들 · MINE KIM · 고마움) */
#credits { position: fixed; inset: 0; z-index: 9001; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #05060d; color: #fff3d8; opacity: 0; transition: opacity 0.9s ease-out; }
#credits.on { opacity: 1; }
#credits.out { opacity: 0; transition: opacity 1s ease-in; pointer-events: none; }
#credits .cr-sky, #credits .cr-dust, #credits .cr-vig, #credits .cr-fade, #credits .cr-open, #credits .cr-pile { position: absolute; inset: 0; }
#credits .cr-dust { width: 100%; height: 100%; pointer-events: none; }
#credits .cr-vig { pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.5)); }
#credits .cr-grain { position: absolute; inset: -40%; pointer-events: none; opacity: 0.06; background-image: var(--grain); background-size: 96px 96px; image-rendering: pixelated; animation: crGrain 0.48s steps(4) infinite; }
@keyframes crGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 3%); } 50% { transform: translate(4%, -5%); } 75% { transform: translate(-2%, -3%); } }
#credits .cr-fade { background: #000; opacity: 0; pointer-events: none; z-index: 30; }
#credits .cr-open canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; }
#credits .cr-title { position: absolute; left: 0; right: 0; top: 34%; text-align: center; padding: 0 16px; }
#credits .cr-title b { display: block; font-weight: normal; font-size: clamp(30px, 10.5vmin, 76px); letter-spacing: 0.1em; color: #ffe7a6; text-shadow: 0 0 22px rgba(255, 186, 90, 0.55), 3px 3px 0 #120a06, -1px -1px 0 #120a06; opacity: 0; }
#credits .cr-title span { display: block; margin-top: 2.6vmin; font-size: clamp(13px, 3.8vmin, 24px); letter-spacing: 0.32em; color: #f6dcc0; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7); opacity: 0; }
#credits .cr-pile { pointer-events: none; }
#credits .cr-pol { position: absolute; left: 50%; top: 47%; width: min(86vw, 60vh, 420px); background: #f5efe2; padding: 3.4% 3.4% 0; border-radius: 2px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 0 18px rgba(120, 90, 50, 0.12); transform-origin: 50% 62%; will-change: transform, opacity; }
#credits .cr-pol.wide { top: 33%; width: min(92vw, 98vh, 600px); }
#credits .cr-ph { position: relative; aspect-ratio: 5 / 4; background: #120c0c; overflow: hidden; }
#credits .cr-pol.wide .cr-ph { aspect-ratio: 16 / 9; }
#credits .cr-ph canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
#credits .cr-ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 24px rgba(40, 18, 6, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
#credits .cr-leak { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 104% -4%, rgba(255, 150, 70, 0.3), transparent 46%), radial-gradient(ellipse at -6% 106%, rgba(255, 96, 128, 0.12), transparent 52%); mix-blend-mode: screen; }
#credits .cr-cap { padding: 3.4% 4% 4.6%; text-align: center; color: #2c2119; min-height: 4.8em; }
#credits .cr-cap b { display: block; font-weight: normal; font-size: clamp(14px, 4.3vmin, 22px); line-height: 1.3; opacity: 0; word-break: keep-all; overflow-wrap: anywhere; }
#credits .cr-cap span { display: block; margin-top: 0.35em; font-size: clamp(11px, 3vmin, 15px); line-height: 1.3; color: #6e5a4a; opacity: 0; word-break: keep-all; overflow-wrap: anywhere; }
#credits .cr-cap em { display: block; margin-top: 0.4em; font-style: normal; font-size: clamp(10px, 2.6vmin, 13px); color: #a08a74; letter-spacing: 0.03em; opacity: 0; }
#credits .cr-cap em:empty, #credits .cr-cap span:empty { display: none; }
#credits .cr-road { position: absolute; left: 0; width: 100%; height: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 34px); image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; pointer-events: none; }
@media (orientation: landscape) { #credits .cr-road { display: none; } }
#credits .cr-stats { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); width: min(90vw, 460px); display: flex; flex-direction: column; gap: 0.55em; font-size: clamp(12px, 3.4vmin, 17px); pointer-events: none; }
#credits .cr-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; opacity: 0; }
#credits .cr-row .l { text-align: right; color: #e6caa6; opacity: 0.82; }
#credits .cr-row .v { text-align: left; color: #fff4dc; text-shadow: 0 0 10px rgba(255, 210, 140, 0.25); }
#credits.rtl .cr-row, #credits.rtl .cr-cap, #credits.rtl .cr-title { direction: rtl; } #credits.rtl .cr-row .l { text-align: left; } #credits.rtl .cr-row .v { text-align: right; }
#credits .cr-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vmin; padding: 0 16px; pointer-events: none; }
#credits .cr-lw { position: relative; }
#credits .cr-sun { position: absolute; left: 50%; top: 56%; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 240, 205, 0.9) 0%, rgba(255, 206, 140, 0.5) 20%, rgba(255, 160, 96, 0.18) 42%, transparent 66%); opacity: 0; pointer-events: none; }
#credits .cr-logo { position: relative; width: min(66vw, 50vh, 400px); aspect-ratio: 1049 / 771; overflow: hidden; }
#credits .cr-logo img { position: absolute; opacity: 0; display: block; }
#credits .cr-logo.txt { display: grid; place-items: center; aspect-ratio: auto; font-size: clamp(28px, 9vmin, 60px); color: #ffd86a; letter-spacing: 0.1em; }
#credits .cr-shine { position: absolute; top: -10%; bottom: -10%; left: 30%; width: 36%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 250, 220, 0.75), transparent); mix-blend-mode: screen; }
#credits .cr-thx { max-width: 92vw; font-size: clamp(18px, 5.6vmin, 36px); line-height: 1.35; letter-spacing: 0.05em; color: #fff0d0; text-align: center; text-shadow: 0 0 18px rgba(255, 200, 120, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.65); word-break: keep-all; line-break: strict; opacity: 0; }
#credits.rtl .cr-title b, #credits.rtl .cr-title span, #credits.rtl .cr-thx { letter-spacing: 0; }
#credits .cr-skip { position: absolute; z-index: 40; bottom: max(10px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); background: rgba(18, 12, 16, 0.6); color: #fff3d0; border: 2px solid rgba(255, 243, 208, 0.75); border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; opacity: 0.9; transition: opacity 0.4s; }
@media (orientation: landscape) and (max-height: 560px) {
  #credits .cr-pol { top: 47%; width: min(58vh, 54vw, 400px); }
  #credits .cr-pol.wide { left: 32%; top: 48%; width: min(54vw, 120vh, 560px); }
  #credits .cr-stats { left: 78%; top: 50%; transform: translate(-50%, -50%); width: min(40vw, 360px); }
  #credits .cr-title { top: 30%; }
}
/* v2.99 처음 켤 때 언어 고르기 (회사 인트로보다 먼저) */
#langPick { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 28%, #2a1e34, #0c0a0e 72%); color: #fff3d8; overflow-y: auto; transition: opacity 0.42s; animation: lpIn 0.5s ease-out; }
@keyframes lpIn { from { opacity: 0; } }
#langPick.out { opacity: 0; pointer-events: none; }
#langPick .lp-box { width: min(560px, 100%); margin: auto; text-align: center; }
#langPick h1 { font-weight: normal; font-size: clamp(22px, 6.4vmin, 34px); letter-spacing: 0.04em; color: #ffe7a6; text-shadow: 0 0 14px rgba(255, 190, 90, 0.45), 2px 2px 0 #000; margin: 0 0 18px; }
#langPick .lp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { #langPick .lp-grid { grid-template-columns: repeat(3, 1fr); } }
#langPick button { font: inherit; font-size: clamp(14px, 4vmin, 18px); line-height: 1.2; padding: 11px 6px; color: #f6ead6; background: #241c28; border: 2px solid #4a3e52; border-radius: 6px; box-shadow: 0 2px 0 #000; cursor: pointer; }
#langPick button.sug { border-color: #ffd23a; background: #3a2a1c; color: #fff6d8; box-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 210, 58, 0.35); }
#langPick button.on { background: #ffd23a; color: #2a1a08; border-color: #fff0b0; }
#langPick button:active { transform: translateY(1px); }
#langPick .lp-note { margin-top: 16px; font-size: clamp(11px, 3.2vmin, 14px); color: #b8a898; }

/* v3.0 보기 편하게: 자주 뜨는 알림 띠는 화면 위쪽 가운데 작은 띠 (가운데를 가리지 않게) */
#banner.pill { top: calc(var(--safe-t) + 27%); left: 0; right: 0; margin: 0 auto; transform: none; animation: tinPill 0.3s steps(3); width: max-content; max-width: min(78%, 34em); padding: 5px 16px 6px; border: 2px solid #0c0a14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); background: rgba(12, 10, 22, 0.66); font-size: 0.8em; line-height: 1.25; }
#banner.pill b { font-size: 1.35em; }
#banner.pill small { display: block; font-size: 0.95em; }
.toast .tn { font-style: normal; margin-left: 6px; color: var(--gold); font-weight: bold; }
@keyframes tinPill { from { opacity: 0; } }