:root{color-scheme:dark;--cream:#f8e7c7;--gold:#eac58c;--pink:#ed9ace;--ink:#151323;--glass:rgba(18,17,34,.82);--outline:rgba(251,220,169,.27)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;margin:0;overflow:hidden;background:#0c101a;color:#f8eddf;font-family:system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif}body{touch-action:none}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible{outline:3px solid #f6dfb2;outline-offset:3px}.hidden{display:none!important}#app{position:relative;isolation:isolate;height:100%;height:100dvh;overflow:hidden;background:radial-gradient(at 55% 50%,#35434f 0%,#100e1d 90%)}#game{display:block;width:100%;height:100%;touch-action:none;outline:0;cursor:crosshair}#screenFade{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:#170f29;transition:opacity .42s}#flash{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;background:#e8e5ff;transition:opacity .14s}.hud{z-index:7;position:absolute;inset:0;pointer-events:none}.hud button,.hud .action-btn{pointer-events:auto}.topbar{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;align-items:center;gap:10px;filter:drop-shadow(0 2px 9px #090713ba)}.avatar{width:61px;height:61px;border:2px solid var(--gold);border-radius:50%;background:#181426;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 13%}.stats{width:min(250px,38vw);display:flex;flex-direction:column;gap:4px}.statline{display:flex;align-items:center;gap:5px;font-weight:800;font-size:10px;text-shadow:0 1px 4px #000}.statname{width:27px;color:#f7dfb4}.meter{position:relative;overflow:hidden;height:11px;flex:1;border:1px solid #8c7781;border-radius:12px;box-shadow:inset 0 2px 4px #0009;background:rgba(5,6,15,.85)}.meter>div{height:100%;width:100%;border-radius:12px;transition:width .13s}.red>div{background:linear-gradient(180deg,#ff9c85,#ea315f)}.blue>div{background:linear-gradient(180deg,#8bcbff,#4474e7)}.gold>div{background:linear-gradient(180deg,#ffeba1,#cc8b3a)}.statline span:last-child{min-width:54px;text-align:right}.stage-pill{margin-left:auto;display:flex;min-width:130px;flex-direction:column;align-items:center;gap:3px;background:linear-gradient(135deg,rgba(15,16,36,.86),rgba(58,39,66,.7));border:1px solid var(--outline);border-radius:14px;padding:10px 16px;font-family:Georgia,'Malgun Gothic',serif;font-size:17px;color:#f6dea7;white-space:nowrap}.stage-pill small{font:600 11px system-ui;color:#e5d1c8}.round-btn{flex:none;width:44px;height:44px;border-radius:50%;background:#171627e3;border:1px solid #e5c8978c;color:#f2dba9;font-weight:900;font-size:21px;box-shadow:0 2px 18px #0007}.round-btn:hover,.action-btn:hover{background:#40304c}.loot-strip{position:absolute;top:90px;left:15px;display:flex;gap:6px;flex-wrap:wrap;max-width:min(590px,80vw)}.loot-chip{display:flex;align-items:center;gap:3px;background:#0c0c23bc;border:1px solid #b6a5bd57;border-radius:30px;padding:1px 9px 1px 4px;color:#f2e5da;font-size:11px;font-weight:800;backdrop-filter:blur(8px)}.loot-chip img{width:25px;height:25px;object-fit:contain}.bossbar{position:absolute;top:149px;left:50%;transform:translateX(-50%);width:min(560px,72vw);background:#150e25c9;border:1px solid #d378b08a;border-radius:10px;padding:8px 13px;font-size:12px;text-align:center;color:#f5b1d4;font-weight:900}.bossbar .meter{height:12px;margin-top:4px}.danger-tag{position:absolute;top:193px;left:50%;transform:translateX(-50%);font-weight:900;font-size:13px;color:#ffc19e;letter-spacing:4px;text-shadow:0 0 14px red}.bottomHud{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;align-items:end;justify-content:space-between;gap:12px}.gesture-hint{color:#e6d4bf;display:flex;gap:10px;align-items:center;font-size:11px;background:#0a0d21ac;border:1px solid #d4bac848;border-radius:40px;padding:7px 14px;text-shadow:0 1px 8px #000}.touch-glyph{font-size:30px;color:#c5adfc}.hud-actions{display:flex;align-items:end;gap:8px;margin-left:auto}.action-btn{position:relative;min-width:61px;height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 5px;border-radius:18px;background:radial-gradient(circle at 48% 30%,#71548ba6,#191027e8 68%);border:1.5px solid #dba6fdad;box-shadow:inset 0 1px 0 #ffffff52,0 4px 16px #100519a8;color:#ffe6f8;user-select:none}.action-btn .glyph{font-family:Georgia,serif;font-size:30px;text-shadow:0 0 11px currentColor;line-height:1.1}.action-btn span:nth-child(2){font-size:10px;font-weight:800}.action-btn small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a091ad4;border-radius:16px;font-size:12px;color:#f1d3c3;font-weight:900;pointer-events:none}.action-btn small:empty{display:none}.action-btn.locked{filter:saturate(.35);border-color:#6f688085}.craft-btn{border-color:#e5b766;background:radial-gradient(circle at 40% 20%,#7a5936,#27182f 78%)}.craft-btn b{position:absolute;top:-8px;right:-6px;background:#ffda8f;color:#241323;min-width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:11px}.joy{position:absolute;width:116px;height:116px;border-radius:50%;border:2px solid #d7c5ff9c;background:#aca0f025;box-shadow:inset 0 0 25px #cdb8ff35;pointer-events:none;transform:translate(-50%,-50%)}.joy-knob{position:absolute;left:50%;top:50%;width:47px;height:47px;border-radius:50%;border:2px solid #b5c8ffb5;background:#b1a4fc65;transform:translate(-50%,-50%)}.banner{position:absolute;top:17%;width:100%;text-align:center;font-family:Georgia,'Malgun Gothic',serif;font-size:clamp(20px,4vw,39px);font-weight:900;color:#ffe4b4;text-shadow:0 0 12px #8e568c,0 2px 15px #000;letter-spacing:4px;animation:appear .3s ease}.toasts{position:absolute;z-index:13;top:24%;left:50%;transform:translateX(-50%);display:grid;gap:8px;min-width:220px;max-width:86vw;pointer-events:none}.toast{font-size:13px;text-align:center;background:#160f30ef;border:1px solid #d9b0ff78;border-radius:25px;padding:10px 18px;box-shadow:0 9px 40px #000b;animation:toastShow .24s ease;color:#ffe2a7;font-weight:700}.overlay{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:#0b0918df;backdrop-filter:blur(12px)}.menu-overlay{background:#0b0b18}.menu-art{position:absolute;inset:0;width:57%;background-image:linear-gradient(90deg,transparent 60%,#0a0a18 100%),linear-gradient(0deg,#0a0a18 0%,transparent 30%),url('./assets/ui/cover.webp');background-size:cover;background-position:left 30%;filter:saturate(.89)}.menu-overlay:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 35% 50%,transparent 3%,#0a091350 50%,#090917d9 90%)}.menu-content{position:relative;z-index:2;width:min(470px,44vw);margin-left:49%;padding:28px}.eyebrow,.en-title,.dialog-top small{color:#f0cf95;letter-spacing:4px;font-size:11px;font-weight:700}.menu-content h1{font-family:Georgia,'Noto Serif KR','Batang',serif;font-size:clamp(56px,7vw,100px);margin:15px 0 3px;line-height:1.12;letter-spacing:10px;text-shadow:0 0 34px #a658aa4d}.menu-content h1 em{font-style:normal;color:#eec5dd}.en-title{font-size:12px;color:#d8baff;letter-spacing:5px}.lead{line-height:1.9;font-size:15px;color:#eddddc;margin:26px 0}.menu-buttons{display:grid;gap:10px;width:min(300px,100%)}.primary-btn,.secondary-btn{min-height:48px;border-radius:13px;padding:12px 20px;text-align:center;font-weight:900;letter-spacing:1px;transition:filter .15s,transform .15s}.primary-btn{color:#231523;background:linear-gradient(110deg,#edc38f,#f3d9bd 52%,#e4b5c2);box-shadow:0 7px 28px #9c497e77}.secondary-btn{background:#242035cf;border:1px solid #d9bbab6d;color:#f4e5d6}.primary-btn:hover,.secondary-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.menu-foot{margin-top:25px;color:#9f9aae;font-size:10px;line-height:1.8}.modal-overlay{padding:15px;z-index:18}.dialog{width:min(740px,100%);max-height:min(770px,92dvh);overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(155deg,#262137fa,#151525fc);border:1px solid #d7b28a83;box-shadow:0 20px 85px #000c;border-radius:21px}.dialog-top{display:flex;align-items:center;justify-content:space-between;padding:18px 23px;border-bottom:1px solid #cda6b533}.dialog-top small{font-size:9px}.dialog-top h2{margin:5px 0 0;font-family:Georgia,'Batang',serif;font-size:25px;color:#f5dbb0}.dialog-body{overflow:auto;overscroll-behavior:contain;padding:20px 23px 24px;max-height:74dvh;touch-action:pan-y}.recipe-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.recipe-card{position:relative;border:1px solid #b8a0bf66;border-radius:14px;padding:15px;background:#100d1c78}.recipe-header{display:flex;align-items:center;gap:10px}.recipe-glyph{width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:#5c387a70;color:#e8ccff;font-family:Georgia,serif;font-size:31px}.recipe-header h3{margin:0;color:#f6d8a3;font-size:16px}.recipe-header p,.recipe-detail{margin:4px 0;color:#d3c4d4;font-size:11px;line-height:1.65}.need-row{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0}.need{border-radius:20px;border:1px solid #e4bac24b;padding:3px 8px;display:flex;gap:4px;align-items:center;font-size:12px;color:#f1d5d1}.need.missing{color:#fb899d;border-color:#ee717449}.need img{width:24px;height:24px;object-fit:contain}.recipe-card button{width:100%;padding:10px;border-radius:9px;background:#dabf9b;color:#251525;font-weight:900}.recipe-card button:disabled{background:#3c3348;color:#b5a8bc;cursor:default}.guide-section{margin-bottom:20px;line-height:1.75;font-size:14px;color:#e6d7e6}.guide-section h3{color:#f7d79e;margin:5px 0}.guide-section p{margin:6px 0}.guide-section kbd{display:inline-block;background:#413952;border-radius:5px;padding:0 5px}.option-row{display:flex;gap:10px;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff18;padding:14px 0;font-size:14px}.option-row button{background:#372c48;border:1px solid #ba9dd0;border-radius:10px;padding:8px 15px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.result-stats>div{background:#1a1426;border:1px solid #ffffff28;padding:13px 4px;text-align:center;border-radius:10px;font-size:12px}.result-stats strong{display:block;font-size:26px;color:#f8d49b}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.dialog-actions button{flex:1}.install-banner{position:absolute;z-index:28;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:12px 14px;background:#23162ff5;border:1px solid #eec6a2;border-radius:13px;box-shadow:0 10px 45px #0008;font-size:12px;max-width:90vw}.install-banner button{border-radius:9px;background:#f3d4a4;color:#211424;padding:7px 11px;font-weight:800}.install-banner button:last-child{font-size:19px;padding:2px 8px;background:transparent;color:#fff}@keyframes toastShow{from{transform:translateY(13px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes appear{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:750px){.menu-art{width:100%;height:72%;inset:0 0 auto 0;background-image:linear-gradient(0deg,#090916 3%,transparent 72%),linear-gradient(90deg,#07081764,#07081717),url('./assets/ui/cover.webp');background-size:cover;background-position:left 25%}.menu-overlay:before{background:linear-gradient(0deg,#080912 0%,transparent 75%)}.menu-content{position:absolute;bottom:3%;left:0;margin:0;width:100%;padding:0 23px 12px;max-width:490px}.menu-content h1{font-size:clamp(44px,11vw,63px);margin:5px 0;line-height:1.07}.menu-content h1 br{display:none}.menu-content h1 em:before{content:" "}.lead{margin:8px 0 14px;font-size:12px}.eyebrow{font-size:9px}.menu-buttons{grid-template-columns:1fr 1fr;width:100%;gap:7px}.menu-buttons .primary-btn{grid-column:1/-1}.menu-buttons button{min-height:43px;padding:10px 5px;font-size:12px}.menu-foot{font-size:9px;margin:8px 0 0}.avatar{width:42px;height:42px}.topbar{gap:5px;left:7px;right:7px;top:max(5px,env(safe-area-inset-top))}.stats{width:min(170px,41vw);gap:1px}.statname{width:21px}.statline{font-size:8px;gap:3px}.statline span:last-child{min-width:42px}.meter{height:9px}.stage-pill{padding:5px 6px;border-radius:10px;font-size:11px;min-width:76px}.stage-pill small{font-size:9px}.topbar .round-btn{width:35px;height:35px;font-size:16px}.loot-strip{top:58px;left:7px;right:7px;gap:4px;max-width:none}.loot-chip{font-size:9px;padding:0 5px 0 2px}.loot-chip img{width:21px;height:21px}.bossbar{top:112px;width:80vw}.bottomHud{left:7px;right:7px;bottom:max(7px,env(safe-area-inset-bottom));gap:5px}.gesture-hint{max-width:108px;padding:6px;border-radius:14px;gap:4px;font-size:9px;line-height:1.2}.touch-glyph{font-size:20px}.hud-actions{gap:4px}.action-btn{min-width:49px;width:49px;height:57px;padding:3px;border-radius:13px}.action-btn .glyph{font-size:25px}.action-btn span:nth-child(2){font-size:9px}.recipe-grid{grid-template-columns:1fr}.dialog-top{padding:13px 15px}.dialog-top h2{font-size:21px}.dialog-body{padding:15px}.toasts{top:21%}.banner{top:13%}}@media(max-width:380px){.action-btn{min-width:44px;width:44px;height:52px}.action-btn .glyph{font-size:22px}.gesture-hint{display:none}.stage-pill small{font-size:8px}.stage-pill{min-width:66px}.menu-content{padding-left:16px;padding-right:16px}}@media(max-height:520px) and (orientation:landscape){.menu-art{width:55%;height:100%;background-position:center 25%}.menu-content{position:absolute;left:auto;right:2%;top:5%;bottom:3%;width:43%;padding:3px 15px;overflow:auto}.menu-content h1{font-size:42px}.lead{margin:6px 0;font-size:11px}.menu-buttons button{min-height:37px}.menu-foot{display:none}.loot-strip{top:61px}.bottomHud{bottom:3px}}

/* HQ animation & combat polish */
.combo-badge{position:absolute;right:max(18px,env(safe-area-inset-right));top:96px;padding:7px 14px;border:1px solid #e6beff88;background:linear-gradient(115deg,#30144fdf,#9f397fb8);border-radius:18px;color:#ffe3bd;font-size:clamp(12px,2.5vw,20px);font-weight:900;letter-spacing:1.2px;text-shadow:0 0 12px #d88bff;animation:appear .22s ease;box-shadow:0 0 18px #b83ac04d;pointer-events:none}
@media(max-width:750px){.combo-badge{right:9px;top:62px;padding:4px 10px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.combo-badge,.toast,.banner{animation:none}}

.stage-progress{width:100%;height:3px;margin-top:3px;border-radius:99px;background:#ffffff3d;overflow:hidden}.stage-progress>div{height:100%;width:0;background:linear-gradient(90deg,#79b6ff,#f1a7ff,#ffe5aa);border-radius:99px;box-shadow:0 0 8px #cda4ff}
#skillFrost .glyph{color:#9cdefc}#skillArc .glyph{color:#c4a0ff}#skillMeteor .glyph{color:#ffbd9b}#skillMoon .glyph{color:#ffbdff}
.spell-btn:not(.locked){border-color:#f9d9ff;box-shadow:0 0 23px #9c4cb988,inset 0 1px 8px #ffffff35}