* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0713; color: #fff; font-family: 'Cinzel', 'Times New Roman', serif; }
#world { display: block; width: 100vw; height: 100vh; }
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; }
.top-right { position: absolute; top: 12px; right: 12px; min-width: 220px; }
.verse { font-size: 13px; line-height: 1.5; opacity: 0.9; margin-bottom: 8px; font-style: italic; }
.hud-value { font-size: 13px; font-weight: 700; }
.bottom-left { position: absolute; bottom: 14px; left: 14px; }
.hint { font-size: 12px; opacity: 0.8; transition: opacity .5s; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.65); z-index: 20; }
.overlay.hidden { display: none; }
.modal { background: rgba(20,20,30,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 18px; min-width: 280px; max-width: 92vw; max-height: 80vh; overflow-y: auto; }
.modal h2 { margin-bottom: 10px; font-size: 18px; }
.menu-body { font-size: 13px; line-height: 1.6; margin-bottom: 12px; opacity: 0.9; }
.item { display: block; width: 100%; padding: 9px 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #fff; font-size: 13px; cursor: pointer; text-align: left; }
.item:hover { background: rgba(255,255,255,0.12); }