:root {
  --bg: #15110c;
  --panel: #241c13;
  --panel-2: #31271b;
  --line: #4d3d28;
  --text: #f3e9d2;
  --muted: #b3a284;
  --accent: #e3b448;
  --accent-ink: #2a1d08;
  --gold-line: rgba(227, 180, 72, .45);
  --display: "Cinzel", Georgia, serif;
  --good: #6fcf7a;
  --bad: #ef7a6c;
  --twitch: #9146ff;
  --radius: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse at top, rgba(227, 180, 72, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.45 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; font-family: var(--display); letter-spacing: .02em; }
h1 { color: var(--accent); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
button, input, select {
  font: inherit;
  color: inherit;
}
button {
  background: linear-gradient(#3a2e20, #2c2318);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5em 1em;
  cursor: pointer;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .08), 0 1px 2px rgba(0, 0, 0, .4);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
button:hover:not(:disabled) { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), 0 0 0 3px rgba(227, 180, 72, .15); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: linear-gradient(#f2cd6a, #d6a332);
  color: var(--accent-ink);
  border-color: #a77a14;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 245, 210, .5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .6), 0 2px 4px rgba(0, 0, 0, .4);
}
button.danger { border-color: var(--bad); color: var(--bad); }
input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5em .75em;
}
.panel {
  background: linear-gradient(180deg, #2b2216, var(--panel) 40%);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .06), 0 6px 18px rgba(0, 0, 0, .35);
}
.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.bar {
  height: 8px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .3s;
}
.error { color: var(--bad); min-height: 1.4em; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  max-width: calc(100vw - 32px);
  z-index: 100;
  transition: opacity .3s;
}
.toast.hidden { opacity: 0; pointer-events: none; }
.status-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad);
  margin-right: 6px;
}
.status-dot.live { background: var(--good); }

.kingdom-browser { list-style: none; padding: 0; margin: 0; }
.kingdom-browser li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.kingdom-browser li:not(.live) { opacity: .7; }
.kingdom-browser .kb-main { flex: 1; min-width: 0; }
.kingdom-browser .kb-name { font-weight: 600; overflow-wrap: anywhere; }
.kingdom-browser .kb-meta { font-size: .85em; }
.kingdom-browser .empty { display: block; }
.kingdom-browser .tag { font-size: .75em; font-weight: 500; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.kingdom-browser .tag.bad { color: var(--bad); border-color: var(--bad); }
.browser-filters input[type=search] { flex: 1; min-width: 0; }

/* Hover tooltips (shared/tooltip.js): one box that follows the pointer. */
.tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  padding: 8px 11px;
  background: rgba(24, 18, 12, .96);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  color: var(--text);
  font: 600 13px/1.4 "Nunito", system-ui, sans-serif;
  white-space: pre-line;
  pointer-events: none;
}
.tooltip[hidden] { display: none; }
[data-tip] { cursor: help; }
button[data-tip], a[data-tip], label[data-tip] { cursor: pointer; }