:root{--ink:#07130e;--forest:#0f2a1f;--forest2:#173d2d;--jade:#5fd3a6;--gold:#e6b84c;--gold2:#ffe9a8;--paper:#efe6cf;--red:#d8343c;--muted:#9fb3a6;--head:"Cinzel", "Noto Serif", "Noto Serif KR", Georgia, serif;--body:"Noto Serif", "Noto Serif KR", Georgia, serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--paper);font-family:var(--body);background:#030806;margin:0;overflow:hidden}body{touch-action:manipulation;-webkit-user-select:none;user-select:none}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}#stage{transform-origin:0 0;background:var(--ink);width:720px;height:1280px;position:fixed;top:0;left:0;overflow:hidden}#game{position:absolute;top:0;bottom:0;left:0;right:0}#game canvas{display:block}#ui{pointer-events:none;font-size:22px;position:absolute;top:0;bottom:0;left:0;right:0}#ui>*{pointer-events:auto}button{font-family:var(--head);cursor:pointer;color:inherit;border:none}input{font-family:var(--body)}.frame{background:linear-gradient(#173d2df5,#091a13f7);border:2px solid #8c6a2a;border-radius:10px;position:relative;box-shadow:inset 0 0 0 1px #ffe9a840,inset 0 0 30px #00000080,0 6px 20px #00000080}.frame:before,.frame:after{content:"";border:3px solid var(--gold);pointer-events:none;width:22px;height:22px;position:absolute}.frame:before{border-bottom:none;border-right:none;border-radius:10px 0 0;top:-3px;left:-3px}.frame:after{border-top:none;border-left:none;border-radius:0 0 10px;bottom:-3px;right:-3px}.btn{color:#2a1600;text-shadow:0 1px #fff0c899;background:linear-gradient(#f3cf6b,#c48a22 55%,#9c6512);border-radius:8px;padding:12px 20px;font-size:22px;font-weight:700;box-shadow:inset 0 1px #fff9,0 3px #5a3a08,0 6px 14px #0006}.btn:active{transform:translateY(2px);box-shadow:inset 0 1px #fff9,0 1px #5a3a08}.btn.jade{color:#04150e;background:linear-gradient(#8ff0c6,#2f9f74 55%,#1d6b4d);box-shadow:inset 0 1px #fff9,0 3px #0b3a28,0 6px 14px #0006}.btn.ghost{color:var(--gold2);box-shadow:none;text-shadow:none;background:#00000059;border:1px solid #e6b84c99}.btn.red{color:#fff2e6;text-shadow:none;background:linear-gradient(#ff8a7a,#c8332e 55%,#8e1d1b);box-shadow:inset 0 1px #fff6,0 3px #4a0c0a}.btn[disabled],.btn.off{filter:grayscale(.8)brightness(.7)}.btn.sm{padding:8px 12px;font-size:18px}#hud{background:linear-gradient(#040c09eb,#040c098c 75%,#040c0900);align-items:center;gap:12px;width:720px;height:104px;padding:10px 14px;display:flex;position:absolute;top:0;left:0}.por{border:3px solid var(--gold);background:#000 50%/cover no-repeat;border-radius:50%;flex:none;width:84px;height:84px;position:relative;box-shadow:0 0 0 2px #3a2a08,0 0 18px #e6b84c66}.por .lv{color:var(--gold2);font:700 15px var(--head);border:1px solid var(--gold);white-space:nowrap;background:#2a1600;border-radius:9px;padding:1px 8px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.who{flex:1;min-width:0}.who .nm{font:700 22px var(--head);color:var(--gold2);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 4px #000;overflow:hidden}.who .cp{font:700 20px var(--head);color:#fff;text-shadow:0 2px 4px #000}.who .cp small{color:var(--gold);margin-right:6px;font-size:15px}.cur{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.chip{font:700 18px var(--head);background:#0000008c;border:1px solid #e6b84c73;border-radius:14px;justify-content:space-between;align-items:center;gap:6px;min-width:130px;padding:2px 12px 2px 4px;display:flex}.chip img{object-fit:cover;border-radius:50%;width:24px;height:24px}.chip.pulse{animation:.25s pulse}@keyframes pulse{50%{border-color:var(--gold2);transform:scale(1.08)}}#expbar{background:#0009;width:720px;height:6px;position:absolute;top:104px;left:0}#expbar i{background:linear-gradient(90deg,#8ff0c6,#e6b84c);width:0;height:100%;transition:width .3s;display:block}#stagebar{align-items:center;gap:10px;display:flex;position:absolute;top:118px;left:12px;right:12px}.zone{font:700 20px var(--head);color:var(--gold2);text-shadow:0 2px 6px #000,0 0 2px #000;flex:1}.zone small{color:#d8efe3;font-size:15px;display:block}.killbar{background:#0009;border:1px solid #e6b84c66;border-radius:4px;width:160px;height:8px;margin-top:4px;overflow:hidden}.killbar i{background:var(--red);width:0;height:100%;transition:width .3s;display:block}.toggle{font:700 16px var(--head);border:1px solid var(--gold);color:var(--muted);background:#0000008c;border-radius:18px;padding:8px 12px}.toggle.on{color:#04150e;background:var(--jade)}#skillbar{gap:10px;display:flex;position:absolute;top:760px;right:14px}.sk{border:3px solid var(--gold);background:#000 50%/160% no-repeat;border-radius:50%;width:76px;height:76px;position:relative;overflow:hidden;box-shadow:0 0 10px #000c}.sk .cd{border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.sk.locked{filter:grayscale()brightness(.4)}.sk.flash{animation:.5s skflash}@keyframes skflash{0%{box-shadow:0 0 #ffe9a8e6}to{box-shadow:0 0 0 18px #ffe9a800}}#townbtn{position:absolute;top:770px;left:14px}#panel{overscroll-behavior:contain;border-bottom:none;border-radius:14px 14px 0 0;width:720px;height:326px;padding:14px 16px 18px;position:absolute;top:856px;left:0;overflow-y:auto}#panel::-webkit-scrollbar{width:0}#nav{background:linear-gradient(#10271d,#050d09);border-top:2px solid #8c6a2a;width:720px;height:98px;display:flex;position:absolute;bottom:0;left:0}#nav button{color:var(--muted);background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;font-size:15px;display:flex;position:relative}#nav button img{object-fit:cover;opacity:.75;border:1px solid #e6b84c4d;border-radius:10px;width:46px;height:46px}#nav button.on{color:var(--gold2)}#nav button.on img{opacity:1;border-color:var(--gold);box-shadow:0 0 12px #e6b84c99}#nav button.on:after{content:"";background:var(--gold);height:3px;position:absolute;top:0;left:20%;right:20%}#nav .dot{background:var(--red);border-radius:50%;width:12px;height:12px;display:none;position:absolute;top:8px;right:26px}#nav .dot.on{display:block}.bagpulse{animation:.3s pulse}h3{font:700 22px var(--head);color:var(--gold2);letter-spacing:.5px;margin:4px 0 10px}.row{border-bottom:1px solid #e6b84c26;align-items:center;gap:10px;padding:8px 0;display:flex}.row .grow{flex:1;min-width:0}.row .t{font:700 19px var(--head);color:var(--gold2)}.row .s{color:var(--muted);font-size:16px}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;display:grid}.stat{background:#00000059;border:1px solid #e6b84c40;border-radius:8px;padding:6px 10px}.stat b{font:700 20px var(--head);color:#fff;display:block}.stat span{color:var(--muted);font-size:14px}.ico{object-fit:cover;background:#0a0f0c;border:2px solid #555;border-radius:10px;flex:none;width:56px;height:56px}.slots{grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px;display:grid}.grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.cell{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#1f3a2e,#07110c);border:2px solid #555;border-radius:10px;position:relative;overflow:hidden}.cell img{object-fit:cover;width:100%;height:100%}.cell .en{font:700 15px var(--head);color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;position:absolute;top:1px;right:3px}.cell .lb{text-align:center;color:var(--muted);background:#0009;font-size:12px;position:absolute;bottom:0;left:0;right:0}.cell.empty{opacity:.5}.cell.new:before{content:"";background:var(--red);z-index:2;border-radius:50%;width:9px;height:9px;position:absolute;top:4px;left:4px}.modal-bg{z-index:50;background:#020604bf;justify-content:center;align-items:center;animation:.2s fade;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.modal{text-align:center;width:620px;max-height:1100px;padding:26px;animation:.25s cubic-bezier(.2,1.4,.4,1) pop;overflow-y:auto}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.modal h2{font:700 32px var(--head);color:var(--gold2);margin:0 0 6px}.modal p{color:var(--muted);margin:6px 0 14px;font-size:19px}.btns{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px;display:flex}.reward-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0;display:grid}.reward{text-align:left;background:#0006;border:1px solid #e6b84c59;border-radius:10px;align-items:center;gap:10px;padding:10px;display:flex}.reward img{object-fit:cover;border-radius:8px;width:48px;height:48px}.reward b{font:700 24px var(--head);color:#fff;display:block}.reward span{color:var(--muted);font-size:15px}.chest{background:50%/cover no-repeat;border-radius:50%;width:220px;height:220px;margin:0 auto;animation:1.6s infinite alternate chestglow;position:relative;box-shadow:0 0 60px #ffc85a99}@keyframes chestglow{to{transform:scale(1.03);box-shadow:0 0 110px #ffdc78e6}}.rays{background:repeating-conic-gradient(#ffe9a840 0 8deg, transparent 8deg 22deg);z-index:-1;border-radius:50%;animation:12s linear infinite spin;position:absolute;top:-60px;bottom:-60px;left:-60px;right:-60px;-webkit-mask:radial-gradient(circle,#000 30%,#0000 70%);mask:radial-gradient(circle,#000 30%,#0000 70%)}@keyframes spin{to{transform:rotate(360deg)}}.toast{border:1px solid var(--gold);color:var(--gold2);font:700 20px var(--head);z-index:60;white-space:nowrap;pointer-events:none;background:#0a1610f0;border-radius:22px;padding:10px 22px;animation:2.2s forwards toast;position:absolute;top:200px;left:50%;transform:translate(-50%)}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,80%{opacity:1;transform:translate(-50%)}to{opacity:0}}.banner{text-align:center;font:700 56px var(--head);color:var(--gold2);z-index:40;pointer-events:none;text-shadow:0 0 20px #e6b84ccc,0 4px #3a1d00,0 0 4px #000;animation:1.8s forwards banner;position:absolute;top:380px;left:0;right:0}.banner.bad{color:#ffb3a8;text-shadow:0 0 20px #d8343ccc,0 4px #3a0505;font-size:40px}@keyframes banner{0%{opacity:0;transform:scale(1.6)}15%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-30px)}}.screen{z-index:30;background:var(--ink) center/cover no-repeat;flex-direction:column;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.screen .shade{background:linear-gradient(#03080633,#0308061a 40%,#030806d9 70%,#030806fa);position:absolute;top:0;bottom:0;left:0;right:0}.logo{text-align:center;margin-top:150px;position:relative}.logo h1{font:700 76px var(--head);color:var(--gold2);letter-spacing:2px;text-shadow:0 0 30px #e6b84cb3,0 4px #5a3a08,0 8px 20px #000;margin:0}.logo div{font:600 24px var(--head);color:#d8efe3;letter-spacing:6px;text-shadow:0 2px 6px #000}.login-box{flex-direction:column;gap:14px;width:560px;margin-top:auto;margin-bottom:90px;padding:26px;display:flex;position:relative}.login-box input{color:#fff;background:#00000073;border:1px solid #e6b84c80;border-radius:8px;padding:14px;font-size:22px}.link{color:var(--gold2);font:600 18px var(--body);background:0 0;padding:6px;text-decoration:underline}.err{color:#ffb3a8;text-align:center;min-height:22px;font-size:18px}.langs{z-index:2;gap:6px;display:flex;position:absolute;top:18px;right:18px}.langs button{color:var(--gold2);font:700 16px var(--head);background:#00000080;border:1px solid #e6b84c80;border-radius:14px;padding:6px 12px}.langs button.on{background:var(--gold);color:#2a1600}.classes{gap:10px;width:100%;margin-top:14px;padding:0 16px;display:flex;position:relative}.ccard{background:#000 50% 15%/cover no-repeat;border:2px solid #555;border-radius:10px;flex:1;height:150px;position:relative;overflow:hidden}.ccard span{font:700 16px var(--head);color:var(--gold2);text-align:center;background:linear-gradient(#0000,#000000e6);padding:18px 2px 4px;position:absolute;bottom:0;left:0;right:0}.ccard.on{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 16px #e6b84ccc}.cpreview{flex:1;justify-content:center;align-items:flex-end;width:100%;min-height:0;display:flex;position:relative}.cpreview img{filter:drop-shadow(0 10px 20px #000c);transform-origin:bottom;max-width:90%;max-height:100%;animation:3s ease-in-out infinite breathe}@keyframes breathe{50%{transform:scaleY(1.012)translateY(-3px)}}.cdesc{flex-direction:column;gap:10px;width:640px;margin:10px 0 24px;padding:16px 20px;display:flex;position:relative}.cdesc .t{font:700 30px var(--head);color:var(--gold2)}.cdesc input{color:#fff;background:#00000073;border:1px solid #e6b84c80;border-radius:8px;padding:12px;font-size:22px}.odds{border-collapse:collapse;width:100%;margin-top:8px;font-size:17px}.odds td{border-bottom:1px solid #e6b84c26;padding:4px 8px}.odds td:last-child{text-align:right;font-family:var(--head)}.loading{font:700 28px var(--head);color:var(--gold2);z-index:70;background:var(--ink) center/cover;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.loading:after{content:"";background:#03080673;position:absolute;top:0;bottom:0;left:0;right:0}.loading span{z-index:1;text-shadow:0 2px 8px #000;position:relative}.cards{grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0;display:grid}.cards .cell{animation:.5s backwards flip}@keyframes flip{0%{opacity:0;transform:rotateY(90deg)scale(.6)}}.glow4{box-shadow:0 0 16px #ffc24a}.glow5{box-shadow:0 0 22px #ff4d5e}.glow3{box-shadow:0 0 12px #c47bff}.chatlog{text-align:left;background:#00000059;border-radius:8px;height:180px;padding:6px 10px;font-size:17px;overflow-y:auto}.chatlog div{padding:2px 0}.chatlog b{color:var(--gold2);font-weight:700}.chatin{gap:8px;margin-top:8px;display:flex}.chatin input{color:#fff;background:#00000073;border:1px solid #e6b84c80;border-radius:8px;flex:1;padding:8px 10px;font-size:19px}.in-town #stagebar,.in-town #skillbar{display:none}