/* Base layout — panels/HUD styling lives in ui.css (UI agent). */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --panel-bg: #1c1a24e6;
  --panel-border: #4a4460;
  --panel-radius: 10px;
  --gold: #f0c040;
  --hp: #d84f5a;
  --xp: #58c890;
  --text: #e8e4f0;
  --text-dim: #9a94ac;
  --accent: #7a6ae8;
  --danger: #e8563f;
  font-size: 15px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0e0c14;
  color: var(--text);
  font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  user-select: none;
}

#app { position: relative; width: 100vw; height: 100vh; }

#game {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #0e0c14;
}

#ui, #login {
  position: absolute; inset: 0;
  pointer-events: none;         /* children opt back in with pointer-events:auto */
}
#ui > *, #login > * { pointer-events: auto; }

#login:empty, #ui:empty { display: none; }

#conn-overlay {
  position: absolute; inset: 0;
  background: #0e0c14cc;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#conn-overlay.hidden { display: none; }
.conn-box {
  padding: 18px 34px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  font-size: 1.2rem;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

img.icon { width: 26px; height: 26px; vertical-align: middle; }
.hidden { display: none !important; }