.rbki-orb-wrap{
  position:relative;
  display:block;
  width:100%;
  margin:0 auto;
  outline:none;
  cursor:pointer;
  user-select:none;
}
.rbki-orb-stage{
  perspective: 900px;
  perspective: 900px;
  position:relative;
  width:100%;
  border-radius:28px;
  overflow:hidden;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
}
.rbki-orb-canvas,
.rbki-face-img{
  position:absolute;
  left:50%;
  top:42%;
  width:68%;
  height:68%;
  transform: translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) rotateY(var(--yaw,0deg)) scale(calc(1 + (var(--talk,0) * 0.03))) scaleY(calc(1 - (var(--blink,0) * 0.38))) !important;
  transform-style: preserve-3d;

  border-radius:50%;
  overflow:hidden;
  clip-path:circle(50% at 50% 50%);
  pointer-events:none;
  z-index:3;
  opacity:0.98;
  filter: drop-shadow(0 0 22px rgba(50,220,255,.35)) drop-shadow(0 0 38px rgba(255,80,255,.22));
  will-change: transform, filter, opacity;
}


/* Ensure the WebGL face is visible above the 2D orb canvas */
.rbki-orb-canvas{ z-index: 1; }
.rbki-face-img{
  position:absolute;
  left:50%;
  top:42%;
  width:68%;
  height:68%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  clip-path:circle(50% at 50% 50%);
  pointer-events:none;
  z-index:3;
  opacity:0.98;
  filter: drop-shadow(0 0 22px rgba(50,220,255,.35)) drop-shadow(0 0 38px rgba(255,80,255,.22));
}


.rbki-orb-hud{
  position:absolute;
  left:0; right:0; bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.rbki-orb-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.14);
  color:#eaffff;
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:0.2px;
}
.rbki-orb-dot{
  width:10px; height:10px;
  border-radius:999px;
  background:#2de2ff;
  box-shadow: 0 0 18px rgba(45,226,255,0.9);
}
.rbki-orb-sub{
  color: rgba(235,255,255,0.85);
  font:500 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  text-shadow: 0 0 16px rgba(45,226,255,0.25);
  min-height: 16px;
}

/* --- Face (DOM, no WebGL): reliable on mobile + avoids UV/shader issues --- */
.rbki-face-img{
  position:absolute;
  left:50%;
  top:50%;
  width:min(320px,72vw);
  height:min(320px,72vw);
  transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) scale(calc(1 + (var(--talk,0) * 0.03)));
  border-radius:999px;
  background: var(--tia-face-url) center / cover no-repeat;
  mix-blend-mode: screen;
  opacity:0.66;
  filter: saturate(1.25) contrast(1.05) brightness(1.05) drop-shadow(0 0 18px rgba(0,255,255,.20)) drop-shadow(0 0 28px rgba(255,0,200,.12));
  pointer-events:none;
}
.rbki-face-img::after{
  content:"";
  position:absolute;
  inset:-8%;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  opacity:.55;
}
@media (max-width:640px){
  .rbki-face-img{ width:min(260px,74vw); height:min(260px,74vw); }
}

/* --- Hard override (fix mobile/desktop positioning) --- */
.rbki-face-img{
  top:50% !important;
  left:50% !important;
  width:70% !important;
  height:70% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
}

/* === 1.6.1: Freistehendes Face + keine Glas-Box === */
.rbki-orb-stage{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Face als freigestelltes PNG (ohne Kreis/Maskierung) */
.rbki-face-img{
  left: 50% !important;
  top: 48% !important;
  transform: translate(-50%,-50%) !important;
  width: min(420px, 78vw) !important;
  height: min(420px, 78vw) !important;
  background-image: url('tia-face-cutout.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  border-radius: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 18px rgba(0,255,255,.35)) drop-shadow(0 0 26px rgba(255,0,255,.28));
  pointer-events: none !important;
}

/* Orb bleibt optional, aber soll nicht "dominieren" */
.rbki-orb-canvas{
  opacity: .9;
}


/* 1.6.10: Cinematic micro-life fallback (visible even if vars are small) */
.rbki-orb-wrap .rbki-face-img{
  animation: rbki-face-breathe 6.8s ease-in-out infinite;
}

.rbki-orb-wrap[data-state="speaking"] .rbki-face-img,
.rbki-orb-wrap[data-state="emotional"] .rbki-face-img{
  animation-duration: 5.2s;
}

@keyframes rbki-face-breathe{
  0%,100%{
    opacity: 0.96;
    filter: drop-shadow(0 0 22px rgba(50,220,255,.38)) drop-shadow(0 0 40px rgba(255,80,255,.24));
  }
  50%{
    opacity: 0.995;
    filter: drop-shadow(0 0 28px rgba(50,220,255,.46)) drop-shadow(0 0 50px rgba(255,80,255,.30));
  }
}


/* rbki-orb-eyes-hide-face */
.rbki-face-img{ display:none !important; }