.sh-stage { position: relative; overflow: hidden; }
.sh-layer { position: absolute; box-sizing: border-box; transform-origin: center; }
.sh-layer > img,
.sh-layer > video { display: block; width: 100%; height: 100%; pointer-events: none; }
.sh-text { width: 100%; min-width: 0; white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.15; paint-order: stroke fill; }
.sh-layer > .sh-embed { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sh-layer > .sh-viz { display: block; width: 100%; height: 100%; }
.sh-layer > .sh-embed[hidden] { display: none; }

/* Balken: --sh-p ist der Füllstand von 0 bis 100, --inset der Abstand der Füllung zum Rand/Rahmen */
.sh-bar { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; --inset: 0px; --frame: 0px; }
.sh-bar-fill { position: absolute; overflow: hidden; }
.sh-bar.right > .sh-bar-fill { left: var(--inset); top: var(--inset); bottom: var(--inset); width: calc((100% - 2 * var(--inset)) * var(--sh-p) / 100); }
.sh-bar.left > .sh-bar-fill { right: var(--inset); top: var(--inset); bottom: var(--inset); width: calc((100% - 2 * var(--inset)) * var(--sh-p) / 100); }
.sh-bar.up > .sh-bar-fill { left: var(--inset); right: var(--inset); bottom: var(--inset); height: calc((100% - 2 * var(--inset)) * var(--sh-p) / 100); }
.sh-bar.down > .sh-bar-fill { left: var(--inset); right: var(--inset); top: var(--inset); height: calc((100% - 2 * var(--inset)) * var(--sh-p) / 100); }
.sh-bar-knob { position: absolute; width: 0; height: 0; }
.sh-bar-knob::after {
  content: ''; position: absolute; width: var(--knob); height: var(--knob);
  left: calc(var(--knob) / -2); top: calc(var(--knob) / -2);
  border-radius: 50%; background: var(--knob-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.sh-bar.right > .sh-bar-knob { left: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--sh-p) / 100); top: 50%; }
.sh-bar.left > .sh-bar-knob { left: calc(100% - var(--inset) - (100% - 2 * var(--inset)) * var(--sh-p) / 100); top: 50%; }
.sh-bar.up > .sh-bar-knob { left: 50%; top: calc(100% - var(--inset) - (100% - 2 * var(--inset)) * var(--sh-p) / 100); }
.sh-bar.down > .sh-bar-knob { left: 50%; top: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--sh-p) / 100); }
.sh-bar > [hidden] { display: none; }

/* Bewegte Effekte */
.sh-bar-fx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.sh-bar-fx.stripes {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent);
  background-size: var(--stripe) var(--stripe);
  animation: sh-stripes .9s linear infinite;
}
.sh-bar-fx.shine {
  right: auto; width: calc(var(--len) * .35);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: sh-shine 2.6s ease-in-out infinite;
}
.sh-bar-fill.flow { animation: sh-flow 3s linear infinite; }
@keyframes sh-stripes { to { background-position: var(--stripe) 0; } }
@keyframes sh-shine { 0% { transform: translateX(-100%); } 65%, 100% { transform: translateX(var(--len)); } }
@keyframes sh-flow { to { background-position: var(--flow); } }

/* Akku-Kappe am Ende des Balkens */
.sh-bar.cap::after { content: ''; position: absolute; background: var(--cap-color); }
.sh-bar.cap.right::after { left: calc(100% + var(--frame)); top: 28%; bottom: 28%; width: calc(var(--frame) + 3px); border-radius: 0 3px 3px 0; }
.sh-bar.cap.left::after { right: calc(100% + var(--frame)); top: 28%; bottom: 28%; width: calc(var(--frame) + 3px); border-radius: 3px 0 0 3px; }
.sh-bar.cap.up::after { bottom: calc(100% + var(--frame)); left: 28%; right: 28%; height: calc(var(--frame) + 3px); border-radius: 3px 3px 0 0; }
.sh-bar.cap.down::after { top: calc(100% + var(--frame)); left: 28%; right: 28%; height: calc(var(--frame) + 3px); border-radius: 0 0 3px 3px; }

/* Chat-Element */
.sh-layer > .sh-chat { display: flex; width: 100%; height: 100%; overflow: hidden; line-height: 1.3; }
.sh-msg { max-width: 100%; overflow-wrap: anywhere; transition: opacity .3s; }
.sh-chat.bubbles .sh-msg { padding: .35em .7em; border-radius: var(--radius); background: var(--bubble); }
.sh-chat.stacked .sh-msg-head { display: flex; align-items: center; gap: .3em; margin-bottom: .1em; }
.sh-chat.stacked .sh-msg-text { display: block; }
/* Zu lang (Liste): in einer Zeile ohne Umbruch – verkleinert bzw. gestaucht vom Renderer, „cut“ mit „…“ */
.sh-chat.one-line .sh-msg, .sh-chat.one-line .sh-msg-text { white-space: nowrap; overflow-wrap: normal; }
.sh-chat.one-line .sh-msg { max-width: none; }
.sh-chat.cut .sh-msg { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sh-name { font-weight: 800; }
.sh-badge { display: inline-block; margin-right: .3em; padding: .05em .35em; border-radius: .3em; color: #fff; font-size: .6em; font-weight: 800; letter-spacing: .03em; vertical-align: .2em; text-shadow: none; }
.sh-emote { height: 1.4em; vertical-align: middle; margin: -.2em .05em 0; }
.sh-msg.anim-slide { animation: sh-msg-slide .35s ease-out; }
.sh-msg.anim-fade { animation: sh-msg-fade .35s ease-out; }
.sh-msg.anim-pop { animation: sh-msg-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
/* Mit Verlauf: die Zeile wird von ihrer Seite her weich sichtbar (Maske mit weicher Kante wandert durch) */
.sh-msg.anim-sweep {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0 0; mask-position: 0 0;
  animation: sh-msg-sweep .45s ease-out;
}
.sh-chat.align-right .sh-msg.anim-sweep {
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 60%); mask-image: linear-gradient(270deg, #000 40%, transparent 60%);
  -webkit-mask-position: 100% 0; mask-position: 100% 0; animation-name: sh-msg-sweep-r;
}
@keyframes sh-msg-sweep { from { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes sh-msg-sweep-r { from { opacity: 0; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes sh-msg-slide { from { opacity: 0; transform: translateX(-24px); } }
@keyframes sh-msg-fade { from { opacity: 0; } }
@keyframes sh-msg-pop { from { opacity: 0; transform: scale(.7); } }

/* Ton-Ebene: im Editor ein Lautsprecher, im Overlay unsichtbar */
.sh-audio-icon { display: grid; place-items: center; width: 100%; height: 100%; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 14px; background: rgba(20, 20, 30, .55); font-size: 42px; }
.sh-layer > audio { display: none; }
.sh-layer > .sh-shape { display: block; width: 100%; height: 100%; pointer-events: none; }

/* Bilder/Videos: Unschärfe nur am Rand, Rahmen über dem Bild */
.sh-layer > .sh-edgeblur { position: absolute; inset: 0; pointer-events: none; }
.sh-layer > .sh-frame { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.sh-layer > .sh-vignette { position: absolute; inset: 0; pointer-events: none; }
.sh-layer > .sh-blurfade { position: absolute; inset: 0; pointer-events: none; }
.sh-layer > .sh-fxregion { position: absolute; pointer-events: none; }
/* Vorlage-Ebene ohne freigeschaltetes Modul (nur im Editor zu sehen) */
.sh-layer.sh-locked { outline: 2px dashed rgba(251, 191, 36, .7); outline-offset: -2px; background: rgba(251, 191, 36, .06); }
.sh-layer.sh-locked::after { content: 'Vorlage nutzt Module, die du nicht besitzt'; position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: #fbbf24; font: 600 14px Inter, sans-serif; text-align: center; }
/* Rahmen: Canvas ragt über die Ebene hinaus (Leuchten, Flammen …), Klicks gehen an die Ebene */
.sh-layer > .sh-border { position: absolute; display: block; pointer-events: none; }