/* The OBS page and the admin's previews. Transparent: OBS composes it over the scene. */
body.obs { margin: 0; background: transparent; overflow: hidden; }
.obs #stage { position: fixed; inset: 0; }

.stage { display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* The admin's previews: a 1920×1080 frame (render.js previewFrame), scaled down to the stage from its centre. */
.frame { display: flex; align-items: center; justify-content: center; flex: none; }
.alert-wrap { display: flex; align-items: center; justify-content: center; }
/* flex: none — a canvas wider than the stage keeps its size and is scaled (fit), never squeezed. */
.alert-wrap, .alert { flex: none; }
.alert { transform-origin: center; line-height: 1.15; overflow-wrap: anywhere; }
/* Donor text: its own bidi run, left to right — a comment starting in Hebrew or Arabic must not
   reorder the Ukrainian words after it (clean() already strips bidi controls). */
.donor { unicode-bidi: isolate; direction: ltr; }
/* An emote in a comment: a line of text tall, whatever the picture rules below (.std img, .box img) say. */
.part .emote { width: auto; height: 1.4em; max-width: none; max-height: none; object-fit: contain; vertical-align: middle; }
/* Thickened text with an outline (render.js textPart): the copy on top casts no second shadow and
   draws its emotes nowhere — they keep their place so the lines break as under it. inline-block: the
   standard comment is an inline span, and its wrapped fragments are no box for the copy to fill. */
.thickened { position: relative; display: inline-block; }
.thick { position: absolute; inset: 0; text-shadow: none; }
.thick .emote { visibility: hidden; }

.std { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 1600px; }
.std img { max-width: 100%; max-height: 540px; object-fit: contain; }
.line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.3em; }

.free { position: relative; }
.box { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.box img { width: 100%; height: 100%; object-fit: contain; }