:root{color-scheme:dark;--gold:#f3dca2;--blue:#b9d7ed;--panel:#14212ed9}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#12202b;color:#f6ecd6;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}button{font:inherit;color:inherit;cursor:pointer}#app{position:relative;height:100dvh;width:100vw;touch-action:none;user-select:none}#world{display:block;width:100%;height:100%;touch-action:none}#topBar{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 16px) 0 calc(env(safe-area-inset-left) + 16px);pointer-events:none;text-shadow:0 2px 5px #000,0 0 3px #000;font-size:13px;z-index:2}#topBar .hud{pointer-events:auto;min-width:0}#topBar strong{font-weight:800;white-space:nowrap}.hud-center{text-align:center;letter-spacing:.03em}.hud-center strong{font-size:15px;color:var(--gold)}#coordinates{font-size:11px;color:#eee8d7;margin-top:3px}.hud-right{justify-self:end;display:flex;gap:8px;align-items:center}.hud-right button{width:24px;height:24px;border:1px solid #e5d6b080;border-radius:100%;background:#09172466;font-weight:800}.stat-meta{color:#d6ecd4;font-size:11px;padding-top:3px}.bars{margin-top:2px;max-width:135px}.bars span{font-size:11px}.bar{height:5px;background:#0008;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;width:100%;background:#db6e74}#legend{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 61px);left:50%;transform:translateX(-50%);font-size:11px;text-align:center;white-space:nowrap;opacity:.78;text-shadow:0 1px 4px #000;pointer-events:none;z-index:2}#minimap{position:absolute;top:calc(env(safe-area-inset-top) + 48px);right:calc(env(safe-area-inset-right) + 12px);width:154px;height:80px;background:#12222fdc;border:1px solid #d4c39f99;border-radius:8px;z-index:2;pointer-events:none}#toast{position:absolute;top:20%;left:50%;transform:translateX(-50%);background:#102232dd;border:1px solid #d5bd8588;padding:9px 16px;border-radius:8px;font-size:12px;max-width:85vw;text-align:center;opacity:0;transition:opacity .15s;pointer-events:none;z-index:4}#toast.show{opacity:1}#bottomBar{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);display:flex;gap:14px;align-items:center;justify-content:center;white-space:nowrap;z-index:3}#bottomBar button{border:0;background:none;text-shadow:0 2px 4px #000,0 0 2px #000;padding:7px 3px;font-weight:800;font-size:12px;color:#efe9d8}#bottomBar button.active{color:#f9d078}#dpad{position:absolute;left:calc(env(safe-area-inset-left) + 16px);bottom:calc(env(safe-area-inset-bottom) + 92px);display:grid;grid-template-columns:40px 40px 40px;grid-template-rows:40px 40px 40px;gap:2px;z-index:3;opacity:.79}#dpad button{border:1px solid #b8c7ca66;border-radius:8px;background:#0c243d88;font-size:15px;touch-action:none}#dpad button:active{background:#63849e9c}.pad-up{grid-area:1/2}.pad-left{grid-area:2/1}.pad-down{grid-area:2/2}.pad-right{grid-area:2/3}#modal{position:absolute;inset:0;z-index:10;background:#05101fc4;display:flex;justify-content:center;align-items:center;padding:16px;touch-action:none}#modal.hidden{display:none}.dialog{background:#1b2c3b;border:1px solid #dfc88e;box-shadow:0 24px 66px #000b;border-radius:14px;padding:23px;max-width:min(470px,94vw);max-height:90dvh;overflow:auto;width:100%;position:relative}.dialog h2{color:#f1d8a1;font-size:20px;margin:2px 28px 10px 0}.dialog p{font-size:14px;line-height:1.7;white-space:pre-line}.dialog button{border-radius:7px;border:1px solid #d9bd7f7d;background:#294258;padding:10px 14px;font-size:14px}.dialog .close{position:absolute;right:9px;top:9px;background:none;border:0}#modalActions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;margin-top:15px}#modalExtra{font-size:13px;color:#d5e7fa}@media(max-width:600px){#topBar{font-size:11px;gap:2px;padding-left:8px;padding-right:8px}.hud-center strong{font-size:12px}#coordinates{font-size:10px}#minimap{width:108px;height:56px;top:calc(env(safe-area-inset-top) + 53px);right:8px}.bars{max-width:96px}#bottomBar{gap:9px}#bottomBar button{font-size:10px}#legend{font-size:9px;bottom:calc(env(safe-area-inset-bottom) + 56px)}#dpad{left:7px;bottom:calc(env(safe-area-inset-bottom) + 85px);transform:scale(.85);transform-origin:bottom left}.dialog{padding:17px}}@media(min-width:950px) and (pointer:fine){#dpad{opacity:.5}}
