* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0e17; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; }

#login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0a0e17; z-index: 1000; }
#login-screen.hidden { display: none; }
.login-box { background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 40px; width: 360px; }
.login-box h1 { font-size: 24px; color: #EEAD35; margin-bottom: 8px; }
.login-box p { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
.login-box input { width: 100%; padding: 10px 14px; background: #1f2937; border: 1px solid #374151; border-radius: 8px; color: #fff; font-size: 14px; margin-bottom: 16px; outline: none; }
.login-box input:focus { border-color: #EEAD35; }
.login-box button { width: 100%; padding: 10px; background: #EEAD35; color: #0a0e17; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-box button:hover { background: #d4991f; }
.login-error { color: #ef4444; font-size: 13px; margin-bottom: 12px; display: none; }
.server-choice { margin-top: 18px; border-top: 1px solid #1f2937; padding-top: 16px; }
.server-choice.hidden { display: none; }
.server-choice-title { color: #9ca3af; font-size: 12px; margin-bottom: 8px; }
.server-choice-btn { margin-top: 8px; background: #1f2937 !important; color: #e0e0e0 !important; border: 1px solid #374151 !important; text-align: left; }
.server-choice-btn:hover { border-color: #EEAD35 !important; color: #EEAD35 !important; }

#app { display: none; height: 100vh; }
#app.active { display: flex; }

#sidebar { width: 320px; background: #111827; border-right: 1px solid #1f2937; display: flex; flex-direction: column; overflow: hidden; }
#sidebar-header { padding: 16px; border-bottom: 1px solid #1f2937; }
#sidebar-header h2 { font-size: 16px; color: #EEAD35; }
#server-info { padding: 12px 16px; border-bottom: 1px solid #1f2937; font-size: 12px; color: #9ca3af; }
#server-info span { color: #e0e0e0; }
#player-search { width: calc(100% - 32px); margin: 12px 16px; padding: 8px 12px; background: #1f2937; border: 1px solid #374151; border-radius: 6px; color: #fff; font-size: 13px; outline: none; }
#player-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.player-item { display: flex; align-items: center; padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; }
.player-item:hover { background: #1f2937; }
.player-item.selected { background: #1f2937; border: 1px solid #EEAD35; }
.player-dot { width: 24px; height: 24px; border-radius: 50%; background: #22c55e; margin-right: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #0a0e17; }
.player-dot.sleeping { background: #6b7280; }
.player-dot.admin { background: #EEAD35; }
.player-name { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-hp { font-size: 11px; color: #9ca3af; margin-left: 8px; }

#map-container { flex: 1; position: relative; }
#map-canvas { width: 100%; height: 100%; cursor: grab; }
#map-canvas:active { cursor: grabbing; }

#player-detail { position: absolute; top: 12px; right: 12px; width: 280px; max-height: calc(100vh - 24px); overflow-y: auto; background: #111827ee; border: 1px solid #1f2937; border-radius: 10px; padding: 16px; display: none; z-index: 10; backdrop-filter: blur(8px); }
#player-detail.active { display: block; }
#player-detail h3 { font-size: 15px; color: #EEAD35; margin-bottom: 12px; }
.detail-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
.detail-label { color: #6b7280; }
.detail-value { color: #e0e0e0; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.action-btn { padding: 6px 8px; font-size: 11px; border: 1px solid #374151; background: #1f2937; color: #e0e0e0; border-radius: 6px; cursor: pointer; text-align: center; }
.action-btn:hover { background: #374151; }
.action-btn.danger { border-color: #7f1d1d; color: #fca5a5; }
.action-btn.danger:hover { background: #7f1d1d; }

#event-log { position: absolute; bottom: 12px; left: 12px; width: 360px; max-height: 200px; background: #111827dd; border: 1px solid #1f2937; border-radius: 10px; padding: 12px; overflow-y: auto; z-index: 10; backdrop-filter: blur(8px); font-size: 12px; }
#event-log .event { padding: 3px 0; border-bottom: 1px solid #1f293744; }
.event-time { color: #6b7280; margin-right: 6px; }
.event-death { color: #ef4444; }
.event-connect { color: #22c55e; }
.event-disconnect { color: #f59e0b; }
.event-shot { color: #60a5fa; }

#context-menu { position: absolute; display: none; background: #111827; border: 1px solid #374151; border-radius: 8px; padding: 6px; z-index: 100; min-width: 160px; }
#context-menu.active { display: block; }
.ctx-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 4px; }
.ctx-item:hover { background: #1f2937; }

#map-controls { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; gap: 6px; }
.map-btn { width: 36px; height: 36px; border-radius: 8px; background: #111827dd; border: 1px solid #1f2937; color: #e0e0e0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.map-btn:hover { background: #1f2937; }

#minimap { position: absolute; bottom: 12px; right: 12px; width: 160px; height: 160px; background: #111827dd; border: 1px solid #1f2937; border-radius: 8px; z-index: 10; overflow: hidden; backdrop-filter: blur(8px); cursor: pointer; }
#minimap canvas { width: 100%; height: 100%; }

#follow-indicator { position: absolute; top: 12px; right: 300px; background: #0e7490dd; color: #fff; padding: 6px 14px; border-radius: 6px; font-size: 12px; z-index: 10; display: none; backdrop-filter: blur(8px); }
#follow-indicator.active { display: block; }

#layer-toggles { position: absolute; top: 56px; left: 12px; z-index: 10; display: flex; gap: 4px; flex-wrap: wrap; max-width: 300px; }
.layer-btn { padding: 4px 10px; font-size: 11px; border-radius: 6px; border: 1px solid #374151; background: #111827dd; color: #9ca3af; cursor: pointer; backdrop-filter: blur(8px); user-select: none; }
.layer-btn.active { background: #1f2937; color: #EEAD35; border-color: #EEAD35; }

#connection-status { position: absolute; top: 14px; left: 56px; z-index: 10; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9ca3af; }
#connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
#connection-dot.connected { background: #22c55e; }

.detail-value a { color: #60a5fa; text-decoration: none; }
.detail-value a:hover { text-decoration: underline; }

#inventory-panel { margin-top: 12px; border-top: 1px solid #1f2937; padding-top: 10px; }
.inv-section { margin-bottom: 8px; }
.inv-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.inv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.inv-slot { width: 100%; aspect-ratio: 1; background: #1f2937; border: 1px solid #374151; border-radius: 4px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.inv-slot img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.inv-slot .inv-amount { position: absolute; bottom: 1px; right: 3px; font-size: 9px; color: #e0e0e0; text-shadow: 0 0 2px #000; }
.inv-slot .inv-cond { position: absolute; bottom: 0; left: 0; height: 2px; background: #22c55e; }
.inv-slot:hover .inv-tooltip { display: block; }
.inv-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #111827ee; border: 1px solid #374151; padding: 4px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 20; color: #e0e0e0; pointer-events: none; }

#sidebar-tabs { display: flex; border-bottom: 1px solid #1f2937; }
.sidebar-tab { flex: 1; padding: 8px; text-align: center; font-size: 12px; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; }
.sidebar-tab.active { color: #EEAD35; border-bottom-color: #EEAD35; }
#entity-list { flex: 1; overflow-y: auto; padding: 0 8px; display: none; }
#entity-list.active { display: block; }
.entity-item { display: flex; align-items: center; padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; font-size: 13px; }
.entity-item:hover { background: #1f2937; }
.entity-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
.entity-name { flex: 1; }
.entity-pos { font-size: 11px; color: #6b7280; }

@media (max-width: 768px) {
  #sidebar { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid #1f2937; }
  #app.active { flex-direction: column; }
  #player-detail { width: 240px; top: 8px; right: 8px; }
  #event-log { width: 260px; bottom: 8px; left: 8px; }
  #minimap { width: 100px; height: 100px; }
  .action-grid { grid-template-columns: 1fr; }
}
#compass-bar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 15; width: 400px; height: 32px; overflow: hidden; background: rgba(17,24,39,0.7); backdrop-filter: blur(8px); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.compass-inner { display: flex; position: relative; width: 800px; height: 100%; align-items: center; transition: transform 0.1s ease-out; }
.compass-dir { flex-shrink: 0; width: 100px; text-align: center; font-size: 12px; font-weight: 600; color: #9ca3af; }
.compass-dir.compass-n, .compass-dir.compass-s, .compass-dir.compass-e, .compass-dir.compass-w { color: #e0e0e0; font-size: 14px; }
.compass-tick { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 10px; background: #EEAD35; }

#toolbar-right { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 4px; }
.toolbar-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(17,24,39,0.75); border: 1px solid #374151; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 7px; transition: all 0.15s; }
.toolbar-icon:hover { background: #1f2937; color: #e0e0e0; }
.toolbar-icon.active { background: rgba(238,173,53,0.15); color: #EEAD35; border-color: #EEAD35; }
.toolbar-icon svg { width: 100%; height: 100%; }
.toolbar-divider { width: 24px; height: 1px; background: #374151; margin: 4px auto; }

#overlay-players { position: absolute; top: 12px; left: 12px; z-index: 15; width: 220px; }
#overlay-search { width: 100%; padding: 6px 10px; background: rgba(17,24,39,0.75); border: 1px solid #374151; border-radius: 6px; color: #fff; font-size: 12px; outline: none; backdrop-filter: blur(8px); }
#overlay-search:focus { border-color: #EEAD35; }
#overlay-player-list { margin-top: 4px; max-height: 200px; overflow-y: auto; }

body.mode-3d #sidebar { display: none; }
body.mode-3d #map-container { width: 100%; height: 100vh; }
body.mode-3d #layer-toggles { display: none; }
body.mode-3d #view-toggle { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); }
body.mode-3d #map-controls { display: none; }
body.mode-3d #connection-status { left: 12px; top: 44px; }

body:not(.mode-3d) #overlay-players { display: none; }
body:not(.mode-3d) #toolbar-right { display: none; }
body:not(.mode-3d) #compass-bar { display: none; }
body:not(.mode-3d) #debug-panel { display: none; }

#debug-panel { position: absolute; bottom: 60px; left: 12px; z-index: 15; background: rgba(17,24,39,0.85); border: 1px solid #374151; border-radius: 8px; padding: 10px 14px; backdrop-filter: blur(8px); min-width: 180px; }
.debug-title { font-size: 11px; color: #EEAD35; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.debug-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 12px; color: #e0e0e0; }
.debug-toggle input { accent-color: #EEAD35; cursor: pointer; }
.debug-toggle span:first-of-type { flex: 1; }
.debug-res { font-size: 10px; color: #6b7280; font-family: monospace; }

#view-toggle { position: absolute; top: 12px; left: 160px; z-index: 10; }
.view-btn { padding: 6px 14px; font-size: 12px; border: 1px solid #374151; background: #111827dd; color: #9ca3af; cursor: pointer; backdrop-filter: blur(8px); }
.view-btn:first-child { border-radius: 6px 0 0 6px; }
.view-btn:last-child { border-radius: 0 6px 6px 0; }
.view-btn.active { background: #1f2937; color: #EEAD35; border-color: #EEAD35; }
#three-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }
#three-container.active { display: block; }

/* ── Audit panel ─────────────────────────────────────────── */
.audit-panel {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 420px;
  max-height: calc(100vh - 100px);
  background: #0D111B;
  border: 1px solid #EEAD35;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: none;
  flex-direction: column;
  z-index: 500;
  color: #FFDEAD;
}
.audit-panel.active { display: flex; }
.audit-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1f2937; }
.audit-header h3 { font-size: 15px; color: #EEAD35; margin: 0; }
.audit-close { background: transparent; border: none; color: #9ca3af; font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; }
.audit-close:hover { color: #EEAD35; }
.audit-filters { padding: 10px 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #1f2937; font-size: 12px; color: #9ca3af; }
.audit-filters select { background: #1f2937; color: #FFDEAD; border: 1px solid #374151; border-radius: 4px; padding: 4px 6px; font-size: 12px; }
.audit-refresh { background: #EEAD35; color: #0D111B; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; font-weight: 600; margin-left: auto; }
.audit-refresh:hover { background: #d4991f; }
#audit-list { overflow-y: auto; padding: 6px 0; flex: 1; }
.audit-entry { padding: 10px 16px; border-bottom: 1px solid #151a22; font-size: 12px; }
.audit-entry:last-child { border-bottom: none; }
.audit-entry .audit-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.audit-entry .audit-action { color: #EEAD35; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.audit-entry .audit-action.fail { color: #ef4444; }
.audit-entry .audit-action.ok { color: #22c55e; }
.audit-entry .audit-time { color: #6b7280; font-size: 11px; font-family: monospace; }
.audit-entry .audit-meta { color: #9ca3af; font-family: monospace; font-size: 11px; word-break: break-all; }
.audit-entry .audit-meta a { color: #60a5fa; text-decoration: none; }
.audit-entry .audit-msg { color: #d1d5db; margin-top: 4px; }
.audit-entry .audit-err { color: #fca5a5; margin-top: 4px; }
.audit-empty { padding: 24px 16px; color: #6b7280; text-align: center; font-size: 12px; }