:root { --gold: #e8c878; --gold2: #b8904a; --ink: #0d1016; --panel: rgba(12, 15, 22, 0.78); --line: rgba(232, 200, 120, 0.45); --txt: #e9e4d6;
  --serif: 'Gungsuh', '궁서', 'Batang', '바탕', 'Nanum Myeongjo', serif; --sans: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05070a; overflow: hidden; font-family: var(--sans); color: var(--txt); user-select: none; cursor: default; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; overflow: hidden; }
#world-ui, #hud, #overlay { position: absolute; inset: 0; }
#hud > *, #overlay > * { pointer-events: auto; }

/* ---------- loading / title ---------- */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 7.5%; background: #05070a; transition: opacity .9s; }
#loading.hide { opacity: 0; pointer-events: none; }
.ld-bg { position: absolute; inset: 0; background: #0a0d12 center/cover no-repeat; filter: saturate(1.08); }
.ld-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(4, 6, 10, .75) 100%), linear-gradient(to top, rgba(4, 6, 10, .96) 0%, transparent 46%); }
.ld-hero { position: absolute; left: 7%; bottom: -2%; height: 97%; filter: drop-shadow(0 0 40px rgba(0, 0, 0, .8)); z-index: 1; }
.ld-box { position: relative; width: 760px; margin-bottom: 64px; text-align: center; }
.ld-title { font-family: var(--serif); line-height: 1; text-shadow: 0 4px 24px #000, 0 0 2px #000; }
.ld-title .kr { display: block; text-shadow: none; font-size: 138px; letter-spacing: 22px; padding-left: 22px; background: linear-gradient(#fff6d8, #e8c878 45%, #9a6b2c); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .9)); }
.ld-title .tag { display: block; margin-top: 16px; font-size: 27px; letter-spacing: 15px; color: #f3ead2; padding-left: 15px; }
.ld-sub { margin: 14px 0 34px; font-size: 20px; letter-spacing: 8px; color: #9fb7c9; }
.ld-bar { height: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .55); border-radius: 5px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #7a5a22, #ffe9a8); box-shadow: 0 0 12px #ffd97a; transition: width .25s; }
.ld-text { margin-top: 10px; font-size: 15px; color: #cfc6ae; letter-spacing: 2px; }
#ld-start { margin-top: 18px; padding: 12px 64px; font: 26px var(--serif); letter-spacing: 10px; color: #2a1a05; background: linear-gradient(#fff0b8, #d9a94a); border: 1px solid #fff3c6; border-radius: 4px; box-shadow: 0 0 26px rgba(255, 210, 110, .55); cursor: pointer; }
#ld-start:hover { filter: brightness(1.12); }
.ld-hint { margin-top: 16px; font-size: 13px; color: #8d98a6; }

/* ---------- name plates / world space ---------- */
.plate { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; transform-origin: 50% 100%; font-size: 15px; line-height: 1.22; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8); will-change: transform; }
.plate .gd { font-size: 13px; }
.plate .nm { font-weight: 700; color: #f4f1e8; }
.plate.me .nm { color: #8dffb0; font-size: 16px; }
.plate.mob .nm { color: #ffb4a0; font-weight: 600; }
.plate.mob .lv { color: #ffd98a; font-size: 12px; margin-right: 4px; }
.plate.npc .nm { color: #ffe9a0; }
.plate.npc .gd { color: #9fe0ff; }
.plate .hpb { width: 76px; height: 6px; margin: 3px auto 0; border: 1px solid rgba(0, 0, 0, .9); background: rgba(20, 0, 0, .7); border-radius: 2px; overflow: hidden; display: none; }
.plate .hpb i { display: block; height: 100%; background: linear-gradient(#ff6a50, #b81d12); }
.plate.show .hpb { display: block; }
.bubble { position: absolute; left: 0; top: 0; max-width: 250px; padding: 6px 12px; font-size: 14px; color: #1b1a17; background: rgba(250, 246, 232, .94); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); white-space: nowrap; will-change: transform; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 7px solid transparent; border-top-color: rgba(250, 246, 232, .94); border-bottom: 0; }
.ftext { position: absolute; left: 0; top: 0; font: 900 30px/1 'Arial Black', var(--sans); color: #fff; letter-spacing: 1px; text-shadow: 0 0 4px #000, 2px 2px 0 #000, -1px -1px 0 #000, 0 3px 6px rgba(0, 0, 0, .7); will-change: transform; pointer-events: none; }
.ftext.crit { font-size: 46px; color: #ffe14a; text-shadow: 0 0 8px #ff7a00, 2px 2px 0 #7a2a00, -1px -1px 0 #7a2a00, 0 0 18px rgba(255, 140, 0, .9); }
.ftext.skill { font-size: 40px; color: #9fe6ff; text-shadow: 0 0 8px #2a80ff, 2px 2px 0 #0a2a66, -1px -1px 0 #0a2a66; }
.ftext.taken { color: #ff5a4a; font-size: 28px; }
.ftext.heal { color: #7dff9a; font-size: 30px; }
.ftext.exp { color: #d9a8ff; font: 700 20px var(--sans); }
.ftext.gold { color: #ffd95a; font: 700 20px var(--sans); }
.ftext.other { font-size: 20px; color: #e8e8e8; opacity: .85; }
.ftext.miss { color: #b8c0c8; font: italic 700 24px var(--sans); }
.screenflash { position: absolute; inset: 0; animation: sflash 180ms ease-out forwards; pointer-events: none; }
@keyframes sflash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- frames ---------- */
.frame { position: absolute; background: linear-gradient(180deg, rgba(22, 27, 38, .86), rgba(9, 11, 17, .86)); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 240, 200, .12); }
.frame::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(232, 200, 120, .12); border-radius: 4px; pointer-events: none; }

/* player frame */
#pf { left: 22px; top: 18px; width: 470px; height: 118px; background: none; border: 0; box-shadow: none; }
#pf::before { display: none; }
#pf .port { position: absolute; left: 0; top: 0; width: 112px; height: 112px; border-radius: 50%; background: #1b2230 center 18%/cover no-repeat; border: 3px solid #d9b56a; box-shadow: 0 0 0 2px #2a1c08, 0 0 18px rgba(0, 0, 0, .8), inset 0 0 18px rgba(0, 0, 0, .7); }
#pf .lv { position: absolute; left: 78px; top: 78px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(#3a2a10, #14100a); border: 2px solid #e8c878; font: 700 18px/36px var(--sans); text-align: center; color: #ffe9a8; text-shadow: 0 1px 2px #000; }
#pf .nm { position: absolute; left: 128px; top: 4px; font: 700 21px var(--sans); color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
#pf .nm small { margin-left: 8px; font-size: 15px; font-weight: 400; color: #7fd4ff; }
.bar { position: absolute; left: 124px; height: 22px; width: 336px; border: 1px solid rgba(0, 0, 0, .9); background: linear-gradient(#11131a, #1c2029); border-radius: 3px; box-shadow: 0 0 0 1px rgba(232, 200, 120, .35), 0 2px 6px rgba(0, 0, 0, .6); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .18s; }
.bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255, 255, 255, .5); transition: width .55s .12s; }
.bar span { position: absolute; inset: 0; text-align: center; font: 700 13px/20px var(--sans); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; letter-spacing: .5px; }
.bar em { position: absolute; left: 8px; top: 0; font: 700 12px/20px var(--sans); font-style: normal; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px #000; z-index: 2; }
#hpbar { top: 36px; } #hpbar i { background: linear-gradient(#ff7a5c, #d8281a 55%, #8a0f0a); }
#mpbar { top: 62px; height: 18px; } #mpbar i { background: linear-gradient(#6fc6ff, #2472d8 55%, #123a8a); } #mpbar span, #mpbar em { line-height: 16px; font-size: 12px; }
#buffs { position: absolute; left: 124px; top: 86px; display: flex; gap: 5px; }
#buffs .bf { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #c9a55a; background: #222 center/cover; box-shadow: 0 2px 5px rgba(0, 0, 0, .6); position: relative; }
#buffs .bf s { position: absolute; right: 1px; bottom: -1px; font: 700 10px var(--sans); text-decoration: none; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* target frame */
#tf { left: 50%; top: 22px; width: 430px; margin-left: -215px; height: 62px; display: none; }
#tf .nm { position: absolute; left: 14px; top: 6px; right: 14px; font: 700 17px var(--sans); color: #ffd0c0; text-shadow: 0 1px 2px #000; display: flex; justify-content: space-between; }
#tf .nm small { color: #ffd98a; font-weight: 400; }
#tf .bar { left: 12px; width: 404px; top: 32px; height: 18px; } #tf .bar i { background: linear-gradient(#ff8a5c, #c82a1a 55%, #7a0f0a); } #tf .bar span { line-height: 16px; font-size: 12px; }

/* boss bar */
#bossbar { left: 50%; top: 92px; width: 900px; margin-left: -450px; height: 84px; display: none; background: none; border: 0; box-shadow: none; }
#bossbar::before { display: none; }
#bossbar .nm { text-align: center; font: 30px var(--serif); color: #ffd9c8; letter-spacing: 6px; text-shadow: 0 0 12px #c00, 0 2px 4px #000, 0 0 3px #000; }
#bossbar .nm small { font: 16px var(--sans); color: #ffb090; letter-spacing: 2px; margin-left: 12px; }
#bossbar .bar { left: 0; top: 42px; width: 900px; height: 26px; border-radius: 2px; box-shadow: 0 0 0 1px #6a1a10, 0 0 0 3px #1a0a08, 0 0 0 4px rgba(232, 200, 120, .55), 0 0 26px rgba(255, 40, 20, .55); }
#bossbar .bar i { background: linear-gradient(#ff7a4a, #d01c10 50%, #6a0806); } #bossbar .bar span { line-height: 24px; font-size: 14px; }
#bossbar .ph { position: absolute; top: 42px; height: 26px; width: 2px; background: rgba(255, 230, 180, .7); }

/* minimap */
#mm { right: 22px; top: 18px; width: 236px; height: 262px; background: none; border: 0; box-shadow: none; }
#mm::before { display: none; }
#mm canvas { position: absolute; left: 6px; top: 0; width: 224px; height: 224px; border-radius: 50%; border: 3px solid #d9b56a; box-shadow: 0 0 0 2px #2a1c08, 0 0 20px rgba(0, 0, 0, .8), inset 0 0 20px #000; background: #1a2118; }
#mm .zn { position: absolute; left: 0; right: 0; top: 230px; text-align: center; font: 19px var(--serif); color: #ffe9b0; text-shadow: 0 1px 3px #000, 0 0 6px #000; letter-spacing: 3px; }
#mm .zn small { display: block; font: 12px var(--sans); color: #a8d8ff; letter-spacing: 1px; margin-top: 2px; }
#mm .n { position: absolute; left: 112px; top: -6px; font: 700 13px var(--sans); color: #ffe9a8; text-shadow: 0 0 3px #000; }
#srv { position: absolute; right: 272px; top: 20px; text-align: right; font: 13px var(--sans); color: #cfd8e2; text-shadow: 0 1px 2px #000; line-height: 1.5; }
#srv b { color: #8dffb0; font-weight: 400; }
#money { position: absolute; right: 272px; top: 70px; display: flex; gap: 10px; }
#money div { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; background: rgba(8, 10, 14, .72); border: 1px solid rgba(232, 200, 120, .35); border-radius: 14px; font: 700 14px var(--sans); color: #ffe9a8; }
#money i { width: 22px; height: 22px; border-radius: 50%; background: #333 center/cover; display: block; }

/* quest tracker */
#quest { right: 22px; top: 300px; width: 270px; padding: 10px 14px 12px; }
#quest h4 { margin: 0 0 6px; font: 17px var(--serif); color: var(--gold); letter-spacing: 2px; }
#quest p { margin: 3px 0; font-size: 13.5px; color: #d8dde4; } #quest p b { color: #8dffb0; } #quest p.done { color: #7f8a96; text-decoration: line-through; }

/* raid ranking */
#rank { right: 22px; top: 446px; width: 270px; padding: 10px 12px; display: none; }
#rank h4 { margin: 0 0 6px; font: 17px var(--serif); color: #ffb090; letter-spacing: 2px; }
#rank .r { position: relative; height: 21px; margin: 2px 0; font-size: 12.5px; }
#rank .r i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(200, 60, 40, .75), rgba(200, 60, 40, .25)); border-radius: 2px; }
#rank .r span { position: absolute; left: 6px; line-height: 21px; text-shadow: 0 1px 2px #000; } #rank .r em { position: absolute; right: 6px; line-height: 21px; font-style: normal; color: #ffe0b0; }
#rank .r.me span { color: #8dffb0; font-weight: 700; }

/* chat */
#chat { left: 22px; bottom: 26px; width: 520px; height: 252px; background: linear-gradient(180deg, rgba(10, 12, 18, .52), rgba(8, 10, 14, .74)); }
#chat .tabs { position: absolute; left: 8px; top: -27px; display: flex; gap: 3px; }
#chat .tabs span { padding: 5px 15px; font-size: 13px; color: #aab3bf; background: rgba(10, 12, 18, .7); border: 1px solid rgba(232, 200, 120, .25); border-bottom: 0; border-radius: 5px 5px 0 0; }
#chat .tabs span.on { color: #ffe9a8; background: rgba(26, 30, 42, .92); border-color: var(--line); }
#chat .log { position: absolute; left: 12px; right: 10px; top: 8px; bottom: 36px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#chat .log p { margin: 1.5px 0; font-size: 14px; line-height: 1.32; color: #e6e2d6; text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, .9); word-break: keep-all; }
#chat .log p .c { color: #9fd0ff; } #chat .log p .g { color: #9be8a8; }
#chat .log p.sys { color: #ffd76a; } #chat .log p.sys2 { color: #ff9a80; } #chat .log p.me { color: #b9ffcc; } #chat .log p.party { color: #7fd4ff; } #chat .log p.loot { color: #d9a8ff; } #chat .log p.gd { color: #9be8a8; }
#chat .inp { position: absolute; left: 8px; right: 8px; bottom: 6px; width: calc(100% - 16px); box-sizing: border-box; height: 26px; border: 1px solid rgba(232, 200, 120, .25); background: rgba(0, 0, 0, .45); border-radius: 3px; font: 13px var(--sans); line-height: 24px; padding: 0 10px; color: #f1ecdc; outline: none; }
#chat .inp::placeholder { color: #7f8a96; } #chat .inp:focus { border-color: #ffe08a; background: rgba(0, 0, 0, .7); }

/* skill bar */
#sb { left: 50%; bottom: 24px; width: 700px; margin-left: -350px; height: 104px; background: none; border: 0; box-shadow: none; }
#sb::before { display: none; }
#sb .slots { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; gap: 9px; }
.slot { position: relative; width: 70px; height: 70px; border-radius: 9px; border: 2px solid #b8904a; background: #1a1d26 center/cover; box-shadow: 0 0 0 1px #1a1208, 0 4px 10px rgba(0, 0, 0, .7), inset 0 0 10px rgba(0, 0, 0, .6); cursor: pointer; overflow: hidden; }
.slot.small { width: 58px; height: 58px; margin-top: 12px; border-radius: 50%; }
.slot .k { position: absolute; left: 4px; top: 2px; font: 700 13px var(--sans); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; z-index: 3; }
.slot .n { position: absolute; right: 4px; bottom: 2px; font: 700 13px var(--sans); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; z-index: 3; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, .72) var(--p, 0%), transparent 0); z-index: 2; }
.slot .ct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 24px var(--sans); color: #fff; text-shadow: 0 0 5px #000, 0 0 5px #000; z-index: 3; }
.slot.ready::after { content: ''; position: absolute; inset: -2px; border-radius: 9px; animation: ready .5s ease-out; box-shadow: inset 0 0 18px 6px rgba(255, 240, 180, .9); }
.slot.fire { animation: fire .22s ease-out; }
@keyframes ready { from { opacity: 1; } to { opacity: 0; } }
@keyframes fire { 0% { transform: scale(.86); filter: brightness(2.2); } 100% { transform: scale(1); } }
#sb .sep { width: 14px; }
#exp { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border: 1px solid #000; border-radius: 8px; background: rgba(8, 10, 14, .85); box-shadow: 0 0 0 1px rgba(232, 200, 120, .45); overflow: hidden; }
#exp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6a3ad8, #c79bff); box-shadow: 0 0 10px #a070ff; transition: width .5s; }
#exp span { position: absolute; inset: 0; text-align: center; font: 700 11px/14px var(--sans); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; letter-spacing: 1px; }

/* auto hunt + menu */
#auto { position: absolute; right: 330px; bottom: 40px; width: 104px; height: 104px; border-radius: 50%; border: 3px solid #b8904a; background: radial-gradient(circle at 50% 35%, #2f3a4c, #10141c 70%); box-shadow: 0 0 0 2px #1a1208, 0 6px 16px rgba(0, 0, 0, .7); font: 21px/1.15 var(--serif); color: #d8d2c0; text-align: center; padding-top: 26px; cursor: pointer; letter-spacing: 2px; }
#auto.on { color: #fff3c0; border-color: #ffe08a; background: radial-gradient(circle at 50% 35%, #7a5a1c, #2a1c08 72%); box-shadow: 0 0 0 2px #1a1208, 0 0 26px rgba(255, 200, 80, .8); text-shadow: 0 0 10px #ffb020; }
#auto.on::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px dashed rgba(255, 224, 138, .9); animation: spin 3.2s linear infinite; }
#auto small { display: block; font: 11px var(--sans); letter-spacing: 0; margin-top: 4px; color: #9aa4b0; } #auto.on small { color: #ffe9a8; }
@keyframes spin { to { transform: rotate(360deg); } }
#menu { position: absolute; right: 22px; bottom: 30px; display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
#menu div { height: 64px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(#232a38, #10131b); box-shadow: 0 3px 8px rgba(0, 0, 0, .6); font: 14px var(--sans); color: #d8d2c0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
#menu div i { width: 30px; height: 30px; border-radius: 5px; background: #333 center/cover; display: block; border: 1px solid rgba(232, 200, 120, .4); }
#menu div:hover { filter: brightness(1.25); }
#autotag { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 5px 26px; font: 20px var(--serif); letter-spacing: 6px; color: #ffe9a8; text-shadow: 0 0 10px #ff9a20, 0 1px 2px #000; background: linear-gradient(90deg, transparent, rgba(40, 24, 4, .8), transparent); display: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* banners */
.banner { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
#zonebanner { top: 215px; opacity: 0; transition: opacity .8s; }
#zonebanner .a { font: 64px var(--serif); letter-spacing: 16px; color: #fff3d0; text-shadow: 0 0 20px rgba(0, 0, 0, .9), 0 3px 6px #000; }
#zonebanner .b { font: 21px var(--serif); letter-spacing: 8px; color: #c9d8e6; text-shadow: 0 2px 4px #000; margin-top: 4px; }
#zonebanner .c { margin: 10px auto 0; width: 520px; height: 2px; background: linear-gradient(90deg, transparent, #e8c878, transparent); }
#zonebanner .d { font: 15px var(--sans); letter-spacing: 4px; color: #a8d8ff; margin-top: 8px; text-shadow: 0 1px 3px #000; }
#lvup { top: 250px; display: none; }
#lvup .a { font: 900 108px var(--serif); letter-spacing: 26px; background: linear-gradient(#fffbe0, #ffd95a 45%, #c8741a); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 190, 60, .95)) drop-shadow(0 5px 3px #000); animation: lvpop 2.6s ease-out forwards; }
#lvup .b { font: 34px var(--serif); letter-spacing: 8px; color: #fff3c0; text-shadow: 0 0 14px #ff9a20, 0 2px 4px #000; animation: lvsub 2.6s ease-out forwards; }
#lvup .c { font: 17px var(--sans); color: #d8f6ff; letter-spacing: 3px; margin-top: 8px; text-shadow: 0 1px 3px #000; animation: lvsub 2.6s ease-out forwards; }
@keyframes lvpop { 0% { transform: scale(2.6); opacity: 0; } 12% { transform: scale(.94); opacity: 1; } 18% { transform: scale(1.04); } 24%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
@keyframes lvsub { 0%, 14% { opacity: 0; transform: translateY(16px); } 26%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#warn { top: 190px; display: none; }
#warn .a { display: inline-block; padding: 16px 120px; font: 54px var(--serif); letter-spacing: 12px; color: #ffe0d0; text-shadow: 0 0 22px #ff2010, 0 3px 4px #000; background: linear-gradient(90deg, transparent, rgba(90, 0, 0, .78) 20%, rgba(90, 0, 0, .78) 80%, transparent); border-top: 2px solid rgba(255, 90, 60, .75); border-bottom: 2px solid rgba(255, 90, 60, .75); animation: warn 4.2s ease-out forwards; }
#warn .b { font: 22px var(--sans); color: #ffb9a0; letter-spacing: 6px; margin-top: 10px; text-shadow: 0 1px 4px #000; animation: lvsub 4.2s ease-out forwards; }
@keyframes warn { 0% { transform: scaleX(0); opacity: 0; } 10% { transform: scaleX(1.05); opacity: 1; } 14% { transform: none; } 30% { filter: brightness(1.7); } 40% { filter: none; } 55% { filter: brightness(1.7); } 65%, 86% { filter: none; opacity: 1; } 100% { opacity: 0; } }
#vign { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 260px 60px rgba(160, 0, 0, 0); transition: box-shadow .5s; }
#vign.hurt { box-shadow: inset 0 0 220px 50px rgba(190, 0, 0, .55); }
#vign.raid { box-shadow: inset 0 0 300px 90px rgba(120, 0, 10, .42); }
#center-msg { position: absolute; left: 0; right: 0; top: 706px; text-align: center; font: 23px var(--serif); letter-spacing: 5px; color: #fff3d0; text-shadow: 0 0 12px #000, 0 2px 4px #000; opacity: 0; transition: opacity .4s; pointer-events: none; }
#demotag { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font: 12px var(--sans); letter-spacing: 3px; color: rgba(255, 255, 255, .55); text-shadow: 0 1px 2px #000; display: none; }
#cast { position: absolute; left: 50%; bottom: 196px; width: 340px; margin-left: -170px; height: 20px; border: 1px solid #000; border-radius: 4px; background: rgba(8, 10, 14, .8); box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: none; }
#cast i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6a3ad8, #d9b8ff); } #cast span { position: absolute; inset: 0; text-align: center; font: 700 12px/18px var(--sans); text-shadow: 0 0 3px #000; }

/* enhancement window */
#enh { left: 1000px; top: 50%; width: 620px; height: 640px; margin: -330px 0 0 0; display: none; background: linear-gradient(180deg, rgba(26, 31, 44, .97), rgba(8, 10, 15, .97)); }
#enh h3 { margin: 0; padding: 16px 0 12px; text-align: center; font: 30px var(--serif); letter-spacing: 12px; color: var(--gold); text-shadow: 0 2px 4px #000; border-bottom: 1px solid rgba(232, 200, 120, .25); }
#enh .x { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; line-height: 30px; text-align: center; font-size: 20px; color: #c8c2b0; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
#enh .stage { position: relative; height: 300px; overflow: hidden; }
#enh .stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px; border-radius: 50%; background: radial-gradient(rgba(120, 170, 255, .22), transparent 68%); }
#enh .ringa, #enh .ringb { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px dashed rgba(232, 200, 120, .55); }
#enh .ringa { width: 238px; height: 238px; margin: -119px; animation: spin 14s linear infinite; }
#enh .ringb { width: 196px; height: 196px; margin: -98px; border-style: dotted; border-color: rgba(140, 200, 255, .6); animation: spin 9s linear infinite reverse; }
#enh .item { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px; border-radius: 16px; border: 3px solid #d9b56a; background: #151a24 center/cover; box-shadow: 0 0 34px rgba(100, 170, 255, .6), inset 0 0 24px rgba(0, 0, 0, .7); }
#enh .item b { position: absolute; right: 8px; top: 2px; font: 900 34px 'Arial Black', var(--sans); color: #fff; text-shadow: 0 0 8px #3a9aff, 2px 2px 0 #000; }
#enh .item.charge { animation: charge .09s linear infinite; box-shadow: 0 0 70px rgba(255, 220, 140, 1), inset 0 0 30px rgba(255, 220, 140, .6); filter: brightness(1.5); }
#enh.charging .ringa { animation-duration: 1.2s; } #enh.charging .ringb { animation-duration: .8s; }
@keyframes charge { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -2px); } 100% { transform: translate(-1px, 2px); } }
#enh .item.ok { animation: enhok .9s ease-out; }
@keyframes enhok { 0% { transform: scale(1.5); filter: brightness(4); } 100% { transform: none; filter: none; } }
#enh .item.broken { animation: enhbad .7s ease-out forwards; }
@keyframes enhbad { 0% { transform: scale(1.2) rotate(0); filter: brightness(3) saturate(0); } 30% { transform: scale(.9) rotate(-8deg); } 100% { transform: scale(.94) rotate(-5deg); filter: grayscale(.9) brightness(.45); } }
#enh .shard { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; background: linear-gradient(135deg, #dfe8f5, #5a6a80); clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 30%); pointer-events: none; }
#enh .res { position: absolute; left: 0; right: 0; top: 24px; text-align: center; font: 900 56px var(--serif); letter-spacing: 14px; opacity: 0; pointer-events: none; }
#enh .res.ok { color: #fff3b0; text-shadow: 0 0 26px #ffb020, 0 3px 4px #000; animation: lvpop 1.9s ease-out forwards; }
#enh .res.bad { color: #ff5a40; text-shadow: 0 0 26px #a00000, 0 3px 4px #000; animation: enhres 2.2s ease-out forwards; }
@keyframes enhres { 0% { transform: scale(3) rotate(-6deg); opacity: 0; } 10% { transform: scale(.92) rotate(-4deg); opacity: 1; } 16%, 82% { transform: rotate(-4deg); opacity: 1; } 100% { opacity: 0; transform: rotate(-4deg) translateY(10px); } }
#enh .info { padding: 6px 34px 0; font-size: 16px; line-height: 1.75; }
#enh .info .row { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(232, 200, 120, .16); }
#enh .info .row span:last-child { color: #ffe9a8; font-weight: 700; } #enh .info .row .up { color: #8dffb0; } #enh .info .row .dn { color: #ff8a70; }
#enh .btns { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 18px; }
#enh button { padding: 12px 54px; font: 24px var(--serif); letter-spacing: 8px; color: #2a1a05; background: linear-gradient(#fff0b8, #d9a94a); border: 1px solid #fff3c6; border-radius: 4px; box-shadow: 0 0 18px rgba(255, 210, 110, .4); cursor: pointer; }
#enh button:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
#enh.shake { animation: wshake .5s linear; }
@keyframes wshake { 10% { transform: translate(-14px, 6px) rotate(-1deg); } 25% { transform: translate(12px, -8px) rotate(1deg); } 40% { transform: translate(-9px, -5px); } 55% { transform: translate(8px, 6px); } 70% { transform: translate(-5px, 3px); } 85% { transform: translate(3px, -2px); } }
#dark { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); pointer-events: none; transition: background .35s; }
#dark.on { background: rgba(0, 0, 0, .55); }
#result { top: 300px; display: none; }
#result .a { font: 900 96px var(--serif); letter-spacing: 22px; background: linear-gradient(#fffbe0, #ffd95a 45%, #c8741a); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 190, 60, .95)) drop-shadow(0 5px 3px #000); animation: lvpop 5s ease-out forwards; }
#result .b { font: 26px var(--serif); letter-spacing: 6px; color: #fff3c0; text-shadow: 0 0 12px #000, 0 2px 4px #000; margin-top: 6px; animation: lvsub 5s ease-out forwards; }

/* demo (auto showcase) */
#democap { position: absolute; left: 22px; bottom: 316px; padding: 7px 46px 7px 14px; font: 19px var(--serif); letter-spacing: 3px; color: #f3ead2; background: linear-gradient(90deg, rgba(8, 10, 14, .86), rgba(8, 10, 14, .55) 70%, rgba(8, 10, 14, 0)); border-left: 3px solid #e8c878; text-shadow: 0 1px 2px #000; display: none; }
#democap.in { animation: capin .5s ease-out; }
#democap b { display: inline-block; margin-right: 14px; padding: 2px 9px; font: 700 13px var(--sans); letter-spacing: 1px; color: #1a1206; background: linear-gradient(#ffe9a8, #d9a94a); border-radius: 3px; text-shadow: none; vertical-align: 2px; }
@keyframes capin { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
#endcard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(4, 6, 10, .5), rgba(4, 6, 10, .92)); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
#endcard.on { opacity: 1; }
#endcard .kr { text-shadow: none; font: 150px var(--serif); letter-spacing: 26px; padding-left: 26px; background: linear-gradient(#fff6d8, #e8c878 45%, #9a6b2c); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .9)); }
#endcard .tag { font: 30px var(--serif); letter-spacing: 16px; color: #f3ead2; padding-left: 16px; margin-top: 14px; text-shadow: 0 3px 8px #000; }
#endcard .s { margin-top: 44px; font-size: 20px; letter-spacing: 4px; color: #9fb7c9; text-shadow: 0 1px 3px #000; }
#auto.press, #enh-go.press { animation: press .26s ease-out; }
@keyframes press { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(.9); filter: brightness(1.7); } 100% { transform: scale(1); filter: brightness(1); } }

#enh .drop { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 900 30px 'Arial Black', var(--sans); color: #ff7a60; text-shadow: 0 0 14px #a00000, 0 2px 3px #000; opacity: 0; pointer-events: none; letter-spacing: 3px; }
#enh .drop s { color: #b8b0a8; text-decoration-thickness: 3px; } #enh .drop b { color: #ff4a30; font-size: 38px; }
#enh .drop.on { animation: dropin 2.7s ease-out forwards; }
@keyframes dropin { 0% { opacity: 0; transform: translateY(-26px) scale(1.5); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
#enh .res.bad { animation-duration: 2.7s; }