*{box-sizing:border-box}:root{--ink:#e6dfcf;--muted:#9a927f;--gold:#c8a96a;--panel:#0c0b0ae0;--line:#c8a96a59;--serif:"Noto Serif KR", "Batang", serif;--sans:"Noto Sans KR", "Malgun Gothic", system-ui, sans-serif}html,body{background:#0a0908;height:100%;margin:0;overflow:hidden}body{font-family:var(--sans);color:var(--ink);-webkit-user-select:none;user-select:none}canvas#game{width:100vw;height:100vh;display:block}#ui{pointer-events:none;position:fixed;inset:0}#ui .interactive,#ui button{pointer-events:auto}button{font:600 14px var(--serif);color:var(--ink);border:1px solid var(--line);cursor:pointer;letter-spacing:1px;background:#28221ae6;border-radius:2px;padding:7px 16px}button:hover{border-color:var(--gold);color:#fff3d6;background:#3c3224f2}button:disabled{opacity:.35;cursor:default;border-color:var(--line)}button.secondary{color:var(--muted);background:#141311e6}.hud-top{flex-direction:column;gap:8px;display:flex;position:absolute;top:24px;left:28px}.hp{background:#0009;border:1px solid #ffffff1f;width:300px;height:10px;position:relative}.hp-fill{background:linear-gradient(#b8302a,#7a1a16);height:100%;transition:width .25s}.hp-text{color:var(--muted);letter-spacing:1px;font-size:11px;position:absolute;top:13px;left:0}.gold{font:600 14px var(--serif);color:var(--gold);text-shadow:0 1px 3px #000;letter-spacing:1px;margin-top:14px}.quick{gap:8px;display:flex;position:absolute;bottom:28px;left:28px}.slot{border:1px solid var(--line);background:#0a0a0a99;place-items:center;width:54px;height:54px;font-size:22px;display:grid;position:relative}.slot .key{color:var(--muted);font-size:10px;position:absolute;top:2px;left:5px}.slot .count{font-size:12px;font-weight:700;position:absolute;bottom:2px;right:5px}.help{color:#e6dfcf8c;text-align:right;font-size:11px;line-height:1.8;position:absolute;top:20px;right:24px}.help b{color:#c8a96acc;font-weight:600}.prompt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:500 14px var(--serif);letter-spacing:1px;padding:8px 28px;display:none;position:absolute;bottom:150px;left:50%;transform:translate(-50%)}.prompt kbd{color:var(--gold);font-family:var(--sans);margin-right:10px}.toasts{flex-direction:column-reverse;align-items:center;gap:4px;display:flex;position:absolute;bottom:200px;left:50%;transform:translate(-50%)}.toast{font:14px var(--serif);letter-spacing:1px;white-space:nowrap;background:linear-gradient(90deg,#0000,#000000b3,#0000);padding:5px 60px;animation:3s forwards toast}@keyframes toast{0%{opacity:0}10%,75%{opacity:1}to{opacity:0}}.region-name{font:400 38px var(--serif);letter-spacing:10px;text-shadow:0 2px 16px #000000e6;opacity:0;white-space:nowrap;position:absolute;top:20%;left:50%;transform:translate(-50%)}.region-name.show{animation:4s forwards region}@keyframes region{0%{opacity:0;letter-spacing:16px}20%,70%{opacity:1;letter-spacing:10px}to{opacity:0}}.lock-hint{background:var(--panel);font:14px var(--serif);border:1px solid var(--line);padding:10px 24px;display:none;position:absolute;top:12%;left:50%;transform:translate(-50%)}.boss{opacity:0;width:min(820px,100vw - 48px);transition:opacity .8s;position:absolute;bottom:90px;left:50%;transform:translate(-50%)}.boss.show{opacity:1}.boss-name{font:500 17px var(--serif);letter-spacing:3px;text-shadow:0 1px 4px #000;margin-bottom:6px}.boss-track{background:#000000a6;border:1px solid #ffffff24;height:9px;position:relative}.boss-fill,.boss-lag{position:absolute;top:0;bottom:0;left:0}.boss-fill{background:linear-gradient(#9a2a22,#5a120e);transition:width .15s}.boss-lag{background:#d8b870;transition:width .6s .5s}.boss.enraged .boss-name{color:#ff9a7a}.boss.enraged .boss-fill{background:linear-gradient(#d0401e,#7a1a0a)}.hurt{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 160px #a00a00b3}.hurt.on{animation:.5s ease-out hurt}@keyframes hurt{0%{opacity:1}to{opacity:0}}.banner{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.banner span{text-align:center;width:100%;font:400 52px var(--serif);letter-spacing:12px;color:#e8c878;text-shadow:0 0 30px #e8c87880;background:linear-gradient(90deg,#0000,#000000bf 30% 70%,#0000);padding:22px 0;animation:5.2s forwards banner;display:block}@keyframes banner{0%{opacity:0;letter-spacing:24px}15%,70%{opacity:1;letter-spacing:12px}to{opacity:0}}.floats{position:absolute;inset:0;overflow:hidden}.float{font:700 18px var(--serif);text-shadow:0 2px 3px #000,0 0 2px #000;white-space:nowrap;position:absolute;transform:translate(-50%,-50%)}.overlay{background:#00000080;place-items:center;display:grid;position:absolute;inset:0}.panel{background:var(--panel);border:1px solid var(--line);width:min(680px,100vw - 32px);max-height:calc(100vh - 48px);padding:24px;overflow:auto;box-shadow:0 20px 60px #000000b3}.panel h2{font:500 22px var(--serif);letter-spacing:3px;color:var(--gold);margin:0 0 4px}.panel .sub{color:var(--muted);margin-bottom:16px;font-size:12px}.panel .row-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.cols{grid-template-columns:1fr 1fr;gap:18px;display:grid}@media (width<=600px){.cols{grid-template-columns:1fr}}.list{flex-direction:column;gap:4px;display:flex}.list h3{font:500 14px var(--serif);color:var(--muted);letter-spacing:2px;border-bottom:1px solid var(--line);margin:0 0 6px;padding-bottom:6px}.item{background:#ffffff08;border-left:2px solid #0000;align-items:center;gap:10px;padding:8px 10px;display:flex}.item:hover{border-left-color:var(--gold);background:#ffffff0f}.item .icon{text-align:center;filter:saturate(.6);width:28px;font-size:20px}.item .info{flex:1;min-width:0}.item .name{font:500 14px var(--serif)}.item .desc{color:var(--muted);font-size:12px}.item .tag{color:var(--gold);border:1px solid var(--line);margin-left:8px;padding:0 5px;font-size:10px}.item button{padding:4px 10px;font-size:12px}.empty{color:var(--muted);padding:8px;font-size:13px}.msg{min-height:20px;font:13px var(--serif);color:var(--gold);margin-top:12px}.stats{font:500 14px var(--serif);flex-wrap:wrap;gap:18px;margin-bottom:16px;display:flex}.stats span{color:var(--ink)}.dialogue{background:linear-gradient(#0000,#000000d9 20%);width:min(760px,100vw - 32px);padding:30px 28px 20px;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.dialogue .who{font:500 16px var(--serif);color:var(--gold);letter-spacing:2px;margin-bottom:8px}.dialogue .who small{color:var(--muted);margin-left:10px;font-size:12px;font-weight:400}.dialogue .text{font:17px/1.7 var(--serif);min-height:58px}.title{background:radial-gradient(at 50% 45%,#2a2620,#070606 70%);place-items:center;display:grid;position:absolute;inset:0}.title .box{text-align:center;padding:16px}.title h1{font:400 clamp(34px, 6vw, 58px) var(--serif);letter-spacing:14px;color:#e6d6b0;text-shadow:0 0 40px #c8a96a40;margin:0 0 14px}.title p{color:var(--muted);font:14px var(--serif);letter-spacing:2px;margin:0 0 42px}.title .buttons{flex-direction:column;align-items:center;gap:12px;display:flex}.title .buttons button{background:0 0;border-color:#0000;width:240px;padding:12px;font-size:15px}.title .buttons button:hover{border-color:var(--line);background:#c8a96a14}.title .controls{color:#9a927fb3;margin-top:42px;font-size:12px;line-height:1.9}.loading{font:16px var(--serif);letter-spacing:4px;color:var(--muted);background:#070606;place-items:center;display:grid;position:absolute;inset:0}.death{background:#00000073;place-items:center;animation:1s fadein;display:grid;position:absolute;inset:0}.death span{text-align:center;width:100%;font:400 56px var(--serif);letter-spacing:14px;color:#9a1a12;text-shadow:0 0 20px #96140a99;background:linear-gradient(90deg,#0000,#000c 30% 70%,#0000);padding:20px 0;display:block}@keyframes fadein{0%{opacity:0}}