* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0713; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#c { 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; display: flex; flex-direction: column; gap: 8px; min-width: 130px; }
.hud-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.hud-label { opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; }
.hud-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv { margin-top: 6px; font-size: 12px; line-height: 1.5; opacity: 0.9; }
.bottom-left { position: absolute; bottom: 14px; left: 14px; }
.hint { font-size: 12px; opacity: 0.8; transition: opacity .5s; }
.minimap { position: fixed; bottom: 14px; right: 14px; width: 150px; height: 150px; border-radius: 8px; overflow: hidden; z-index: 10; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); }
#mm { width: 100%; height: 100%; display: block; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); 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; }
.item { display: block; width: 100%; padding: 9px 10px; margin-bottom: 8px; 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:not(:disabled) { background: rgba(255,255,255,0.12); }
.item:disabled { opacity: 0.35; cursor: not-allowed; }
.meta { margin-top: 10px; font-size: 11px; opacity: 0.7; }
@media (prefers-color-scheme: light) {
  .panel, .minimap { background: rgba(255,255,255,0.45); border-color: rgba(0,0,0,0.08); }
  .modal { background: rgba(245,245,248,0.95); border-color: rgba(0,0,0,0.08); color: #111; }
  .item { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); color: #111; }
}