/* ---------- Overlay ---------- */
:root {
  --size: 22px;
  --font: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --text: #ffffff;
  --gap: 6px;
  --box: rgba(14, 14, 20, 0.72);
  --accent: #a970ff;
}
html, body.overlay { margin: 0; background: transparent; overflow: hidden; height: 100%; }
body.overlay { font-family: var(--font), 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; font-size: var(--size); color: var(--text); }
#chat {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--gap);
}
.align-right #chat { align-items: flex-end; text-align: right; }
.msg {
  line-height: 1.45; overflow-wrap: anywhere; font-weight: 500;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px rgba(0,0,0,.9);
  max-width: 100%;
}
.bg .msg { background: var(--box); padding: 5px 10px; border-radius: 10px; text-shadow: none; width: fit-content; }
.anim .msg { animation: in .25s ease-out; }
.msg.out { animation: out .5s ease-in forwards; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes out { to { opacity: 0; transform: translateY(-4px); } }

.badge { height: 1.05em; width: auto; vertical-align: -0.17em; margin-right: 0.22em; }
.name { font-weight: 800; }
.sep { margin-right: 0.3em; }
.action .text-part, .action .mention { font-style: italic; }
.emote { height: 1.65em; width: auto; vertical-align: middle; margin: -0.35em 0.05em; }
.stack { position: relative; display: inline-block; }
.stack .zw { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.mention { font-weight: 700; }
.reply { font-size: 0.72em; opacity: 0.8; margin-bottom: 1px; }
.tag { font-size: 0.62em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; margin-right: 0.35em; vertical-align: 0.12em; background: var(--accent); color: #fff; text-shadow: none; }
.highlight { background: rgba(169, 112, 255, 0.35) !important; padding: 4px 10px; border-radius: 10px; }
.notice { border-left: 4px solid var(--accent); padding: 4px 10px; background: rgba(169, 112, 255, 0.22); border-radius: 8px; }
.bg .notice { background: rgba(80, 40, 140, 0.8); }
.notice .system { font-weight: 800; }
.notice .usertext { display: block; margin-top: 2px; }

/* ---------- Einrichtungsseite ---------- */
body.setup { margin: 0; font-family: 'Segoe UI', Roboto, system-ui, sans-serif; background: #0e0e13; color: #e9e9ee; }
.setup main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.setup h1 { font-size: 24px; margin: 0 0 4px; }
.setup .muted { color: #9b9bab; }
.setup .grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 800px) { .setup .grid { grid-template-columns: 1fr; } }
.setup .card { background: #18181f; border: 1px solid #2a2a35; border-radius: 12px; padding: 16px; }
.setup label { display: grid; gap: 4px; font-size: 14px; margin-bottom: 12px; }
.setup label.check { display: flex; align-items: center; gap: 8px; }
.setup input[type=number], .setup select { background: #0e0e13; color: inherit; border: 1px solid #2a2a35; border-radius: 8px; padding: 7px 9px; font: inherit; }
.setup .url { display: flex; gap: 8px; margin-top: 8px; }
.setup .url input { flex: 1; min-width: 0; background: #0e0e13; color: #c7b3ff; border: 1px solid #2a2a35; border-radius: 8px; padding: 8px; font-family: ui-monospace, monospace; font-size: 13px; }
.setup button { background: #9146ff; color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.setup button.ghost { background: #2a2a35; }
.setup .preview { position: relative; height: 560px; border-radius: 12px; overflow: hidden; border: 1px solid #2a2a35;
  background: repeating-conic-gradient(#2b2f3a 0% 25%, #232631 0% 50%) 50% / 32px 32px; }
.setup .preview.game { background: linear-gradient(160deg, #3a6b35, #a4c46a 45%, #6fa8dc); }
.setup iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.setup ol { padding-left: 20px; line-height: 1.6; }
.setup .status { font-size: 13px; }
.setup code { background: #0e0e13; padding: 1px 5px; border-radius: 4px; }
.setup hr { border: 0; border-top: 1px solid #2a2a35; margin: 14px 0; }
.setup .preview-head { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.setup .grow { flex: 1; }
.setup .light { font-weight: 400; }
.setup input[type=password], .setup #tname, .setup #ttext { background: #0e0e13; color: inherit; border: 1px solid #2a2a35; border-radius: 8px; padding: 7px 9px; font: inherit; }
.setup .buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.setup .small-text { font-size: 13px; margin: 4px 0 10px; }