/* CD z Esports — Facecam Frame.
   Visuelle Grundlage: CDz_Facecam_Frame.html (Rahmen, Ecken, Badge, Social-Leiste,
   Glow-Puls und Farbwerte sind von dort uebernommen).
   Die Kameraflaeche bleibt vollstaendig transparent. */

:root{
  --accent:#9a35ff;
  --accent-soft:#c57cff;
  --line:rgba(255,255,255,.10);
  --text:#ffffff;
  --muted:#9a9aa6;
  --radius:22px;
  --gap:12px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  overflow:hidden;
  background:rgba(0,0,0,0) !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Wurzel: Facecam plus optionaler Chat */
.fcroot{
  display:flex;
  gap:var(--gap);
  align-items:flex-start;
  background:transparent;
  pointer-events:none;
  width:max-content;
}
.fcroot[data-chat="bottom"]{flex-direction:column}
.fcroot[data-chat="none"]{gap:0}

/* ── Facecam-Block ────────────────────────────────────────────────────────── */
.stage{
  position:relative;
  background:transparent;
  pointer-events:none;
  flex:0 0 auto;
}
.stage[hidden]{display:none}

/* 10px Luft, damit der Glow-Halo nicht am Rand der Browser-Quelle abgeschnitten wird */
.frame-box{position:absolute;inset:10px}

.facecam-frame{
  position:absolute;
  inset:0;
  border:3px solid var(--accent);
  border-radius:var(--radius);
  background:transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 18px rgba(154,53,255,.28);
}
.facecam-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(197,124,255,.28);
  border-radius:calc(var(--radius) - 8px);
  background:transparent;
}

.corner{
  position:absolute;
  width:28px;
  height:28px;
  border-color:var(--accent-soft);
  opacity:.9;
}
.corner.tl{top:-3px;left:-3px;border-top:3px solid;border-left:3px solid;border-radius:var(--radius) 0 0 0}
.corner.tr{top:-3px;right:-3px;border-top:3px solid;border-right:3px solid;border-radius:0 var(--radius) 0 0}
.corner.bl{bottom:-3px;left:-3px;border-bottom:3px solid;border-left:3px solid;border-radius:0 0 0 var(--radius)}
.corner.br{bottom:-3px;right:-3px;border-bottom:3px solid;border-right:3px solid;border-radius:0 0 var(--radius) 0}

.camera-area{
  position:absolute;
  inset:12px;
  border-radius:calc(var(--radius) - 10px);
  background:transparent !important;
}

/* Animierter Glow aus der Vorlage */
.glow{
  position:absolute;
  inset:0;
  border-radius:calc(var(--radius) + 10px);
  /* Der Schein selbst wird animiert, nicht nur seine Deckkraft - sonst wirkt
     er wie ein starrer Streifen. Radius und Staerke atmen mit. */
  animation:glowPulse 2.4s ease-in-out infinite;
  will-change:box-shadow,opacity,transform;
}
.glow[hidden]{display:none}
@keyframes glowPulse{
  0%,100%{
    box-shadow:
      0 0 7px rgba(197,124,255,.28),
      0 0 18px rgba(154,53,255,.20),
      0 0 30px rgba(154,53,255,.10);
    opacity:.6;
    transform:scale(1);
  }
  50%{
    box-shadow:
      0 0 16px rgba(214,160,255,.85),
      0 0 34px rgba(154,53,255,.58),
      0 0 54px rgba(154,53,255,.30);
    opacity:1;
    transform:scale(1.012);
  }
}

/* ── Style-Varianten ──────────────────────────────────────────────────────── */
.fcroot[data-style="minimal"] .facecam-frame{
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.fcroot[data-style="minimal"] .facecam-frame::before{display:none}
.fcroot[data-style="minimal"] .corner{display:none}

.fcroot[data-style="clean"] .facecam-frame{
  border:2px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.fcroot[data-style="clean"] .facecam-frame::before{
  inset:6px;
  border-color:rgba(197,124,255,.16);
}
.fcroot[data-style="clean"] .corner{display:none}

/* ── Brand-Badge ──────────────────────────────────────────────────────────── */
.brand-badge{
  position:absolute;
  top:24px;
  left:24px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(17,17,22,.82);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.brand-badge[hidden]{display:none}
.brand-badge{transform-origin:top left}
.logo{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:linear-gradient(145deg,#a23bff,#6d1fc4);
  overflow:hidden;
}
.logo img{width:26px;height:26px;object-fit:contain;display:block}
.brand-copy{line-height:1.05}
.brand-copy .eyebrow{
  font-size:8px;
  color:var(--muted);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.brand-copy .name{
  font-size:13px;
  font-weight:800;
  color:var(--text);
}
.fcroot[data-style="minimal"] .brand-badge{
  padding:4px;
  background:none;
  border:0;
  box-shadow:none;
}
.fcroot[data-style="minimal"] .brand-copy{display:none}

/* ── Social-Leiste ────────────────────────────────────────────────────────── */
.social-bar{
  position:absolute;
  left:24px;
  bottom:24px;
  max-width:330px;
  min-width:230px;
  height:42px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(17,17,22,.82);
  overflow:hidden;
}
.social-bar[hidden]{display:none}
.social-bar{transform-origin:top left}

.social-item{
  position:absolute;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
}
.social-item.is-active{opacity:1}

.social-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:rgba(154,53,255,.14);
  color:var(--accent-soft);
}
.social-icon svg{width:14px;height:14px;display:block;fill:currentColor}
.social-icon img{width:16px;height:16px;object-fit:contain;display:block}
.social-icon[data-p="discord"]{color:#5865F2}
.social-icon[data-p="x"]{color:#fff}
.social-icon[data-p="twitch"]{color:#b78bff}
.social-icon[data-p="tiktok"]{color:#fff}

.social-copy{min-width:0;flex:1}
.social-copy .label{
  font-size:7px;
  color:var(--muted);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.social-copy .value{
  color:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.social-progress{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transform-origin:left center;
  transform:scaleX(0);
}
.social-bar[data-run="1"] .social-progress{
  animation:progress var(--fc-speed,5s) linear infinite;
}
@keyframes progress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@keyframes fcIn{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ── Twitch Chat (offizieller Embed) ──────────────────────────────────────── */
.fc-chat{
  position:relative;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:rgba(17,17,22,.92);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.fc-chat[hidden]{display:none}
.fc-chat iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}
/* Ohne diese Regel gewinnt display:block gegen das hidden-Attribut und der
   leere iframe wuerde als helle Flaeche ueber dem Hinweis stehen. */
.fc-chat iframe[hidden]{display:none}
.fc-chat-hint{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:16px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  line-height:1.5;
}
.fcroot[data-style="cdz"] .fc-chat{border-color:rgba(154,53,255,.45)}

/* ── Visueller Editor fuer das CD-z-Icon ───────────────────────────────────
   Diese Regeln wirken ausschliesslich, wenn der Konfigurator den Editor
   per postMessage aktiviert hat (.is-editable). Die reine Browser-Quelle
   bleibt unveraendert: kein Cursor, keine Umrandung, keine Buttons. */
.fcroot.is-editable .brand-badge{
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
}
.fcroot.is-editable .brand-badge:hover{
  outline:2px dashed rgba(197,124,255,.55);
  outline-offset:5px;
}
.fcroot.is-editable .brand-badge.is-selected{
  outline:2px solid var(--accent-soft);
  outline-offset:5px;
  box-shadow:0 6px 18px rgba(0,0,0,.22), 0 0 0 6px rgba(154,53,255,.14);
}
.fcroot.is-editable .brand-badge.is-dragging{cursor:grabbing}

/* Social-Leiste laesst sich genauso frei setzen wie das Icon */
.fcroot.is-editable .social-bar{
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
}
.fcroot.is-editable .social-bar:hover{
  outline:2px dashed rgba(197,124,255,.55);
  outline-offset:5px;
}
.fcroot.is-editable .social-bar.is-selected{
  outline:2px solid var(--accent-soft);
  outline-offset:5px;
  box-shadow:0 0 0 6px rgba(154,53,255,.14);
}
.fcroot.is-editable .social-bar.is-dragging{cursor:grabbing}

.fc-logo-tools{
  position:absolute;
  transform-origin:top left;
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(197,124,255,.45);
  border-radius:8px;
  background:rgba(12,12,16,.94);
  pointer-events:auto;
  z-index:5;
}
.fc-logo-tools[hidden]{display:none}
.fc-logo-tools i{width:1px;height:18px;background:rgba(255,255,255,.16)}
.fc-logo-tools button[data-a]{
  width:auto;
  height:22px;
  padding:0 9px;
  font:800 9px/1 Inter,system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(255,255,255,.06);
}
.fc-logo-tools button[data-a]:hover{background:rgba(255,255,255,.16)}
.fc-logo-tools button.is-save{
  background:var(--accent);
  border-color:var(--accent);
}
.fc-logo-tools button.is-save:hover{background:#a94dff}
.fc-logo-tools button{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  background:rgba(154,53,255,.18);
  color:#fff;
  font:700 14px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
}
.fc-logo-tools button:hover{background:rgba(154,53,255,.34)}
.fc-logo-tools span{
  font:700 9px/1 Inter,system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}