@import url('/fonts.css');

/* Transparent by default so OBS browser source shows only the overlay content */
:root {
  --txt: #ffffff;
  --accent: #45c08f;
  --scale: 1;
  --emblem-size: 56px;
  --prestige-size: 34px;
  --name-size: 28px;
  --level-size: 20px;
  --font: 'Bender', 'Segoe UI', system-ui, sans-serif;
  --pad: 10px;
  --radius: 10px;
  --bg: transparent;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  font-family: var(--font);
}

.hidden { display: none !important; }

.overlay {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--scale));
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--txt);
  line-height: 1.1;
  white-space: nowrap;
}

.overlay.shadow .name,
.overlay.shadow .level { text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.9); }
.overlay.shadow .emblem,
.overlay.shadow .prestige { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7)); }

.overlay.col { flex-direction: column; align-items: center; text-align: center; }
.overlay.align-left { align-items: center; }

.emblem {
  height: calc(var(--emblem-size) * var(--scale));
  width: auto;
  flex: none;
}

.texts { display: flex; flex-direction: column; gap: calc(2px * var(--scale)); }
.overlay.col .texts { align-items: center; }

.name {
  font-size: calc(var(--name-size) * var(--scale));
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.5px;
}

.meta {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--scale));
}

.level {
  font-size: calc(var(--level-size) * var(--scale));
  font-weight: 700;
  color: var(--accent);
}

.prestige {
  height: calc(var(--prestige-size) * var(--scale));
  width: auto;
}

.error {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #ff6b6b;
  background: rgba(0,0,0,0.7);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 90vw;
}