/* Overlay-styling. De pagina is bewust transparant zodat 'ie als OBS browser
   source over de stream gelegd kan worden (zie overlay.js: buiten OBS krijg je
   een donkere preview-achtergrond). Commando's verschijnen als vakjes met
   vleugeltjes die onder elkaar stapelen en na ~30s vervagen. */

:root {
  --pink: #d96a96;            /* gedempte dusty-rose accent (was neon #ff4fa3) */
  --pink-soft: #e3a7c2;       /* zacht roze voor namen */
  --gold: #d9b86a;            /* zachtere amber */
  --ink: #0e0a0d;             /* warme bijna-zwarte basis */
  --panel: rgba(14, 10, 13, 0.92); /* donker, licht-doorzichtig paneel */
  --text: #efe6ec;           /* zachte off-white i.p.v. hard wit */
  --font: "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  overflow: hidden;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Buiten OBS (gewone browser): donkere achtergrond zodat je de vakjes kunt
   bekijken. In OBS blijft de pagina transparant (zie overlay.js). */
body.is-preview {
  background: radial-gradient(circle at 50% 26%, #160e14, #08060a 74%);
}

/* ----------------------------------------------------------------- Vakjes */
/* Verticale stapel, horizontaal gecentreerd; nieuwste onderaan. */
.cards {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 96vw;
  pointer-events: none;
}

.card {
  --accent: var(--pink);
  position: relative;
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border: 2px solid rgba(217, 106, 150, 0.45); /* gedempte roze rand */
  border-radius: 14px;
  padding: 9px 26px;
  min-width: 200px;
  max-width: 78vw;
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  animation: card-in 0.35s cubic-bezier(0.2, 1.1, 0.4, 1) both;
}

.card.is-leaving { animation: card-out 0.6s ease forwards; }

/* Vleugeltjes aan de zijkanten (uit base.png gesneden, binnenrand uitgevaagd
   zodat er geen zwart lijntje op de boxrand zit). Rechts gespiegeld; hoogte in
   em -> schaalt mee met de tekst. */
.card::before,
.card::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 2.6em;
  aspect-ratio: 175 / 141;
  background: url("/assets/wing.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.card::before { right: 100%; margin-right: -0.5em; transform: translateY(-50%); }
.card::after  { left: 100%;  margin-left:  -0.5em; transform: translateY(-50%) scaleX(-1); }

/* Kop: kleinere regel met gebruikersnaam en/of titel in de accentkleur. */
.card__head {
  display: block;
  font-weight: 800;
  font-size: 0.62em;
  letter-spacing: 0.2px;
  margin-bottom: 3px;
}

.card__user { color: var(--pink-soft); margin-right: 6px; }
.card__title { color: var(--accent); }
.card__text { display: block; font-weight: 700; word-break: break-word; }

/* Gedempte accenten per type. */
.card--delivery { --accent: var(--gold); }
.card--breakdown { --accent: #d97a52; }
.card--win { --accent: #6fb0c4; }
.card--loss { --accent: #8b9097; }
.card--duel { --accent: #a98fd1; }
.card--levelup { --accent: #79c293; }

/* ---------------------------------------------------------------- Status */
.status {
  position: fixed;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font);
}

.status--off { background: rgba(150, 0, 0, 0.8); color: #fff; }
.status--on { display: none; }

/* --------------------------------------------------------------- Animaties */
@keyframes card-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-out {
  to { opacity: 0; transform: scale(0.98); }
}