:root{--ink: #0d0b16;--ink2: #171328;--violet: #9b5cff;--violet-d: #6b34d8;--gold: #d6b25e;--paper: #efe7d8;--muted: #a69cc0;--red: #e0533f;--glass: rgba(16, 12, 30, .72);--line: rgba(155, 92, 255, .35);--font: "Noto Serif KR", Georgia, "Times New Roman", serif;--display: "Cinzel", "Noto Serif KR", Georgia, serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);font-family:var(--font);overflow:hidden}#app{position:fixed;inset:0}button{font-family:inherit}.layer{position:absolute;inset:0}.stage canvas{display:block}.menu{position:absolute;inset:0;display:flex;pointer-events:none}.menu>*{pointer-events:auto}.menu .side{width:min(440px,92vw);padding:44px 40px 70px;background:linear-gradient(90deg,#080610eb 60%,#08061000);display:flex;flex-direction:column;gap:10px;overflow-y:auto}.logo{font-family:var(--display);font-weight:800;font-size:clamp(42px,6vw,64px);line-height:.92;letter-spacing:.04em;margin:0 0 4px;text-shadow:0 0 24px rgba(155,92,255,.45)}.logo span{display:block;color:var(--violet)}.tag{color:var(--muted);font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:24px}.btn{appearance:none;border:1px solid var(--line);background:#1e163699;color:var(--paper);padding:13px 18px;font-size:17px;text-align:left;cursor:pointer;letter-spacing:.04em;transition:all .15s;position:relative;clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}.btn:hover,.btn:focus-visible{background:linear-gradient(90deg,var(--violet-d),rgba(107,52,216,.2));border-color:var(--violet);padding-left:26px;outline:none}.btn.primary{background:linear-gradient(90deg,var(--violet-d),rgba(107,52,216,.35));border-color:var(--violet);font-weight:600}.btn.small{font-size:14px;padding:9px 14px}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn .k{float:right;color:var(--muted);font-size:12px;margin-top:3px}.panel{position:absolute;right:4vw;top:7vh;bottom:7vh;width:min(760px,92vw);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);padding:28px 32px;overflow-y:auto;box-shadow:0 30px 80px #00000080}.panel h2{font-family:var(--display);font-size:30px;margin:0 0 6px;letter-spacing:.05em}.panel h3{font-size:16px;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;margin:24px 0 10px}.panel p,.muted{color:var(--muted)}.close{position:absolute;top:18px;right:20px;background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.card{border:1px solid var(--line);background:#140e26bf;padding:16px;position:relative;cursor:pointer;transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-2px);border-color:var(--violet)}.card.locked{opacity:.5;cursor:not-allowed}.card .n{font-family:var(--display);color:var(--violet);font-size:13px;letter-spacing:.2em}.card .t{font-size:18px;font-weight:600;margin:6px 0}.card .d{font-size:13px;color:var(--muted)}.card .badge{position:absolute;top:12px;right:12px;font-size:11px;padding:2px 8px;border:1px solid var(--gold);color:var(--gold);letter-spacing:.1em}.card .art{height:92px;margin:-16px -16px 12px;background-size:cover;background-position:center}.art.village{background:linear-gradient(180deg,#2a1b3d,#e0763a 70%,#5b4a36)}.art.bamboo{background:linear-gradient(180deg,#6f9fb0,#d8e6d0 60%,#4b5e34)}.art.temple{background:linear-gradient(180deg,#0b1030,#3a3d78 60%,#4a4752)}.art.fortress{background:linear-gradient(180deg,#1a0d12,#8a2a20 60%,#4a3a33)}table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(155,92,255,.15)}th{color:var(--gold);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}tr.me td{color:#fff;background:#9b5cff2e}.tabs{display:flex;gap:4px;margin:10px 0 14px}.tabs button{background:none;border:1px solid var(--line);color:var(--muted);padding:7px 14px;cursor:pointer}.tabs button.on{color:#fff;border-color:var(--violet);background:#9b5cff33}label.field{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid rgba(155,92,255,.12)}input[type=range]{accent-color:var(--violet);width:220px}input[type=text],select{background:#0006;border:1px solid var(--line);color:var(--paper);padding:8px 10px;font-family:inherit;font-size:15px}.topbar{position:absolute;top:20px;right:28px;display:flex;gap:18px;align-items:center;font-size:14px;color:#d8d0ea;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.85)}.topbar b{color:#fff}.nick{font-weight:700;color:#fff}.motd{position:absolute;left:40px;bottom:26px;font-size:13px;color:var(--muted);max-width:380px}.status{position:absolute;right:28px;bottom:22px;font-size:12px;color:var(--muted);text-align:right}.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5ad17a;margin-right:6px}.status.off i{background:var(--red)}.keys{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:15px}kbd{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border:1px solid var(--line);border-bottom-width:3px;background:#0006;font-family:inherit;font-size:13px;color:#fff}.costume-preview{width:100%;height:300px;border:1px solid var(--line);background:radial-gradient(circle at 50% 70%,rgba(155,92,255,.25),transparent 60%)}.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:4px;vertical-align:middle;border:1px solid rgba(255,255,255,.3)}.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--font)}.hud .bars{position:absolute;left:32px;bottom:30px;width:340px}.hud .name{font-family:var(--display);font-size:15px;letter-spacing:.1em;margin-bottom:6px;text-shadow:0 2px 6px #000}.hpbar{height:14px;background:#0000008c;border:1px solid rgba(255,255,255,.15);clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}.hpbar>div{height:100%;background:linear-gradient(90deg,#6b34d8,#b07cff);transition:width .15s}.hpbar.low>div{background:linear-gradient(90deg,#8a1a1a,#e0533f)}.hud .ammo{margin-top:10px;display:flex;gap:14px;align-items:center;font-size:14px;text-shadow:0 2px 6px #000}.vanish{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.05em;color:#fff;background:conic-gradient(var(--violet) calc(var(--p) * 1%),rgba(0,0,0,.55) 0);border:1px solid rgba(255,255,255,.2)}.vanish.active{box-shadow:0 0 22px var(--violet)}.vanish span{background:#0a0814d9;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}.hud .obj{position:absolute;top:22px;left:32px;font-size:15px;text-shadow:0 2px 6px #000;max-width:52vw}.hud .obj b{color:var(--gold);font-family:var(--display);letter-spacing:.08em;margin-right:10px}.hud .timer{position:absolute;top:18px;left:50%;transform:translate(-50%);font-family:var(--display);font-size:22px;text-shadow:0 2px 6px #000}.hud .kills{position:absolute;top:52px;left:32px;font-size:14px;color:var(--muted)}.hud .mini{position:absolute;right:26px;top:22px;width:170px;height:170px}.hud .feed{position:absolute;right:26px;top:210px;width:340px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:14px}.hud .feed div{background:#0a0814b3;padding:5px 10px;border-right:2px solid var(--violet);animation:fadeout 4s forwards}@keyframes fadeout{0%,75%{opacity:1}to{opacity:0}}.hud .banner{position:absolute;top:28%;left:0;right:0;text-align:center;text-shadow:0 4px 18px #000;opacity:0;transition:opacity .4s}.hud .banner.on{opacity:1}.hud .banner h1{font-family:var(--display);font-size:clamp(30px,5vw,58px);margin:0;letter-spacing:.08em}.hud .banner p{font-size:18px;color:var(--gold);margin:8px 0 0;letter-spacing:.12em}.hud .boss{position:absolute;top:64px;left:50%;transform:translate(-50%);width:min(560px,70vw);text-align:center;font-family:var(--display);letter-spacing:.12em;font-size:15px}.hud .boss .hpbar>div{background:linear-gradient(90deg,#8a1a1a,#e0533f)}.hud .cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffffffb3;box-shadow:0 0 6px #000}.hud .state{position:absolute;left:50%;bottom:120px;transform:translate(-50%);font-size:16px;color:var(--gold);text-shadow:0 2px 8px #000;letter-spacing:.08em}.hud .fps{position:absolute;left:8px;top:4px;font-size:12px;color:#8f8;text-shadow:0 1px 3px #000;white-space:nowrap}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px #140028bf;transition:box-shadow .3s}.vignette.invis{box-shadow:inset 0 0 220px #783cff8c}.vignette.hurt{box-shadow:inset 0 0 200px #c81414b3}.score{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:420px;background:var(--glass);border:1px solid var(--line);padding:18px 24px}.overlay{position:absolute;inset:0;background:#06040eb8;display:grid;place-items:center;backdrop-filter:blur(4px)}.overlay .box{background:var(--glass);border:1px solid var(--line);padding:32px 40px;min-width:min(460px,90vw);text-align:center}.overlay .box h1{font-family:var(--display);margin:0 0 8px;font-size:40px;letter-spacing:.08em}.overlay .box .btn{width:100%;margin-top:10px;text-align:center;clip-path:none}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stats div{border:1px solid var(--line);padding:10px}.stats b{display:block;font-size:24px;font-family:var(--display);color:var(--gold)}.loading{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 40%,#241a3a,var(--ink))}.loading .logo{font-size:56px}.spinner{width:46px;height:46px;margin:20px auto;border:3px solid rgba(155,92,255,.2);border-top-color:var(--violet);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 760px){.panel{right:3vw;left:3vw;width:auto;top:3vh;bottom:3vh;padding:20px}.menu .side{padding:28px 20px}.hud .mini{width:120px;height:120px}.hud .bars{left:16px;width:240px}}.hud .kibar{position:relative;width:240px;height:8px;margin-top:6px;background:#120c20cc;border:1px solid #7ae0ff66;transform:skew(-18deg)}.hud .kibar>div{height:100%;width:0;background:linear-gradient(90deg,#2f8fd0,#8fe0ff);transition:width .2s}.hud .kibar span{position:absolute;left:248px;top:-5px;font-size:11px;color:#9fd8ff;transform:skew(18deg);white-space:nowrap}.hud .kibar.full>div{background:linear-gradient(90deg,#8fe0ff,#fff);box-shadow:0 0 10px #8fe0ff}.hud:after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 1s ease}.hud.fadeout:after{opacity:1}.overlay{animation:overlayIn .9s ease both}.overlay .box{animation:boxIn .9s .2s ease both}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes boxIn{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}.overlay{z-index:50;cursor:default}.hud .jp{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none}.hud .jp b{display:block;font-family:"Noto Serif KR","Noto Serif JP",Hiragino Mincho ProN,Yu Mincho,serif;font-size:84px;font-weight:700;color:#f2ecff;letter-spacing:.08em;text-shadow:0 0 18px #7b3fe4cc,0 3px 10px #000}.hud .jp span{display:block;margin-top:6px;font-size:18px;letter-spacing:.14em;color:#cbb6ffdd;text-shadow:0 2px 6px #000}.hud .jp.on{animation:jp 1.8s ease-out both}@keyframes jp{0%{opacity:0;transform:translate(-50%,-40%) scale(1.25)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-56%)}}