*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#000;color:#ece4d2;font:14px "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
canvas{display:block;touch-action:none;image-rendering:pixelated}
.px{font-family:"DotGothic16","Hiragino Kaku Gothic ProN",monospace;letter-spacing:.04em}
a{color:#9cc8ff}
.panel{background:#0b0d12e8;border:2px solid #6b5a3a;box-shadow:0 0 0 2px #000,inset 0 0 0 1px #2a2418;border-radius:4px}
#hud{position:fixed;left:10px;top:10px;pointer-events:none;max-width:min(420px,calc(100vw - 20px))}
#hp{font-size:20px;letter-spacing:2px;text-shadow:0 2px 0 #000}
#obj{margin-top:6px;padding:6px 10px;font-size:14px}
#obj small{display:block;color:#c9a54a;font-size:11px}
#topR{position:fixed;right:10px;top:10px;display:flex;gap:6px}
button{font:inherit;color:#ece4d2;background:#231d14;border:2px solid #6b5a3a;border-radius:4px;padding:4px 10px;cursor:pointer}
button:hover,button.sel{background:#4a3a20;border-color:#d8b35a}
#prompt{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);padding:5px 14px;display:none;pointer-events:none;white-space:nowrap}
#prompt b{color:#ffd27a}
#toasts{position:fixed;left:50%;top:70px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.toast{padding:5px 14px;animation:tf 3.2s forwards;white-space:nowrap}
@keyframes tf{0%{opacity:0;transform:translateY(-6px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#flaglog{position:fixed;right:10px;bottom:10px;font:11px ui-monospace,Menlo,monospace;color:#8fe3c0;text-align:right;pointer-events:none;text-shadow:0 1px 0 #000}
#flaglog div{animation:tf 6s forwards}
#dlg{position:fixed;left:50%;top:56px;bottom:auto;transform:translateX(-50%);width:min(720px,calc(100vw - 20px));padding:12px 16px 14px;display:none;cursor:pointer}
#dlg.show{display:block}
#dlgWho{color:#ffd27a;font-weight:bold;margin-bottom:4px}
#dlgText{min-height:3.2em;line-height:1.7;white-space:pre-wrap}
#dlgCh{display:flex;flex-direction:column;gap:4px;margin-top:6px}
#dlgCh button{text-align:left}
#dlgNext{position:absolute;right:14px;bottom:8px;animation:bl 1s infinite;color:#ffd27a}
@keyframes bl{50%{opacity:.2}}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000a}
.overlay.show{display:flex}
#inv .box{width:min(760px,calc(100vw - 20px));max-height:calc(100vh - 30px);overflow:auto;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){#inv .box{grid-template-columns:1fr}}
#inv h3{margin:0 0 6px;color:#ffd27a;font-size:15px}
#invList{display:flex;flex-direction:column;gap:4px;min-height:60px}
#invList button{text-align:left;display:flex;justify-content:space-between}
#invDesc{margin-top:8px;padding:8px;background:#0006;border-radius:4px;min-height:4.5em;line-height:1.6}
#quest div{padding:2px 0;color:#9a9284}#quest div.done{color:#8fe3c0}#quest div.now{color:#ffd27a}
#flags{display:flex;flex-wrap:wrap;gap:4px;font:11px ui-monospace,Menlo,monospace}
#flags span{padding:1px 6px;border-radius:3px;background:#222;color:#666}#flags span.on{background:#1f4a3c;color:#8fe3c0}
#title .box,#clear .box{width:min(560px,calc(100vw - 20px));padding:22px 24px;text-align:center;line-height:1.7}
#title h1,#clear h1{margin:0;font-size:38px;color:#ffd27a;text-shadow:0 3px 0 #5a2a10,0 0 18px #ff8a2a66;letter-spacing:.12em}
#title .sub{color:#c9b89a;margin-bottom:10px}
#title .ctl{text-align:left;font-size:13px;background:#0006;padding:8px 12px;border-radius:4px;margin:10px 0}
#title .ctl kbd{display:inline-block;min-width:1.6em;padding:0 4px;border:1px solid #6b5a3a;border-radius:3px;background:#231d14;font:12px ui-monospace,monospace;text-align:center}
#title small,#clear small{color:#9a9284;display:block}
#title button,#clear button{font-size:16px;padding:6px 18px;margin:4px}
#touch{display:none;pointer-events:none}
#joy,#joyK{pointer-events:none}
body.touch #touch{display:block}
#joy{position:fixed;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:#ffffff14;border:2px solid #ffffff30}
#joyK{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:#ffffff50}
#tbtn{position:fixed;right:18px;bottom:24px;display:grid;grid-template-columns:repeat(2,64px);gap:10px}
#tbtn button{pointer-events:auto;height:64px;border-radius:50%;font-size:18px;background:#231d14cc}
#cross{position:fixed;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#fff8;pointer-events:none;display:none}
#topR{align-items:center}
#sndBtn.off{color:#8a7f6c;border-color:#3a3224}
#vol{width:70px;accent-color:#d8b35a}
@media(max-width:640px){#vol,.hideS{display:none}}