/* 던전 클린 — 게임 UI v3 (카툰 RPG 테마: 나무 프레임 + 양피지 패널 + 금테 버튼) */
:root {
  --wood: #6b3b1c; --wood2: #8a512a; --wood3: #4a2510; --paper: #f7e9c9; --paper2: #eedbb3; --paper3: #e2c58f;
  --ink: #3b2412; --mute: #7a5b3a; --gold: #ffd54a; --gold2: #e39b1b; --goldink: #4a2a10;
  --green: #4fc23c; --green2: #2f8f22; --red: #ff5a4a; --red2: #c4291c; --blue: #4aa8ff;
  --hudbg: rgba(14, 22, 26, .78); --hudline: rgba(255, 214, 120, .45);
  --disp: 'Jua', 'Noto Sans KR', sans-serif; --body: 'Noto Sans KR', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d1a1c; color: #fff; overflow: hidden; overscroll-behavior: none; }
body { font: 13px/1.4 var(--body); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.ico { display: inline-block; vertical-align: middle; }

/* ───── HUD 상단 ───── */
.hud { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: none; z-index: 3; }
.hud > * { pointer-events: auto; }
.hud.top { top: max(6px, env(safe-area-inset-top)); align-items: flex-start; }
.herocard { display: flex; gap: 8px; align-items: center; background: linear-gradient(90deg, rgba(10,14,18,.9), rgba(10,14,18,.65) 70%, rgba(10,14,18,0)); border-left: 3px solid var(--gold2); padding: 4px 24px 4px 4px; }
.portrait { position: relative; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2e5a52, #10262a); border: 3px solid var(--gold2); box-shadow: 0 0 0 2px #4a2a10, 0 0 14px rgba(255,214,120,.35), inset 0 0 12px rgba(0,0,0,.5); flex: 0 0 auto; }
.portrait canvas { width: 60px; height: 60px; border-radius: 50%; display: block; }
.lvbadge { display: none; }
.heroinfo { width: 210px; display: grid; gap: 3px; }
.namerow { display: flex; align-items: baseline; gap: 6px; font: 400 15px/1.1 var(--disp); }
.namerow .lvtxt { color: #fff; } .namerow b { color: var(--gold); font-weight: 400; }
.namerow .titletag { font: 400 10px var(--body); color: #9fd3ff; }
.powerrow { display: flex; align-items: center; gap: 4px; font: 400 12px var(--body); color: #cfd8d6; }
.powerrow b { color: var(--gold); font: 400 14px var(--disp); }
.bar { position: relative; height: 9px; background: #0b1315; border: 1px solid rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.bar i { display: block; height: 100%; transition: width .15s; background: linear-gradient(#7fe0ff, #2a8fd8); }
.bar.hp { height: 12px; } .bar.hp i { background: linear-gradient(#ff8a6a, #c4291c); } .bar.mp { height: 6px; } .bar.mp i { background: linear-gradient(#8fd3ff, #2f78d8); } .bar.xp { height: 5px; } .bar.xp i { background: linear-gradient(#d9a6ff, #8a3fd8); } .bar.boss i { background: linear-gradient(#ff6a5a, #a51d12); }
.bar span { position: absolute; inset: 0; font: 400 9px/12px var(--disp); text-align: center; color: #fff; text-shadow: 0 1px 0 #000; }
.plaque { display: flex; align-items: center; gap: 4px; background: linear-gradient(#8a512a, #5a331a); border: 2px solid #3a1d0a; border-radius: 12px; padding: 4px 6px; box-shadow: 0 3px 0 #2a1308, 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.plaquebody { display: grid; text-align: center; min-width: 120px; }
.plaquebody b { font: 400 16px/1.1 var(--disp); color: #ffe7b0; text-shadow: 0 1px 0 #2a1308; } .plaquebody small { color: #e2c58f; font-size: 10.5px; }
.plaque .arrow { width: 24px; height: 36px; border: 0; background: transparent; color: #ffe7b0; font-size: 12px; opacity: .9; }
.plaque .arrow:disabled { opacity: .25; }
.wallet { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.cur { display: inline-flex; align-items: center; gap: 4px; background: var(--hudbg); border: 2px solid var(--hudline); border-radius: 999px; padding: 2px 10px 2px 4px; font: 400 13px var(--disp); color: #ffe7b0; min-width: 120px; }
.cur b { font-variant-numeric: tabular-nums; flex: 1; text-align: right; }
.cur .plus { width: 18px; height: 18px; border-radius: 50%; border: 0; background: linear-gradient(#9df07a, #2f9f22); color: #0a2a05; font: 400 14px/1 var(--disp); padding: 0; margin-left: 2px; box-shadow: 0 1px 0 #0a2a05; }
.ts { color: #ff8a6a; font: 400 13px var(--disp); }
.buffs { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.buff { display: inline-flex; align-items: center; gap: 6px; background: rgba(10,14,18,.8); border: 1px solid var(--bc, #fff); border-radius: 8px; padding: 2px 8px; font: 400 11px var(--disp); color: #fff; }
.buff i { width: 46px; height: 5px; background: #222; border-radius: 3px; overflow: hidden; display: block; } .buff i b { display: block; height: 100%; background: var(--bc, #fff); }
.buff em { font-style: normal; color: #cfd8d6; min-width: 26px; text-align: right; }

/* ───── 퀘스트 카드 · 보스 바 ───── */
.questcard { position: fixed; right: max(8px, env(safe-area-inset-right)); top: 118px; width: 230px; background: linear-gradient(#3a2a1c, #241810); border: 2px solid var(--hudline); border-radius: 12px; padding: 8px 10px; display: grid; gap: 3px; cursor: pointer; z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.questcard small { color: #e2c58f; font-size: 10.5px; } .questcard b { font: 400 14px/1.25 var(--disp); color: #fff; }
.questcard .prog { height: 7px; background: #140d08; border-radius: 4px; overflow: hidden; border: 1px solid #000; } .questcard .prog i { display: block; height: 100%; background: linear-gradient(#ffe07a, #e39b1b); }
.questcard .reward { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #cfd8d6; }
.questcard .reward b { color: #8fd3ff; font: 400 12px var(--disp); display: inline-flex; align-items: center; gap: 3px; }
.questcard.done { border-color: #ffe07a; animation: glow 1.2s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 6px rgba(255,214,120,.3); } to { box-shadow: 0 0 18px rgba(255,214,120,.7); } }
.questcard .gbtn { margin-top: 3px; }
#bossBar { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); width: min(460px, 60vw); display: flex; align-items: center; gap: 8px; z-index: 4; }
#bossBar .skull { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2a1c, #0b0806); border: 3px solid var(--gold2); display: grid; place-items: center; font-size: 24px; color: var(--gold); box-shadow: 0 0 12px rgba(0,0,0,.6); flex: 0 0 auto; }
#bossBar .bossbody { flex: 1; } #bossBar b { font: 400 16px var(--disp); text-shadow: 0 2px 0 #000; display: block; margin-bottom: 2px; }
#bossBar .bar { height: 14px; border: 2px solid #3a1d0a; }
#toast { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); background: rgba(20, 12, 6, .85); border: 2px solid var(--hudline); border-radius: 14px; padding: 9px 18px; font: 400 18px/1.3 var(--disp); color: #ffe7b0; pointer-events: none; opacity: 0; transition: opacity .25s; max-width: min(90vw, 560px); text-align: center; z-index: 5; }
#toast.show { opacity: 1; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: #0d1a1c; font: 400 24px var(--disp); color: #ffe7b0; z-index: 30; }
#loading.gone { display: none; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(255,214,120,.2); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───── 인트로 ───── */
#intro { position: fixed; inset: 0; z-index: 25; background: #0d1a1c; display: grid; place-items: center; align-content: center; gap: 10px; cursor: pointer; overflow: hidden; }
#intro.gone { display: none; }
.introart { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #1d5a52, #0d1a1c 70%); background-size: contain; background-position: center bottom; background-repeat: no-repeat; }
.introbg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(24px) brightness(.55); }
.introart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(13,26,28,.1), rgba(13,26,28,0) 30%, rgba(13,26,28,.75)); }
.logo { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; line-height: .9; filter: drop-shadow(0 6px 0 #3a1d0a) drop-shadow(0 10px 18px rgba(0,0,0,.6)); animation: logoIn .8s cubic-bezier(.2,1.4,.5,1) both; }
.logo .l1 { font: 400 72px var(--disp); color: #fff; -webkit-text-stroke: 3px #3a1d0a; letter-spacing: .04em; }
.logo .l2 { font: 400 84px var(--disp); color: var(--gold); -webkit-text-stroke: 3px #3a1d0a; letter-spacing: .06em; }
.logo small { font: 400 14px var(--disp); letter-spacing: .5em; color: #ffe7b0; margin-top: 10px; }
@keyframes logoIn { from { transform: translateX(-50%) scale(.4) rotate(-6deg); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.tapstart { position: absolute; bottom: 9vh; font: 400 24px var(--disp); color: #fff; text-shadow: 0 2px 0 #000; animation: blink 1.2s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: .35; } }
.introfoot { position: absolute; bottom: 20px; font-size: 11px; color: #cfd8d6; text-shadow: 0 1px 0 #000; }

/* ───── 하단: 스킬 클러스터 + 독 ───── */
.hud.bottom { bottom: max(6px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 6px; }
.skillcluster { position: relative; height: 112px; width: 360px; margin: 0 auto; }
.skillcluster .sk { position: absolute; }
.skillcluster .sk[data-i="0"] { left: 0; bottom: 6px; } .skillcluster .sk[data-i="1"] { left: 58px; bottom: 44px; } .skillcluster .sk[data-i="2"] { left: 152px; bottom: 56px; } .skillcluster .sk[data-i="3"] { right: 58px; bottom: 44px; } .skillcluster .sk[data-i="4"] { right: 0; bottom: 6px; }
.skillcluster .autobtn.big { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 50px; }
.skillcluster #autoS { position: absolute; left: calc(50% + 40px); bottom: 2px; width: 42px; height: 34px; font-size: 9px; }
.autobtn { border-radius: 12px; border: 2px solid #3a1d0a; background: linear-gradient(#5a5a5a, #2c2c2c); color: #bbb; display: grid; place-items: center; line-height: 1; box-shadow: 0 3px 0 #1a1a1a; }
.autobtn span { font: 400 12px var(--disp); } .autobtn small { font-size: 9px; }
.autobtn.on { background: linear-gradient(#9df07a, #2f9f22); color: #0a2a05; box-shadow: 0 3px 0 #164a0e, 0 0 10px rgba(79,194,60,.6); }
.sk { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ring, #555); background: radial-gradient(circle at 50% 40%, #2a3a3c, #0f1a1c); padding: 0; display: grid; place-items: center; box-shadow: 0 3px 0 #000, 0 0 0 2px #1b0f06; overflow: hidden; }
.sk.off { opacity: .45; }
.sk.ready { box-shadow: 0 3px 0 #000, 0 0 0 2px #1b0f06, 0 0 14px var(--ring, #fff); }
.sk .num { position: absolute; left: 7px; top: 3px; font: 400 10px var(--disp); color: #ffe7b0; text-shadow: 0 1px 0 #000; }
.sk .cd { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.7) calc(var(--cd, 0) * 1%), transparent 0); pointer-events: none; }
.sk .cdt { position: absolute; inset: 0; display: grid; place-items: center; font: 400 16px var(--disp); color: #fff; text-shadow: 0 1px 0 #000; pointer-events: none; }
.sk:active { transform: translateY(2px); }
.dock { display: flex; gap: 2px; overflow-x: auto; padding: 6px 6px 4px; scrollbar-width: none; background: linear-gradient(#8a512a, #5a331a 60%, #4a2510); border: 2px solid #3a1d0a; border-radius: 16px; box-shadow: 0 4px 0 #2a1308, 0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); justify-content: center; }
.dock::-webkit-scrollbar { display: none; }
.mi { position: relative; flex: 0 0 auto; width: 64px; border: 0; background: transparent; padding: 0 2px 2px; display: grid; justify-items: center; gap: 1px; }
.mi .circ { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff6dc, #e2c58f 60%, #b9924f); border: 2px solid #5a331a; display: grid; place-items: center; box-shadow: 0 2px 0 #3a1d0a, inset 0 -3px 0 rgba(0,0,0,.15); transition: transform .08s; }
.mi:active .circ { transform: translateY(2px); box-shadow: none; }
.mi span { font: 400 11px var(--disp); color: #ffe7b0; text-shadow: 0 1px 0 #2a1308; white-space: nowrap; }
.mi em { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font: 400 9px var(--disp); font-style: normal; color: #fff; background: rgba(0,0,0,.7); padding: 1px 5px; border-radius: 6px; white-space: nowrap; display: none; }
.mi.locked .circ { filter: grayscale(1) brightness(.6); } .mi.locked em { display: block; } .mi.locked span { opacity: .6; }
.mi .dot { position: absolute; top: 0; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #ff4a4a; border: 2px solid #fff; display: none; }
.mi.badge .dot { display: block; }

/* ───── 패널(양피지) ───── */
.overlay { position: fixed; inset: 0; background: rgba(5, 8, 16, .5); display: none; place-items: center; padding: 10px; z-index: 20; }
.overlay.show { display: grid; }
.sheet { position: relative; width: min(100%, 980px); height: min(92vh, 720px); display: grid; grid-template-rows: auto auto 1fr; background: var(--paper); color: var(--ink); border: 6px solid var(--wood); border-radius: 18px; box-shadow: 0 0 0 3px #3a1d0a, 0 12px 30px rgba(0,0,0,.6), inset 0 0 0 2px #c9a86a; overflow: hidden; animation: pop .18s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sheethead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(#8a512a, #5a331a); color: #ffe7b0; border-bottom: 3px solid #3a1d0a; cursor: grab; touch-action: none; }
.sheethead:active { cursor: grabbing; }
.sheethead h3 { margin: 0; font: 400 22px var(--disp); text-shadow: 0 2px 0 #2a1308; flex: 1; }
.curmini { display: flex; gap: 8px; font: 400 13px var(--disp); }
.curmini span { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.35); padding: 2px 8px 2px 4px; border-radius: 999px; }
.close { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #5a1208; background: linear-gradient(#ff7a6a, #c4291c); color: #fff; font: 400 16px/1 var(--disp); box-shadow: 0 2px 0 #5a1208; padding: 0; }
.tabs { display: flex; gap: 4px; padding: 8px 10px 0; background: var(--paper2); border-bottom: 2px solid #c9a86a; flex-wrap: wrap; }
.tabs:empty { display: none; }
.tab { position: relative; border: 2px solid #b9924f; border-bottom: 0; background: linear-gradient(#e2c58f, #cfa96b); color: #5a331a; border-radius: 10px 10px 0 0; padding: 7px 14px; font: 400 14px var(--disp); margin-bottom: -2px; }
.tab[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: #c9a86a; padding-bottom: 9px; }
.tab.locked { opacity: .5; } .tab .dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff4a4a; border: 2px solid #fff; }
.sheetbody { overflow-y: auto; padding: 12px 12px 18px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.sheetbody > * { flex: 0 0 auto; }
.gbtn { border: 2px solid #5a331a; border-radius: 10px; padding: 7px 12px; min-height: 38px; font: 400 14px/1.15 var(--disp); color: var(--goldink); background: linear-gradient(#ffe07a, #e39b1b); box-shadow: 0 3px 0 #8a5a1a, inset 0 1px 0 rgba(255,255,255,.6); white-space: nowrap; transition: transform .06s; }
.gbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a1a; }
.gbtn small { display: block; font: 400 10.5px var(--body); opacity: .85; }
.gbtn.green { background: linear-gradient(#9df07a, #3f9d2a); color: #0a2a05; box-shadow: 0 3px 0 #1d5a12; border-color: #1d5a12; }
.gbtn.blue { background: linear-gradient(#8fd3ff, #2f78d8); color: #06203a; box-shadow: 0 3px 0 #163f78; border-color: #163f78; }
.gbtn.red { background: linear-gradient(#ff8a7a, #c4291c); color: #fff; box-shadow: 0 3px 0 #5a1208; border-color: #5a1208; }
.gbtn.grey { background: linear-gradient(#d9d2c3, #a39a88); color: #3b2412; box-shadow: 0 3px 0 #6b6256; border-color: #6b6256; }
.gbtn.small { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.gbtn:disabled { filter: grayscale(.8) brightness(.85); opacity: .6; cursor: default; transform: none; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; } .btns.big .gbtn { flex: 1; min-height: 56px; font-size: 16px; }
.row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper2); border: 2px solid #d9bd8a; box-shadow: inset 0 1px 0 #fff6dc; }
.row.sub { margin-left: 18px; } .row.locked { opacity: .55; } .row.done { background: #e6f7df; border-color: #8fd36b; }
.info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info b { font-weight: 700; } .info .cnt { color: var(--mute); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.info small { display: block; width: 100%; color: var(--mute); font-size: 12px; }
.info .bar { width: 100%; margin-top: 4px; height: 10px; } .info .bar span { line-height: 10px; }
.lead { margin: 0; font-size: 14px; } .lead b { color: #b06a00; }
.tip { margin: 0; color: var(--mute); font-size: 12px; line-height: 1.5; }
.note { background: #fff6dc; border: 2px dashed #d9bd8a; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; color: var(--mute); }
h3.sec { margin: 6px 0 0; font: 400 16px var(--disp); color: #5a331a; border-bottom: 2px solid #d9bd8a; padding-bottom: 2px; display: flex; align-items: center; gap: 8px; }
h3.sec .lk { font: 400 11px var(--body); color: #c4291c; margin-left: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.elemhead { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .elemhead span { text-align: center; font: 400 13px var(--disp); color: #fff; border-radius: 8px; padding: 2px; text-shadow: 0 1px 0 #000; }
.tierlabel { display: flex; align-items: center; gap: 8px; font: 400 14px var(--disp); color: var(--rc); margin-top: 4px; } .tierlabel i { flex: 1; height: 2px; background: var(--rc); opacity: .5; }
.item { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 12px; cursor: pointer; text-align: center; border: 3px solid var(--rc, #9aa1b8); background: linear-gradient(var(--rbg, #e9e5da), #cfc8b8); box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .08s; min-width: 0; }
.item:active { transform: translateY(2px); }
.item .iconbox { width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.55), rgba(0,0,0,.08)); display: grid; place-items: center; }
.item b { font-size: 11.5px; line-height: 1.15; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item small { font-size: 10px; color: var(--mute); }
.item em { position: absolute; top: -6px; right: -4px; font: 400 10px var(--disp); font-style: normal; background: linear-gradient(#ffe07a, #e39b1b); color: #4a2a10; border: 2px solid #5a331a; border-radius: 8px; padding: 1px 6px; }
.item em.eq { background: linear-gradient(#9df07a, #3f9d2a); color: #0a2a05; border-color: #1d5a12; }
.item em.new { background: linear-gradient(#ff8a7a, #c4291c); color: #fff; border-color: #5a1208; animation: bounce .6s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-2px) scale(1.05); } }
.item.sel { outline: 3px solid #2f78d8; outline-offset: 1px; } .item.dim { opacity: .45; filter: grayscale(.9); cursor: default; }
.item .aw { display: flex; gap: 1px; } .item .aw i { width: 7px; height: 7px; border-radius: 50%; background: #c9a86a; border: 1px solid #5a331a; } .item .aw i.on { background: var(--gold); }
.t0 { --rc: #9aa1b8; --rbg: #f1f1f1; } .t1 { --rc: #4fc23c; --rbg: #e6f7df; } .t2 { --rc: #4aa8ff; --rbg: #e0efff; } .t3 { --rc: #b472ff; --rbg: #f0e3ff; } .t4 { --rc: #ffb23f; --rbg: #fff1cf; }
.item.t4:not(.dim) { box-shadow: 0 0 12px rgba(255,178,63,.8), 0 3px 0 rgba(0,0,0,.25); }
.reveal { animation: reveal .35s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes reveal { from { transform: scale(.3) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 1; border-radius: 14px; background: radial-gradient(circle at 50% 35%, #fff6dc, #d9bd8a); border: 3px solid #b9924f; display: grid; place-items: center; align-content: center; cursor: pointer; gap: 2px; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.slot.sel { border-color: #2f78d8; box-shadow: 0 0 0 3px rgba(47,120,216,.35), inset 0 2px 6px rgba(0,0,0,.25); }
.slot small { font-size: 10px; color: var(--mute); text-align: center; line-height: 1.1; padding: 0 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot .empty { font: 400 24px var(--disp); color: #b9924f; }
.slot .en { position: absolute; top: 4px; left: 6px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #5a331a; }
.detail { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #fff6dc; border: 3px solid var(--rc, #d9bd8a); }
.detail .iconbox { width: 72px; height: 72px; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #fff, #e2c58f); display: grid; place-items: center; flex: 0 0 auto; }
.detail .dinfo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.detail .dinfo b { font: 400 17px var(--disp); } .detail .dinfo small { color: var(--mute); font-size: 12px; }
.detail .skl { background: rgba(0,0,0,.05); border-radius: 8px; padding: 4px 8px; font-size: 12px; } .detail .skl b { font: 700 12px var(--body); }
.lock { text-align: center; padding: 40px 10px; font: 400 20px var(--disp); color: var(--mute); }
.list { display: grid; gap: 6px; }
.gachabox { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(#2c1f3f, #1a1030); color: #fff; border: 3px solid #7a4aa8; box-shadow: inset 0 0 30px rgba(180,120,255,.25); }
.gachabox .glv { display: flex; align-items: center; gap: 8px; font: 400 15px var(--disp); }
.gachabox .glv .bar { flex: 1; height: 12px; } .gachabox .glv .bar i { background: linear-gradient(#ffe07a, #e39b1b); } .gachabox .glv .bar span { line-height: 12px; }
.ratelist { display: grid; gap: 3px; background: rgba(0,0,0,.25); border-radius: 10px; padding: 6px 10px; }
.ratelist div { display: flex; justify-content: space-between; font-size: 12.5px; } .ratelist div b { color: var(--rc); font: 400 13px var(--disp); }
.pity { font-size: 11.5px; color: #d9c9ff; }
.statrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper2); border: 2px solid #d9bd8a; }
.statrow .sv { display: grid; } .statrow .sv b { font: 400 15px var(--disp); } .statrow .sv small { color: var(--mute); font-size: 11.5px; }
.statrow .btns .gbtn { min-height: 32px; padding: 4px 10px; }
.goldrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: linear-gradient(#fff6dc, #eedbb3); border: 3px solid #e39b1b; }
.goldrow.locked { border-color: #c9a86a; opacity: .6; } .goldrow.maxed { border-color: #8fd36b; }
.goldrow .title { font: 400 15px var(--disp); display: flex; gap: 8px; align-items: baseline; } .goldrow .title small { color: var(--mute); font: 400 11px var(--body); }
.goldrow .lvs { display: flex; align-items: center; gap: 8px; font: 400 14px var(--disp); margin-top: 2px; flex-wrap: wrap; } .goldrow .lvs .arr { color: var(--gold2); } .goldrow .lvs .to { color: #2f8f22; }
.goldrow .eff { font-size: 11.5px; color: var(--mute); }
.goldrow .gbtn { min-width: 120px; }
.multsel { display: flex; align-items: center; gap: 6px; background: linear-gradient(#8a512a, #5a331a); border: 2px solid #3a1d0a; border-radius: 12px; padding: 6px 10px; color: #ffe7b0; font: 400 14px var(--disp); }
.multsel .sp { flex: 1; } .multsel .gbtn { min-height: 30px; padding: 3px 12px; }
.petcard { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper2); border: 2px solid #d9bd8a; }
.petcard .iconbox { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #e2c58f); display: grid; place-items: center; border: 2px solid #b9924f; flex: 0 0 auto; }
.petcard.on { border-color: #3f9d2a; background: #e6f7df; }
.kv { display: flex; gap: 6px; flex-wrap: wrap; } .kv span { background: #fff6dc; border: 1px solid #d9bd8a; border-radius: 8px; padding: 2px 8px; font-size: 12px; }
.attend { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.attend div { aspect-ratio: 1; border-radius: 10px; border: 2px solid #d9bd8a; background: var(--paper2); display: grid; place-items: center; align-content: center; gap: 2px; font: 400 12px var(--disp); }
.attend div.got { background: #e6f7df; border-color: #8fd36b; } .attend div.today { border-color: #e39b1b; box-shadow: 0 0 0 2px rgba(227,155,27,.4); }
.attend div b { color: #2f78d8; display: inline-flex; align-items: center; gap: 2px; }
input[type=range] { width: 100%; accent-color: #e39b1b; }
.seg { display: inline-flex; border: 2px solid #5a331a; border-radius: 10px; overflow: hidden; } .seg button { border: 0; background: #e2c58f; color: #5a331a; padding: 6px 14px; font: 400 13px var(--disp); } .seg button[aria-selected="true"] { background: linear-gradient(#9df07a, #3f9d2a); color: #0a2a05; }
@media (max-width: 700px) {
  .hud.top { flex-wrap: nowrap; gap: 4px; }
  .heroinfo { width: 140px; } .herocard { padding-right: 8px; }
  .plaque { padding: 2px 4px; } .plaquebody { min-width: 86px; } .plaquebody b { font-size: 14px; } .plaquebody small { font-size: 9.5px; } .plaque .gbtn.small { display: none; }
  .cur { min-width: 86px; font-size: 12px; padding: 1px 8px 1px 3px; }
  .questcard { width: 160px; padding: 5px 8px; gap: 2px; }
  .questcard b { font-size: 12px; } .questcard small { font-size: 9.5px; } .questcard .reward { font-size: 10.5px; }
  #bossBar { top: 150px; width: 80vw; }
  .skillcluster { width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; }
  .skillcluster .sk, .skillcluster .sk[data-i], .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .bombbtn { position: relative; left: auto; right: auto; bottom: auto; top: auto; transform: none; }
  .skillcluster { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 4px; height: auto; width: 100%; }
  .cleanmode .autobtn.big { left: auto; }
  .sk { width: 46px; height: 46px; } .sk .cdt { font-size: 13px; } .skillcluster .autobtn.big { width: 46px; height: 46px; } .skillcluster #autoS { width: 42px; height: 46px; }
  .mi { width: 56px; } .mi .circ { width: 40px; height: 40px; } .dock { justify-content: flex-start; }
  .sheet { border-width: 4px; } .sheetbody { padding: 10px 8px 16px; } .grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .slots { gap: 4px; } .slot .ico { width: 32px !important; height: 32px !important; }
  .grid.five .item .iconbox { width: 40px; height: 40px; } .grid.five .item b { font-size: 10px; }
  .logo .l1 { font-size: 56px; } .logo .l2 { font-size: 66px; }
}

/* ───── 던전 카드 · 박멸 던전 ───── */
.dcard { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: linear-gradient(#fff6dc, #eedbb3); border: 2px solid #d9bd8a; }
.dcard .dico { width: 56px; height: 56px; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #fff, #e2c58f); display: grid; place-items: center; border: 2px solid #b9924f; flex: 0 0 auto; }
.dcard .dinfo { flex: 1; min-width: 0; } .dcard .dinfo b { font: 400 16px var(--disp); } .dcard .dinfo b small { color: var(--mute); font: 400 11px var(--body); margin-left: 4px; }
.dcard .dinfo p { margin: 2px 0 4px; font-size: 12px; color: var(--mute); line-height: 1.4; }
.cleanhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(#8a512a, #5a331a); color: #ffe7b0; border: 2px solid #3a1d0a; }
.cleanhead b { font: 400 16px var(--disp); display: block; } .cleanhead small { font-size: 11px; color: #e2c58f; }
.cleangrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.block { position: relative; display: grid; gap: 3px; padding: 8px 6px; border-radius: 10px; border: 3px solid var(--bc); background: linear-gradient(#fff6dc, #e2c58f); cursor: pointer; text-align: center; min-width: 0; transition: transform .06s; }
.block:active { transform: scale(.95); }
.block b { font: 400 12px var(--disp); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .block .hits { font: 400 13px var(--disp); color: var(--bc); } .block small { font-size: 9.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block .bar { height: 6px; } .block .bar i { background: var(--bc); }
.block.g4 { box-shadow: 0 0 10px rgba(138,79,201,.6); } .block.g3 { box-shadow: 0 0 8px rgba(224,160,64,.5); }
.req { display: inline-block; font: 400 10.5px var(--body); color: #c4291c; background: #fff0ec; border: 1px solid #f0b0a0; border-radius: 6px; padding: 1px 6px; }
.req.ok { color: #2f8f22; background: #e6f7df; border-color: #8fd36b; }
@media (max-width: 700px) { .cleangrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dcard { flex-wrap: wrap; } }

@media (min-width: 900px) { .logo { left: 22%; } .tapstart { left: 22%; transform: translateX(-50%); } }

/* ───── 던전 풀뷰 ───── */
.sheet.wide { width: min(100%, 980px); }
.dgfull { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: stretch; flex: 1 1 auto !important; min-height: 0; }
.dglist { overflow-y: auto; min-height: 0; align-content: start; }
.dglist { display: grid; gap: 8px; }
.dgcard { position: relative; display: flex; gap: 8px; align-items: center; border-radius: 10px; border: 3px solid #b9924f; background: #2a1e14; cursor: pointer; overflow: hidden; height: 72px; }
.dgcard.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,213,74,.6); }
.dgcard .dgimg { width: 110px; height: 100%; background: var(--img) center/cover, #3a2a1c; flex: 0 0 auto; }
.dgcard .dgmeta { display: grid; gap: 1px; color: #fff; min-width: 0; flex: 1; }
.dgcard b { font: 400 15px var(--disp); } .dgcard small { font-size: 10.5px; color: #e2c58f; } .dgcard .dgleft { font: 400 12px var(--disp); color: #9df07a; }
.dgdetail { position: relative; border-radius: 14px; overflow: hidden; border: 3px solid #b9924f; background: #1a1210; color: #fff; display: flex; flex-direction: column; }
.dgdetail .dgart { background: var(--img) center 30%/cover, #2a1e14; flex: 1 1 auto; min-height: 200px; }
.dgdetail .dgbody { padding: 12px 14px 14px; background: linear-gradient(rgba(26,18,16,0), #1a1210 30%); display: grid; gap: 8px; margin-top: -70px; }
.dgtitle b { font: 400 26px var(--disp); color: #ffe07a; text-shadow: 0 2px 0 #000; } .dgtitle small { margin-left: 8px; color: #e2c58f; }
.dgdetail p { margin: 0; font-size: 13px; color: #e2d6c0; line-height: 1.5; }
.dgdetail .kv span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; } .dgdetail .kv span b { color: #9df07a; }
.zone { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.35); border-radius: 10px; padding: 4px 8px; }
.zone b { font: 400 18px var(--disp); color: #ffe07a; min-width: 70px; text-align: center; }
.zone .arrow { width: 34px; height: 30px; border: 0; border-radius: 8px; background: linear-gradient(#ffe07a, #e39b1b); color: #4a2a10; font-size: 13px; } .zone .arrow:disabled { filter: grayscale(1); opacity: .4; }
.zone small { color: #cfd8d6; font-size: 11px; }
@media (max-width: 899px) { .dgdetail .dgart { flex: 0 0 auto; min-height: 0; height: 130px; } .dgdetail .dgbody { margin-top: -40px; } .dgtitle b { font-size: 20px; } }

/* ───── 박멸 던전 HUD ───── */
.bombbtn { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; border: 4px solid #1b4a78; background: radial-gradient(circle at 40% 35%, #bfe8ff, #2f78d8 70%); color: #fff; font: 400 16px var(--disp); text-shadow: 0 2px 0 #1b4a78; box-shadow: 0 5px 0 #0f2d4a, 0 0 18px rgba(79,168,255,.6); display: none; place-items: center; }
.bombbtn small { display: block; font-size: 11px; }
.bombbtn:active { transform: translateX(-50%) translateY(3px); }
.cleanmode .bombbtn { display: grid; } .cleanmode .skillcluster .sk, .cleanmode #autoS { display: none; }
.cleanmode .autobtn.big { left: calc(50% + 90px); }
#exitBtn { display: none; } .cleanmode #exitBtn { display: inline-block; }
@media (max-width: 700px) { .bombbtn { position: static; transform: none; width: 64px; height: 64px; } .cleanmode .autobtn.big { position: static; } .cleanmode .skillcluster { justify-content: center; gap: 12px; } }

/* ───── 상점 풀뷰 (세로 탭 + 대형 배너) ───── */
.shopfull { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; flex: 1 1 auto !important; min-height: 0; }
.vtabs { display: grid; gap: 6px; align-content: start; }
.vtab { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 2px solid #5a331a; background: linear-gradient(#8a512a, #5a331a); color: #ffe7b0; font: 400 11px var(--disp); box-shadow: 0 3px 0 #2a1308; }
.vtab .circ { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff6dc, #e2c58f 60%, #b9924f); border: 2px solid #5a331a; display: grid; place-items: center; }
.vtab.on { background: linear-gradient(#ffe07a, #e39b1b); color: #4a2a10; box-shadow: 0 3px 0 #8a5a1a, 0 0 12px rgba(255,213,74,.6); }
.shopmain { display: grid; gap: 8px; min-width: 0; }
.bigbanner { position: relative; border-radius: 14px; overflow: hidden; border: 3px solid #b9924f; background: #1a1210; color: #fff; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; }
.bigbanner.small { min-height: 150px; }
.bigbanner .bnart { position: absolute; inset: 0; background: var(--img) center/cover, #2a1e14; }
.bigbanner .bnart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,8,.85) 0%, rgba(20,12,8,.35) 45%, rgba(20,12,8,0) 70%), linear-gradient(rgba(20,12,8,0) 55%, rgba(20,12,8,.9)); }
.bntop { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 14px; gap: 8px; }
.bntitle small { display: block; font: 400 12px var(--disp); color: #ffe07a; } .bntitle b { display: block; font: 400 30px/1.1 var(--disp); text-shadow: 0 3px 0 #000, 0 0 16px rgba(0,0,0,.6); } .bntitle span { display: block; font-size: 12px; color: #e2d6c0; margin-top: 4px; text-shadow: 0 1px 0 #000; }
.bnside { display: grid; gap: 6px; justify-items: end; }
.ratepanel { position: relative; margin: 0 14px; background: rgba(0,0,0,.6); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; }
.buyrow { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 14px; }
.buyrow .glvbar { flex: 1; } .buyrow .glvbar .bar { height: 14px; border: 2px solid #3a1d0a; } .buyrow .glvbar .bar i { background: linear-gradient(#ffe07a, #e39b1b); } .buyrow .glvbar .bar span { line-height: 12px; font-size: 10px; }
.gbtn.buy { min-width: 128px; min-height: 56px; font-size: 17px; }
.gbtn.buy small { font-size: 12px; }
/* 패널 머리 배너 */
.phead { position: relative; height: 84px; border-radius: 12px; overflow: hidden; border: 3px solid #b9924f; background: #1a1210; color: #fff; display: flex; align-items: center; }
.phead .pheadart { position: absolute; inset: 0; background: var(--img) center 30%/cover; }
.phead .pheadart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,8,.9), rgba(20,12,8,.5) 50%, rgba(20,12,8,.1)); }
.phead .pheadtxt { position: relative; padding: 0 16px; } .phead b { display: block; font: 400 24px var(--disp); text-shadow: 0 2px 0 #000; } .phead span { font-size: 12px; color: #e2d6c0; text-shadow: 0 1px 0 #000; }
/* 관문 배너 */
#gateBanner { position: fixed; left: 50%; top: 34%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: linear-gradient(#5a1208, #2a0804); border: 3px solid var(--gold2); border-radius: 16px; color: #fff; cursor: pointer; z-index: 4; box-shadow: 0 0 24px rgba(255,80,60,.6); animation: glow 1s ease-in-out infinite alternate; }
#gateBanner .gskull { font-size: 30px; color: var(--gold); } #gateBanner b { display: block; font: 400 20px var(--disp); color: #ffe07a; } #gateBanner span { font-size: 12px; color: #ffd0c0; }
#gateBanner em { font: 400 18px var(--disp); font-style: normal; background: linear-gradient(#ffe07a, #e39b1b); color: #4a2a10; border-radius: 10px; padding: 8px 16px; border: 2px solid #5a331a; }
@media (max-width: 700px) {
  .shopfull { grid-template-columns: 1fr; } .vtabs { grid-auto-flow: column; grid-template-columns: repeat(4, 1fr); } .vtab .circ { width: 36px; height: 36px; }
  .bigbanner { min-height: 240px; } .bntitle b { font-size: 24px; } .gbtn.buy { min-width: 0; flex: 1; } .buyrow { flex-wrap: wrap; } .buyrow .glvbar { flex-basis: 100%; }
  .phead { height: 64px; } .phead b { font-size: 19px; }
  #gateBanner { width: calc(100% - 24px); top: 30%; } #gateBanner span { display: none; }
  .plaque .gbtn.small { display: inline-block; }
}

/* ───── v4 레이아웃: 좌측 열(프로필·체험·퀘스트), 중앙 플라크, 우측 열(지갑·상단 메뉴·버프) ───── */
.leftcol { display: grid; gap: 6px; align-content: start; justify-items: start; }
.rightcol { margin-left: auto; display: grid; gap: 6px; justify-items: end; align-content: start; }
.hud.top { justify-content: space-between; }
.plaque { align-self: start; flex-direction: column; padding: 6px 8px 6px; gap: 2px; }
.plaque > .arrow { display: none; }
.plaquebody { cursor: pointer; min-width: 200px; } .plaquebody:hover b { color: #fff; }
.plaquebtns { display: flex; gap: 4px; justify-content: center; }
.herocard { cursor: pointer; border-radius: 40px 14px 14px 40px; }
.questcard { position: static; width: 230px; }
.trialcard { width: 230px; background: linear-gradient(90deg, #2f8f22, #1a5a12); border: 2px solid #8fd36b; border-radius: 10px; padding: 5px 10px; cursor: pointer; display: grid; line-height: 1.2; box-shadow: 0 0 12px rgba(79,194,60,.4); }
.trialcard small { font-size: 10px; color: #d9f5c9; } .trialcard b { font: 400 14px var(--disp); color: #fff; }
.trialcard.off { background: linear-gradient(90deg, #5a5a5a, #2c2c2c); border-color: #888; box-shadow: none; }
.buffs { align-items: flex-end; }
.topmenu { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
.tm { position: relative; width: 52px; border: 0; background: transparent; padding: 0; display: grid; justify-items: center; gap: 1px; }
.tm .circ { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff6dc, #e2c58f 60%, #b9924f); border: 2px solid #5a331a; display: grid; place-items: center; box-shadow: 0 2px 0 #3a1d0a; }
.tm span:not(.circ) { font: 400 10px var(--disp); color: #ffe7b0; text-shadow: 0 1px 0 #000; }
.tm.locked .circ { filter: grayscale(1) brightness(.6); } .tm.soon .circ { filter: grayscale(.6); } .tm.soon::after { content: '준비중'; position: absolute; top: -2px; right: 0; font: 400 8px var(--disp); background: #c4291c; color: #fff; border-radius: 6px; padding: 0 4px; }
.tm .dot { position: absolute; top: 0; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ff4a4a; border: 2px solid #fff; display: none; } .tm.badge .dot { display: block; }
.feed { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; z-index: 3; will-change: transform; }
.frow { display: inline-flex; align-items: center; gap: 5px; background: rgba(10,14,18,.78); border: 1px solid rgba(255,214,120,.4); border-radius: 8px; padding: 2px 8px; font: 400 12px var(--disp); color: #ffe7b0; animation: feedin .28s ease-out; transition: opacity .3s; }
.frow b { color: #9df07a; } @keyframes feedin { from { opacity: 0; } to { opacity: 1; } }
/* 결과 화면 */
.overlay.result { display: grid; z-index: 22; background: rgba(5,8,16,.72); }
.resultbox { width: min(100%, 520px); background: var(--paper); color: var(--ink); border: 6px solid var(--wood); border-radius: 18px; box-shadow: 0 0 0 3px #3a1d0a, 0 12px 30px rgba(0,0,0,.6); overflow: hidden; animation: pop .25s cubic-bezier(.2,1.4,.5,1); }
.rhead { padding: 18px 16px 14px; text-align: center; color: #fff; background: linear-gradient(#2f8f22, #1a5a12); }
.rhead.lose { background: linear-gradient(#8a3a2a, #4a1a10); }
.rhead small { font: 400 13px var(--disp); color: #d9f5c9; } .rhead b { display: block; font: 400 30px var(--disp); text-shadow: 0 3px 0 #000; margin: 2px 0; } .rhead span { font-size: 12.5px; color: #e2f0da; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 14px; }
.ritem { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--paper2); border: 2px solid #d9bd8a; animation: reveal .35s cubic-bezier(.2,1.4,.5,1) both; }
.ritem b { font: 400 12px var(--disp); } .ritem span { font: 400 16px var(--disp); color: #2f8f22; }
.rbtns { display: flex; gap: 8px; padding: 0 14px 16px; } .rbtns .gbtn { flex: 1; min-height: 50px; font-size: 16px; }
/* 스테이지 선택 */
.stagegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stagecard { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: var(--paper2); border: 2px solid #d9bd8a; cursor: pointer; }
.stagecard.cur { border-color: #e39b1b; background: #fff1cf; } .stagecard.locked { opacity: .5; cursor: default; }
.stagecard .sico { width: 52px; height: 52px; border-radius: 10px; background: #fff6dc; display: grid; place-items: center; flex: 0 0 auto; }
.stagecard .sinfo { flex: 1; min-width: 0; display: grid; } .stagecard b { font: 400 14px var(--disp); } .stagecard b em { font-style: normal; font-size: 10px; background: #c4291c; color: #fff; border-radius: 6px; padding: 0 5px; margin-left: 4px; } .stagecard small { font-size: 10.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 패키지 */
.packgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pack { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: linear-gradient(#fff6dc, #eedbb3); border: 3px solid #e39b1b; }
.pack.owned { border-color: #8fd36b; opacity: .8; } .pack .ptitle b { font: 400 17px var(--disp); display: block; } .pack .ptitle small { color: var(--mute); font-size: 11px; }
.pack p { margin: 0; font-size: 12px; color: var(--mute); } .pack ul { margin: 0; padding-left: 16px; font-size: 12px; } .pack .gbtn { margin-top: 4px; }
.skinbox canvas { display: block; }
@media (max-width: 700px) {
  .leftcol { gap: 4px; } .herocard { padding-right: 6px; gap: 4px; } .portrait { width: 44px; height: 44px; } .portrait canvas { width: 38px; height: 38px; }
  .trialcard, .questcard { width: 150px; } .trialcard small { font-size: 9px; } .trialcard b { font-size: 12px; } .questcard .reward { display: none; } .questcard .prog { height: 5px; }
  .plaque { position: fixed; left: 50%; top: 4px; transform: translateX(-50%); width: 124px; padding: 3px 4px; z-index: 3; } .plaquebody { min-width: 0; width: 100%; } .plaquebody b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plaquebody small { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plaquebtns { flex-wrap: wrap; } .plaquebtns .gbtn.small { display: inline-block; min-height: 20px; padding: 1px 5px; font-size: 10px; }
  .heroinfo { width: 96px; } .namerow { font-size: 12px; } .namerow .titletag { display: none; } .powerrow { font-size: 10px; } .powerrow b { font-size: 12px; } .bar.hp span { font-size: 8px; }
  .rightcol { gap: 4px; } .wallet { flex-direction: column; gap: 3px; } .cur { min-width: 84px; }
  .topmenu { max-width: 112px; gap: 2px; } .tm { width: 36px; } .tm .circ { width: 32px; height: 32px; } .tm span:not(.circ) { display: none; } .tm.soon::after { font-size: 7px; }
  .buffs { display: none; }
  .feed { bottom: auto; top: 300px; } .frow { font-size: 11px; padding: 1px 6px; }
  .skillcluster { height: auto; } .sk { width: 44px; height: 44px; } .sk .cd { inset: -3px; }
  .dock { justify-content: space-around; } .mi { width: 52px; } .mi .circ { width: 40px; height: 40px; }
  .stagegrid { grid-template-columns: 1fr; } .rgrid { grid-template-columns: repeat(3, 1fr); } .rhead b { font-size: 24px; }
  .sheet.wide { width: 100%; }
}

/* ───── v5: 고정 크기 프로필, 플라크 하향, 퀘스트 우측 하단, AUTO 버튼 ───── */
.herocard { width: 300px; height: 92px; box-sizing: border-box; flex: 0 0 auto; background: linear-gradient(90deg, rgba(10,14,18,.92), rgba(10,14,18,.75)); border: 2px solid var(--hudline); border-left: 4px solid var(--gold2); border-radius: 46px 14px 14px 46px; }
.heroinfo { width: 196px; flex: 0 0 196px; min-width: 0; }
.namerow { white-space: nowrap; overflow: hidden; } .namerow b { overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .namerow .lvtxt { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.powerrow { white-space: nowrap; overflow: hidden; } .powerrow b { font-variant-numeric: tabular-nums; }
.bar.hp span { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.trialcard { width: 300px; height: 40px; box-sizing: border-box; align-content: center; }
.plaque { margin-top: 14px; }
.questcard { position: fixed; top: auto; right: max(10px, env(safe-area-inset-right)); bottom: 168px; width: 236px; z-index: 3; }
.feed { bottom: 300px; }
.autobtn { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #3a1d0a; background: radial-gradient(circle at 50% 35%, #6a6a6a, #2c2c2c 70%); color: #bbb; display: grid; place-items: center; align-content: center; gap: 0; line-height: 1; box-shadow: 0 3px 0 #1a1a1a, 0 0 0 2px #1b0f06; }
.autobtn .aico { position: absolute; top: 6px; font-style: normal; font-size: 12px; opacity: .8; } .autobtn span { font: 400 11px var(--disp); margin-top: 10px; } .autobtn small { font: 400 9px var(--disp); }
.autobtn .led { position: absolute; bottom: 5px; width: 22px; height: 4px; border-radius: 2px; background: #444; }
.autobtn.on { background: radial-gradient(circle at 50% 35%, #b6ff8f, #2f9f22 70%); color: #0a2a05; border-color: #1d5a12; box-shadow: 0 3px 0 #164a0e, 0 0 0 2px #1b0f06, 0 0 14px rgba(79,194,60,.7); }
.autobtn.on .led { background: #e8ffb0; box-shadow: 0 0 6px #b6ff8f; animation: blink 1s ease-in-out infinite alternate; }
.skillcluster .autobtn.big { width: 64px; height: 64px; }
.skillcluster #autoS { left: calc(50% + 44px); bottom: 0; width: 52px; height: 52px; font-size: 9px; }
@media (max-width: 700px) {
  .herocard { width: 170px; height: 64px; border-radius: 34px 10px 10px 34px; padding: 3px 8px 3px 3px; } .heroinfo { width: 112px; flex-basis: 112px; }
  .trialcard { width: 170px; height: 32px; }
  .plaque { margin-top: 0; top: 76px; }
  .questcard { top: auto; right: 8px; bottom: 132px; width: 170px; } .feed { top: auto; bottom: 230px; }
  .skillcluster #autoS, .skillcluster .autobtn.big { left: auto; bottom: auto; transform: none; }
  .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS { width: 48px; height: 48px; } .autobtn span { font-size: 9.5px; margin-top: 8px; } .autobtn small { font-size: 8px; }
}

/* ───── v6: 통일된 창 크기 + 2단 분할 레이아웃 ───── */
.sheetbody.split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; padding: 12px; overflow: hidden; }
.artcol { position: relative; border-radius: 14px; border: 3px solid #b9924f; background: var(--img) center/cover, #1a1210; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.artcol::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20,12,8,0) 40%, rgba(20,12,8,.92)); }
.arttxt { position: relative; padding: 14px; color: #fff; margin-top: auto; }
.arttxt b { display: block; font: 400 28px/1.1 var(--disp); text-shadow: 0 3px 0 #000; } .arttxt span { font-size: 12px; color: #e2d6c0; text-shadow: 0 1px 0 #000; }
.artstats { position: relative; display: grid; gap: 4px; padding: 0 12px 12px; }
.artstats div { display: flex; justify-content: space-between; align-items: baseline; background: rgba(0,0,0,.45); border: 1px solid rgba(255,214,120,.35); border-radius: 8px; padding: 4px 10px; color: #fff; }
.artstats small { font-size: 11px; color: #e2c58f; } .artstats b { font: 400 14px var(--disp); color: #ffe07a; }
.contentcol { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.contentcol > * { flex: 0 0 auto; }
.shopfull { height: 100%; } .shopmain { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.shopmain > .bigbanner { flex: 1 0 auto; min-height: 280px; } .shopmain > .bigbanner.small { flex: 0 0 auto; min-height: 150px; }
.shopmain > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shopmain > .packgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dgfull { height: 100%; }
@media (max-width: 700px) {
  .sheetbody.split { grid-template-columns: 1fr; grid-template-rows: 110px minmax(0, 1fr); } .artcol { flex-direction: row; align-items: flex-end; } .arttxt { padding: 8px 10px; } .arttxt b { font-size: 20px; } .artstats { display: none; }
  .shopmain > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shopmain > .packgrid { grid-template-columns: 1fr; } .shopmain > .bigbanner { min-height: 220px; }
}

/* v6b: 짧은 내용은 세로 가운데, 상점 배너는 남는 높이 채움, 장착 칸 크기 제한 */
.contentcol::before, .contentcol::after { content: ''; flex: 1 1 0; min-height: 0; }
.shopfull { align-items: stretch; } .shopmain { height: auto; min-height: 0; }
.shopmain > .note:last-child { margin-top: auto; }
.slots { grid-template-columns: repeat(5, minmax(0, 150px)); justify-content: center; }
.item .iconbox { width: 60px; height: 60px; }

.bigtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bigtile { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; border-radius: 14px; background: linear-gradient(#fff6dc, #eedbb3); border: 3px solid #d9bd8a; }
.bigtile .iconbox { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #e2c58f); display: grid; place-items: center; }
.bigtile b { font: 400 30px var(--disp); color: #2f8f22; } .bigtile small { font: 400 13px var(--disp); color: var(--mute); }
.bigtile.on { border-color: #8fd36b; box-shadow: 0 0 12px rgba(79,194,60,.35); }

/* v6c: 분할 레이아웃이 모달 높이를 채우도록, 상점 배너 채움, 잠금 안내 가운데 */
.sheetbody.split { grid-template-rows: minmax(0, 1fr); align-items: stretch; height: 100%; }
.sheetbody > .shopfull, .sheetbody > .dgfull { flex: 1 1 auto !important; min-height: 0; }
.shopmain { height: 100%; }
.sheetbody > .lock { flex: 1 1 auto !important; display: grid; place-items: center; align-content: center; font-size: 24px; }

/* v6d: 탭이 없는 창에서도 본문이 남는 높이를 차지하도록 */
.sheethead { grid-row: 1; } .tabs { grid-row: 2; } .sheetbody { grid-row: 3; min-height: 0; }

/* ───── v7 모바일: 메뉴 창은 하단 바텀 시트 (게임 화면 위 45%는 그대로 보임) ───── */
@media (max-width: 700px) {
  .overlay { background: transparent; pointer-events: none; padding: 0; align-items: end; }
  .overlay.show { display: grid; }
  .overlay:not(.result) .sheet { pointer-events: auto; width: 100%; height: 56vh; max-height: none; border-width: 4px 0 0 0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.5); animation: sheetup .22s ease-out; margin-bottom: 0; position: fixed; left: 0; right: 0; bottom: 0; }
  .sheethead { padding: 6px 10px; } .sheethead h3 { font-size: 18px; }
  .tabs { padding: 6px 8px 0; } .tab { padding: 5px 10px; font-size: 13px; }
  .sheetbody { padding: 8px 8px 72px; } .sheetbody.split { padding: 8px 8px 72px; grid-template-rows: 90px minmax(0, 1fr); }
  .artcol { height: 90px; } .arttxt b { font-size: 18px; } .arttxt span { display: none; }
  .hud.bottom { z-index: 21; }
  .dock { position: relative; }
  .overlay.result { pointer-events: auto; background: rgba(5,8,16,.72); align-items: center; padding: 10px; }
  @keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .statrow { padding: 6px 8px; } .statrow .sv b { font-size: 14px; } .statrow .btns .gbtn { min-height: 28px; padding: 3px 8px; font-size: 12px; }
  .goldrow { padding: 6px 8px; } .goldrow .gbtn { min-width: 96px; min-height: 34px; font-size: 13px; }
  .shopfull { grid-template-rows: auto minmax(0, 1fr); height: 100%; } .vtabs { grid-template-columns: repeat(5, 1fr); } .vtab { padding: 3px 2px; font-size: 9.5px; } .vtab .circ { width: 32px; height: 32px; }
  .shopmain > .bigbanner { min-height: 170px; flex: 0 0 auto; } .bntitle b { font-size: 20px; } .gbtn.buy { min-height: 44px; font-size: 14px; }
  .dgfull { grid-template-columns: 1fr; } .sheet.wide { width: 100%; }
}

@media (max-width: 700px) {
  /* 바텀 시트가 열리면 스킬 줄을 숨기고 독 바로 위까지 시트를 붙인다 (참고 게임 방식) */
  .panelopen .skillcluster, .panelopen .questcard, .panelopen .feed, .panelopen #gateBanner { display: none !important; }
  .overlay:not(.result) .sheet { bottom: 84px; height: 54vh; }
  .sheetbody { padding: 8px 8px 12px; } .sheetbody.split { padding: 8px 8px 12px; grid-template-rows: minmax(0, 1fr); } .artcol { display: none; }
  .phead { display: none; }
}

/* ───── v8 HUD: 배경 없는 텍스트+외곽선 스타일 ───── */
.herocard, .herocard:hover { width: auto; height: auto; background: none; border: 0; padding: 0; gap: 8px; box-shadow: none; }
.portrait { width: 56px; height: 56px; border: 3px solid var(--gold2); box-shadow: 0 0 0 2px #2a1308, 0 2px 8px rgba(0,0,0,.6); }
.portrait canvas { width: 50px; height: 50px; }
.heroinfo { width: 170px; flex-basis: 170px; gap: 3px; }
.namerow { font: 400 18px/1.1 var(--disp); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; }
.namerow .lvtxt { color: #ffe07a; } .namerow b { color: #fff; max-width: 100px; } .namerow .titletag { color: #9fd3ff; }
.bar { border: 2px solid #1a1208; border-radius: 4px; background: #0b1315; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.bar.hp { height: 12px; } .bar.mp { height: 12px; } .bar.xp { height: 6px; }
.bar.hp span { font-size: 9px; line-height: 10px; text-align: right; padding-right: 4px; }
.stats { display: grid; gap: 2px; justify-items: start; margin-top: 2px; }
.stat { display: inline-flex; align-items: center; gap: 6px; font: 400 17px/1 var(--disp); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; font-variant-numeric: tabular-nums; }
.stat b { font-weight: 400; } .stat.powerrow b { color: #fff; font-size: 17px; }
.stat .ico { filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px #000); }
.stat.gem { cursor: pointer; } .stat .plus { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(#9df07a, #2f9f22); color: #0a2a05; font-size: 13px; line-height: 16px; text-align: center; text-shadow: none; border: 1px solid #0a2a05; margin-left: 2px; }
.wallet { display: none; }
.trialcard { width: 236px; height: 34px; background: linear-gradient(90deg, rgba(47,143,34,.9), rgba(26,90,18,.6)); border: 0; border-left: 3px solid #9df07a; border-radius: 6px; padding: 3px 10px; box-shadow: none; }
.trialcard small { font-size: 9.5px; } .trialcard b { font-size: 13px; text-shadow: 0 1px 0 #000; }
.trialcard.off { background: linear-gradient(90deg, rgba(60,60,60,.85), rgba(30,30,30,.5)); border-left-color: #999; }
.plaque { background: linear-gradient(rgba(10,14,18,.78), rgba(10,14,18,.62)); border: 2px solid rgba(255,214,120,.45); box-shadow: 0 4px 12px rgba(0,0,0,.4); border-radius: 12px; }
.topmenu { background: rgba(10,14,18,.55); border: 1px solid rgba(255,214,120,.25); border-radius: 14px; padding: 6px 4px 4px; max-width: 232px; gap: 2px; }
.tm { width: 54px; } .tm .circ { width: 42px; height: 42px; background: none; border: 0; box-shadow: none; } .tm .circ .ico { filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); width: 36px !important; height: 36px !important; }
.tm span:not(.circ) { font-size: 10.5px; }
.tm.locked .circ { filter: grayscale(1) brightness(.5); }
.buffs { margin-top: 4px; }
.buff { background: rgba(10,14,18,.6); border: 1px solid var(--bc, #fff); }
.sk { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.22), rgba(10,14,18,.55) 70%); border: 3px solid rgba(255,255,255,.55); box-shadow: 0 3px 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.4); }
.sk.ready { border-color: var(--ring, #fff); box-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 14px var(--ring, #fff); }
.sk .num { color: #fff; font-size: 11px; }
.sk .cd { background: conic-gradient(rgba(0,0,0,.72) calc(var(--cd, 0) * 1%), transparent 0); }
.autobtn { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.25), rgba(10,14,18,.6) 70%); border: 3px solid rgba(255,255,255,.55); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.6); }
.autobtn .led { background: rgba(255,255,255,.25); }
.autobtn.on { background: radial-gradient(circle at 50% 40%, #b6ff8f, #2f9f22 70%); border-color: #e8ffb0; color: #0a2a05; }
.dock { background: linear-gradient(rgba(138,81,42,.92), rgba(74,37,16,.95)); border-color: rgba(58,29,10,.9); }
.mi .circ { background: none; border: 0; box-shadow: none; width: 46px; height: 46px; } .mi .circ .ico { filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); width: 40px !important; height: 40px !important; }
.mi span:not(.circ) { font-size: 12px; }
.feed { bottom: 300px; }
@media (max-width: 700px) {
  .herocard { width: auto; height: auto; padding: 0; } .portrait { width: 46px; height: 46px; } .portrait canvas { width: 40px; height: 40px; }
  .heroinfo { width: 118px; flex-basis: 118px; } .namerow { font-size: 14px; } .stat { font-size: 14px; } .stat.powerrow b { font-size: 14px; }
  .trialcard { width: 170px; height: 30px; }
  .topmenu { max-width: 108px; padding: 3px 2px; } .tm { width: 34px; } .tm .circ { width: 30px; height: 30px; } .tm .circ .ico { width: 26px !important; height: 26px !important; }
  .mi .circ { width: 40px; height: 40px; } .mi .circ .ico { width: 34px !important; height: 34px !important; }
  .plaque { top: 100px; }
}

/* v8b */
.heroinfo { width: 200px; flex-basis: 200px; } .namerow b { max-width: none; } .namerow .titletag { display: none; }
@media (max-width: 700px) { .heroinfo { width: 130px; flex-basis: 130px; } .namerow { font-size: 13px; } .plaque { top: 164px; } }

/* v9: 하단 독 배경 제거 (사용자 요청) */
.dock, .dock:hover { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 4px 6px 2px; }
.mi span:not(.circ) { text-shadow: 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000; }

.pack .timer { font: 400 10px var(--disp); font-style: normal; background: #c4291c; color: #fff; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
/* v9b: 드랍 피드 배경 제거, 외곽선 텍스트 */
.frow, .frow:hover { background: none; border: 0; padding: 0 2px; font-size: 13px; color: #ffe7b0; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; }
.frow b { color: #9df07a; } .frow .ico { filter: drop-shadow(0 1px 0 #000); }

/* v10 설정: 볼륨 슬라이더 */
.volrow { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; color: #5a331a; }
.volrow input[type=range] { width: 100%; accent-color: #e0862b; }
.volrow .lk { text-align: right; font-variant-numeric: tabular-nums; }

/* ───── v11 다이나믹: 피버 테두리, 경험치 임박, 빨간 점, 보고서, 퀘스트 팝 ───── */
body.fever::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, rgba(255,160,40,0) 55%, rgba(255,150,40,.55) 100%); will-change: opacity; animation: feverglow .45s ease-in-out infinite alternate; }
@keyframes feverglow { from { opacity: .55; } to { opacity: 1; } }
.bar.xp.soon i { animation: xpblink .5s ease-in-out infinite alternate; will-change: opacity; } @keyframes xpblink { from { opacity: .6; } to { opacity: 1; } }
.tm.dot .circ::after, .mi.dot .circ::after { content: ''; position: absolute; top: 2px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a8a, #d81818); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tm .circ, .mi .circ { position: relative; }
.report { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: 150px; width: 250px; background: linear-gradient(#1f3a2c, #10241a); border: 2px solid #8fd3a0; border-radius: 12px; padding: 8px 12px; color: #fff; display: grid; gap: 2px; transform: translateX(-120%); opacity: 0; transition: transform .45s cubic-bezier(.2,1.2,.3,1), opacity .3s; z-index: 4; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.report.show { transform: none; opacity: 1; }
.report small { color: #b7f0c4; font-size: 10.5px; } .report b { font: 400 14px/1.2 var(--disp); } .report span { font-size: 11.5px; color: #d8e8dc; } .report em { font-style: normal; color: #9fd4ff; font: 400 12px var(--disp); }
.questcard.pop { animation: qpop .6s cubic-bezier(.2,1.4,.3,1); } @keyframes qpop { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 24px #9fd4ff; } 100% { transform: scale(1); } }
@media (max-width: 700px) { .report { bottom: 170px; width: 200px; left: 8px; } body.panelopen .report { display: none; } }

/* ───── v11 대시 버튼 · 반응 하이라이트 ───── */
.skillcluster .dashbtn { position: absolute; left: calc(50% - 106px); bottom: 0; width: 52px; height: 52px; border-radius: 50%; border: 3px solid rgba(255,255,255,.55); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.25), rgba(10,14,18,.6) 70%); color: #fff; font: 400 12px var(--disp); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.6); padding: 0; cursor: pointer; overflow: hidden; }
.skillcluster .dashbtn .cd { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.7) calc(var(--cd, 0) * 1%), transparent 0); pointer-events: none; }
.skillcluster .dashbtn span { position: relative; text-shadow: 0 1px 0 #000; }
.skillcluster .dashbtn.ready { border-color: #cfe9ff; box-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 12px #9fd4ff; }
.skillcluster .dashbtn:active { transform: translateY(2px); }
.sk.react { animation: reactglow .5s ease-in-out infinite alternate; }
@keyframes reactglow { from { box-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 10px #fff; } to { box-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 26px #ffe36b, 0 0 40px var(--ring, #fff); } }
.cleanmode .dashbtn { display: none; }
@media (max-width: 700px) { .skillcluster .dashbtn { position: relative; left: auto; bottom: auto; width: 44px; height: 44px; font-size: 10px; } }

/* ───── v11 층 특전 선택 ───── */
.perkoffer { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 640px); background: linear-gradient(#3a2a1c, #241810); border: 3px solid var(--gold2); border-radius: 16px; padding: 12px 14px 10px; z-index: 18; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: perkin .35s cubic-bezier(.2,1.3,.3,1); }
@keyframes perkin { from { transform: translate(-50%, -40%) scale(.9); opacity: 0; } }
.perkhead { text-align: center; margin-bottom: 8px; } .perkhead b { display: block; font: 400 20px var(--disp); color: #ffe07a; text-shadow: 0 2px 0 #000; } .perkhead small { color: #e2c58f; font-size: 11.5px; }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.perk { background: linear-gradient(#fff6dc, #f1dcb0); border: 3px solid #8a5a2a; border-radius: 12px; padding: 10px 6px; display: grid; justify-items: center; gap: 4px; cursor: pointer; color: #3a2210; transition: transform .12s; }
.perk:hover { transform: translateY(-3px); border-color: #ffe07a; box-shadow: 0 0 14px #ffe07a; }
.perk i { font-style: normal; font-size: 30px; line-height: 1; } .perk b { font: 400 14px var(--disp); } .perk span { font-size: 11px; color: #5a331a; text-align: center; line-height: 1.3; }
.perktimer { height: 5px; background: #140d08; border-radius: 3px; overflow: hidden; margin-top: 8px; } .perktimer i { display: block; height: 100%; background: linear-gradient(90deg, #ffe07a, #e39b1b); transition: width .3s linear; }
@media (max-width: 700px) { .perkoffer { top: 42%; width: 94vw; padding: 8px; } .perks { gap: 5px; } .perk { padding: 7px 3px; } .perk i { font-size: 24px; } .perk b { font-size: 12px; } .perk span { font-size: 10px; } body.panelopen .perkoffer { display: none !important; } }
.buff .perkt { display: none; }

/* ───── v11 펫 개편 UI ───── */
.petcol { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--paper2); border: 2px solid #d9bd8a; border-radius: 12px; padding: 8px 12px; margin: 6px 0 10px; }
.petcol b { font: 400 15px var(--disp); color: #3a2210; } .petcol span { font-size: 11.5px; color: #5a331a; flex: 1; min-width: 180px; }
.petgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.petbig { background: linear-gradient(#fff9ea, #f1dcb0); border: 3px solid #b9924f; border-radius: 14px; padding: 8px; display: grid; gap: 4px; justify-items: center; text-align: center; position: relative; }
.petbig.main { border-color: #3f9d2a; box-shadow: 0 0 0 2px #9df07a inset; } .petbig.sub { border-color: #2f7fc9; }
.petbig.locked { filter: grayscale(.6) brightness(.85); }
.petart { position: relative; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, var(--ec, #e2c58f) 90%); display: grid; place-items: center; border: 3px solid #b9924f; }
.petart .tag { position: absolute; top: -6px; left: -6px; font: 400 10px var(--disp); font-style: normal; background: linear-gradient(#9df07a, #2f9f22); color: #0a2a05; border-radius: 8px; padding: 2px 7px; border: 2px solid #0a2a05; }
.petart .tag.sub { background: linear-gradient(#9fd4ff, #2f7fc9); color: #061a2a; border-color: #061a2a; }
.petart .stage { position: absolute; bottom: -6px; right: -4px; font: 400 10px var(--disp); background: #3a2210; color: #ffe07a; border-radius: 8px; padding: 2px 6px; }
.petname { display: flex; align-items: center; gap: 5px; } .petname b { font: 400 16px var(--disp); color: #3a2210; } .petname i { font-style: normal; font-size: 10px; color: #fff; border-radius: 6px; padding: 1px 6px; text-shadow: 0 1px 0 #000; }
.stars { color: #e39b1b; font-size: 14px; letter-spacing: 1px; } .stars span { color: #c9b89a; }
.petbig small { font-size: 10.5px; color: #5a331a; line-height: 1.3; } .petbig small.dim { color: #9a8a6a; }
.petskill { background: rgba(58,34,16,.08); border-radius: 8px; padding: 4px 6px; font-size: 10.5px; color: #3a2210; width: 100%; } .petskill b { color: #c9541c; font: 400 12px var(--disp); } .petskill span { display: block; color: #5a331a; }
.petbig .btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 700px) { .petgrid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .petart { width: 76px; height: 76px; } .petbig { padding: 6px; } }
.discover { position: fixed; left: 50%; top: 170px; transform: translate(-50%, -30px) scale(.9); opacity: 0; display: flex; align-items: center; gap: 12px; background: linear-gradient(#3a2a1c, #241810); border: 3px solid #ffe07a; border-radius: 14px; padding: 8px 16px 8px 10px; color: #fff; z-index: 6; pointer-events: none; transition: transform .4s cubic-bezier(.2,1.3,.3,1), opacity .3s; box-shadow: 0 0 24px rgba(255,224,122,.5); }
.discover.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.discover small { color: #ffe07a; font-size: 10.5px; display: block; } .discover b { font: 400 17px var(--disp); display: block; } .discover span { font-size: 11.5px; color: #e2c58f; } .discover i { font-style: normal; }
@media (max-width: 700px) { .discover { top: 128px; width: 92vw; } body.panelopen .discover { display: none; } }

/* ───── v11 이모지 → 스프라이트 ───── */
.aico { display: grid; place-items: center; line-height: 1; } .aico .ico { filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.buff .ico { vertical-align: -3px; margin-right: 2px; }
.lock .ico, .lk .ico, .lvtxt .ico, .row .ico { vertical-align: -3px; }
.perk i .ico { filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
#bossBar .skull .ico, #gateBanner .gskull .ico { filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }

/* ───── v12 HUD 프레임: 게임 아트 9-slice (assets/final/ui, tools/uiframes.py) ───── */
.plaque { position: relative; background: none; box-shadow: none; border-radius: 0; border-style: solid; border-color: transparent; border-width: 16px 18px; border-image: url(../assets/final/ui/plaque.png?v=2) 70 78 fill / 16px 18px stretch; padding: 2px 6px 4px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.plaque::before { content: ''; position: absolute; left: 50%; top: -30px; width: 66px; height: 32px; transform: translateX(-50%); background: url(../assets/final/ui/plaque-crest.png?v=2) center bottom / contain no-repeat; pointer-events: none; }
.plaquebody b { color: #ffe7a0; font-size: 17px; text-shadow: 0 2px 0 #06101e, 0 0 6px rgba(120,180,255,.35); letter-spacing: .3px; }
.plaquebody small { color: #b9cfe8; }
.plaque .gbtn.small { box-shadow: 0 2px 0 #06101e; }
.questcard { background: none; border-style: solid; border-color: transparent; border-width: 22px 14px 14px; border-image: url(../assets/final/ui/quest.png?v=2) 96 60 60 fill / 22px 14px 14px stretch; border-radius: 0; padding: 0 6px 2px; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.questcard::before { content: ''; position: absolute; left: 50%; top: -24px; width: 34px; height: 22px; transform: translateX(-50%); background: url(../assets/final/ui/quest-gem.png?v=2) center / contain no-repeat; pointer-events: none; }
.questcard small { position: absolute; top: -18px; left: 10px; right: calc(50% + 22px); color: #4a2a08; font: 400 10.5px var(--disp); text-shadow: 0 1px 0 rgba(255,240,190,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.questcard b { margin-top: 2px; color: #fff; text-shadow: 0 2px 0 #06101e; }
.questcard .prog { height: 14px; background: none; border: 0; border-radius: 0; overflow: visible; border-style: solid; border-color: transparent; border-width: 5px 9px; border-image: url(../assets/final/ui/bar.png?v=2) 30 44 fill / 5px 9px stretch; position: relative; }
.questcard .prog i { position: absolute; left: -3px; top: -1px; bottom: -1px; max-width: calc(100% + 6px); border-radius: 4px; background: linear-gradient(#ffe98a, #e8a21e 60%, #c97a0a); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.questcard .reward { color: #b9cfe8; }
.questcard.done { border-color: transparent; animation: none; filter: drop-shadow(0 0 10px rgba(255,224,122,.9)) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.buff { background: none; border-style: solid; border-color: transparent; border-width: 6px 14px; border-image: url(../assets/final/ui/pill.png?v=2) 66 86 fill / 6px 14px stretch; border-radius: 0; padding: 0 2px; min-height: 12px; color: #fff; text-shadow: 0 1px 0 #06101e; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.buff i { height: 6px; background: #06101e; border: 1px solid rgba(255,214,120,.6); box-sizing: content-box; }
.buff i b { background: var(--bc, #ffe07a); box-shadow: 0 0 4px var(--bc, #ffe07a); }
.buff em { color: #ffe7a0; }
@media (max-width: 700px) { .plaque { position: fixed; border-width: 10px 12px; border-image-width: 10px 12px; width: 150px; padding: 0 2px 2px; } .plaque::before { top: -20px; width: 44px; height: 22px; } .plaquebody b { font-size: 13px; } .questcard small { font-size: 9.5px; left: 6px; right: calc(50% + 12px); letter-spacing: -.3px; } }

/* ───── v13 메타 UI: 사이드 퀵 아이콘 · 돌파 버튼 · 스토리 · 여정 · 시즌 패스 · 리그 · 도전 ───── */
.sidecol { position: fixed; z-index: 4; display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.sidecol.left { left: max(10px, env(safe-area-inset-left)); top: 214px; }
.sidecol.right { right: max(10px, env(safe-area-inset-right)); top: 240px; }
.sideb { pointer-events: auto; position: relative; width: 70px; display: grid; justify-items: center; gap: 0; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; }
.sideb .ico { filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); transition: transform .12s; }
.sideb:hover .ico { transform: translateY(-2px) scale(1.05); }
.sideb b { font: 400 12.5px/1.1 var(--disp); text-shadow: 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -1px 0 #000; margin-top: -4px; white-space: nowrap; }
.sideb small { font: 400 10.5px var(--disp); color: #fff; background: rgba(10,14,18,.72); border-radius: 8px; padding: 1px 6px; margin-top: 1px; white-space: nowrap; }
.sideb.dot::after { content: ""; position: absolute; top: 2px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a8a, #d81818); border: 2px solid #fff; }
.breakbtn { position: fixed; left: 50%; top: 128px; transform: translateX(-50%); z-index: 5; width: 84px; height: 84px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), radial-gradient(circle, #ff5fd2 0%, #c21cb0 55%, #6a0a6a 100%); box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 0 24px #ff5fd2, 0 4px 0 #3a0636; color: #fff; display: grid; place-items: center; animation: breakpulse 1.1s ease-in-out infinite; }
.breakbtn i { position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(255,140,230,.6); animation: breakring 1.1s ease-out infinite; }
.breakbtn span { font: 400 18px var(--disp); text-shadow: 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -1px 0 #000; margin-top: 30px; }
.breakbtn::before { content: ""; position: absolute; top: 14px; left: 50%; width: 30px; height: 30px; transform: translateX(-50%); background: url(../assets/final/ui/plaque-crest.png?v=2) center / contain no-repeat; }
.breakbtn.auto::after { content: "AUTO"; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font: 400 10px var(--disp); color: #ffe07a; text-shadow: 0 0 3px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -1px 0 #000; }
@keyframes breakpulse { 50% { transform: translateX(-50%) scale(1.06); } }
@keyframes breakring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.story { position: fixed; inset: 0; z-index: 30; background: linear-gradient(transparent 45%, rgba(4,8,16,.75)); display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 40px; cursor: pointer; }
.story .sport { position: absolute; left: max(4vw, 20px); bottom: 150px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); animation: sportin .35s ease-out; }
.story.villain .sport { left: auto; right: max(4vw, 20px); }
@keyframes sportin { from { transform: translateY(30px); opacity: 0; } }
.story .sbox { position: relative; width: min(820px, 100%); min-height: 120px; border-style: solid; border-color: transparent; border-width: 22px 14px 14px; border-image: url(../assets/final/ui/quest.png?v=2) 96 60 60 fill / 22px 14px 14px stretch; padding: 4px 14px 6px; color: #fff; filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
.story .sbox b { position: absolute; top: -19px; left: 14px; font: 400 14px var(--disp); color: #4a2a08; }
.story.villain .sbox b { color: #5a0a3a; }
.story .sbox p { margin: 6px 0 4px; font: 400 18px/1.45 var(--disp); text-shadow: 0 2px 0 #06101e; }
.story .sbox small { display: block; text-align: right; color: #b9cfe8; font-size: 11px; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
body.storyopen .hud, body.storyopen .sidecol, body.storyopen .questcard, body.storyopen .feed, body.storyopen .breakbtn { visibility: hidden; }
.track { background: var(--paper2); border: 2px solid #d9bd8a; border-radius: 12px; padding: 8px 14px 30px; margin-bottom: 10px; }
.trackhead { display: flex; align-items: baseline; gap: 8px; } .trackhead b { font: 400 16px var(--disp); color: #3a2210; } .trackhead small { color: #8a6a3a; font-size: 11px; }
.trackbar { position: relative; height: 12px; margin: 14px 18px 0 6px; background: #3a2210; border-radius: 8px; }
.trackbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(#ffe98a, #e8a21e); }
.tnode { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 3px solid #8a5a2a; background: #f1dcb0; padding: 0; cursor: pointer; }
.tnode span { font: 400 11px var(--disp); color: #5a331a; } .tnode em { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; color: #5a331a; white-space: nowrap; }
.tnode.ready { background: linear-gradient(#ffe07a, #e39b1b); border-color: #fff; box-shadow: 0 0 10px #ffd23f; animation: glow 1s ease-in-out infinite alternate; }
.tnode.got { background: #9a9a9a; border-color: #6a6a6a; } .tnode:disabled { cursor: default; }
.streak { display: flex; gap: 10px; align-items: center; background: var(--paper2); border: 2px solid #d9bd8a; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; } .streak b { font: 400 15px var(--disp); color: #3a2210; display: block; } .streak small { color: #8a6a3a; font-size: 11px; }
.evcoin { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; } .evcoin b { font: 400 16px var(--disp); color: #3a2210; }
.pack.sold { opacity: .5; }
small.ach { display: block; color: #2f7f22; font-size: 10.5px; margin-bottom: 3px; }
.chlist { display: grid; gap: 10px; }
.chcard { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 3px solid #2a5a3a; background: linear-gradient(120deg, #17322a, #0f2420 60%, #1e3f2f); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.chcard.ch-rush { border-color: #6a1a2a; background: linear-gradient(120deg, #3a1420, #22080f 60%, #44162a); }
.chcard.ch-daily { border-color: #6a4a10; background: linear-gradient(120deg, #3a2a10, #221807 60%, #4a3410); }
.chico { width: 84px; height: 84px; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); }
.chbody b { font: 400 19px var(--disp); color: #ffe07a; text-shadow: 0 2px 0 #000; display: block; } .chbody small { color: #b9e8cf; font-size: 11.5px; } .chbody p { margin: 4px 0 0; font-size: 12px; color: #dfe9e4; line-height: 1.4; }
.chbtn { display: grid; gap: 4px; justify-items: center; } .chbtn small { font-size: 10.5px; color: #cfd8d6; }
.jgoal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.jg { background: linear-gradient(#1c3a5c, #0e2238); border: 2px solid #c9a24a; border-radius: 10px; padding: 6px 10px; color: #fff; } .jg small { color: #ffe07a; font-size: 10.5px; display: block; } .jg b { font: 400 13.5px var(--disp); }
.jregion { border-radius: 14px; padding: 8px 12px 10px; margin-bottom: 8px; color: #fff; background: linear-gradient(90deg, #2c4a2a, #1a2e1a); border: 2px solid rgba(255,214,120,.5); }
.jregion.r1 { background: linear-gradient(90deg, #5a3a1a, #2e1d0d); } .jregion.r2 { background: linear-gradient(90deg, #4a4a52, #24242a); } .jregion.r3 { background: linear-gradient(90deg, #4a1a5a, #22082a); }
.jregion.locked { filter: grayscale(.8) brightness(.6); }
.jrhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .jrhead b { font: 400 16px var(--disp); text-shadow: 0 2px 0 #000; } .jrhead small { color: #ffe07a; font-size: 11px; flex: 1; }
.jpath { display: flex; align-items: center; gap: 0; }
.jpath .jnode { position: relative; flex: 1; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; }
.jpath .jnode::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: rgba(255,255,255,.2); }
.jpath .jnode.clear::before { background: #ffd23f; }
.jpath .jnode span { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2a2a2a; border: 2px solid rgba(255,255,255,.4); font: 400 11px var(--disp); color: #fff; }
.jpath .jnode.clear span { background: linear-gradient(#ffe07a, #e39b1b); color: #3a2210; border-color: #fff; }
.jpath .jnode.boss span { width: 32px; height: 32px; background: linear-gradient(#ff7a7a, #a01a1a); border-color: #ffe07a; color: #fff; }
.jpath .jnode.cur span { box-shadow: 0 0 0 3px #fff, 0 0 12px #9fd4ff; animation: glow 1s ease-in-out infinite alternate; }
.jpath .jnode.lock { cursor: default; opacity: .5; }
.jgates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; }
.jgate { display: grid; justify-items: center; background: var(--paper2); border: 2px solid #d9bd8a; border-radius: 10px; padding: 6px 4px; filter: grayscale(.7); } .jgate.clear { filter: none; border-color: #3f9d2a; } .jgate b { font: 400 12px var(--disp); color: #3a2210; } .jgate small { font-size: 10px; color: #8a6a3a; text-align: center; }
.passhead { display: flex; align-items: center; gap: 12px; background: linear-gradient(#1c3a5c, #0e2238); border: 2px solid #c9a24a; border-radius: 12px; padding: 10px 14px; color: #fff; margin-bottom: 10px; } .passhead > div:nth-child(2) { flex: 1; } .passhead b { font: 400 17px var(--disp); display: block; } .passhead small { color: #b9cfe8; font-size: 11px; display: block; }
.pbar { height: 10px; background: #06101e; border-radius: 6px; margin: 4px 0; overflow: hidden; } .pbar i { display: block; height: 100%; background: linear-gradient(90deg, #9fd4ff, #ffe07a); }
.passgrid { display: grid; gap: 4px; }
.prow { display: grid; grid-template-columns: 46px 1fr 1fr; gap: 6px; align-items: center; } .prow.lbl span { font: 400 12px var(--disp); color: #8a6a3a; text-align: center; }
.prow .pt { font: 400 14px var(--disp); color: #8a6a3a; text-align: center; } .prow.ok .pt { color: #3f9d2a; }
.pcell { border: 2px solid #d9bd8a; border-radius: 10px; background: var(--paper2); padding: 6px; font: 400 12px var(--disp); color: #5a331a; cursor: pointer; }
.pcell.prem { background: linear-gradient(#fff2c4, #f1d68a); border-color: #c9a24a; } .pcell.lockp { filter: grayscale(.6); opacity: .7; }
.pcell.ready { border-color: #3f9d2a; box-shadow: 0 0 8px #9df07a; } .pcell.got { opacity: .45; text-decoration: line-through; } .pcell:disabled { cursor: default; }
.league { display: grid; gap: 6px; }
.lrow { display: grid; grid-template-columns: 34px 14px 1fr auto; gap: 8px; align-items: center; background: var(--paper2); border: 2px solid #d9bd8a; border-radius: 10px; padding: 8px 12px; }
.lrow.me { border-color: #e39b1b; background: linear-gradient(#fff2c4, #f1d68a); }
.lrow .rk { font: 400 20px var(--disp); color: #8a5a2a; text-align: center; } .lrow .dot { width: 12px; height: 12px; border-radius: 50%; } .lrow b { font: 400 15px var(--disp); color: #3a2210; } .lrow .pw { font: 400 14px var(--disp); color: #3a2210; display: inline-flex; gap: 4px; align-items: center; }
/* 모바일 (레퍼런스: 좌우 아이콘 열, 가운데 정렬 가이드 배너) */
@media (max-width: 700px) {
  .sidecol.left { top: 186px; } .sidecol.right { top: 152px; }
  .sideb { width: 54px; } .sideb b { font-size: 10.5px; } .sideb small { font-size: 9px; padding: 0 4px; }
  .breakbtn { top: 244px; width: 66px; height: 66px; } .breakbtn span { font-size: 14px; margin-top: 24px; } .breakbtn::before { width: 24px; height: 24px; top: 10px; }
  .questcard { left: 50%; right: auto; transform: translateX(-50%); width: min(78vw, 300px); bottom: 172px; }
  .questcard.pop { animation: none; }
  .story .sport .ico { width: 130px !important; height: 130px !important; } .story .sport { bottom: 170px; } .story .sbox p { font-size: 15px; }
  .jgoal { grid-template-columns: repeat(2, 1fr); } .jgates { grid-template-columns: repeat(3, 1fr); }
  .chcard { grid-template-columns: 56px 1fr; } .chcard .chbtn { grid-column: 1 / -1; justify-items: stretch; } .chico { width: 56px; height: 56px; } .chico .ico { width: 52px !important; height: 52px !important; }
  body.panelopen .sidecol, body.panelopen .breakbtn { display: none; }
}

/* v13.1 겹침 정리 */
@media (min-width: 701px) {
  .sidecol.right { top: 150px; gap: 2px; }
  .sidecol .sideb { width: 64px; }
  .sidecol .sideb .ico { width: 42px !important; height: 42px !important; }
  .rightcol .buffs { margin-right: 74px; }
  #bossBar { top: 132px; }
  .breakbtn { top: 136px; }
}
@media (min-width: 701px) { .feed { right: 86px; } }
@media (max-width: 700px) { .feed { right: 64px; } }

/* ───── v14 뽑기 레이어 ───── */
.gacha { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: 24px 16px 28px; overflow: hidden; }
.gacha .gbg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #3a1e6a 0%, #160a2e 55%, #05030c 100%); }
.gacha.best3 .gbg { background: radial-gradient(ellipse at 50% 45%, #6a1e8a 0%, #2a0a3e 55%, #08030f 100%); }
.gacha.best4 .gbg { background: radial-gradient(ellipse at 50% 45%, #8a4a10 0%, #3a1406 55%, #0a0402 100%); }
.gacha .grays { position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0deg 6deg, transparent 6deg 18deg); animation: gspin 24s linear infinite; pointer-events: none; }
.gacha.best4 .grays { background: repeating-conic-gradient(from 0deg, rgba(255,200,80,.14) 0deg 6deg, transparent 6deg 18deg); animation-duration: 12s; }
@keyframes gspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gacha .gportal { position: absolute; left: 50%; top: 45%; width: 260px; height: 260px; transform: translate(-50%, -50%); pointer-events: none; }
.gacha .gportal i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(190,140,255,.8); box-shadow: 0 0 40px #b47aff, inset 0 0 40px #b47aff; }
.gacha.best3 .gportal i { border-color: rgba(255,120,240,.9); box-shadow: 0 0 50px #ff5fd2, inset 0 0 50px #ff5fd2; }
.gacha.best4 .gportal i { border-color: rgba(255,210,100,.95); box-shadow: 0 0 60px #ffb23f, inset 0 0 60px #ffb23f; }
.gacha.charging .gportal i { animation: gcharge .9s ease-in infinite; } .gacha.charging .gportal i:nth-child(2) { animation-delay: .3s; } .gacha.charging .gportal i:nth-child(3) { animation-delay: .6s; }
@keyframes gcharge { from { transform: scale(1.6); opacity: 0; } 60% { opacity: 1; } to { transform: scale(.2); opacity: 0; } }
.gacha.reveal .gportal { animation: gburst .5s ease-out forwards; } @keyframes gburst { 0% { opacity: 1; } 30% { transform: translate(-50%, -50%) scale(3); opacity: .9; filter: brightness(3); } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
.gacha .ghead { position: relative; z-index: 1; border-style: solid; border-color: transparent; border-width: 14px 40px; border-image: url(../assets/final/ui/ribbon.png?v=2) 40 110 fill / 14px 40px stretch; padding: 0 24px; min-width: 260px; text-align: center; opacity: 0; transform: translateY(-20px); transition: .4s; }
.gacha.reveal .ghead { opacity: 1; transform: none; }
.gacha .ghead b { font: 400 24px var(--disp); color: #fff; text-shadow: 0 2px 0 #4a0a0a, 0 0 10px rgba(255,200,120,.6); }
.gacha .ggrid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 118px); gap: 14px; align-content: center; }
.gacha.single .ggrid { grid-template-columns: 200px; }
.gacha .ggrid.n1 { grid-template-columns: 200px; } .gacha .ggrid.n5 { grid-template-columns: repeat(5, 130px); }
.gcard { aspect-ratio: 3 / 4; perspective: 700px; opacity: 0; transform: translateY(-60vh) scale(.6) rotate(-8deg); }
.gacha.reveal .gcard { animation: gdrop .45s cubic-bezier(.2,1.25,.4,1) var(--d) forwards; }
.gacha.instant .gcard { animation-duration: .01s; animation-delay: 0s !important; }
@keyframes gdrop { to { opacity: 1; transform: none; } }
.gflip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s; }
.gacha.reveal .gflip { transform: rotateY(180deg); transition-delay: calc(var(--d) + .35s); }
.gacha.instant .gflip { transition-duration: .01s; transition-delay: 0s; }
.gback, .gface { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; }
.gback { background: url(../assets/final/ui/card0.png?v=2) center / 100% 100% no-repeat; filter: brightness(.55) saturate(.4); }
.gface { transform: rotateY(180deg); display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; padding: 10% 6% 8%; background: center / 100% 100% no-repeat; color: #fff; overflow: hidden; }
.gcard.t0 .gface { background-image: url(../assets/final/ui/card0.png?v=2); } .gcard.t1 .gface { background-image: url(../assets/final/ui/card1.png?v=2); } .gcard.t2 .gface { background-image: url(../assets/final/ui/card2.png?v=2); } .gcard.t3 .gface { background-image: url(../assets/final/ui/card3.png?v=2); } .gcard.t4 .gface { background-image: url(../assets/final/ui/card4.png?v=2); }
.gface .gart { position: relative; z-index: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.gface .gart .ico { width: 64% !important; height: auto !important; aspect-ratio: 1; min-width: 56px; }
.gacha.single .gface .gart .ico { width: 80% !important; }
.gface b { position: relative; z-index: 1; font: 400 13px/1.15 var(--disp); text-align: center; text-shadow: 0 2px 0 #000; }
.gface small { position: relative; z-index: 1; font: 400 10.5px var(--disp); color: #cfe3ff; } .gface small.new { color: #ffe36b; }
.gface em { position: absolute; top: 6%; left: 8%; z-index: 1; font: 400 10px var(--disp); font-style: normal; color: #fff; background: rgba(0,0,0,.45); border-radius: 6px; padding: 1px 6px; }
.gface .gray { position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255,255,255,.25) 0deg 8deg, transparent 8deg 24deg); opacity: 0; animation: gspin2 6s linear infinite; }
@keyframes gspin2 { to { transform: rotate(360deg); } }
.gcard.t3 .gface .gray, .gcard.t4 .gface .gray { opacity: .55; }
.gacha.reveal .gcard.t3 { filter: drop-shadow(0 0 14px #ff5fd2); } .gacha.reveal .gcard.t4 { filter: drop-shadow(0 0 20px #ffb23f) drop-shadow(0 0 40px #ff6a1a); }
.gacha.reveal .gcard.t4 .gflip { animation: gshake .5s ease-out calc(var(--d) + .8s); }
@keyframes gshake { 20% { transform: rotateY(180deg) scale(1.15); } 100% { transform: rotateY(180deg) scale(1); } }
.gacha .gbtns { position: relative; z-index: 1; display: flex; gap: 12px; }
.gacha .gbtns .gbtn { min-width: 150px; min-height: 52px; font-size: 17px; }
.gacha .gclose, .gacha .gagain { display: none; } .gacha.done .gclose, .gacha.done .gagain { display: inline-flex; } .gacha.done .gskipb { display: none; }
@media (max-width: 700px) {
  .gacha .ggrid { grid-template-columns: repeat(4, 21vw); gap: 8px; } .gacha .ggrid.n5 { grid-template-columns: repeat(3, 27vw); } .gacha.single .ggrid, .gacha .ggrid.n1 { grid-template-columns: 48vw; }
  .gface b { font-size: 11px; } .gface small { font-size: 9px; } .gacha .ghead b { font-size: 19px; }
  .gacha .gbtns .gbtn { min-width: 0; flex: 1; font-size: 15px; } .gacha .gbtns { width: 100%; }
}

/* v14.1 영웅·전설 컷인, 연출 끄기 */
.gacha .ghead { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gfxtog { position: absolute; right: -150px; top: 50%; transform: translateY(-50%); font: 400 12px var(--disp); color: #fff; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.4); border-radius: 14px; padding: 4px 10px 4px 26px; cursor: pointer; }
.gfxtog::before { content: ""; position: absolute; left: 7px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 3px; border: 2px solid #fff; }
.gfxtog.on::before { background: #ffe07a; border-color: #ffe07a; box-shadow: inset 0 0 0 2px #3a2210; }
.gcut { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; cursor: pointer; }
.gacha.cutin .gcut { display: grid; }
.gacha.cutin .ggrid, .gacha.cutin .ghead, .gacha.cutin .gbtns { visibility: hidden; }
.gflash { position: absolute; inset: 0; background: #fff; animation: gflash .7s ease-out forwards; }
.gacha.best4 .gflash { background: #fff3c4; }
@keyframes gflash { from { opacity: 1; } to { opacity: 0; } }
.gpillar { position: absolute; left: 50%; top: -10%; bottom: -10%; width: 360px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,120,240,.55) 35%, rgba(255,255,255,.95) 50%, rgba(255,120,240,.55) 65%, transparent); animation: gpillar 1.4s ease-out forwards; }
.gacha.best4 .gpillar { background: linear-gradient(90deg, transparent, rgba(255,170,40,.6) 35%, rgba(255,255,230,1) 50%, rgba(255,170,40,.6) 65%, transparent); width: 460px; }
@keyframes gpillar { 0% { transform: translateX(-50%) scaleX(.05); opacity: 1; } 40% { transform: translateX(-50%) scaleX(1); opacity: 1; } 100% { transform: translateX(-50%) scaleX(.7); opacity: .5; } }
.gcutband { position: absolute; left: 0; right: 0; top: 16%; height: 74px; display: grid; place-items: center; background: linear-gradient(90deg, transparent, rgba(120,10,110,.85) 15%, rgba(120,10,110,.85) 85%, transparent); transform: scaleY(0); animation: gband .35s ease-out .35s forwards; }
.gacha.best4 .gcutband { background: linear-gradient(90deg, transparent, rgba(150,60,0,.88) 15%, rgba(150,60,0,.88) 85%, transparent); }
@keyframes gband { to { transform: scaleY(1); } }
.gcutband b { font: 400 40px var(--disp); color: #fff; letter-spacing: 2px; text-shadow: 0 3px 0 #3a0636, 0 0 18px #ff9ae8; opacity: 0; animation: gbandtxt .5s cubic-bezier(.2,1.6,.4,1) .55s forwards; }
.gacha.best4 .gcutband b { color: #fff4c8; text-shadow: 0 3px 0 #5a2000, 0 0 22px #ffb23f; }
@keyframes gbandtxt { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
.gcutcard { position: relative; width: 240px; margin-top: 70px; }
.gcutcard .gcard { animation: none; opacity: 1; transform: scale(.2); }
.gcutcard .gcard.show { animation: gcutpop .7s cubic-bezier(.2,1.4,.4,1) .5s forwards; }
.gcutcard .gcard.show .gflip { transform: rotateY(180deg); transition: transform .6s 1.1s; }
.gcutcard .gcard .gflip { transform: rotateY(0); }
@keyframes gcutpop { to { transform: scale(1); } }
.gcutcard .gcard.t3 { filter: drop-shadow(0 0 24px #ff5fd2); } .gcutcard .gcard.t4 { filter: drop-shadow(0 0 30px #ffb23f) drop-shadow(0 0 60px #ff6a1a); }
.gcutcard .gface .gart .ico { width: 78% !important; }
.gcut > small { position: absolute; bottom: 8%; color: #fff; font: 400 13px var(--disp); animation: blink 1.2s ease-in-out infinite; }
@media (max-width: 700px) { .gfxtog { position: static; transform: none; margin-left: 4px; } .gcutband b { font-size: 26px; } .gcutcard { width: 52vw; } .gpillar { width: 70vw; } }