*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#05060a;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;color:#e8eaf0}#app{position:fixed;inset:0}canvas{display:block}#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#e8c667;font-family:Nanum Myeongjo,Times New Roman,serif;letter-spacing:4px;z-index:100}#fade{position:fixed;inset:0;background:#05060a;opacity:0;pointer-events:none;z-index:60}.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:45;font-family:Nanum Myeongjo,Times New Roman,serif;background:radial-gradient(ellipse at center,#08090fb8,#040509eb)}.overlay.show{display:flex}.screen{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(94vw,960px);max-height:92vh;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);text-align:center;scrollbar-width:thin}.title-mark{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}.title-hanja{font-size:clamp(52px,13vw,116px);letter-spacing:10px;line-height:1;color:#f4e3ad;background:linear-gradient(180deg,#fff6d8,#e8c667 45%,#a8791f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 34px rgba(232,198,103,.35);filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}.title-kor{font-size:clamp(15px,3.4vw,22px);letter-spacing:10px;color:#c9cdda}.title-tag{font-size:clamp(11px,2.6vw,14px);letter-spacing:3px;color:#7f8496;margin-top:2px}.btn{min-width:180px;min-height:48px;padding:12px 26px;font-family:inherit;font-size:17px;letter-spacing:3px;color:#f0e4c0;background:linear-gradient(180deg,#1a1b24,#0c0d13);border:1px solid #6b5a2e;border-radius:8px;cursor:pointer;transition:transform .08s,border-color .12s,box-shadow .12s,filter .12s;outline:none}.btn:hover,.btn:focus-visible{border-color:#e8c667;box-shadow:0 0 16px #e8c66747}.btn:active{transform:translateY(1px) scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}.btn-primary{color:#1a140a;background:linear-gradient(180deg,#ffe9a8,#e8c667 55%,#c79b3a);border-color:#ffe9a8;font-size:19px;box-shadow:0 0 22px #e8c66766}.btn-primary:hover,.btn-primary:focus-visible{filter:brightness(1.08)}.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.btn-icon{min-width:48px;min-height:48px;padding:10px;font-size:20px;letter-spacing:0}.controls-hint{color:#8a8f9c;font-size:13px;letter-spacing:2px;line-height:1.8}.controls-hint b{color:#c9cdda;font-weight:400}.section-title{font-size:clamp(22px,5vw,30px);letter-spacing:6px;color:#e8c667;text-shadow:0 0 14px rgba(232,198,103,.4)}.section-title small{font-size:.55em;opacity:.7;letter-spacing:3px}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}.hero-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;background:linear-gradient(180deg,#14151d,#0a0b11);border:1px solid #3a3f4d;border-radius:10px;cursor:pointer;transition:transform .1s,border-color .12s,box-shadow .12s}.hero-card:hover,.hero-card.sel{border-color:#e8c667;box-shadow:0 0 20px #e8c66738;transform:translateY(-3px)}.hero-card.locked{cursor:not-allowed;border-color:#33373f}.hero-card.locked.shop-lock{cursor:pointer}.hero-portrait{image-rendering:pixelated;background-repeat:no-repeat;border-radius:8px;background-color:#00000040}.hero-card.locked .hero-portrait{filter:brightness(0) contrast(.4)}.hero-lock{position:absolute;top:48px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:#e8c667;font-size:30px;text-shadow:0 0 12px rgba(0,0,0,.9)}.hero-lock .price{max-width:150px;font-size:13px;line-height:1.35;text-align:center;letter-spacing:1px}.hero-name{font-size:19px;color:#f0e4c0;letter-spacing:1px}.hero-name .hanja{font-size:14px;color:#e8c667;margin-left:4px}.hero-line{font-size:12px;color:#9aa0b0;line-height:1.4}.hero-line .k{color:#7ec8ff}.hero-musou{font-size:11.5px;color:#e8a94a;line-height:1.4}.hero-quote{margin-top:6px;padding-top:8px;border-top:1px solid rgba(232,198,103,.15);font-size:11.5px;font-style:italic;color:#b6bac6;line-height:1.5}.title-quote{max-width:560px;margin-top:4px;font-size:clamp(13px,3vw,16px);font-style:italic;color:#c9cdda;line-height:1.6;text-shadow:0 2px 6px rgba(0,0,0,.8)}.title-quote .who{color:#e8c667;font-style:normal;white-space:nowrap}.result-quote{max-width:620px;font-size:15px;font-style:italic;color:#d8dae2;line-height:1.6}.tabs{display:flex;gap:8px}.tab{padding:8px 22px;font-size:15px;letter-spacing:3px;color:#8a8f9c;border:1px solid #33373f;border-radius:8px;background:#0e0f15b3;cursor:pointer}.tab.active{color:#e8c667;border-color:#6b5a2e;background:#1c160ab3}.gold-tag{font-size:18px;color:#e8c667;letter-spacing:2px}.shop-list{display:flex;flex-direction:column;gap:10px;width:100%}.shop-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(180deg,#14151d,#0b0c12);border:1px solid #3a3f4d;border-radius:10px;text-align:left}.shop-info .name{font-size:16px;color:#f0e4c0}.shop-info .name .hanja{font-size:12px;color:#e8c667;margin-left:6px}.shop-info .desc{font-size:12.5px;color:#9aa0b0;margin-top:2px}.pips{display:flex;gap:4px;margin-top:6px}.pip{width:16px;height:6px;border-radius:3px;background:#ffffff1f}.pip.on{background:linear-gradient(90deg,#e8c667,#fff2c0);box-shadow:0 0 6px #e8c66799}.shop-buy{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.codex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.codex-cell{padding:12px;border:1px solid #3a3f4d;border-radius:10px;background:#0e0f15b3}.codex-cell.slain{border-color:#6b5a2e}.codex-cell .cx-name{font-size:16px;color:#f0e4c0}.codex-cell .cx-state{font-size:12px;margin-top:4px}.wpn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.wpn-cell{padding:10px 12px;border:1px solid #3a3f4d;border-radius:10px;background:#0e0f15b3;text-align:left}.wpn-cell.evo{border-color:#6b4a2e;background:#1c120ab3;box-shadow:0 0 14px #ff9a3c1f}.wpn-cell.locked{opacity:.55;border-style:dashed;border-color:#2b2f39}.wpn-cell .wpn-name{font-size:14.5px;color:#f0e4c0}.wpn-cell.evo .wpn-name{color:#ffcf8a}.wpn-cell.locked .wpn-name{color:#6b7080}.wpn-cell .wpn-name .wh{font-size:12px;color:#e8c667;margin-left:4px}.wpn-cell.evo .wpn-name .wh{color:#ff9a3c}.wpn-cell .wpn-desc{font-size:11.5px;color:#b6bac6;margin-top:3px;line-height:1.4}.wpn-cell .wpn-recipe{font-size:11.5px;color:#ffcf8a;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,154,60,.2);letter-spacing:.5px}.wpn-cell .wpn-recipe b{color:#ffe9a8;font-weight:400}.wpn-cell .wpn-cond{font-size:11px;color:#7f8496;margin-top:5px}.weapon-unlock-toast{color:#ffd9a8;background:#ff9a3c1f;border-color:#ffb45a80;box-shadow:0 0 18px #ff9a3c38}.mw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.mw-cell{padding:10px 12px;border:1px solid #2b2f39;border-radius:10px;background:#0c0d13b3;text-align:left}.mw-cell.owned{border-color:#6b5a2e;background:#18160cb8;box-shadow:0 0 14px #e8c6671f}.mw-cell.locked{opacity:.5;border-style:dashed}.mw-cell .mw-name{font-size:14.5px;color:#f0e4c0}.mw-cell.locked .mw-name{color:#6b7080}.mw-cell .mw-name .mh{font-size:12px;color:#cbb46a;margin-left:4px}.mw-cell.locked .mw-name .mh{color:#565b68}.mw-cell .mw-desc{font-size:11.5px;color:#d8dae2;margin-top:4px;line-height:1.4}.mw-cell .mw-lore{font-size:11px;color:#9aa39a;margin-top:6px;padding-top:6px;border-top:1px solid rgba(232,198,103,.14);line-height:1.5}.mw-cell .mw-state{font-size:11px;color:#7f8496;margin-top:4px;letter-spacing:1px}.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.ach-cell{padding:10px 12px;border:1px solid #2b2f39;border-radius:10px;background:#0c0d13b3;text-align:left;opacity:.6}.ach-cell.done{border-color:#6b5a2e;background:#1c160ab3;box-shadow:0 0 14px #e8c66724;opacity:1}.ach-cell .ach-name{font-size:14.5px;color:#8a8f9c}.ach-cell.done .ach-name{color:#ffe9a8}.ach-cell .ach-name .ah{font-size:12px;color:#e8c667;margin-left:4px}.ach-cell .ach-desc{font-size:11.5px;color:#5a6070;margin-top:3px;line-height:1.4}.ach-cell.done .ach-desc{color:#b6bac6}.records{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.rec{padding:10px;border:1px solid #3a3f4d;border-radius:10px;background:#0e0f15b3}.rec .rv{font-size:22px;color:#e8c667;font-variant-numeric:tabular-nums}.rec .rl{font-size:12px;color:#9aa0b0;margin-top:2px}.result-title{font-size:clamp(48px,12vw,84px);letter-spacing:10px;line-height:1}.result-title.win{color:#ffe9a8;text-shadow:0 0 30px rgba(255,233,168,.6)}.result-title.lose{color:#e85c4a;text-shadow:0 0 24px rgba(232,92,74,.5)}.result-sub{font-size:18px;letter-spacing:4px;color:#c9cdda}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:560px}.rs{padding:10px;border:1px solid #3a3f4d;border-radius:8px;background:#0e0f15b3}.rs .v{font-size:22px;color:#f0e4c0;font-variant-numeric:tabular-nums}.rs .v .nr{font-size:11px;color:#9affc0;margin-left:4px;letter-spacing:1px}.rs .l{font-size:12px;color:#9aa0b0;margin-top:2px}.gold-earned{font-size:20px;color:#e8c667;letter-spacing:2px}.gold-earned .bonus{font-size:14px;color:#9affc0;margin-left:6px}.ach-toast{padding:8px 18px;border-radius:20px;font-size:14px;letter-spacing:1px;color:#ffe9a8;background:#e8c6671f;border:1px solid rgba(255,220,120,.5);box-shadow:0 0 18px #ffdc7840;animation:ach-pop .5s ease-out}.ach-toast b{color:#fff2c0;font-weight:400}@keyframes ach-pop{0%{transform:scale(.7) translateY(-8px);opacity:0}60%{transform:scale(1.06);opacity:1}to{transform:scale(1);opacity:1}}.build-summary{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:620px}.build-chip{padding:4px 10px;font-size:12.5px;border-radius:14px;border:1px solid #3a3f4d;background:#0e0f15b3}.build-chip.w{color:#e8c667;border-color:#6b5a2e}.build-chip.p{color:#7ec8ff;border-color:#2f4a5e}.levelup-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:40;background:#06070cdb;font-family:Nanum Myeongjo,Times New Roman,serif;padding:max(env(safe-area-inset-top,0px),10px) max(env(safe-area-inset-right,0px),10px) max(env(safe-area-inset-bottom,0px),10px) max(env(safe-area-inset-left,0px),10px);overflow:hidden}.levelup-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2.2vh,16px);width:100%;max-height:100%}.levelup-title{color:#e8c667;font-size:clamp(17px,3.2vh,26px);letter-spacing:4px;text-shadow:0 0 12px rgba(232,198,103,.5);text-align:center}.levelup-title span{font-size:.7em;opacity:.7}.levelup-row{display:flex;flex-wrap:nowrap;gap:clamp(6px,1.6vw,18px);justify-content:center;align-items:stretch;width:100%;max-width:700px}.levelup-card{position:relative;flex:1 1 0;min-width:0;max-width:210px;padding:clamp(12px,2.4vh,22px) clamp(8px,1vw,16px);background:linear-gradient(180deg,#14151d,#0a0b11);border:1px solid #6b5a2e;border-radius:10px;box-shadow:0 0 18px #e8c6671f,inset 0 0 0 1px #e8c6671f;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:clamp(5px,1.4vh,12px);transition:transform .08s,border-color .12s,box-shadow .12s}.levelup-card:hover{transform:translateY(-4px)}.lc-badge{position:absolute;top:8px;right:8px;font-size:clamp(9px,1.4vh,11px);letter-spacing:1px;padding:2px 7px;border-radius:10px;border:1px solid}.lc-symbol{width:clamp(38px,7.5vh,56px);height:clamp(38px,7.5vh,56px);flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,4.4vh,30px);background:radial-gradient(circle at 40% 35%,#ffffff14,#00000059);border:1.5px solid}.lc-tag{font-size:clamp(9px,1.5vh,11px);letter-spacing:2px;opacity:.85;text-align:center}.lc-count{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:.92em;letter-spacing:1px;color:#d8dae2;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums}.lc-count.full{color:#ffe9a8;background:#e8c66729;border-color:#ffdc7873}.lc-evohint{font-size:clamp(9.5px,1.5vh,11.5px);line-height:1.35;letter-spacing:.5px;color:#ffcf8a;text-align:center;padding:3px 6px;border-radius:7px;background:#ff9a3c1a;border:1px dashed rgba(255,180,90,.4);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.lc-title{color:#f0e4c0;font-size:clamp(15px,2.6vh,20px);letter-spacing:1px;text-align:center}.lc-hanja{font-size:clamp(11px,1.9vh,14px);opacity:.9;text-align:center}.lc-desc{color:#d8dae2;font-size:clamp(11px,1.8vh,14px);line-height:1.4;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}.lc-num{margin-top:auto;color:#5a6070;font-size:clamp(16px,2.6vh,22px)}.levelup-bottom{display:flex;align-items:center;gap:clamp(10px,3vw,20px);flex-wrap:wrap;justify-content:center}.levelup-hint{color:#8a8f9c;font-size:clamp(11px,1.6vh,13px);letter-spacing:2px}.levelup-reroll{padding:8px 16px;border:1px solid #6b5a2e;border-radius:6px;color:#e8c667;font-size:clamp(12px,1.8vh,14px);cursor:pointer;letter-spacing:1px}@media(max-width:560px){.hud-top{transform:scale(.82)}.hud-bottom{transform:scale(.86)}.hud-slots{transform:scale(.8)}.hero-grid,.codex-grid,.ach-grid,.wpn-grid,.mw-grid,.records{grid-template-columns:repeat(2,1fr)}.result-stats{grid-template-columns:repeat(3,1fr)}.btn{min-width:150px}}