/* ── Title floater ────────────────────────────────────────── */
#title-float {
  position: fixed; top: 14px; left: 14px; z-index: 60;
  padding: 8px 16px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(13,34,64,0.9), rgba(5,15,30,0.95));
  border: 2px solid #2a5a8a; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  font-size: 15px; font-weight: 700; color: #ffd700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.title-icon { font-size: 18px; }
.badge {
  font-size: 9px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
  background: rgba(255,255,255,0.1); color: #94a3b8;
}
#tick-display {
  display: flex; gap: 8px; width: 100%; font-size: 10px; font-weight: 600; color: #94a3b8;
  margin-top: 2px;
}
#tick-display .tick-num { color: #60a5fa; }
#tick-display .tick-jobs { color: #4ade80; }
#tick-display .tick-events { color: #a78bfa; }

/* ── Control buttons top-right ─────────────────────────────── */
#controls-float {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  display: flex; gap: 6px;
}
#controls-float button {
  padding: 7px 14px; border: 2px solid; border-radius: 14px; cursor: pointer;
  font-weight: 700; font-size: 11px; font-family: 'Fredoka', sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.15s;
}
#controls-float button:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,0.5); }
#controls-float button:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
#btn-start { background: linear-gradient(180deg, #4ade80, #16a34a); border-color: #15803d; color: #fff; }
#btn-stop { background: linear-gradient(180deg, #f87171, #dc2626); border-color: #b91c1c; color: #fff; display: none; }
#btn-analytics { background: linear-gradient(180deg, #60a5fa, #2563eb); border-color: #1d4ed8; color: #fff; font-size: 16px; padding: 5px 10px; }

/* ── Spawn menu bottom-right ─────────────────────────────────── */
#spawn-toggle {
  position: fixed; bottom: 14px; right: 14px; z-index: 70;
  padding: 7px 14px; border: 2px solid #2a5a8a; border-radius: 14px; cursor: pointer;
  font-weight: 700; font-size: 11px; font-family: 'Fredoka', sans-serif; color: #ffd700;
  background: linear-gradient(180deg, rgba(13,34,64,0.9), rgba(5,15,30,0.95));
  box-shadow: 0 3px 8px rgba(0,0,0,0.4); transition: all 0.15s;
}
#spawn-toggle:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,0.5); }
#spawn-menu {
  position: fixed; bottom: 50px; right: 14px; z-index: 70;
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(13,34,64,0.95), rgba(5,15,30,0.97));
  border: 2px solid #2a5a8a; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
#spawn-menu.open { display: flex; }
.spawn-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 2px solid; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 10px; font-family: 'Fredoka', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: all 0.15s; color: #fff;
}
.spawn-btn:hover { transform: translateX(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.spawn-btn:active { transform: translateX(0); }
.spawn-btn.good { background: linear-gradient(180deg, #4ade80, #16a34a); border-color: #15803d; }
.spawn-btn.neutral { background: linear-gradient(180deg, #facc15, #ca8a04); border-color: #a16207; }
.spawn-btn.bad { background: linear-gradient(180deg, #f87171, #dc2626); border-color: #b91c1c; }
.spawn-icon { width: 20px; height: 18px; object-fit: cover; image-rendering: pixelated; }