/* OBS overlay — transparent background, smooth animations. */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: transparent;
  overflow: hidden;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #fff;
}
.overlay-body.preview { background: var(--preview-bg, #1f1f24); }

#overlay-root { position: fixed; inset: 0; pointer-events: none; }

.syselo-anchor {
  position: absolute;
  display: flex;
  gap: var(--syselo-gap, 16px);
  align-items: center;
}
.syselo-anchor[data-layout="vertical"]   { flex-direction: column; align-items: flex-start; }
.syselo-anchor[data-layout="horizontal"] { flex-direction: row; }
.syselo-anchor[data-layout="grid"]       { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); }

/* Positioning */
.pos-top-left      { top: var(--syselo-my, 40px); left: var(--syselo-mx, 40px); }
.pos-top-right     { top: var(--syselo-my, 40px); right: var(--syselo-mx, 40px); }
.pos-bottom-left   { bottom: var(--syselo-my, 40px); left: var(--syselo-mx, 40px); }
.pos-bottom-right  { bottom: var(--syselo-my, 40px); right: var(--syselo-mx, 40px); }
.pos-top-center    { top: var(--syselo-my, 40px); left: 50%; transform: translateX(-50%); }
.pos-bottom-center { bottom: var(--syselo-my, 40px); left: 50%; transform: translateX(-50%); }
.pos-middle-left   { top: 50%; left: var(--syselo-mx, 40px); transform: translateY(-50%); }
.pos-middle-right  { top: 50%; right: var(--syselo-mx, 40px); transform: translateY(-50%); }

/* Item card */
.syselo-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: var(--syselo-pad-y, 12px) var(--syselo-pad-x, 22px);
  border-radius: var(--syselo-radius, 999px);
  background: var(--syselo-bg, rgba(0,0,0,0.55));
  color: var(--syselo-fg, #fff);
  font-size: var(--syselo-font-size, 28px);
  font-weight: var(--syselo-font-weight, 700);
  line-height: 1.1;
  white-space: nowrap;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: center center;
  opacity: 0;
}
.syselo-item.no-pill {
  background: transparent;
  padding: 0;
}
.syselo-item.text-shadow { text-shadow: 0 2px 6px rgba(0,0,0,0.65), 0 0 14px rgba(0,0,0,0.45); }
.syselo-item .syselo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--syselo-icon-color, currentColor);
  width: var(--syselo-icon-size, 48px);
  height: var(--syselo-icon-size, 48px);
}
.syselo-item .syselo-icon svg { width: 100%; height: 100%; display: block; }
.syselo-item .syselo-icon img { width: 100%; height: 100%; object-fit: contain; }
.syselo-item .syselo-handle { display: inline-block; }

/* ===== Entrance animations ===== */
@keyframes syselo-bounce-in-left {
  0%   { transform: translateX(-150%) scale(0.6); opacity: 0; }
  60%  { transform: translateX(12%) scale(1.05);  opacity: 1; }
  78%  { transform: translateX(-6%)  scale(0.98); }
  90%  { transform: translateX(3%)   scale(1.01); }
  100% { transform: translateX(0)    scale(1);    opacity: 1; }
}
@keyframes syselo-bounce-in-right {
  0%   { transform: translateX(150%) scale(0.6); opacity: 0; }
  60%  { transform: translateX(-12%) scale(1.05); opacity: 1; }
  78%  { transform: translateX(6%)   scale(0.98); }
  90%  { transform: translateX(-3%)  scale(1.01); }
  100% { transform: translateX(0)    scale(1);    opacity: 1; }
}
@keyframes syselo-bounce-in-top {
  0%   { transform: translateY(-150%) scale(0.6); opacity: 0; }
  60%  { transform: translateY(12%)   scale(1.05); opacity: 1; }
  78%  { transform: translateY(-6%)   scale(0.98); }
  90%  { transform: translateY(3%)    scale(1.01); }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}
@keyframes syselo-bounce-in-bottom {
  0%   { transform: translateY(150%) scale(0.6); opacity: 0; }
  60%  { transform: translateY(-12%) scale(1.05); opacity: 1; }
  78%  { transform: translateY(6%)   scale(0.98); }
  90%  { transform: translateY(-3%)  scale(1.01); }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

@keyframes syselo-slide-in-left   { from { transform: translateX(-150%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes syselo-slide-in-right  { from { transform: translateX( 150%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes syselo-slide-in-top    { from { transform: translateY(-150%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes syselo-slide-in-bottom { from { transform: translateY( 150%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@keyframes syselo-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes syselo-zoom-in  { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes syselo-flip-in  { from { transform: perspective(800px) rotateY(90deg); opacity: 0; } to { transform: perspective(800px) rotateY(0); opacity: 1; } }
@keyframes syselo-rotate-in{ from { transform: rotate(-200deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }

@keyframes syselo-elastic-in-left {
  0%   { transform: translateX(-160%); opacity: 0; }
  60%  { transform: translateX(25%);   opacity: 1; }
  72%  { transform: translateX(-15%); }
  82%  { transform: translateX(8%); }
  90%  { transform: translateX(-4%); }
  100% { transform: translateX(0); }
}
@keyframes syselo-elastic-in-right {
  0%   { transform: translateX(160%); opacity: 0; }
  60%  { transform: translateX(-25%); opacity: 1; }
  72%  { transform: translateX(15%); }
  82%  { transform: translateX(-8%); }
  90%  { transform: translateX(4%); }
  100% { transform: translateX(0); }
}
@keyframes syselo-elastic-in-top {
  0%   { transform: translateY(-160%); opacity: 0; }
  60%  { transform: translateY(25%);   opacity: 1; }
  72%  { transform: translateY(-15%); }
  82%  { transform: translateY(8%); }
  90%  { transform: translateY(-4%); }
  100% { transform: translateY(0); }
}
@keyframes syselo-elastic-in-bottom {
  0%   { transform: translateY(160%); opacity: 0; }
  60%  { transform: translateY(-25%); opacity: 1; }
  72%  { transform: translateY(15%); }
  82%  { transform: translateY(-8%); }
  90%  { transform: translateY(4%); }
  100% { transform: translateY(0); }
}

/* ===== Exit animations ===== */
@keyframes syselo-slide-out-left   { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-150%); opacity: 0; } }
@keyframes syselo-slide-out-right  { from { transform: translateX(0); opacity: 1; } to { transform: translateX( 150%); opacity: 0; } }
@keyframes syselo-slide-out-top    { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-150%); opacity: 0; } }
@keyframes syselo-slide-out-bottom { from { transform: translateY(0); opacity: 1; } to { transform: translateY( 150%); opacity: 0; } }

@keyframes syselo-bounce-out-left {
  0%   { transform: translateX(0); opacity: 1; }
  20%  { transform: translateX(8%); }
  100% { transform: translateX(-150%); opacity: 0; }
}
@keyframes syselo-bounce-out-right {
  0%   { transform: translateX(0); opacity: 1; }
  20%  { transform: translateX(-8%); }
  100% { transform: translateX(150%); opacity: 0; }
}
@keyframes syselo-bounce-out-top {
  0%   { transform: translateY(0); opacity: 1; }
  20%  { transform: translateY(8%); }
  100% { transform: translateY(-150%); opacity: 0; }
}
@keyframes syselo-bounce-out-bottom {
  0%   { transform: translateY(0); opacity: 1; }
  20%  { transform: translateY(-8%); }
  100% { transform: translateY(150%); opacity: 0; }
}

@keyframes syselo-fade-out   { from { opacity: 1; } to { opacity: 0; } }
@keyframes syselo-zoom-out   { from { transform: scale(1); opacity: 1; } to { transform: scale(0.2); opacity: 0; } }
@keyframes syselo-flip-out   { from { transform: perspective(800px) rotateY(0); opacity: 1; } to { transform: perspective(800px) rotateY(90deg); opacity: 0; } }
@keyframes syselo-rotate-out { from { transform: rotate(0) scale(1); opacity: 1; } to { transform: rotate(200deg) scale(0); opacity: 0; } }

/* ===== Idle (while visible) ===== */
@keyframes syselo-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes syselo-shake  { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes syselo-wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes syselo-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes syselo-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50%     { box-shadow: 0 0 22px 4px rgba(255,255,255,0.35); }
}

/* Apply via .anim-* class with animation-name = same as keyframe */
.syselo-item.is-entering { animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.9,.25,1.2); }
.syselo-item.is-exiting  { animation-fill-mode: both; animation-timing-function: cubic-bezier(.55,0,.7,.2); }
.syselo-item.is-idle     { animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }