/* ======================================================================
   RAIDABEND · Forever-Oberfläche (3.0)
   Vorbild: die Fenster aus WoW Forever (Karte & Questlog, Talente, Optionen,
   Suche nach Gruppe). Originalteile aus dem Client unter /assets/ui/frames/fv-*.
   Gilt für ALLE Szenen, weil die alten Bausteine (.wf, .sec, .opt, .btn …) hier
   neu eingekleidet werden. Größen skalieren mit Breite UND Höhe (Ultrawide).
   ====================================================================== */
:root {
  --fv-title: url('/assets/ui/frames/fv-title.webp');
  --fv-red: url('/assets/ui/frames/fv-btn-red.webp');
  --fv-red-down: url('/assets/ui/frames/fv-btn-down.webp');
  --fv-grey: url('/assets/ui/frames/fv-btn-grey.webp');
  --fv-inset: url('/assets/ui/frames/fv-inset.png');
  --fv-parch: url('/assets/ui/frames/fv-questparch.webp');
  --fv-parch-torn: url('/assets/ui/frames/fv-parch.webp');
  --fv-leather: url('/assets/ui/frames/fv-leather.webp');
  --fv-ring: url('/assets/ui/frames/fv-ring.png');
  --fv-banner: url('/assets/ui/frames/fv-banner.webp');
  --fv-body: #120e0b;
  --fv-bronze-hi: #d7b27a; --fv-bronze: #8c6a3c; --fv-bronze-lo: #3f2b15;
  --fv-yellow: #ffd100; --fv-white: #ffffff; --fv-text: #f4ecdc; --fv-mute: #bcae94;
  --fv-ink: #2a1705; --fv-ink-head: #3b1f05;
  /* eine Einheit, die auf 16:9, 21:9 und 32:9 gleich wirkt */
  --u: min(1vw, 1.78vh);
}

/* ---------- Skalierung ---------- */
.scr { font-size: clamp(14px, calc(var(--u) * 1.2), 46px) }
.scr.ra-shell { font-size: clamp(13px, calc(var(--u) * 1.08), 42px) }
.ra-main { grid-template-columns: minmax(0, 1fr) clamp(230px, calc(var(--u) * 16), 620px) }
.scr.ra-shell.is-full { grid-template-rows: 1fr auto }
.ra-full { display: grid; min-height: 0; overflow: hidden; padding: .8em clamp(16px, calc(var(--u) * 2.4), 90px) .4em }
.ra-full > * { min-height: 0 }

/* ---------- Fenster ---------- */
.wf, .ra-panel, .fv {
  position: relative; border-radius: 5px;
  background: radial-gradient(ellipse 120% 70% at 50% 0%, #241b13, var(--fv-body) 70%);
  border: 0; border-image: none;
  box-shadow:
    inset 0 0 0 1px #000, inset 0 0 0 2px rgb(255 215 150 / .10), inset 0 0 40px rgb(0 0 0 / .65),
    0 0 0 1px #000, 0 0 0 3px var(--fv-bronze-lo), 0 0 0 4px var(--fv-bronze), 0 0 0 6px var(--fv-bronze-hi), 0 0 0 7px var(--fv-bronze), 0 0 0 9px #140d06,
    0 22px 60px rgb(0 0 0 / .8);
}
.ra-panel { padding: 1.1em 1.4em; background-clip: border-box }
.wf-head, .fv-head {
  position: relative; height: 2.25em; display: grid; place-items: center; padding: 0 3em;
  background: var(--fv-title) center / auto 100% repeat-x; border: 0; box-shadow: 0 2px 0 #000;
  font: 400 1.05em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 0 #000, 0 0 6px #000; letter-spacing: .01em;
  border-radius: 4px 4px 0 0;
}
.wf-head.nomedal { padding-left: 3em }
.wf-body { gap: .9em }
/* rundes Medaillon oben links wie im Spiel */
.medal { left: -1.3em; top: -1.3em; width: 4.4em; height: 4.4em; background: #0b0805; box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--fv-bronze), 0 0 0 6px var(--fv-bronze-hi), 0 0 0 8px #1b1209, 0 6px 16px #000 }

/* Abschnittsköpfe („Gameplay“, „Dungeons & Schlachtzüge“) */
.sec, .fv-sec {
  display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .35em .8em;
  font: 400 1.02em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 0 #000;
  background: linear-gradient(#2c2016, #150f0a); border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 0 0 0 1px #6e5433, inset 0 1px 0 rgb(255 220 160 / .18), 0 2px 4px rgb(0 0 0 / .6);
}
.sec::after { content: ""; width: .8em; height: .18em; border-radius: 1px; background: var(--fv-yellow); box-shadow: 0 0 4px rgb(255 209 0 / .6) }

/* Vertiefte Innenflächen (Berufe-Kästen) */
.inset, .qcard, .fv-inset { border: 10px solid transparent; border-image: var(--fv-inset) 18 / 10px stretch; background: rgb(0 0 0 / .32); background-clip: padding-box; box-shadow: none; border-radius: 8px; padding: .7em .9em }

/* ---------- Buttons: rot mit gelber Schrift, Alternativ grau ---------- */
.btn, .pbig, .rb, .fv-btn {
  position: relative; font: 400 1em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 1px #000; letter-spacing: .01em;
  background: var(--fv-red) center / 100% 100%; border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(214 170 100 / .55), 0 2px 4px rgb(0 0 0 / .7); transition: filter .15s, transform .1s;
}
.btn:hover, .pbig:hover, .rb:hover { filter: brightness(1.2) }
.btn:active, .pbig:active, .rb:active, .pbig.pressed { background-image: var(--fv-red-down); transform: translateY(1px) }
.btn.alt, .pbig.alt, .rb.alt { color: var(--fv-yellow); background-image: var(--fv-grey) }
.rb { padding: .35em .9em; font-size: .92em }
.rb.on { background-image: var(--fv-grey); color: #fff; box-shadow: inset 0 0 0 1px var(--fv-yellow), 0 0 10px rgb(255 209 0 / .35) }
.rb.danger { color: #fff }
button[disabled], .pbig[disabled] { filter: grayscale(1) brightness(.75); opacity: .75 }

/* ---------- Listenzeilen / Antworten (wie „Suche nach Gruppe“) ---------- */
.opt, .fv-row {
  display: flex; align-items: center; gap: .7em; padding: .55em .8em .55em .55em; border-radius: 6px; font: 400 1em var(--ra-font-display); color: var(--fv-white);
  background: linear-gradient(#231b13, #100c08); border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #6e5433, inset 0 0 0 2px #000, inset 0 1px 0 3px rgb(255 220 160 / .05), 0 3px 8px rgb(0 0 0 / .6);
}
.opt .l { color: var(--fv-yellow); background: radial-gradient(circle at 40% 35%, #3b2b12, #0d0904); border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze) }
.opt.ok { box-shadow: inset 0 0 0 2px #52d65e, 0 0 18px rgb(82 214 94 / .35); background: linear-gradient(#1c3316, #0e1a0b) }
.opt.no { opacity: .5 }
.who span { font: 600 .95em var(--ra-font-ui); padding: .15em .6em; color: var(--fv-mute); background: rgb(0 0 0 / .4); opacity: 1 }
.who span.in { color: #1b1308; background: var(--ra-brass-light); box-shadow: none }
.small { color: var(--fv-mute) } .mute { color: var(--fv-mute) }

/* Pergament für Erzähltexte */
.bubble, .parch { background: var(--fv-parch) center / cover, #e8d3a5; color: var(--fv-ink); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze), 0 0 0 4px #1b1209, 0 8px 20px rgb(0 0 0 / .6); font-size: 1em }
.bubble b, .parch b { color: #7a1e00 }

/* Tabellen (Checkpoint, Loot, Regie) */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0 .25em; font-family: var(--ra-font-display) }
.tbl th { font: 400 .9em var(--ra-font-display); color: var(--fv-yellow); text-align: left; padding: .35em .6em; background: linear-gradient(#2c2016, #150f0a); border-top: 1px solid #6e5433; border-bottom: 1px solid #000 }
.tbl td { padding: .35em .6em; background: rgb(255 255 255 / .03); border-top: 1px solid rgb(255 255 255 / .04) }
.tbl tr:hover td { background: rgb(255 209 0 / .05) }

/* ---------- Kopf- und Statusleiste im Leder-Look ---------- */
.ra-hud { background: linear-gradient(rgb(0 0 0 / .85), rgb(0 0 0 / .25)); padding: .5em clamp(16px, calc(var(--u) * 2.4), 90px) }
.hud-act { font: 600 .75em var(--ra-font-ui); color: var(--fv-mute) }
.hud-st { font-size: 1.25em }
.chip-r { font: 600 .85em var(--ra-font-ui); padding: .3em .7em; background: linear-gradient(#231b13, #0e0a07); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6e5433 }
.ra-dock { min-height: 3.6em; background: linear-gradient(#1d150e, #0b0806); border-top: 0; box-shadow: 0 -1px 0 #000, 0 -2px 0 var(--fv-bronze), 0 -3px 0 var(--fv-bronze-hi), 0 -4px 0 #000, 0 -14px 30px rgb(0 0 0 / .6); padding: .4em clamp(16px, calc(var(--u) * 2.4), 90px) }
.dk-main { font-size: 1.05em } .dk-main b { color: var(--fv-yellow) }
.dk-main .mute, .dk-side .mute { color: #e6d6b6; font-size: .85em }
.narr-txt { font-size: .9em } .narr-t { color: #e6d6b6 }

/* ---------- Gruppenleiste als Forever-Fenster ---------- */
.party { border: 0; border-image: none; padding: 0 0 .35em; gap: .25em; background: radial-gradient(ellipse 120% 60% at 50% 0%, #241b13, var(--fv-body) 70%); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze-lo), 0 0 0 4px var(--fv-bronze), 0 0 0 5px var(--fv-bronze-hi), 0 0 0 7px #140d06, 0 16px 40px rgb(0 0 0 / .7) }
.pty-h { justify-content: center; gap: .6em; padding: .45em .6em; margin-bottom: .2em; font: 400 1em var(--ra-font-display); letter-spacing: 0; text-transform: none; color: var(--fv-yellow); background: var(--fv-title) center / auto 100% repeat-x; border: 0; border-radius: 4px 4px 0 0; text-shadow: 0 1px 0 #000 }
.pty-n { color: #e6d6b6; font-size: .8em }
.pf { margin: 0 .4em; padding: .45em .5em; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, #120d09), #0d0a07 75%); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(110 84 51 / .7) }
.pf-name { font-size: 1em } .pf-sub { font-size: .72em; color: #d8c9ab } .pf-rk { color: var(--fv-yellow) }
.pf-state { font-size: .66em; bottom: .4em }
.pf-xp { height: .55em }
.combatlog { font-size: .72em; color: #d8c9ab; background: rgb(0 0 0 / .55); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(110 84 51 / .5) }

/* ---------- Frage: Questtext wie „Karte & Questlog“ + Antwortzeilen ---------- */
.ra-qpaper { padding: 1.2em 1.8em 1.1em; color: var(--fv-ink); background: var(--fv-parch) center / cover, #e3cb98; border-radius: 3px;
  box-shadow: inset 0 0 50px rgb(110 60 10 / .35), 0 0 0 1px #000, 0 0 0 4px var(--fv-bronze), 0 0 0 5px var(--fv-bronze-hi), 0 0 0 7px #140d06, 0 18px 50px rgb(0 0 0 / .7) }
.ra-qhead { gap: .8em; margin-bottom: .55em; padding-bottom: .45em; border-bottom: 1px solid rgb(90 50 10 / .35) }
.ra-cat { font: 400 1.25em/1.1 var(--ra-font-epic); color: var(--fv-ink-head); text-shadow: 0 1px 0 rgb(255 240 200 / .5) }
.ra-rar, .ra-qpaper .ra-rar { display: inline-block; width: fit-content; margin-bottom: .25em; padding: .15em .6em; font: 700 .68em var(--ra-font-ui); letter-spacing: .14em; color: var(--rc, #ddd); background: #21160b; border-radius: 3px; text-shadow: none; box-shadow: 0 0 0 1px rgb(0 0 0 / .6) }
.ra-qtext { color: #1c1004; font-size: clamp(22px, calc(var(--u) * 2.05), 76px); line-height: 1.24 }
.ra-qfoot, .ra-qfoot .mute { font: 700 .78em var(--ra-font-ui); color: #4b3014 }
.ra-seal { width: 2.9em }

.ra-answers { gap: clamp(10px, calc(var(--u) * 1), 36px) }
.ra-ans {
  min-height: 3.6em; padding: .6em 1.1em .6em .7em; border: 0; border-image: none; border-radius: 8px; color: var(--fv-white);
  font-size: clamp(18px, calc(var(--u) * 1.5), 56px);
  background: linear-gradient(rgb(255 220 150 / .06), transparent 40%), linear-gradient(#241b12, #0e0a07);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #75593a, inset 0 0 0 4px #000, inset 0 0 22px rgb(0 0 0 / .8), 0 6px 16px rgb(0 0 0 / .7);
}
.ra-l { width: 1.75em; height: 1.75em; font-size: .85em; color: var(--fv-yellow); background: radial-gradient(circle at 40% 35%, #4a3515, #0d0904); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze-hi), 0 0 0 3px #000 }
.ra-q.rv .ra-ans.ok { border-image: none; background: linear-gradient(rgb(160 255 140 / .10), transparent 50%), linear-gradient(#1f3a17, #0c1709); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #5fdc5a, inset 0 0 0 4px #000, 0 0 36px rgb(95 220 90 / .45) }
.ra-q.dark .ra-qpaper { background: radial-gradient(ellipse 120% 80% at 50% 0%, #2a2016, #0f0b08 75%) }
.ra-ctx { font-size: 1em; color: var(--fv-text); background: linear-gradient(90deg, rgb(0 0 0 / .8), rgb(0 0 0 / .55)); border-left: 3px solid var(--fv-yellow); border-radius: 0 4px 4px 0 }
.ra-ctx .src { color: #cfc0a2 }
.ra-picks .pk { font-size: .56em }

/* ---------- Questtafel ---------- */
.qt-plank { font-size: 1.6em; color: var(--fv-yellow); background: var(--fv-title) center / auto 100% repeat-x; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze), 0 6px 14px rgb(0 0 0 / .6); text-shadow: 0 1px 0 #000 }
.qt-plank small { color: #e6d6b6 }
.qt-cat { font-size: 1.15em; color: var(--fv-yellow); background: linear-gradient(#2c2016, #150f0a); box-shadow: inset 0 0 0 1px #6e5433, 0 2px 4px rgb(0 0 0 / .6) }
.qt-ticket { background: var(--fv-parch) center / cover, #e3cb98 }
.qt-rar { color: var(--fv-ink); } .qt-rar { font-size: .74em }
.qt-rew, .qt-rew .money { color: #2a1705; font-weight: 700 }
.qt-foot { font-size: .85em; color: #f0e2c0 }

/* ---------- Szenen im Vollbild (Goblin, Stimmen, Brachland …) ---------- */
.vo-screen, .gb-screen { height: 100%; align-content: center }
.vo-right .wf, .gb-main { align-self: center }
.gb-screen { grid-template-columns: minmax(0, 22em) minmax(0, 1fr) }
.vo-l { font-size: 1em; color: #e6d6b6; background: linear-gradient(#231b13, #0e0a07); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6e5433 }
.vo-l.on { color: var(--fv-yellow); box-shadow: inset 0 0 0 1px var(--fv-yellow), 0 0 14px rgb(255 209 0 / .35) }

/* ---------- Handy ---------- */
body.play .pbig { min-height: 56px; font-size: 18px }
.play .ptext { background: var(--fv-parch) center / cover, #e3cb98; color: #1c1004; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze) }
.pa { border: 0; border-image: none; border-radius: 8px; color: #fff;
  background: linear-gradient(rgb(255 220 150 / .06), transparent 40%), linear-gradient(#241b12, #0e0a07);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #75593a, inset 0 0 0 4px #000, 0 4px 10px rgb(0 0 0 / .7) }
.pa.sel, .pa.sel-optim { border-image: none; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px var(--fv-yellow), inset 0 0 0 4px #000, 0 0 22px rgb(255 209 0 / .45) }
.presult .pr-card, .presult.ok .pr-card { border: 0; border-image: none; border-radius: 6px; background: radial-gradient(ellipse 120% 70% at 50% 0%, #241b13, var(--fv-body) 70%);
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze-lo), 0 0 0 4px var(--fv-bronze), 0 0 0 5px var(--fv-bronze-hi), 0 10px 30px #000 }
.presult.ok .pr-card { box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000, 0 0 0 3px #1d4a18, 0 0 0 4px #5fdc5a, 0 0 30px rgb(95 220 90 / .4) }

/* Handy-Reiter unten: Aktion · Charakter · Schlachtzug · Emotes */
.ptabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(#1d150e, #0b0806); box-shadow: 0 -2px 0 #000, 0 -3px 0 var(--fv-bronze) }
.ptabs button { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; font: 600 9.5px var(--ra-font-ui); color: #d8c9ab; background: none; border: 0; border-radius: 5px }
.ptabs button img { width: 26px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4428; filter: saturate(.6) brightness(.8) }
.ptabs button.on { color: var(--fv-yellow); background: rgb(0 0 0 / .35) } .ptabs button.on img { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-yellow) }
.ptabs .badge { position: absolute; margin-left: 22px; margin-top: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font: 700 10px/16px var(--ra-font-ui); color: #000; background: var(--fv-yellow) }
body.play.has-tabs { padding-bottom: 76px }
.ppane[hidden] { display: none !important }
.ppane h4.fvh { margin: .2em 0 .5em; font: 400 18px var(--ra-font-display); color: var(--fv-yellow) }
.csheet { display: grid; gap: 10px }
.csheet .row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.csheet .stat { display: grid; justify-items: center; padding: 8px 4px; border-radius: 6px; background: linear-gradient(#231b13, #0e0a07); box-shadow: inset 0 0 0 1px #6e5433; font: 600 11px var(--ra-font-ui); color: #cfc0a2 }
.csheet .stat b { font: 400 20px var(--ra-font-display); color: #fff }
.csheet .skl { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(110 84 51 / .6) }
.csheet .skl img { width: 40px; height: 40px; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze) }
.csheet .skl.lock { opacity: .45; filter: grayscale(1) }
.csheet .skl div { display: grid; font: 500 13px/1.3 var(--ra-font-ui); color: #d8c9ab } .csheet .skl b { font: 400 15px var(--ra-font-display); color: var(--fv-yellow) }
.csheet .item { font: 400 15px var(--ra-font-display); padding: 4px 0 }
.prank { display: grid; gap: 6px }
.prank .r { display: grid; grid-template-columns: 26px 34px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, #120d09), #0d0a07 80%); box-shadow: inset 0 0 0 1px rgb(110 84 51 / .6) }
.prank .r.me { box-shadow: inset 0 0 0 2px var(--fv-yellow) }
.prank .n { font: 700 16px var(--ra-font-display); color: var(--fv-yellow); text-align: center }
.prank .ico { width: 32px; height: 32px }
.prank .nm2 { display: grid; font: 400 16px var(--ra-font-display) } .prank .nm2 small { font: 500 12px var(--ra-font-ui); color: #cfc0a2 }
.prank .ep { font: 600 13px var(--ra-font-ui); color: #e0b8ff; text-align: right }
.emotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.emotes button { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 8px; font: 400 14px var(--ra-font-display); color: var(--fv-yellow); background: linear-gradient(#241b12, #0e0a07); border: 0; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #75593a }
.emotes button img { width: 40px; height: 40px; border-radius: 6px; box-shadow: 0 0 0 1px #000 }
.emotes button:active { transform: scale(.95) }
.emotes button.cool { opacity: .4 }

/* Emote-Blase am Spielerrahmen (Spielbildschirm) */
.emo { position: absolute; z-index: 44; display: flex; align-items: center; gap: .4em; padding: .3em .7em .3em .3em; font: 400 clamp(14px, calc(var(--u) * 1.1), 40px) var(--ra-font-display); color: #fff; background: rgb(10 8 6 / .92); border-radius: 99px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--c, var(--fv-bronze)), 0 6px 16px #000; white-space: nowrap; transform: translate(-100%, -50%); animation: emo 3.2s var(--ra-ease) forwards; pointer-events: none }
.emo img { width: 1.8em; height: 1.8em; border-radius: 50%; box-shadow: 0 0 0 1px #000 }
.emo b { color: var(--c, var(--fv-yellow)); font-weight: 400 }
@keyframes emo { 0% { opacity: 0; transform: translate(-80%, -50%) scale(.6) } 10% { opacity: 1; transform: translate(-100%, -50%) scale(1.08) } 18% { transform: translate(-100%, -50%) scale(1) } 85% { opacity: 1 } 100% { opacity: 0; transform: translate(-100%, -90%) } }

/* ---------- Regie: ruhiges Werkzeug ---------- */
body.regie { background: #0b0907; font-size: 15px }
.rg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; padding: 18px; max-width: 1800px; margin: 0 auto }
.rg > .wide { grid-column: 1 / -1 }
.rg .wf { margin: 6px }
.rg-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.rg-status .k { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(110 84 51 / .6) }
.rg-status .k small { font: 600 11px var(--ra-font-ui); letter-spacing: .08em; text-transform: uppercase; color: #a99c83 }
.rg-status .k b { font: 400 17px var(--ra-font-display); color: #fff }
.rg-status .k.warn { box-shadow: inset 0 0 0 2px #ffb238 } .rg-status .k.warn b { color: #ffcf7a }
.rg-status .k.bad { box-shadow: inset 0 0 0 2px #ff4b3a } .rg-status .k.bad b { color: #ff8a7a }
.rg-block { display: grid; gap: 8px }
.rg-block h5 { margin: 4px 0 0; font: 600 12px var(--ra-font-ui); letter-spacing: .1em; text-transform: uppercase; color: #a99c83 }
.rg .scenes { display: flex; flex-wrap: wrap; gap: 6px }
.rg .scenes .rb { font-size: .82em }
.rg .tbl td { font-size: .95em } .rg .tbl .row { gap: 4px } .rg .tbl .rb { padding: .2em .55em; font-size: .78em }
.rg-log { max-height: 320px; overflow: auto; font: 500 12.5px/1.45 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #cfc0a2; background: #070605; border-radius: 6px; padding: 8px 10px; box-shadow: inset 0 0 0 1px rgb(110 84 51 / .5) }
.rg-log .t { color: #7d7160 } .rg-log .e { color: #ffd100 }
.rg-saves { display: grid; gap: 4px } .rg-saves .row { justify-content: space-between; padding: 4px 8px; border-radius: 4px; background: rgb(255 255 255 / .03) }
.rg .stuck { color: #ffcf7a }
.dotst { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 1px #000 } .dotst.on { background: #40d65a; box-shadow: 0 0 6px #40d65a } .dotst.off { background: #6b6b6b } .dotst.bot { background: #7aa6ff }
@media (max-width: 1100px) { .rg { grid-template-columns: 1fr } }

/* Nachbesserungen */
.has-tabs .toasts { bottom: 92px !important }
.csheet .stat { text-align: center }
.ra-answers { row-gap: 1.35em }
/* Stimmung hinter Vollbild-Szenen: Original-Ladebildschirme, abgedunkelt */
/* Hintergründe je Szene: hochaufgelöste Screenshots, abgedunkelt (keine hochgezogenen 512er-Ladebilder mehr) */
.ra-amb { background-color: #0a0806 }
.scr.mood-tavern .ra-amb, .scr.sc-board .ra-amb, .scr.sc-inn .ra-amb { animation: none; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgb(0 0 0 / .25), rgb(0 0 0 / .78)), linear-gradient(rgb(20 10 4 / .35), rgb(0 0 0 / .55)), url('/assets/ui/backgrounds/gasthaus.webp') center / cover }
.scr.mood-tavern .ra-amb::after { display: none }
.scr.sc-goblin .ra-amb, .scr.sc-loot .ra-amb, .scr.sc-end .ra-amb { background: radial-gradient(ellipse 70% 70% at 55% 45%, rgb(0 0 0 / .2), rgb(0 0 0 / .8)), url('/assets/ui/backgrounds/schatzkammer.webp') center / cover }
.scr.sc-brachland .ra-amb { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgb(0 0 0 / .25), rgb(0 0 0 / .8)), url('/assets/ui/backgrounds/brachland-weite.webp') center / cover }
.scr.sc-lagerfeuer .ra-amb { background: linear-gradient(90deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .75) 62%), radial-gradient(ellipse 60% 60% at 70% 50%, transparent, rgb(0 0 0 / .5)), url('/assets/ui/backgrounds/lagerfeuer.webp') 30% center / cover }
.scr.sc-stimmen .ra-amb { background: radial-gradient(ellipse 45% 55% at 30% 45%, rgb(110 60 200 / .28), transparent 70%), radial-gradient(ellipse 60% 60% at 50% 40%, rgb(30 15 50 / .5), rgb(0 0 0 / .95)), url('/assets/ui/backgrounds/gasthaus.webp') center / cover; background-blend-mode: normal, normal, luminosity }
.scr.sc-tooltip .ra-amb, .scr.sc-checkpoint .ra-amb { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgb(0 0 0 / .3), rgb(0 0 0 / .88)), url('/assets/ui/backgrounds/raid-mc.webp') center / cover }
.scr.sc-lobby .ra-amb, .scr.sc-intro .ra-amb { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgb(0 0 0 / .2), rgb(0 0 0 / .8)), url('/assets/ui/backgrounds/gasthaus.webp') center / cover }
.scr.sc-act .ra-amb { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgb(0 0 0 / .2), rgb(0 0 0 / .85)), url('/assets/ui/backgrounds/raid-mc.webp') center / cover }


/* ---------- Frage baut sich auf: Papier klappt auf, Wörter erscheinen, Antworten ploppen ---------- */
.ra-q.build .ra-qpaper { animation: qpaper .45s var(--ra-ease) both }
.ra-q.build .ra-qtext .w { display: inline-block; white-space: pre; animation: qword .35s var(--i) var(--ra-ease) both }
.ra-q.build .ra-qhead { animation: fadeup .4s .1s both }
.ra-q.build .ra-ans { animation: qpop .42s calc(var(--tA) + var(--j) * .09s) cubic-bezier(.2, 1.6, .4, 1) both }
.ra-q.build .ra-qfoot { animation: fadeup .4s calc(var(--tA) + .4s) both }
@keyframes qpaper { from { opacity: 0; transform: scaleY(.3) translateY(-10px); filter: brightness(1.8) } 60% { opacity: 1 } }
@keyframes qword { from { opacity: 0; transform: translateY(.35em); filter: blur(3px) } }
@keyframes qpop { from { opacity: 0; transform: scale(.7) translateY(12px) } }
.ra-qtext .w { white-space: pre-wrap }
@media (prefers-reduced-motion: reduce) { .ra-q.build * { animation: none !important } }

/* ---------- Pergament ohne Hochskalieren: erzeugt (Farbverlauf + feines Rauschen), überall scharf ---------- */
:root {
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .28  0 0 0 0 .1  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper: radial-gradient(ellipse 75% 65% at 50% 45%, transparent 55%, rgb(120 60 10 / .45) 100%), var(--paper-noise), var(--paper-fibre), linear-gradient(170deg, #f0dcae, #e2c68d 55%, #d6b577);
}
.ra-qpaper, .play .ptext, .bubble, .parch, .qt-ticket, .gb-bub { background: var(--paper) !important; background-size: auto, 300px 300px, 600px 400px, auto !important }
.ra-qpaper { box-shadow: inset 0 0 0 1px rgb(90 50 10 / .5), inset 0 0 30px rgb(110 60 10 / .35), 0 0 0 1px #000, 0 0 0 4px var(--fv-bronze), 0 0 0 5px var(--fv-bronze-hi), 0 0 0 7px #140d06, 0 18px 50px rgb(0 0 0 / .7) }

/* ---------- Bosskampf wie ein Raid-Moment: Boss-Bild füllt die Bühne, Frage liegt unten im Kampfrahmen ---------- */
.bf2 { display: block; position: relative; height: 100% }
.bf2-stage { position: absolute; inset: 0; min-height: 0; border-radius: 6px }
.bf2-console { position: absolute; left: 3%; right: 3%; bottom: 2.5%; max-height: 62%; overflow: visible; z-index: 3 }
.bf2-console .ra-q.dark .ra-qpaper { background: linear-gradient(rgb(18 13 9 / .93), rgb(8 6 4 / .95)) !important; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze-lo), 0 0 0 4px var(--fv-bronze), 0 0 0 5px var(--fv-bronze-hi), 0 0 0 7px #140d06, 0 20px 60px #000 }
.bf2-console .ra-qhead { justify-content: center; border-bottom-color: rgb(215 178 122 / .25) }
.bf2-console .ra-qtext { text-align: center; color: #fff; font-size: clamp(22px, calc(var(--u) * 2), 72px) }
.bf2-console .ra-qfoot { text-align: center }
.bf2-console .ra-answers { margin-top: .2em }
.bf2-console .ra-ans { background: linear-gradient(rgb(255 220 150 / .07), transparent 40%), linear-gradient(rgb(30 22 15 / .95), rgb(12 9 6 / .95)) }
.bf2-console .bf2-result { width: min(100%, 46em); margin: 0 auto } .bf2-console > .wait { text-align: center; font-size: 1.4em; color: #ffcf9a; text-shadow: 0 2px 4px #000 }
.bf2-yell { top: 9.6em; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(80%, 40em); text-align: center; font-size: 1.1em }
.bf2-unit { top: 1em }
.bf2-cast { top: 6.4em }
.ra-bossart img { object-position: 50% 18% }
.ra-bossart::after { background: linear-gradient(transparent 35%, rgb(0 0 0 / .85) 80%), radial-gradient(ellipse at 50% 25%, transparent 45%, rgb(0 0 0 / .5)) }

/* ---------- Stimmen aus Azeroth: sprechender Kopf wie im Spiel ---------- */
.th { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2em; width: min(100%, 34em); padding: 1em 1.6em 1em 1em; background: url('/assets/ui/frames/th-bg.webp') center / 114px 116px repeat, #0c0a08; border-radius: 10px;
  box-shadow: inset 0 0 40px rgb(0 0 0 / .9), 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze-lo), 0 0 0 4px var(--fv-bronze), 0 18px 40px rgb(0 0 0 / .8) }
.th-por { position: relative; width: 7.5em; height: 7.5em; display: grid; place-items: center }
.th-por .fr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none }
.th-sil { position: absolute; inset: 9%; display: grid; place-items: center; border-radius: 4px; overflow: hidden; background: radial-gradient(circle at 50% 38%, #3b2f5a, #120d1f 70%) }
.th-sil::before { content: ""; position: absolute; left: 50%; bottom: -8%; width: 72%; height: 58%; transform: translateX(-50%); border-radius: 50% 50% 10% 10%; background: #05030a; box-shadow: 0 -2.6em 0 -0.9em #05030a }
.th-sil b { position: relative; z-index: 1; font: 400 3.4em/1 var(--ra-font-epic); color: #c7a8ff; text-shadow: 0 0 18px #8a5cff, 0 0 4px #000 }
.th-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgb(150 100 255 / .55), transparent 65%); opacity: .25; z-index: 0 }
.th.live .th-glow { animation: thglow 1.2s ease-in-out infinite }
.th.live .th-sil b { animation: thq 1.2s ease-in-out infinite }
@keyframes thglow { 50% { opacity: .9; transform: scale(1.08) } } @keyframes thq { 50% { transform: scale(1.08); text-shadow: 0 0 30px #b28cff, 0 0 4px #000 } }
.th-txt { display: grid; gap: .3em; min-width: 0 }
.th-name { font: 400 1.5em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 2px 0 #000 }
.th-say { font: italic 400 1.1em/1.35 var(--ra-font-display); color: #e8dcc4 }
.th-dots { display: inline-flex; gap: .3em; margin-left: .3em } .th-dots i { width: .45em; height: .45em; border-radius: 50%; background: #c7a8ff; opacity: .3 }
.th.live .th-dots i { animation: thdot 1s calc(var(--k) * .18s) ease-in-out infinite } @keyframes thdot { 30% { opacity: 1; transform: translateY(-.25em) } }
.th-flo { position: absolute; left: 50%; top: -.9em; transform: translateX(-50%); width: 3.2em; filter: drop-shadow(0 2px 2px #000) }
.vo-h { font-family: var(--ra-font-epic); font-size: 3.6em }

/* ---------- Lagerfeuer: echtes Bild, Inhalt rechts ---------- */
.camp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 0; height: 100%; padding: 1em 3em }
.camp-fire { height: 100%; pointer-events: none } .camp-fire .flame, .camp-fire .logs { display: none }
.camp-fire i { bottom: 38%; left: calc(24% + var(--x) * .25) }
.camp-main { padding: 1.4em 1.8em; background: rgb(8 6 4 / .72); border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze-lo), 0 0 0 4px var(--fv-bronze), 0 20px 50px rgb(0 0 0 / .7); backdrop-filter: blur(3px) }

/* ---------- Baron Klimpergelds Glücksbude 2.0 ---------- */
.gb-screen { grid-template-columns: minmax(0, 24em) minmax(0, 1fr); gap: 2.2em; padding: 1.2em 2.4em; align-items: center; height: 100% }
.gb-baron { position: relative; display: grid; justify-items: center; gap: .2em; animation: none }
.gb-pic { position: relative; width: 22em; height: 22em; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; animation: gbpose .55s cubic-bezier(.2, 1.4, .4, 1) both }
.gb-pic img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 24px rgb(0 0 0 / .8)); animation: gbbob 3.2s ease-in-out infinite }
.gb-aura { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgb(255 200 60 / .45), rgb(255 160 20 / .12) 55%, transparent 70%); animation: gbaura 2.6s ease-in-out infinite }
@keyframes gbpose { from { opacity: 0; transform: scale(.8) rotate(-4deg) } }
@keyframes gbbob { 50% { transform: translateY(-.35em) rotate(.6deg) } }
@keyframes gbaura { 50% { transform: scale(1.08); opacity: .75 } }
.gb-plate { display: grid; justify-items: center; margin-top: -1.2em; z-index: 2; padding: .35em 1.4em; background: linear-gradient(#2c2016, #120c07); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze), 0 0 0 4px var(--fv-bronze-hi), 0 8px 18px #000 }
.gb-plate b { font: 400 1.25em var(--ra-font-display); color: #3fe06a; text-shadow: 0 1px 0 #000 } .gb-plate span { font: 600 .75em var(--ra-font-ui); color: #d8c9ab }
.gb-bub { position: relative; margin-top: .9em; max-width: 24em; padding: .9em 1.2em; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fv-bronze), 0 10px 26px rgb(0 0 0 / .7); animation: fadeup .5s .2s both }
.gb-bub::before { content: ""; position: absolute; left: 50%; top: -.55em; width: 1em; height: 1em; margin-left: -.5em; transform: rotate(45deg); background: #efdaa9; box-shadow: -2px -2px 0 0 var(--fv-bronze) }
.gb-say { position: relative; font: italic 400 1.1em/1.4 var(--ra-font-display); color: #2a1705 }
.gb-main { align-self: center; display: flex; flex-direction: column; max-height: 100%; overflow: hidden }
.gb-main .fv-head { flex: none; font-size: 1.2em; height: 2.3em }
.gb-body { padding: 1.3em 1.6em 1.4em; overflow: auto; display: grid; gap: 1em }
.gb-games { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin: 0 }
.gb-card { gap: .5em; padding: 1.3em .8em 1.2em; background: linear-gradient(#241b12, #0e0a07); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #75593a, inset 0 0 0 4px #000, 0 8px 20px rgb(0 0 0 / .6); animation: qpop .5s calc(.2s + var(--k) * .12s) cubic-bezier(.2, 1.5, .4, 1) both }
.gb-card img { width: 4.2em; height: 4.2em; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze-hi), 0 0 24px rgb(255 200 60 / .3) }
.gb-card b { font-size: 1.2em } .gb-card small { font: 500 .85em/1.3 var(--ra-font-ui); color: #d8c9ab }
.gb-q { font: 400 clamp(22px, calc(var(--u) * 2), 70px)/1.25 var(--ra-font-display); color: #fff; text-wrap: balance; animation: fadeup .5s both }
.gb-unit { font: 500 1em var(--ra-font-ui); color: #d8c9ab } .gb-unit b { color: var(--fv-yellow); font-weight: 600 }
.gb-potbox { display: flex; align-items: center; gap: .9em; width: fit-content; padding: .55em 1.2em .55em .6em; background: linear-gradient(#2c2016, #120c07); border-radius: 8px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #75593a, 0 6px 16px rgb(0 0 0 / .6) }
.gb-potbox img { width: 2.8em; height: 2.8em; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 18px rgb(255 200 60 / .5) }
.gb-potbox div { display: grid } .gb-potbox small { font: 600 .75em var(--ra-font-ui); letter-spacing: .1em; text-transform: uppercase; color: #d8c9ab } .gb-potbox b { font-weight: 400; font-size: 1.5em }
.gb-potbox .gb-to { font-size: 1.2em } .gb-potbox .gb-to.mute { font: 500 .8em var(--ra-font-ui) }
.gb-potbox.jack { box-shadow: inset 0 0 0 2px var(--fv-yellow), 0 0 40px rgb(255 209 0 / .5); animation: pulse .8s infinite alternate }
.gb-rule { margin: 0; font: 500 .9em var(--ra-font-ui); color: #cfc0a2 }
.gb-axis { height: 10em; margin: 3.2em 3em .4em }
.gb-line { top: 30%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--fv-bronze-hi) 8%, var(--fv-bronze-hi) 92%, transparent) }
.gb-ans { top: calc(30% - 4.4em); color: #5fdc5a; font: 400 1em var(--ra-font-display); animation: qpop .6s 1.2s cubic-bezier(.2, 1.6, .4, 1) both } .gb-ans b { font-size: 1.8em; text-shadow: 0 0 16px rgb(95 220 90 / .6) } .gb-ans small { color: #9fe38a }
.gb-ans::after { background: #5fdc5a; box-shadow: 0 0 12px #5fdc5a }
.gb-mark { top: 30% } .gb-mark i { width: 1.2em; height: 1.2em; margin-top: -.6em } .gb-mark span { font: 400 .9em/1.25 var(--ra-font-display); color: #e8dcc4 } .gb-mark em { font-style: normal; color: #cfc0a2; font-size: .9em }
.gb-mark.win span b { text-shadow: 0 0 10px currentColor }
.gb-crate { gap: 3em; margin: .6em 0; min-height: 12em }
.gb-box { position: relative; display: grid; place-items: center }
.gb-box img { position: relative; z-index: 1; width: 9em; height: 9em; border-radius: 12px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--fv-bronze-hi), 0 0 50px rgb(255 200 40 / .45) }
.gb-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(rgb(255 210 90 / .22) 0 8deg, transparent 8deg 22deg); border-radius: 50%; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); animation: rays 14s linear infinite; opacity: .5 }
.gb-crate.open .gb-rays { opacity: 1; animation-duration: 6s }
@keyframes rays { to { transform: rotate(360deg) } }
.gb-crate:not(.open) .gb-box img { animation: wobble 1.2s ease-in-out infinite }
.gb-crate.open .gb-box img { animation: crateopen .6s cubic-bezier(.2, 1.6, .4, 1) both }
@keyframes crateopen { 0% { transform: scale(.8) rotate(-8deg) } 60% { transform: scale(1.12) } }
.tt-card { display: flex; gap: .9em; align-items: flex-start; max-width: 22em; padding: .9em 1.1em; text-align: left; background: rgb(5 7 22 / .95); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a8ea3, 0 14px 30px #000; animation: qpop .6s .35s cubic-bezier(.2, 1.5, .4, 1) both }
.tt-card img { width: 3.6em; height: 3.6em; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #a335ee }
.tt-card div { display: grid; gap: .2em } .tt-card b { font: 400 1.25em var(--ra-font-display); color: #c79cff } .tt-card small { font: 500 .85em/1.35 var(--ra-font-ui); color: #ffd100 }
.gb-lead { margin: 0; font-size: 1.15em; text-align: center }
.gb-bids { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em }
.gb-bid { display: inline-flex; gap: .45em; align-items: center; padding: .3em .8em; border-radius: 6px; background: linear-gradient(#231b13, #0e0a07); box-shadow: inset 0 0 0 1px #6e5433; animation: qpop .4s calc(.8s + var(--k) * .12s) both } .gb-bid b { font-weight: 400 }
.gb-bid.win { box-shadow: inset 0 0 0 2px var(--fv-yellow), 0 0 16px rgb(255 209 0 / .4) }
.gb-slots { grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1em; margin: 0 }
.gb-slot { display: grid; gap: .5em; padding: .8em .9em 1em; background: linear-gradient(#241b12, #0e0a07); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #75593a, inset 0 0 0 4px #000, 0 8px 20px rgb(0 0 0 / .6) }
.gb-slot.won { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px var(--fv-yellow), inset 0 0 0 4px #000, 0 0 30px rgb(255 209 0 / .35) }
.gb-slot.fin { opacity: .7 }
.gb-who { display: grid; gap: .1em } .gb-who small { font: 500 .78em var(--ra-font-ui); color: #cfc0a2 }
.gb-machine { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; padding: .45em; border-radius: 8px; background: linear-gradient(#5a3d18, #2a1a08); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #d7b27a, 0 4px 10px #000 }
.gb-win { position: relative; height: 3.6em; overflow: hidden; border-radius: 5px; background: #07050a; box-shadow: inset 0 6px 10px #000, inset 0 -6px 10px #000 }
.gb-strip { display: grid; justify-items: center }
.gb-strip img { display: block; width: 3.2em; height: 3.2em; margin: .2em auto; border-radius: 5px; box-shadow: 0 0 0 1px #000 }
.gb-strip.go { animation: spinstrip calc(.9s + var(--k) * .4s) cubic-bezier(.15, .6, .3, 1.08) both }
@keyframes spinstrip { from { transform: translateY(calc(var(--n) * -3.6em)); filter: blur(3px) } 85% { filter: blur(0) } }
.gb-lbl { font: 400 1em var(--ra-font-display); text-align: center; color: #cfc0a2 } .gb-lbl[data-keep] { animation: fadeup .4s 1.8s both }
.gb-lbl.win { color: var(--fv-yellow); text-shadow: 0 0 12px rgb(255 209 0 / .5) } .gb-lbl.lose { color: #ff8a7a }
.gb-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0 }
.gb-ware { gap: .45em; padding: 1.2em .9em; background: linear-gradient(#241b12, #0e0a07); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #75593a, inset 0 0 0 4px #000, 0 8px 20px rgb(0 0 0 / .6); animation: qpop .5s calc(.2s + var(--k) * .12s) both }
.gb-ware img { width: 3.8em; height: 3.8em; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze-hi) }
.gb-ware small { font: 500 .85em/1.3 var(--ra-font-ui); color: #d8c9ab } .gb-ware span { font-size: 1.1em }
.gb-bags { display: flex; flex-wrap: wrap; gap: .5em } .gb-bag { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 6px; background: rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1px rgb(110 84 51 / .6) } .gb-bag .wi { width: 1.4em; height: 1.4em } .gb-bag em { color: #8a7d68 }
.gb-screen .who { font-size: .95em }
/* Talente im Charakter-Reiter */
.tal-row { display: grid; gap: 6px; margin-bottom: 4px } .tal-row.lock { opacity: .5 }
.tal-h { font: 400 15px var(--ra-font-display); color: var(--fv-yellow) } .tal-h .small { font: 500 12px var(--ra-font-ui) }
.tal-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.tal-opt { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px; text-align: center; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(#241b12, #0e0a07); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #75593a }
.tal-opt img { width: 40px; height: 40px; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze) }
.tal-opt b { font: 400 15px var(--ra-font-display); color: var(--fv-yellow) } .tal-opt small { font: 500 12px/1.3 var(--ra-font-ui); color: #d8c9ab }
.tal-opt.on { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #5fdc5a, 0 0 16px rgb(95 220 90 / .35) } .tal-opt.on i { font: 700 10px var(--ra-font-ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #0c1f09; background: #9fd390; padding: 1px 6px; border-radius: 3px }
.tal-opt:disabled:not(.on) { filter: grayscale(1) brightness(.7); opacity: 1 }
.tal-opt.on:disabled { filter: none; opacity: 1 }
.newtag { font: 700 10px var(--ra-font-ui); letter-spacing: .06em; color: #1b1308; background: var(--fv-yellow); padding: 1px 6px; border-radius: 3px; vertical-align: 2px }
/* Großer Titel wie ein Kapitelanfang */
.qt-titlebox { justify-self: center; text-align: center; margin-bottom: -.2em; animation: fadeup .6s both }
.qt-title { margin: 0; font: 400 clamp(40px, calc(var(--u) * 4.2), 150px)/1 var(--ra-font-epic); letter-spacing: .01em; background: linear-gradient(#fff3c4, #ffd36a 45%, #c8841c 75%, #ffe39a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #2a1604) drop-shadow(0 0 18px rgb(255 170 40 / .35)) }
.qt-sub { font: 400 1.15em var(--ra-font-display); color: #f3e2b8; text-shadow: 0 2px 4px #000 }
/* Questtafel: Holzbrett mit Eisenecken */
.qt-board { box-shadow: inset 0 0 0 3px #2a180a, inset 0 0 40px rgb(0 0 0 / .6), 0 0 0 5px #6b4a24, 0 0 0 7px #1b1006, 0 0 0 9px #8a8a8a33, 0 26px 70px rgb(0 0 0 / .8) }
.qt-board::before, .qt-board::after { width: 2.2em; height: 2.2em; top: -.6em; border-radius: 3px; background: linear-gradient(135deg, #9aa0a6, #4a4f55 45%, #23272b); box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgb(255 255 255 / .12), 0 4px 8px #000; clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 35%, 35% 100%, 0 100%) }
.qt-board::before { left: -.6em } .qt-board::after { right: -.6em; transform: scaleX(-1) }
/* Lagerfeuer: Feuer bleibt sichtbar, Inhalt links */
.camp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) }
.camp-main { order: -1 }
.scr.sc-lagerfeuer .ra-amb { background: linear-gradient(90deg, rgb(0 0 0 / .8) 30%, rgb(0 0 0 / .1) 55%), radial-gradient(ellipse 60% 70% at 60% 55%, transparent, rgb(0 0 0 / .55)), url('/assets/ui/backgrounds/lagerfeuer.webp') 0% 60% / cover }
.camp-fire i { left: calc(8% + var(--x) * .16); bottom: 40% }
.qt-ticket:disabled:not(.st-done) { filter: none; opacity: 1 }
.camp { align-items: center } .camp-main { max-height: 100%; overflow: auto } .camp-img { max-height: 38vh; max-width: 100% }
.rb.armed, .btn.armed { background-image: var(--fv-red-down) !important; color: #fff !important; box-shadow: inset 0 0 0 1px #ffd100, 0 0 12px rgb(255 80 40 / .6) !important }
.gb-pic.talk img { animation: gbtalk .25s ease-in-out 5 alternate } @keyframes gbtalk { to { transform: translateY(-.25em) scale(1.02) rotate(-1deg) } }
/* Feste Reihen: Kopf oben, Bühne füllt, Statusleiste immer unten – egal welche Szene */
.scr.ra-shell { grid-template-rows: auto minmax(0, 1fr) auto !important; height: 100vh; overflow: hidden }
.scr.ra-shell > .ra-hud { grid-row: 1 } .scr.ra-shell > .ra-main { grid-row: 2 } .scr.ra-shell > .ra-full { grid-row: 1 / 3 } .scr.ra-shell > .ra-dock { grid-row: 3; align-self: end }
/* Tier-List: Beschreibung gut lesbar, Kacheln ohne Bild als Namenskarte */
.tl-desc { font: italic 400 1.35em/1.35 var(--ra-font-display); color: #f3e6c8; max-width: 44em; margin-top: .25em }
.tl-name { font-size: 3em }
.tl-hero.noimg { background: radial-gradient(ellipse at 50% 40%, #3a2c17, #120d08 75%) }
.tl-hero.noimg .tl-ph { color: rgb(255 209 0 / .3); font-family: var(--ra-font-epic); font-size: 5em }
.tm-tile.noimg { background: radial-gradient(circle at 40% 30%, #4a3a20, #15100a) } .tm-tile.noimg i { position: absolute; inset: 0 0 1.1em; display: grid; place-items: center; font: 400 1.6em var(--ra-font-epic); font-style: normal; color: rgb(255 209 0 / .55) }

/* ---------- Stimmen: Klangwelle im sprechenden Kopf (arkan, weich) ---------- */
.th { width: min(100%, 40em) }
.th-wave { display: flex; align-items: center; gap: .22em; height: 3.2em; margin-top: .3em; padding: 0 .2em }
.th-wave i { flex: 1; height: 10%; min-height: 3px; border-radius: 99px; background: linear-gradient(#f1e6ff, #b28cff 45%, #6a3fd0); box-shadow: 0 0 8px rgb(170 120 255 / .7); opacity: .35; transition: height .3s }
.th-wave.live i { opacity: 1; animation: thwave .5s calc(var(--k) * -41ms) ease-in-out infinite alternate }
@keyframes thwave { from { height: 12% } to { height: var(--h) } }

/* ---------- Boss-Zauberleiste: klar lesbar wie im Spiel ---------- */
.bf2-cast { display: grid; gap: .25em; width: min(62%, 34em); top: 6.2em; padding: .5em .7em .55em; background: rgb(0 0 0 / .72); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(215 178 122 / .4), 0 10px 24px rgb(0 0 0 / .6) }
.cb-who { font: 600 .7em var(--ra-font-ui); letter-spacing: .12em; text-transform: uppercase; color: #ff9a7a } .cb-who b { color: #ffd6a0; font-weight: 700 }
.cb-row { display: flex; gap: .55em; align-items: center }
.cb-row > img { width: 2.2em; height: 2.2em; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff7a3a }
.bf2-cast .cb-bar { flex: 1; position: relative; height: 1.5em; background: #1a0d05; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5a30; overflow: hidden }
.bf2-cast .cb-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#ffcf5a, #e08a12 55%, #a85a06); animation: castfill 2.4s cubic-bezier(.4, .2, .6, 1) both }
.bf2-cast .cb-bar em { position: absolute; top: -.3em; bottom: -.3em; width: 1.4em; margin-left: -.7em; background: url('/assets/ui/frames/castbar-spark.png') center / 100% 100%; mix-blend-mode: screen; animation: castspark 2.4s cubic-bezier(.4, .2, .6, 1) both }
@keyframes castspark { from { left: 0 } to { left: 100%; opacity: 0 } }
.bf2-cast .cb-bar span { position: relative; z-index: 1; font: 400 .95em/1.6 var(--ra-font-display); color: #fff; text-align: center; text-shadow: 0 1px 2px #000, 0 0 4px #000 }
.cb-info { display: flex; flex-wrap: wrap; gap: .3em .8em; align-items: baseline; font: 500 .72em/1.35 var(--ra-font-ui); color: #f0dcc0; text-shadow: 0 1px 2px #000 }
.cb-tgt { color: #fff } .cb-tgt b { color: var(--c, #ff8a6a) } .cb-tgt.all b { color: #ff8a6a }
.bf2-cast .cb-d { color: #e6d6b6 }
/* Lebensbalken: sauber statt gekachelter Textur */
.u-hp { height: 1.45em; background: linear-gradient(#1c0605, #2a0a08) }
.u-hp i { background: linear-gradient(#ff6b55 0%, #d8261a 45%, #8f0f09 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 4px rgb(0 0 0 / .35) }
.u-hp .mark { width: 2px; background: rgb(255 230 160 / .85); box-shadow: 0 0 4px #000 } .u-hp .mark::after { content: "P2"; position: absolute; top: -1.35em; left: -.6em; font: 700 .55em var(--ra-font-ui); color: #ffd6a0 }
.pf-hp i { background: linear-gradient(#6fe06a 0%, #2eaa2a 50%, #177a17 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3) }
.pf-hp.low i { background: linear-gradient(#ff7b5a, #c43020 55%, #7a1208) !important }

/* ---------- Endboss-Intro: Vollbild, Blitz, Beben, Name schlägt ein ---------- */
.bossintro.e2 { position: relative; display: block; height: 100%; padding: 0; overflow: hidden }
.e2-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden }
.e2-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform-origin: 50% 35%; animation: e2zoom 18s 3.4s ease-out both, e2in 1s 3.4s both }
@keyframes e2zoom { from { transform: scale(1.18) } to { transform: scale(1.02) } } @keyframes e2in { from { filter: brightness(3) saturate(1.5) } }
.e2-fire { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 38%, transparent 30%, rgb(40 6 0 / .55) 70%, rgb(0 0 0 / .95) 100%), linear-gradient(transparent 35%, rgb(0 0 0 / .85) 78%); animation: e2flick 2.6s ease-in-out infinite }
@keyframes e2flick { 50% { opacity: .85 } }
.e2-emb { z-index: 2 } .e2-emb i { animation-duration: var(--t) !important }
.e2-center { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); z-index: 3; width: min(92%, 70em); display: grid; justify-items: center; text-align: center; gap: .35em; animation: shake .9s 3.45s both }
.e2-warn { display: flex; align-items: center; gap: 1em; font: 400 clamp(18px, calc(var(--u) * 1.6), 50px) var(--ra-font-epic); letter-spacing: .55em; text-transform: uppercase; color: #ff4a24; text-shadow: 0 0 18px rgb(255 60 20 / .9), 0 2px 0 #000; animation: e2warn 1s 3.6s both, e2pulse 1.4s 4.6s ease-in-out infinite }
.e2-warn i { width: 6em; height: 2px; background: linear-gradient(90deg, transparent, #ff4a24); } .e2-warn i:last-child { transform: scaleX(-1) }
@keyframes e2warn { from { opacity: 0; letter-spacing: 1.6em } } @keyframes e2pulse { 50% { text-shadow: 0 0 34px rgb(255 80 20 / 1), 0 2px 0 #000 } }
.e2-name { margin: 0; font: 400 clamp(64px, calc(var(--u) * 9), 300px)/.92 var(--ra-font-epic); background: linear-gradient(#fff6d0 5%, #ffd04a 35%, #ff7a18 65%, #b52a05 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #2a0800) drop-shadow(0 0 30px rgb(255 110 20 / .8)); animation: e2slam .75s 3.4s cubic-bezier(.2, 1.5, .35, 1) both, e2glow 2s 4.2s ease-in-out infinite }
@keyframes e2slam { 0% { opacity: 0; transform: scale(2.8); filter: blur(12px) drop-shadow(0 0 60px #ff6a00) } 60% { opacity: 1 } 100% { transform: none } }
@keyframes e2glow { 50% { filter: drop-shadow(0 6px 0 #2a0800) drop-shadow(0 0 50px rgb(255 140 30 / 1)) } }
.e2-title { font: 400 clamp(20px, calc(var(--u) * 1.7), 56px) var(--ra-font-display); color: #ffd9a8; text-shadow: 0 2px 0 #000, 0 0 16px #000; animation: fadeup .7s 4.4s both }
.e2-desc { margin: .2em 0 0; max-width: 46em; font: italic 400 clamp(16px, calc(var(--u) * 1.15), 38px)/1.4 var(--ra-font-display); color: #f3e2c8; text-shadow: 0 1px 3px #000, 0 0 12px #000; animation: fadeup .7s 5s both }
.e2-abil { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1em; margin-top: 1em }
.e2-ab { display: grid; justify-items: center; gap: .35em; width: 7.5em; animation: qpop .5s calc(5.6s + var(--k) * .14s) cubic-bezier(.2, 1.6, .4, 1) both }
.e2-ab .ic { position: relative; width: 3.6em; height: 3.6em; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #c88a2a, 0 0 0 4px #000, 0 0 22px rgb(255 100 20 / .6) } .e2-ab .ic img { width: 100%; height: 100%; border-radius: 5px }
.e2-ab .ic.loot { box-shadow: 0 0 0 1px #000, 0 0 0 3px #a335ee, 0 0 0 4px #000, 0 0 22px rgb(163 53 238 / .6) }
.e2-ab b { font: 400 .95em/1.2 var(--ra-font-display); color: #ffe2b0; text-shadow: 0 1px 2px #000, 0 0 8px #000 }
.bossintro.e2 .bi-black { z-index: 8 } .bossintro.e2 .bi-flash { z-index: 7 }
.bossintro.e2 ~ .bi-ready { bottom: 2.5vh; z-index: 9 }
.e2-center { left: 0; right: 0; margin: 0 auto; transform: none }
.e2-bg img { filter: blur(3px) brightness(.55) saturate(1.2) }
@keyframes e2in { from { filter: blur(3px) brightness(2.5) saturate(1.5) } }
.e2-fig { position: fixed; left: 50%; top: 4vh; bottom: 18vh; z-index: 2; transform: translateX(-50%); aspect-ratio: 3 / 4; animation: e2rise 1.6s 3.3s cubic-bezier(.15, .8, .2, 1) both }
.e2-fig img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(ellipse 60% 62% at 50% 45%, #000 45%, transparent 75%); mask: radial-gradient(ellipse 60% 62% at 50% 45%, #000 45%, transparent 75%); filter: drop-shadow(0 0 40px rgb(255 100 20 / .8)) saturate(1.15); animation: bossbreath 6s 5s ease-in-out infinite }
@keyframes e2rise { from { opacity: 0; transform: translateX(-50%) translateY(8vh) scale(.85); filter: brightness(3) } }
.e2-center { bottom: 11vh }
.bf2-cast { top: 7.1em } .bf2-yell { top: 14.2em } .cb-info { font-size: .85em }
.e2-warn { background: radial-gradient(ellipse, rgb(0 0 0 / .75), transparent 70%); padding: .2em 2em }
/* Chromie-Randnotiz: nach dem Ausblenden wirklich weg (vorher brach der Text in eine meterhohe Spalte um → riesige Statusleiste) */
@keyframes narrout { to { opacity: 0; max-width: 0; max-height: 0; padding: 0; margin: 0; border: 0; overflow: hidden } }

.ra-dock { max-height: 7em; overflow: hidden }

/* ---------- Einlass: Classic-Login-Bildschirm ---------- */
.scr.sc-lobby .ra-amb { background: url('/assets/ui/glue/clouds.png') 0 0 / 60vw 60vw repeat-x, linear-gradient(transparent 55%, #000 95%), url('/assets/ui/glue/sky.webp') center bottom / 100% 100%; animation: clouds 90s linear infinite }
@keyframes clouds { to { background-position: 60vw 0, 0 0, center bottom } }
.glue { position: relative; height: 100%; display: grid; place-items: center; overflow: hidden }
.glue-logo { position: absolute; left: 50%; top: 3%; width: min(36vw, 64vh); transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 8px 24px #000); animation: fadeup 1.2s .3s both }
.glue-portal { position: absolute; left: 50%; top: 14%; width: min(46vw, 80vh); aspect-ratio: 1.05; transform: translateX(-50%); z-index: 1 }
.gp-swirl { position: absolute; inset: 14% 17% 6%; border-radius: 45% 45% 8% 8%; background: conic-gradient(from 0deg, #1f6e3a, #0a2a14, #6af0a0, #0d3a1c, #2aa05a, #06180c, #1f6e3a); filter: blur(10px) saturate(1.3); animation: swirl 9s linear infinite; opacity: .85 }
.gp-swirl.b { inset: 20% 23% 10%; background: radial-gradient(circle at 50% 55%, rgb(190 255 200 / .7), rgb(40 160 80 / .4) 30%, transparent 65%); filter: blur(6px); animation: swirl 5s linear infinite reverse, pulse 2.4s ease-in-out infinite alternate }
@keyframes swirl { to { transform: rotate(360deg) } }
.gp-l, .gp-r { position: absolute; bottom: 0; width: 19%; height: 92%; background: url('/assets/ui/glue/stone.webp') center / 200% auto, #6b5a44; box-shadow: inset 0 0 40px #000, 0 0 40px #000; border-radius: 6px 6px 0 0 }
.gp-l { left: 0; clip-path: polygon(20% 0, 100% 8%, 100% 100%, 0 100%) } .gp-r { right: 0; clip-path: polygon(0 8%, 80% 0, 100% 100%, 0 100%) }
.gp-top { position: absolute; left: 4%; right: 4%; top: 0; height: 16%; background: url('/assets/ui/glue/stone.webp') center / 60% auto, #6b5a44; clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); box-shadow: inset 0 0 30px #000 }
.gp-flames { position: absolute; left: -10%; right: -10%; bottom: -6%; height: 30%; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgb(255 140 30 / .55), transparent 70%); filter: blur(8px); animation: e2flick 1.8s ease-in-out infinite }
.glue-login { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 3; width: min(40em, 90%); padding: 1em 1.4em 1.1em; background: linear-gradient(rgb(20 18 30 / .88), rgb(8 8 14 / .92)); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #6d7078, 0 0 0 4px #1a1a1e, 0 0 0 6px #9a9ca4, 0 18px 50px #000 }
.gl-t { text-align: center; font: 400 1.35em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 2px 0 #000 }
.gl-h { text-align: center; margin: .2em 0 .7em; font: 500 .85em var(--ra-font-ui); color: #cfd2da } .gl-h b { color: #fff }
.gl-list { display: grid; gap: .3em; max-height: 38vh; overflow: hidden }
.gl-row { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: .6em; padding: .3em .6em; background: rgb(0 0 0 / .45); border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(150 150 170 / .25); animation: fadeup .5s calc(var(--k) * .1s) both }
.gl-n { font-size: 1.05em } .gl-s { font: 500 .8em var(--ra-font-ui); color: #b8bcc8 }
.gl-dots { display: inline-flex; gap: 3px } .gl-dots b { width: 5px; height: 5px; border-radius: 50%; background: #aab; animation: thdot 1s calc(var(--k, 0) * .2s) infinite } .gl-dots b:nth-child(2) { animation-delay: .2s } .gl-dots b:nth-child(3) { animation-delay: .4s }
.gl-empty { text-align: center; color: #aab }
.glue-btns { position: absolute; right: 2.5%; bottom: 8%; z-index: 3; display: grid; gap: .5em }
.glue-btn { display: grid; place-items: center; width: 10em; height: 2.3em; font: 400 .95em var(--ra-font-display); color: var(--fv-yellow); background: url('/assets/ui/glue/button.png') center / 100% 100%; text-shadow: 0 1px 1px #000; opacity: .9 }
.glue-ver { position: absolute; left: 1.5%; bottom: 2%; z-index: 3; font: 500 .75em var(--ra-font-ui); color: #c8ccd6; text-shadow: 0 1px 2px #000 }

/* ---------- Antworten 2.0: Beutezeile mit Symbolfeld (wie Questbelohnung) ---------- */
.ra-ans, .opt, .pa {
  --ac: #d7b27a;
  position: relative; overflow: hidden; border-radius: 6px 10px 10px 6px;
  background:
    linear-gradient(90deg, rgb(255 215 140 / .10), transparent 30%),
    linear-gradient(rgb(255 230 180 / .07) 0 1px, transparent 1px 100%),
    var(--paper-noise) 0 0 / 300px 300px,
    linear-gradient(#2a1f14, #110c07 70%);
  background-blend-mode: normal, normal, soft-light, normal;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgb(215 178 122 / .55), inset 0 0 0 3px #000, inset 0 -8px 16px rgb(0 0 0 / .5), 0 6px 16px rgb(0 0 0 / .65);
}
.ra-ans::after, .opt::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgb(255 230 170 / .10), transparent); transform: skewX(-18deg); pointer-events: none }
.ra-q.build .ra-ans::after { animation: shine 1.1s calc(var(--tA) + .35s + var(--j) * .09s) ease-out both }
@keyframes shine { from { left: -40% } to { left: 120% } }
.ra-ans:nth-child(1), .opt:nth-child(1) { --ac: #ff8a5a } .ra-ans:nth-child(2), .opt:nth-child(2) { --ac: #6fb4ff } .ra-ans:nth-child(3), .opt:nth-child(3) { --ac: #7ee07a } .ra-ans:nth-child(4), .opt:nth-child(4) { --ac: #d08bff }
.ra-l, .opt .l, .pa .lt {
  width: 2.1em; height: 2.1em; border-radius: 5px; font: 400 1em/1 var(--ra-font-epic); color: #fff4d0;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ac) 55%, #000), #0b0805 75%);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze-hi), 0 0 0 3px #000, inset 0 0 12px rgb(0 0 0 / .7), 0 0 14px color-mix(in srgb, var(--ac) 40%, transparent);
  text-shadow: 0 0 8px var(--ac), 0 1px 0 #000;
}
.ra-ans { padding-left: .6em } .ra-at { padding-left: .35em; border-left: 1px solid rgb(215 178 122 / .18); margin-left: .2em }
.ra-q.rv .ra-ans.ok, .opt.ok { background: linear-gradient(90deg, rgb(140 255 120 / .18), transparent 60%), linear-gradient(#1f3a17, #0c1709) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #7fe07a, inset 0 0 0 3px #000, 0 0 30px rgb(95 220 90 / .45) !important }
.ra-q.rv .ra-ans.ok .ra-l, .opt.ok .l { --ac: #7fe07a }
.pa { border: 0 }
.pa.sel, .pa.sel-optim { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px var(--fv-yellow), inset 0 0 0 4px #000, 0 0 22px rgb(255 209 0 / .45) !important }
.pa .lt { font-size: 18px }

/* Brachland-Frage: Chat-Stil, Antworten untereinander */
.bl-chan { display: block; margin-bottom: .3em; font: 500 .9em var(--ra-font-ui); color: #ffc0a0 } .bl-chan b { color: #fff; font-weight: 600 }
.bl-side .qtext { font: 400 1.35em/1.3 var(--ra-font-display); color: #fff }
.bl-side .opts { grid-template-columns: 1fr; gap: .5em }
.bl-side .opt { min-height: 2.6em; font-size: 1.05em }

/* Bereitschaftscheck-Bug */
.orly { width: 1.9em; height: 1.9em; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #fff }
.orly-t { font: 400 1.5em var(--ra-font-epic) !important; color: #fff !important; letter-spacing: .08em; text-shadow: 0 0 12px #fff, 0 2px 0 #000; animation: pulse .6s infinite alternate }

/* Los für die Questtafel */
.qt-picker { position: relative }
.rollbox { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(10 8 5 / .92); border-radius: 6px; z-index: 2 }
.rollbox span { font: 400 1.6em var(--ra-font-epic); color: #fff } .rollbox.done span { color: var(--fv-yellow); animation: qpop .4s cubic-bezier(.2, 1.6, .4, 1) both; text-shadow: 0 0 16px rgb(255 209 0 / .7) }

/* Porträts: quadratische Symbole füllen den Kreis (Rand der Icons abgeschnitten) */
.pf-por .ico img, .ico.cls img, .prank .ico img { transform: scale(1.22) }
.pf-por .ico { overflow: hidden }
.u-por { overflow: hidden } .u-por img:first-child { object-position: 50% 15%; transform: scale(1.7); transform-origin: 50% 20% }
.u-por .u-drag { transform: scaleX(-1) }

/* ---------- Beutefenster ---------- */
.loot2 { display: grid; grid-template-columns: minmax(0, 24em) minmax(0, 1fr); gap: 2.4em; align-items: center; height: 100%; padding: 1em 2em }
.lootwin { position: relative; padding: 3.2em .5em .6em; background: linear-gradient(#1c1813, #0d0b09); border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #5c5144, 0 0 0 4px #1b1712, 0 0 0 6px #8c7d68, 0 20px 50px #000 }
.lw-por { position: absolute; left: -1.1em; top: -1.1em; width: 4.6em; height: 4.6em; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 5px #8c7d68, 0 0 0 7px #1b1712, 0 6px 16px #000; z-index: 2 }
.lw-por img { width: 100%; height: 100%; transform: scale(1.2) }
.lw-head { position: absolute; left: 3.8em; right: .5em; top: .6em; display: flex; align-items: center; justify-content: center; height: 1.9em; background: linear-gradient(#2a2520, #141210); border-radius: 4px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5c5144; font: 400 1.1em var(--ra-font-display); color: var(--fv-yellow) }
.lw-x { position: absolute; right: .25em; width: 1.4em; height: 1.4em; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #ffd100; background: linear-gradient(#b42a1c, #5c0e08); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #e0a050 }
.lw-list { display: grid; gap: .3em; max-height: 60vh; overflow: auto }
.lw-row { display: flex; align-items: center; gap: .6em; padding: .3em .4em; border-radius: 4px; animation: fadeup .4s calc(var(--k) * .08s) both }
.lw-row.cur { background: rgb(255 209 0 / .08); box-shadow: inset 0 0 0 1px rgb(255 209 0 / .6) } .lw-row.gone { opacity: .5 }
.lw-ic { flex: none; width: 2.8em; height: 2.8em; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--rq, #a335ee) } .lw-ic img { width: 100%; height: 100% }
.lw-ic.q-l { --rq: #ff8000 } .lw-ic.q-e { --rq: #a335ee } .lw-ic.q-r { --rq: #0070dd } .lw-ic.q-u { --rq: #1eff00 } .lw-ic.q-c { --rq: #9d9d9d }
.lw-n { display: grid; min-width: 0 } .lw-n b { font: 400 1.05em/1.2 var(--ra-font-display) } .lw-n small { font: 500 .78em var(--ra-font-ui); color: #b9ad96 }
.lw-empty { padding: 1em; text-align: center; color: #a99c83 }
.loot-side { display: grid; gap: .8em; align-content: center } .loot-side .tt { font-size: 1.2em; max-width: 26em }
.lw-bids { display: flex; flex-wrap: wrap; gap: .5em } .lw-note { font: 400 1.3em var(--ra-font-display); color: var(--fv-yellow); margin: 0 }
.ra-l, .opt .l, .pa .lt { font-family: var(--ra-font-display) !important; font-size: 1.05em; color: #ffe9a8 }
/* Einlass: echter Classic-Login-Screenshot als Bühne, Portal aus CSS nur noch als Leuchten */
.scr.sc-lobby .ra-amb { background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 55%, rgb(0 0 0 / .7)), url('/assets/ui/glue/login-bg.webp') center 40% / cover; animation: loginzoom 40s ease-in-out infinite alternate }
@keyframes loginzoom { from { transform: scale(1) } to { transform: scale(1.06) } }
.glue-portal .gp-l, .glue-portal .gp-r, .glue-portal .gp-top, .glue-portal .gp-swirl { display: none }
.glue-portal { inset: 0; width: auto; left: 0; top: 0; transform: none; aspect-ratio: auto }
.gp-flames { left: 2%; right: auto; width: 16%; bottom: 8%; height: 26%; animation: e2flick 1.3s ease-in-out infinite }
.gp-swirl.b { display: block; inset: auto; left: 38%; width: 24%; top: 36%; height: 44%; border-radius: 6px; background: radial-gradient(ellipse, rgb(255 230 180 / .25), transparent 70%); filter: blur(20px); animation: pulse 3s ease-in-out infinite alternate }
.glue-portal::after { content: ""; position: absolute; right: 22%; bottom: 10%; width: 14%; height: 26%; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgb(255 140 30 / .55), transparent 70%); filter: blur(8px); animation: e2flick 1.6s ease-in-out infinite }
.glue-logo { width: min(30vw, 52vh); top: 2% }
.glue-login { bottom: 4% }

/* ---------- Antworten 3.0: Original-Beuteplatten (silberner Zierrahmen) mit farbigem Symbolfeld ---------- */
.ra-ans, .opt, .pa {
  overflow: visible !important; border-radius: 0 !important;
  border: 14px solid transparent !important; border-image: url('/assets/ui/frames/ans-plate-silver.png') 16 fill / 14px stretch !important;
  background: none !important; box-shadow: 0 8px 18px rgb(0 0 0 / .55) !important; padding: .15em .4em !important;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75em;
}
.ra-ans::after, .opt::after { content: ""; position: absolute; inset: 0; left: 0; width: auto; transform: none; background: linear-gradient(100deg, transparent 42%, rgb(255 236 190 / .16) 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 160% 0; pointer-events: none }
.ra-q.build .ra-ans::after { animation: shine2 1.2s calc(var(--tA) + .35s + var(--j) * .09s) ease-out both }
@keyframes shine2 { from { background-position: 160% 0 } to { background-position: -60% 0 } }
.ra-l, .opt .l, .pa .lt {
  position: relative; width: 2.35em !important; height: 2.35em !important; border-radius: 3px !important; margin: 0;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ac) 45%, #120c06), #070504 78%) !important;
  box-shadow: 0 2px 6px #000 !important; font: 400 1.05em/1 var(--ra-font-display) !important; color: #fff3cf !important; text-shadow: 0 0 10px var(--ac), 0 1px 1px #000 !important; display: grid !important; place-items: center
}
.ra-l::after, .opt .l::after, .pa .lt::after { content: ""; position: absolute; inset: -7%; background: var(--slot) center / 100% 100% no-repeat; pointer-events: none }
.ra-ans:nth-child(1), .opt:nth-child(1), .pa:nth-child(1) { --ac: #ff9a4a; --slot: url('/assets/ui/frames/slot-o.png') }
.ra-ans:nth-child(2), .opt:nth-child(2), .pa:nth-child(2) { --ac: #5aa8ff; --slot: url('/assets/ui/frames/slot-b.png') }
.ra-ans:nth-child(3), .opt:nth-child(3), .pa:nth-child(3) { --ac: #6fe06a; --slot: url('/assets/ui/frames/slot-g.png') }
.ra-ans:nth-child(4), .opt:nth-child(4), .pa:nth-child(4) { --ac: #c58bff; --slot: url('/assets/ui/frames/slot-p.png') }
.ra-at { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; color: #f6ecd6; text-shadow: 0 1px 2px #000 }
/* Wer hat was gewählt: Namensschilder rechts in der Platte (nicht mehr abgeschnitten) */
.ra-picks { position: static !important; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25em; max-width: 14em }
.ra-picks .pk { font-size: .52em !important; padding: .35em .6em !important; box-shadow: 0 0 0 1px #000, 0 2px 4px #000 !important }
.ra-stamp { top: -.55em !important; right: .8em !important; z-index: 3 }
/* Auflösung */
.ra-q.rv .ra-ans.no { animation: none !important; filter: saturate(.25) brightness(.62) !important }
.ra-q.rv .ra-ans.no > .ra-l, .ra-q.rv .ra-ans.no > .ra-at { animation: none !important; opacity: 1 !important; filter: none !important }
.ra-q.rv .ra-ans.no .ra-picks { filter: saturate(4) brightness(1.6) }
.ra-q.rv .ra-ans.ok, .opt.ok { background: none !important; border-image-source: url('/assets/ui/frames/ans-plate-silver.png') !important; box-shadow: 0 8px 18px rgb(0 0 0 / .55) !important; animation: ansok2 .8s .9s var(--ra-ease) both !important }
.ra-q.rv .ra-ans.ok::before, .opt.ok::before { content: ""; position: absolute; inset: -26px; border: 30px solid transparent; border-image: url('/assets/ui/frames/ans-glow-green.png') 34 / 30px stretch; pointer-events: none; animation: fadeup .6s .9s both }
.ra-q.rv .ra-ans.ok .ra-at, .opt.ok { color: #d8ffcf }
@keyframes ansok2 { 0% { transform: none } 40% { transform: scale(1.035) } 100% { transform: scale(1.02) } }
/* Handy: ausgewählt = goldenes Leuchten */
.pa.sel, .pa.sel-optim { box-shadow: 0 8px 18px rgb(0 0 0 / .55) !important; position: relative }
.pa.sel::before, .pa.sel-optim::before { content: ""; position: absolute; inset: -22px; border: 26px solid transparent; border-image: url("/assets/ui/frames/ans-glow.png") 34 / 26px stretch; pointer-events: none }
.pa { grid-template-columns: auto minmax(0, 1fr) !important; min-height: 64px }
.bl-side .opt { min-height: 2.9em } .opt .n { justify-self: end }
/* Namensschilder sitzen auf der Unterkante der Platte: keine Kollision mit langen Antworten, kein Springen des Layouts */
.ra-picks { position: absolute !important; right: .9em; bottom: -1.25em; z-index: 2; max-width: calc(100% - 2em) !important; flex-wrap: nowrap !important; justify-content: flex-end }
.ra-picks .pk { font-size: .5em !important; white-space: nowrap }
.ra-ans { grid-template-columns: auto minmax(0, 1fr) !important }
.ra-answers { row-gap: 1.7em !important } .ra-q.rv .ra-ctx { margin-top: .6em }
.ra-stamp { top: -1.35em !important; right: 1em !important; font-size: .5em !important }

/* ---------- Fähigkeiten sichtbar machen ---------- */
.pf-auras { position: absolute; right: .4em; top: .35em; display: flex; gap: 2px; z-index: 2 }
.pf-auras img { width: 1.25em; height: 1.25em; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(255 209 0 / .6); animation: qpop .35s both }
.pf-cast { position: absolute; left: .4em; right: .4em; bottom: -.9em; z-index: 5; display: flex; align-items: center; gap: .3em; animation: fadeup .25s both }
.pf-cast img { width: 1.6em; height: 1.6em; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 10px rgb(var(--rgb)) }
.pf-cast span { position: relative; flex: 1; height: 1.25em; background: #120c06; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5a30; overflow: hidden }
.pf-cast i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(rgb(var(--rgb)), rgb(var(--rgb) / .55)); animation: castfill .85s linear both }
.pf-cast b { position: relative; display: block; text-align: center; font: 600 .62em/2 var(--ra-font-ui); color: #fff; text-shadow: 0 1px 2px #000 }
.pf.fx-casting { box-shadow: 0 0 0 2px var(--c), 0 0 20px var(--c) !important }
.pf.fx-aura { animation: pfaura 1.4s ease-out }
@keyframes pfaura { 0% { box-shadow: inset 0 0 0 3px rgb(var(--rgb)), 0 0 40px rgb(var(--rgb) / .9) } 100% { box-shadow: inset 0 0 0 0 transparent } }
.spellcard { position: fixed; left: 50%; top: 16%; z-index: 46; display: flex; align-items: center; gap: 1.1em; padding: .9em 1.6em .9em .9em; transform: translateX(-50%); pointer-events: none;
  font-size: clamp(15px, calc(min(1vw, 1.78vh) * 1.25), 44px); background: linear-gradient(90deg, rgb(var(--rgb) / .22), rgb(8 6 4 / .94) 30%, rgb(8 6 4 / .94) 80%, rgb(var(--rgb) / .12)); border-radius: 8px;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--c), 0 0 0 4px #000, 0 0 50px rgb(var(--rgb) / .45), 0 18px 40px #000; animation: scin .5s cubic-bezier(.2, 1.5, .4, 1) both }
.spellcard.out { opacity: 0; transform: translateX(-50%) translateY(-20px); transition: .5s }
@keyframes scin { from { opacity: 0; transform: translateX(-50%) scale(1.6) } }
.sc-ic { width: 4.6em; height: 4.6em; flex: none; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--c), 0 0 26px rgb(var(--rgb) / .8); animation: scglow 1s ease-in-out infinite alternate }
.sc-ic img { width: 100%; height: 100% } @keyframes scglow { to { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--c), 0 0 46px rgb(var(--rgb)) } }
.sc-t { display: grid; gap: .1em }
.sc-who { font: 500 .85em var(--ra-font-ui); color: #d8c9ab } .sc-who b { color: var(--c); font: 400 1.2em var(--ra-font-display) }
.sc-n { font: 400 2em/1.05 var(--ra-font-display); color: #fff; text-shadow: 0 0 18px rgb(var(--rgb) / .9), 0 2px 0 #000 }
.sc-tg { font: 400 1.05em var(--ra-font-display); color: #e8dcc4 }
.sc-eff { margin-top: .15em; font: italic 500 .95em var(--ra-font-ui); color: rgb(var(--rgb)); text-shadow: 0 1px 2px #000 }

/* ---------- Beutefenster: Original-Lootpanel als Grafik ---------- */
.lootwin { width: min(26em, 100%); aspect-ratio: 188 / 254; padding: 0 !important; background: url('/assets/ui/glue/lootpanel.png') 0 0 / 100% 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 18px 30px #000) }
.lw-por { left: 5.9% !important; top: 3.5% !important; width: 30.9% !important; height: auto !important; aspect-ratio: 1; box-shadow: none !important; z-index: 0 !important; clip-path: circle(47%) }
.lw-head { left: 38.5% !important; right: auto !important; width: 48% !important; top: 5.9% !important; height: 7.5% !important; background: none !important; box-shadow: none !important; font-size: 1.05em !important }
.lw-x { right: auto !important; left: 88.4%; top: 6.3%; position: absolute; width: 9.3% !important; height: 6.8% !important }
.lootwin .lw-x { position: absolute } .lw-head .lw-x { position: fixed; display: none }
.lw-list { position: absolute; left: 11%; right: 5%; top: 30%; bottom: 4%; max-height: none !important; overflow: hidden !important; gap: .35em !important; padding: .4em .2em }
.lw-row { display: grid !important; grid-template-columns: 2.9em 1fr; gap: .25em !important; padding: 0 !important; align-items: stretch; background: none !important; box-shadow: none !important }
.lw-row .lw-ic { width: 2.9em; height: 2.9em; border-radius: 3px }
.lw-row .lw-n { display: flex; flex-direction: column; justify-content: center; padding: .15em .5em; background: linear-gradient(#1b1a18, #0b0a09); border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4b463e }
.lw-row.cur .lw-n { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--fv-yellow), 0 0 12px rgb(255 209 0 / .35) }
.lw-row .lw-n b { font-size: .95em } .lw-row .lw-n small { font-size: .72em }
.lw-empty { padding-top: 2em }
/* Chromie in der Statusleiste: nicht mehr abschneiden */
.ra-dock { overflow: visible !important; max-height: none !important }
.narr { overflow: visible; max-height: 8em; align-items: center } .narr-pic { margin-top: 0 !important; width: 3.4em; height: 3.4em }
.narr-txt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
.lootwin > .lw-x { background: none !important; box-shadow: none !important }
/* Bosskampf: das Raid-Bild füllt den ganzen Bildschirm, Glut steigt auf; die Bühne ist ein Fenster in die Szene */
.bf2-fullbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden }
.bf2-fullbg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: brightness(.45) saturate(1.15) blur(2px); transform: scale(1.06); animation: bgdrift 30s ease-in-out infinite alternate }
@keyframes bgdrift { from { transform: scale(1.06) translate(0, 0) } to { transform: scale(1.12) translate(-1.5%, -1%) } }
.bf2-fullbg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 45% 40%, transparent 40%, rgb(0 0 0 / .75)), linear-gradient(transparent 60%, rgb(20 4 0 / .6)); animation: e2flick 3s ease-in-out infinite }
.bf2-emb { position: absolute; inset: 0 } .bf2-emb i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgb(255 120 20 / .9); opacity: 0; animation: ember var(--t) var(--d) linear infinite }
.bf2-stage { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(255 140 60 / .45), 0 0 60px rgb(255 90 20 / .25) !important }
.ra-bossart img { object-position: 50% 22% !important; filter: saturate(1.15) contrast(1.05) }
.scr.sc-boss .ra-panel, .scr.sc-boss .ra-stage { background: none }
.spellcard { top: 42% }
.bl-line.gm { color: #4fc3ff; font-weight: 600 } .bl-gm { color: #fff; background: #1e5db8; padding: 0 .3em; border-radius: 3px; font-size: .8em; vertical-align: .1em }

/* =====================================================================================
   Handy 3.0: Spielerrahmen (wie der PlayerFrame), Charakterbogen mit Portrait, Betrachten, Taschen
   ===================================================================================== */
.phead { display: block; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px }
.pu { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center }
.pu-por { position: relative; width: 78px; height: 78px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2a2016, #080604 72%);
  box-shadow: 0 0 0 2px #0b0805, 0 0 0 4px #c9a24a, 0 0 0 5px #5a4220, 0 0 0 7px #140e08, 0 4px 14px rgb(0 0 0 / .8) }
.pu-por::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .6), inset 0 8px 14px rgb(255 240 200 / .12), inset 0 -10px 18px rgb(0 0 0 / .55) }
.pu-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; transform: scale(1.08) }
.pu-cls { position: absolute; right: -5px; top: -3px; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; transform: none;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a, 0 2px 5px rgb(0 0 0 / .7); background: #000 }
.pu-lv { position: absolute; left: -7px; bottom: -5px; min-width: 28px; height: 28px; padding: 0 4px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4d3a18, #120c05); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a, 0 2px 5px rgb(0 0 0 / .7);
  font: 400 15px var(--ra-font-display); color: var(--fv-yellow); font-variant-numeric: tabular-nums; z-index: 1 }
.pu-main { min-width: 0; display: grid; gap: 3px }
.pu-name { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.pu-n { font: 400 21px/1.05 var(--ra-font-display); color: var(--c); text-shadow: 0 1px 0 #000, 0 0 8px rgb(0 0 0 / .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pu-rk { font: 700 13px var(--ra-font-ui); color: var(--fv-yellow); padding: 0 6px; border-radius: 9px; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1px #6e5433 }
.pu-streak { display: inline-flex; align-items: center; gap: 2px; font: 700 13px var(--ra-font-ui); color: #ffb347 } .pu-streak .wi, .pu-streak img { width: 15px; height: 15px }
.pu-sub { font: 500 12.5px var(--ra-font-ui); color: #cfc0a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pu-sub img { width: 14px; height: 14px; vertical-align: -2px }
.pu-bar { position: relative; height: 17px; border-radius: 3px; overflow: hidden; background: #0a0806;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4a30, inset 0 2px 4px rgb(0 0 0 / .8) }
.pu-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#8a4fd6, #5a2a9a 55%, #3e1a70); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); transition: width .9s cubic-bezier(.2,.8,.2,1) }
.pu-bar i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9.5%, rgb(0 0 0 / .45) 9.5% 10%) }
.pu-bar span { position: relative; display: block; text-align: center; font: 700 11px/17px var(--ra-font-ui); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000 }
.pu-chips { display: flex; gap: 10px; align-items: center; font: 600 13px var(--ra-font-ui); flex-wrap: wrap }
.pu-chips .dkp { color: #8fd0ff } .pu-chips img { width: 16px; height: 16px; vertical-align: -3px }
.phead .bfs { margin-top: 6px }
/* Reaktionen am Portrait: EP/Gold steigen auf, richtig/falsch lässt den Rahmen aufleuchten */
.pu-por.fl-ok { animation: ufok .9s ease-out } .pu-por.fl-no { animation: ufno .7s ease-out } .pu-por.fl-xp { animation: ufxp .8s ease-out }
@keyframes ufok { 0% { box-shadow: 0 0 0 2px #0b0805, 0 0 0 4px #7dff6a, 0 0 26px 8px #4cff40 } 100% {} }
@keyframes ufno { 0%, 30% { filter: sepia(1) saturate(6) hue-rotate(-30deg) brightness(.8) } 100% { filter: none } }
@keyframes ufxp { 0% { box-shadow: 0 0 0 2px #0b0805, 0 0 0 4px #d7a8ff, 0 0 22px 6px #a050ff } 100% {} }
.pu-float { position: fixed; z-index: 60; pointer-events: none; font: 400 19px var(--ra-font-display); white-space: nowrap; transform: translate(-50%, 0);
  text-shadow: 0 2px 0 #000, 0 0 6px #000; animation: uffloat 1.8s cubic-bezier(.2,.7,.3,1) forwards }
.pu-float.xp { color: #d9b0ff } .pu-float.gold { color: #ffd76a } .pu-float.loss { color: #ff6a5a } .pu-float.ok { color: #7dff6a; font-size: 24px } .pu-float.no { color: #ff5a4a; font-size: 24px }
@keyframes uffloat { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7) } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15) } 30% { transform: translate(-50%, -6px) scale(1) } 100% { opacity: 0; transform: translate(-50%, -54px) } }

/* Charakterbogen: großes Portrait mit Klassenlicht */
.doll { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 10px 12px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--c) 30%, #1a130c), #0b0806 70%); box-shadow: inset 0 0 0 1px #6e5433, inset 0 0 40px rgb(0 0 0 / .7) }
.doll-bg { position: absolute; inset: 0; background: url(/assets/ui/frames/fv-leather.webp) center / cover; opacity: .25; mix-blend-mode: overlay }
.pu-por.big { width: 132px; height: 132px; box-shadow: 0 0 0 3px #0b0805, 0 0 0 6px #c9a24a, 0 0 0 8px #5a4220, 0 0 0 10px #140e08, 0 0 34px color-mix(in srgb, var(--c) 55%, transparent) }
.pu-por.big .pu-cls { width: 40px; height: 40px; right: -4px; top: 0 } .pu-por.big .pu-lv { min-width: 38px; height: 38px; font-size: 20px; left: -6px; bottom: -4px }
.doll-t { position: relative; display: grid; justify-items: center; text-align: center }
.doll-t b { font: 400 26px var(--ra-font-display); text-shadow: 0 2px 0 #000 } .doll-t span { font: 500 13px var(--ra-font-ui); color: #e8dcc0 }
.doll-t em { font: italic 400 15px var(--ra-font-display); color: var(--fv-yellow); margin-top: 2px }
.csheet .stat b small { font-size: 12px; color: #cfc0a2 }
/* Taschen: Items als kleine Tooltips mit Qualitätsfarbe */
.bags { display: grid; gap: 6px }
.bagi { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 5px; background: linear-gradient(#10141c, #06080c); box-shadow: inset 0 0 0 1px #3c4a5c }
.bagi img { width: 40px; height: 40px; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q), 0 0 10px color-mix(in srgb, var(--q) 50%, transparent) }
.bagi div { display: grid; font: 500 12.5px/1.3 var(--ra-font-ui); color: #fff } .bagi b { font: 400 15px var(--ra-font-display); color: var(--q) } .bagi small { color: #1eff00 } .bagi em { font-style: normal; color: #9d9d9d; font-size: 11.5px }
/* Schlachtzug: Portrait + Betrachten */
.prank .r { grid-template-columns: 22px 44px 1fr auto; cursor: pointer; -webkit-tap-highlight-color: transparent }
.pu-por.sm { width: 40px; height: 40px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a, 0 0 0 3px #3a2a14 }
.pu-por.sm .pu-cls { width: 16px; height: 16px; right: -4px; top: -3px } .pu-por.sm .pu-lv { min-width: 17px; height: 17px; font-size: 10px; left: -5px; bottom: -4px; padding: 0 2px }
.prank .insp { grid-column: 1 / -1; display: none; gap: 6px; padding: 8px 2px 2px; border-top: 1px solid rgb(110 84 51 / .5); margin-top: 4px }
.prank .r.open .insp { display: grid; animation: inspin .25s ease-out } .prank .r.open { box-shadow: inset 0 0 0 2px var(--c) }
@keyframes inspin { from { opacity: 0; transform: translateY(-4px) } }
.insp-h { font: 500 13px var(--ra-font-ui); color: #e8dcc0 } .insp-h em { color: var(--fv-yellow); font-style: italic }
.insp-st { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font: 500 12.5px var(--ra-font-ui); color: #cfc0a2 } .insp-st b { color: #fff }
.insp-sec { font: 400 14px var(--ra-font-display); color: var(--fv-yellow); margin-top: 4px }
.tis { display: flex; flex-wrap: wrap; gap: 8px }
.ti { display: grid; justify-items: center; gap: 2px; width: 70px; text-align: center } .ti img { width: 34px; height: 34px; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze) } .ti small { font: 500 10.5px/1.15 var(--ra-font-ui); color: #e8dcc0 }
/* Einstellungen */
.csets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.cset { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 6px; font: 400 15px var(--ra-font-display); color: #fff;
  background: linear-gradient(#2a1f14, #120d08); box-shadow: inset 0 0 0 1px #6e5433 }
.cset img { width: 22px; height: 22px; border-radius: 3px }
.cset.on { box-shadow: inset 0 0 0 2px #5fd14a; color: #bfffb0 } .cset.on::after { content: 'an'; font: 700 11px var(--ra-font-ui); color: #5fd14a }
.cset:not(.on)::after { content: 'aus'; font: 700 11px var(--ra-font-ui); color: #c96a5a }

/* Schnellbonus-Balken (Stimmen): läuft nach der ersten Voice-Line in 5 s von 150 % auf 100 % */
.bonusbar { position: relative; height: 1.3em; margin-top: .5em; border-radius: 3px; overflow: hidden; background: #0a0806; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4a30; opacity: .45 }
.bonusbar.run { opacity: 1 } .bonusbar.done { opacity: .5 }
.bonusbar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#ffd76a, #c9962a 55%, #7a5210); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 10px rgb(255 200 80 / .5) }
.bonusbar b { position: relative; display: block; text-align: center; font: 700 .8em/1.6em var(--ra-font-ui); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000 }
.bonusbar:not(.run) b::after { content: ' 150 %'; font-weight: 500; color: #e8dcc0 }
body.play .bonusbar { height: 22px; margin: 6px 0 10px } body.play .bonusbar b { font-size: 12px; line-height: 22px }
.music select { background: #1a120a; color: #e8dcc0; border: 1px solid #6e5433; border-radius: 4px; font: 500 12px var(--ra-font-ui); padding: 2px 4px; max-width: 11em }

/* Geheimaufträge (Handy), Sozial-Block, Verdachtsrunde */
.mstats { display: flex; gap: 12px; font: 500 13px var(--ra-font-ui); color: #cfc0a2; margin: 4px 0 8px } .mstats b { color: #fff; margin-left: 4px }
.mcard { position: relative; padding: 10px 12px; margin-bottom: 8px; border-radius: 6px; background: linear-gradient(#2a2013, #14100a); box-shadow: inset 0 0 0 1px #6e5433, 0 2px 8px rgb(0 0 0 / .5) }
.mcard.done { box-shadow: inset 0 0 0 2px #5fd14a } .mcard.decoy { background: linear-gradient(#20262e, #0e1116); box-shadow: inset 0 0 0 1px #4a5a70 } .mcard.exposed { box-shadow: inset 0 0 0 2px #c94a3a }
.mcard.obs { background: linear-gradient(#1c2230, #0c0f16); box-shadow: inset 0 0 0 1px #3c4a5c }
.mc-h { display: flex; align-items: baseline; gap: 8px } .mc-h b { flex: 1; font: 400 17px var(--ra-font-display); color: var(--fv-yellow) }
.mc-cat { font: 700 10px var(--ra-font-ui); letter-spacing: .06em; text-transform: uppercase; color: #bcae94 } .mc-pts { font: 700 12px var(--ra-font-ui); color: #ffd76a }
.mc-d { margin-top: 4px; font: 500 14px/1.35 var(--ra-font-ui); color: #f4ecdc } .mc-n { margin-top: 4px; font: 500 12px var(--ra-font-ui); color: #cfc0a2 }
.mc-ok { margin-top: 4px; font: 700 12px var(--ra-font-ui); color: #7dff6a } .mc-x { margin-top: 4px; font: 700 12px var(--ra-font-ui); color: #ff6a5a }
.so { display: grid; gap: 6px } .so-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center } .so-l { font: 600 12px var(--ra-font-ui); color: #cfc0a2; display: inline-flex; align-items: center; gap: 4px } .so-l img { width: 16px; height: 16px }
.pb.sm { min-height: 34px; padding: 4px 10px; font-size: 13px; width: auto; flex: 0 1 auto } .pb.sm.warn { box-shadow: inset 0 0 0 1px #c94a3a }
.toast .whisper { color: #ff80ff }
.vd-list { display: grid; gap: .4em; margin: .6em 0 }
.vd-line { display: grid; grid-template-columns: 9em 1fr auto auto; gap: 1em; align-items: center; padding: .5em .9em; border-radius: 6px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px #6e5433; opacity: 0; animation: vdin .5s ease-out forwards; animation-delay: calc(var(--i) * .7s + .3s) }
@keyframes vdin { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: none } }
.vd-line.ok { box-shadow: inset 0 0 0 1px #5fd14a } .vd-line.half { box-shadow: inset 0 0 0 1px #e0a53a } .vd-line.no { opacity: .7 } .vd-line.decoy { box-shadow: inset 0 0 0 1px #4a7ac0 }
.vd-t { display: grid } .vd-t b { font: 400 1.1em var(--ra-font-display); color: var(--fv-yellow) } .vd-t small { font: 500 .8em var(--ra-font-ui); color: #cfc0a2 }
.vd-k { font: 600 .85em var(--ra-font-ui); color: #e8dcc0 } .vd-pts { font: 400 1.2em var(--ra-font-display); color: #ffd76a; min-width: 2.5em; text-align: right }
.vd-rank { display: flex; flex-wrap: wrap; gap: 1em; margin: .6em 0; font: 500 .95em var(--ra-font-ui); color: #e8dcc0 } .vd-rank b { color: #ffd76a }

/* Chatfenster wie in WoW – in der rechten Spalte unter dem Schlachtzug, mit Reitern Allgemein / Kampflog */
.ra-side { grid-template-rows: auto minmax(0, 1fr) }
.chatwin { align-self: end; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 9em; max-height: 100%; font-size: calc(var(--u) * 1.05);
  background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .72)); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(110 84 51 / .5); border-radius: 4px }
.cw-tabs { display: flex; gap: 2px; padding: .25em .4em 0 } .cw-tabs span { padding: .15em .8em; font: 600 .78em var(--ra-font-ui); color: #bcae94; background: rgb(0 0 0 / .4); border-radius: 4px 4px 0 0; cursor: pointer } .cw-tabs span.on { color: var(--fv-yellow); background: rgb(40 30 18 / .9) }
.cw-log, .chatwin .combatlog { padding: .35em .6em .3em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0 }
.chatwin .combatlog { display: none; font-size: 1em; background: none; border: 0; box-shadow: none; max-height: none; visibility: visible !important }
.chatwin[data-tab="log"] .combatlog { display: flex } .chatwin[data-tab="log"] .cw-log { display: none }
.cw-l { font: 500 .92em/1.3 var(--ra-font-ui); color: #f4ecdc; text-shadow: 0 1px 1px #000; animation: cwin .35s ease-out }
@keyframes cwin { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: none } }
.cw-l.raid { color: #ff7d0a } .cw-l.raid .cw-ch { color: #ff7d0a } .cw-l.emote { color: #ff8040 } .cw-l.sys { color: #ffff00 } .cw-l.sys.ach { color: #ffd100; font-weight: 700 }
.cw-input { margin: 0 .4em .3em; padding: .15em .5em; font: 500 .72em var(--ra-font-ui); color: #7a6c55; background: rgb(0 0 0 / .45); border: 1px solid #2a2016; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* Brachland: das Chatfenster wächst zum großen Chat */
.scr.sc-brachland .bl-chat { animation: blgrow .8s cubic-bezier(.2,.8,.2,1); transform-origin: left bottom }
@keyframes blgrow { from { transform: scale(.35); opacity: .3 } 60% { opacity: 1 } to { transform: none; opacity: 1 } }
/* Erfolgs-Banner wie in WoW */
.achtoast { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 80; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: min(560px, 92vw); padding: 10px 26px 10px 14px;
  background: url(/assets/ui/frames/achv-alert.png) center / 100% 100% no-repeat; filter: drop-shadow(0 8px 20px rgb(0 0 0 / .7)); animation: achin .6s cubic-bezier(.2,.9,.3,1.3) }
.achtoast.out { animation: achout .7s ease-in forwards }
@keyframes achin { from { transform: translate(-50%, -140%) scale(.8); opacity: 0 } to { transform: translateX(-50%); opacity: 1 } }
@keyframes achout { to { transform: translate(-50%, -140%); opacity: 0 } }
.at-shield { width: 58px; height: 58px; display: grid; place-items: center; background: url(/assets/ui/frames/achv-shield.png) center / contain no-repeat } .at-shield img { width: 30px; height: 30px; border-radius: 3px; box-shadow: 0 0 0 1px #000 }
.at-txt { display: grid; line-height: 1.15 } .at-txt small { font: 700 10px var(--ra-font-ui); letter-spacing: .12em; text-transform: uppercase; color: #e8dcc0 } .at-txt b { font: 400 20px var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 0 #000 } .at-txt span { font: 500 12px var(--ra-font-ui); color: #f4ecdc }
.at-pts { font: 400 22px var(--ra-font-display); color: #fff; text-shadow: 0 1px 0 #000; padding: 4px 8px; background: radial-gradient(circle, #6a4a18, #2a1c08); border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }
body.play .achtoast { top: calc(6px + env(safe-area-inset-top, 0px)); padding: 8px 20px 8px 10px; gap: 10px } body.play .at-txt b { font-size: 17px } body.play .at-shield { width: 48px; height: 48px }
/* Erfolge-Liste am Handy */
.acard { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 7px 9px; margin-bottom: 6px; border-radius: 6px; background: linear-gradient(#1a140c, #0e0a07); box-shadow: inset 0 0 0 1px #4a3a24; opacity: .8 }
.acard.done { opacity: 1; background: linear-gradient(#2c2212, #14100a); box-shadow: inset 0 0 0 1px #c9a24a }
.acard img { width: 40px; height: 40px; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze); filter: grayscale(1) brightness(.7) } .acard.done img { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-yellow) }
.acard div { display: grid } .acard b { font: 400 15px var(--ra-font-display); color: #e8dcc0 } .acard.done b { color: var(--fv-yellow) } .acard small { font: 500 12px/1.3 var(--ra-font-ui); color: #cfc0a2 } .acard em { font: 600 11px var(--ra-font-ui); color: #8fd0ff; font-style: normal }
.ac-pts { font: 400 16px var(--ra-font-display); color: #ffd76a }
/* Sozial-Reiter */
.so-target { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px } .so-sel { flex: 1; min-height: 40px; padding: 4px 8px; border-radius: 6px; border: 1px solid #6e5433; background: #1a120a; color: #fff; font: 500 15px var(--ra-font-ui) }
.offer { padding: 8px 10px; margin-bottom: 6px; border-radius: 6px; background: linear-gradient(#1c2230, #0c0f16); box-shadow: inset 0 0 0 1px #4a7ac0; font: 500 14px var(--ra-font-ui); color: #fff }
.offers { margin-bottom: 10px }
.pf-tabard { display: inline-block; width: .6em; height: .8em; margin-left: .35em; vertical-align: middle; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 60%, #000)); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); box-shadow: 0 0 0 1px #000 } .pf-sbuff { display: inline-block; width: .7em; height: .7em; margin-left: .25em; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px #000, 0 0 6px var(--c); vertical-align: middle } .pf-sit { font-size: .65em; margin-left: .4em; color: #bcae94; font-style: italic }

/* Sozial-Reiter 2.0: Ziel wählen, dann Werkzeug, dann Untermenü */
.so-picks { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none }
.so-pick { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; padding: 6px 8px 5px; min-width: 76px; border: 0; border-radius: 8px; background: linear-gradient(#1a140c, #0e0a07); box-shadow: inset 0 0 0 1px #4a3a24; color: #e8dcc0; font: 500 12px var(--ra-font-ui) }
.so-pick.on { box-shadow: inset 0 0 0 2px var(--c), 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); color: #fff; background: linear-gradient(#2a2013, #14100a) }
.so-pick .pu-por.sm { width: 42px; height: 42px } .so-fr { position: absolute; top: 3px; right: 6px; color: #ff6a8a; font-style: normal; font-size: 12px }
.so-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px }
.so-tool { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border: 0; border-radius: 8px; background: linear-gradient(#2a1f14, #120d08); box-shadow: inset 0 0 0 1px #6e5433; color: #e8dcc0; font: 600 11px var(--ra-font-ui) }
.so-tool img { width: 34px; height: 34px; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-bronze) }
.so-tool.on { box-shadow: inset 0 0 0 2px var(--fv-yellow); color: var(--fv-yellow) } .so-tool.on img { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-yellow) }
.so-tools.notgt::after { content: 'Oben ein Ziel antippen'; grid-column: 1 / -1; text-align: center; font: 500 12px var(--ra-font-ui); color: #bcae94 }
.so-menu { padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(110 84 51 / .6); display: grid; gap: 6px; animation: inspin .2s ease-out }
.so-menu[hidden] { display: none } .so-lists { color: #bcae94 }
/* Aufklappbare Abschnitte (Erfolge, Aufträge) */
.fold { margin-bottom: 8px } .fold-h { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 6px; background: linear-gradient(#2a1f14, #120d08); box-shadow: inset 0 0 0 1px #6e5433; color: var(--fv-yellow); font: 400 16px var(--ra-font-display); text-align: left }
.fold-h i { width: 10px; height: 10px; border-right: 2px solid #bcae94; border-bottom: 2px solid #bcae94; transform: rotate(-45deg); transition: transform .2s } .fold.open .fold-h i { transform: rotate(45deg) }
.fold-b { display: none; padding-top: 8px } .fold.open .fold-b { display: block }

/* ---------- Persönliche Bildschirme: Anmeldefeld wie im Spiel, QR-Code, Charakterauswahl ---------- */
.gl-login { display: grid; grid-template-columns: 1fr auto; gap: 1.2em; align-items: center; margin: .6em 0 .4em }
.gl-form { display: grid; gap: .45em } .gl-form label { display: grid; gap: .2em; font: 400 .9em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 0 #000 }
.gl-form input { height: 2.2em; padding: 0 .6em; border: 1px solid #000; border-radius: 3px; background: linear-gradient(#0a0c14, #14172a); color: #fff; font: 500 1em var(--ra-font-ui); box-shadow: inset 0 0 0 1px #3a3f55, inset 0 2px 6px #000 } .gl-form input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--fv-yellow), inset 0 2px 6px #000 }
.gl-err { min-height: 1em; font: 500 .8em var(--ra-font-ui); color: #ff6a5a }
.glue-red { justify-self: center; min-width: 11em; height: 2.4em; border: 0; border-radius: 4px; background: url('/assets/ui/frames/fv-btn-red.webp') center / 100% 100%, linear-gradient(#a3221a, #4a0c08); color: #ffe8b0; font: 400 1.05em var(--ra-font-display); text-shadow: 0 1px 1px #000; box-shadow: 0 0 0 1px #000, 0 4px 12px rgb(0 0 0 / .6); cursor: pointer } .glue-red:active { transform: translateY(1px); filter: brightness(.9) } .glue-red.big { min-width: 14em; height: 2.9em; font-size: 1.3em; margin-top: 1em }
.gl-qr { display: grid; justify-items: center; gap: .3em; font: 500 .75em var(--ra-font-ui); color: #cfd2da; text-align: center; line-height: 1.3 }
.qr-slot { width: 8.5em; height: 8.5em; padding: .35em; border-radius: 4px; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1px #3a3f55 } .qr-slot svg { width: 100%; height: 100%; display: block } .qr-slot.big { width: 9.5em; height: 9.5em; margin: .6em auto 0 }
.glue-btn[data-a] { cursor: pointer } .glue-btn[data-a]:hover { filter: brightness(1.2) }
/* Charakterauswahl wie im Spiel: Zonenbild je Fraktion, Figur in der Mitte, Liste rechts, roter Knopf unten */
.glue.csel { display: block; background: #05060c }
.csel-bg { position: absolute; inset: 0; background: url('/assets/ui/backgrounds/brachland-wide.webp') center / cover; filter: brightness(.75) saturate(1.1); animation: cselbg 40s ease-in-out infinite alternate } .csel[data-fac="alliance"] .csel-bg { background-image: url('/assets/ui/backgrounds/lagerfeuer.webp') }
.csel-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .35), transparent 30%, transparent 60%, rgb(0 0 0 / .6)), linear-gradient(rgb(0 0 0 / .5), transparent 25%, transparent 70%, rgb(0 0 0 / .7)) }
@keyframes cselbg { from { transform: scale(1.02) translateX(-.5%) } to { transform: scale(1.08) translateX(.5%) } }
.glue-logo.small { width: min(22vw, 36vh); top: 2.5%; left: 24%; transform: translateX(-50%) }
.csel-main { position: absolute; left: 0; right: 24em; top: 0; bottom: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 10vh 2vw 6vh; text-align: center }
.csel-figure { display: grid; align-content: end; justify-items: center; gap: .2em; animation: fadeup .8s both }
.cs-stage { position: relative; width: min(24vw, 40vh); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1.2em }
.cs-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 62%); animation: pulse 3s ease-in-out infinite alternate }
.cs-face { width: 88%; height: 88%; border-radius: 50%; object-fit: cover; box-shadow: 0 16px 50px #000; animation: crpop .5s cubic-bezier(.2,.9,.3,1.3) }
.cs-ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgb(255 209 0 / .55)) }
.cs-cls { position: absolute; right: 2%; bottom: 4%; width: 26%; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 5px #c9a24a, 0 6px 16px #000 }
.cs-q { font: 400 6em var(--ra-font-display); color: #4a4f66 }
.cs-name { font: 400 3em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 2px 0 #000, 0 0 24px #000, 0 4px 12px #000 }
.cs-line { font: 500 1.3em var(--ra-font-ui); color: #fff; text-shadow: 0 1px 2px #000, 0 0 10px #000 } .cs-realm { font: 500 .95em var(--ra-font-ui); color: #d8d4c8; text-shadow: 0 1px 2px #000, 0 0 10px #000 }
.cs-hint { max-width: 26em; margin-top: .6em; font: 500 1em var(--ra-font-ui); color: #e8e8f0; line-height: 1.4; text-shadow: 0 1px 2px #000 }
.csel-enter { display: grid; justify-items: center; margin-top: 1.5em }
.cs-wait { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.2em; border-radius: 6px; background: rgb(0 0 0 / .6); box-shadow: inset 0 0 0 1px #4a4d58; font: 500 1em var(--ra-font-ui); color: #e8e8f0 } .cs-wait i { width: .7em; height: .7em; border-radius: 50%; background: #5fd14a; box-shadow: 0 0 10px #5fd14a; animation: pulse 1.2s ease-in-out infinite alternate }
.csel-list { position: absolute; right: 1.5em; top: 1.5em; bottom: 5em; width: 21em; z-index: 3; display: grid; align-content: start; gap: .35em; padding: .8em; border-radius: 6px; background: linear-gradient(rgb(14 12 18 / .93), rgb(6 6 10 / .96)); box-shadow: 0 0 0 1px #000, 0 0 0 3px #6d7078, 0 0 0 4px #1a1a1e, 0 0 0 6px #9a9ca4, 0 18px 50px #000; overflow: hidden }
.csl-h { display: flex; justify-content: space-between; padding: 0 .2em .5em; font: 400 1.15em var(--ra-font-display); color: var(--fv-yellow); border-bottom: 1px solid #3a3f55; margin-bottom: .3em } .csl-h span { color: #b8bcc8 }
.csl-row { display: grid; grid-template-columns: 2.8em 1fr auto; gap: .6em; align-items: center; padding: .45em .6em; border-radius: 4px; background: rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1px rgb(150 150 170 / .2) }
.csl-row img { width: 2.8em; height: 2.8em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--c) } .csl-row b { display: block; font: 400 1.05em var(--ra-font-display); color: #fff } .csl-row span { font: 500 .75em var(--ra-font-ui); color: #b8bcc8 }
.csl-row.me { background: linear-gradient(90deg, rgb(255 209 0 / .2), rgb(0 0 0 / .4)); box-shadow: inset 0 0 0 1px var(--fv-yellow) } .csl-row.me b { color: var(--fv-yellow) }
.csl-row.nochar { opacity: .7 } .csl-q { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: #1a1c28; color: #667; font: 400 1.5em var(--ra-font-display) }
.csl-dot { width: .6em; height: .6em; border-radius: 50%; background: #555 } .csl-dot.on { background: #5fd14a; box-shadow: 0 0 8px #5fd14a }
.csl-foot { margin-top: .8em; padding-top: .6em; border-top: 1px solid #3a3f55; font: 500 .78em var(--ra-font-ui); color: #b8bcc8; line-height: 1.4 }
.csel .glue-btns { bottom: 1.5em; right: 1.5em } .csel .glue-ver { color: #d8d4c8 }
/* eigener Rahmen in der Schlachtzugsleiste, Flüstern im Chat, größere Toasts */
.pf.me { box-shadow: inset 0 0 0 1px rgb(110 84 51 / .7), inset 3px 0 0 var(--fv-yellow) } .pf.me .pf-name { color: var(--fv-yellow) }
.cw-l.whisper { color: #ff80ff } .cw-l.whisper b { color: #ff80ff }
.screen .toasts { left: auto; right: 1.2em; bottom: 5.5em; max-width: 26em; margin: 0 } .screen .toast { font-size: 1.05em; padding: .6em 1em; border: 1px solid #a58a4a; background: rgb(10 8 6 / .92) }
.screen .toast .ep { color: #b46bff } .screen .toast .dkp { color: #8fd0ff }
.music #unbind { height: 1.8em; padding: 0 .6em; border: 1px solid #6e5433; border-radius: 3px; background: #1a120a; color: #ffd76a; font: 600 .75em var(--ra-font-ui); cursor: pointer }

/* ---------- Klänge aus Azeroth: Reisekarte („Wo sind wir?“) ---------- */
.km-map { position: relative; width: min(100%, 52vw); aspect-ratio: 1002 / 668; margin: .4em 0 .6em; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 2px #2a1d0c, 0 0 0 5px #7a5c2e, 0 20px 50px rgb(0 0 0 / .8); animation: kmin .8s ease-out both }
@keyframes kmin { from { opacity: 0; transform: perspective(900px) rotateX(18deg) translateY(30px) } }
.km-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) }
.km-fog { position: absolute; inset: -10%; background: radial-gradient(ellipse at 30% 40%, rgb(30 26 20 / .7), transparent 45%), radial-gradient(ellipse at 70% 60%, rgb(30 26 20 / .75), transparent 45%), radial-gradient(ellipse at 50% 20%, rgb(40 36 30 / .8), transparent 50%), rgb(18 15 11 / .62); filter: blur(6px); animation: kmfog 14s ease-in-out infinite alternate; transition: opacity .8s }
@keyframes kmfog { from { transform: translate(-2%, -1%) scale(1.02) } to { transform: translate(2%, 1%) scale(1.06) } }
.km-fog.open { -webkit-mask: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 9%, #000 22%); mask: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 9%, #000 22%); animation: kmopen 1.6s cubic-bezier(.2,.8,.3,1) both, kmfog 14s 1.6s ease-in-out infinite alternate; opacity: .85 }
@keyframes kmopen { from { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask: radial-gradient(circle at var(--x) var(--y), #000 0, #000 100%); mask: radial-gradient(circle at var(--x) var(--y), #000 0, #000 100%) } }
.km-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: grid; justify-items: center; gap: .2em; z-index: 3; animation: kmpin .6s 1.2s cubic-bezier(.2,1.4,.4,1) both }
@keyframes kmpin { from { opacity: 0; transform: translate(-50%, -160%) scale(.6) } }
.km-pin i { width: 1.1em; height: 1.1em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 40% 35%, #ffd76a, #b8461f 70%); box-shadow: 0 0 0 2px #2a1d0c, 0 6px 14px rgb(0 0 0 / .7) } .km-pin i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em; border-radius: 50%; border: 2px solid #ffd76a; opacity: 0; animation: kmring 2s 1.6s ease-out infinite }
@keyframes kmring { from { transform: scale(.3); opacity: .9 } to { transform: scale(1.4); opacity: 0 } }
.km-pin b { font: 400 1.15em var(--ra-font-display); color: #2a1d0c; background: rgb(244 236 220 / .92); padding: .1em .55em; border-radius: 3px; box-shadow: 0 0 0 1px #7a5c2e, 0 4px 10px rgb(0 0 0 / .5); white-space: nowrap }
.km-compass { position: absolute; right: 3%; top: 5%; width: 13%; aspect-ratio: 1; z-index: 3; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .7)); opacity: .92 } .km-compass img { width: 100%; height: 100%; transition: transform .6s }
.km-compass.spin img { animation: kmspin 2.6s cubic-bezier(.4, .1, .3, 1) infinite alternate } @keyframes kmspin { from { transform: rotate(-70deg) } 40% { transform: rotate(25deg) } to { transform: rotate(110deg) } }
.km-wave { position: absolute; left: 4%; right: 22%; bottom: 5%; height: 14%; display: flex; align-items: flex-end; gap: 2px; z-index: 3; opacity: .35; transition: opacity .4s } .km-wave.live { opacity: .95 }
.km-wave i { flex: 1; height: var(--h); background: linear-gradient(#ffd76a, #b8461f); border-radius: 2px 2px 0 0; box-shadow: 0 0 6px rgb(255 160 40 / .5); transform-origin: bottom } .km-wave.live i { animation: kmbar .7s calc(var(--k) * -.09s) ease-in-out infinite alternate }
@keyframes kmbar { from { transform: scaleY(.25) } to { transform: scaleY(1) } }
.km-stamp { position: absolute; left: 4%; top: 6%; z-index: 4; padding: .25em .7em; border: .18em solid #8a2a1e; border-radius: 4px; color: #8a2a1e; font: 700 1.6em var(--ra-font-display); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-8deg); opacity: .85; mix-blend-mode: multiply; animation: kmstamp .4s 1.8s cubic-bezier(.2,1.6,.4,1) both; mask: url('/assets/ui/frames/fv-leather.webp') center / 60% repeat; -webkit-mask: url('/assets/ui/frames/fv-leather.webp') center / 60% repeat }
@keyframes kmstamp { from { opacity: 0; transform: rotate(-8deg) scale(2.2) } }
.km-also { margin: -.2em 0 .5em; font: 500 1em var(--ra-font-ui); color: #e8dcc0 } .km-also b { color: #ffd76a }
.km .vo-h { animation: fadeup .5s both }
.personal .km-map { width: min(100%, 56vw) }
/* Persönlicher Bildschirm: Warnung, Eingeloggt-Marke, Kamera-Moment, eigene Antwort */
.ps-warn { position: fixed; inset: 0; z-index: 8; pointer-events: none; box-shadow: inset 0 0 0 .5em rgb(200 30 20 / .85), inset 0 0 120px rgb(200 30 20 / .5); animation: pswarn 1.1s ease-in-out infinite alternate }
.ps-warn b { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); font: 400 2.6em var(--ra-font-display); color: #ff6a5a; text-shadow: 0 0 20px #a00, 0 2px 0 #000; letter-spacing: .04em } .ps-warn span { position: absolute; left: 50%; top: calc(12% + 3.2em); transform: translateX(-50%); font: 600 1em var(--ra-font-ui); color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap }
@keyframes pswarn { to { box-shadow: inset 0 0 0 .5em rgb(200 30 20 / .35), inset 0 0 60px rgb(200 30 20 / .2) } }
.ps-lock { position: fixed; right: 1.2em; top: 4.2em; z-index: 8; padding: .5em 1em; border-radius: 6px; background: rgb(10 8 6 / .9); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--fv-yellow), 0 8px 20px #000; font: 600 1em var(--ra-font-ui); color: #e8dcc0; animation: fadeup .4s both } .ps-lock b { color: var(--fv-yellow); font: 400 1.3em var(--ra-font-display) } .ps-lock .wi { height: 1.4em; vertical-align: -.35em }
.ps-cam { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); z-index: 8; padding: .5em 1.2em; border-radius: 8px; font: 400 1.6em var(--ra-font-display); color: #fff; background: rgb(10 8 6 / .85); box-shadow: 0 0 0 2px #000, 0 0 0 4px #5fd14a, 0 10px 30px #000; animation: pscam .5s cubic-bezier(.2,1.4,.4,1) both, fadeout .6s 5s forwards } .ps-cam.no { box-shadow: 0 0 0 2px #000, 0 0 0 4px #c94a3a, 0 10px 30px #000 }
@keyframes pscam { from { opacity: 0; transform: translateX(-50%) scale(.5) } }
.ra-me { position: absolute; right: .6em; top: -.7em; padding: .05em .5em; border-radius: 3px; background: var(--fv-yellow); color: #000; font: 700 .55em var(--ra-font-ui); box-shadow: 0 0 0 1px #000; z-index: 3 }
/* Einlass: Anmeldefeld wie im Spiel – Goldschrift, dunkle Eingabefelder, roter Knopf, mitten im Portal */
.glue-form { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); z-index: 4; display: grid; justify-items: center; gap: .25em; width: min(22em, 80%) }
.glue-lab { margin-top: .5em; font: 400 1.15em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 0 #000, 0 0 10px #000, 0 2px 4px #000; letter-spacing: .02em }
.glue-in { width: 100%; height: 2.1em; padding: 0 .7em; border: 0; border-radius: 3px; background: linear-gradient(#08090c, #14161c); color: #fff; font: 500 1.05em var(--ra-font-ui); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a4d58, inset 0 3px 8px #000, 0 0 0 1px #000; text-align: center } .glue-in:focus { outline: 0; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #c9a24a, inset 0 3px 8px #000, 0 0 12px rgb(255 209 0 / .3) }
.glue-form .glue-red { margin-top: 1em; min-width: 9.5em; height: 2.3em; font-size: 1.15em } .glue-form .gl-err { text-align: center }
.glue-hint { margin-top: .3em; font: 500 .8em var(--ra-font-ui); color: #d8d4c8; text-shadow: 0 1px 2px #000, 0 0 8px #000; text-align: center }
.glue-qr { position: absolute; left: 2.5%; bottom: 9%; z-index: 4; display: grid; justify-items: center; gap: .4em; padding: .7em; border-radius: 6px; background: rgb(8 8 12 / .75); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a4d58; font: 500 .8em var(--ra-font-ui); color: #d8d4c8; text-align: center; line-height: 1.3 } .glue-qr .qr-slot { width: 9em; height: 9em; background: rgb(255 255 255 / .06) }
.glue-who { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5em; max-width: 60%; }
.gw-t { font: 400 .95em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 1px 0 #000, 0 0 8px #000; margin-right: .3em }
.gw-p { display: inline-flex; align-items: center; gap: .4em; padding: .25em .6em .25em .3em; border-radius: 2em; background: rgb(8 8 12 / .75); box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--c) 60%, #4a4d58); font: 600 .8em var(--ra-font-ui); color: #fff; animation: fadeup .5s calc(var(--k) * .1s) both } .gw-p .ico { width: 1.6em; height: 1.6em } .gw-p.wait { opacity: .7 } .gw-p .gl-dots { padding: 0 .3em }
.csel-main { padding: 8vh 2vw 4vh } .csel-figure .qr-slot.big { width: 8em; height: 8em; margin-top: .5em } .csel-figure .cs-hint { font-size: .9em; margin-top: .3em }
.dk-pips { display: inline-flex; align-items: center; gap: .6em; margin-left: 1.5em }
/* Rast: Portraits im Kreis ums Feuer, größeres Chatfenster */
.ra-side.rest { grid-template-rows: auto minmax(0, 1fr); gap: .4em }
.firering { position: relative; width: 100%; aspect-ratio: 1; max-height: 46vh; margin: 0 auto; --rad: 5.6em }
.fr-fire { position: absolute; left: 50%; top: 50%; width: 28%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgb(255 190 80 / .8), rgb(255 110 20 / .5) 40%, transparent 70%); filter: blur(6px); animation: e2flick 1.6s ease-in-out infinite alternate }
.fr-fire::after { content: "🔥"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2em; filter: drop-shadow(0 0 12px #ff8a30) }
.fr-p { position: absolute; left: 50%; top: 50%; width: 5.4em; margin: -2.7em; display: grid; justify-items: center; gap: .1em; text-align: center; transform: rotate(var(--a)) translateY(calc(var(--rad) * -1)) rotate(calc(var(--a) * -1)); animation: fadeup .6s both }
.fr-por { position: relative; width: 3.6em; height: 3.6em; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--c), 0 6px 16px #000 } .fr-por img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover } .fr-por .pu-cls { position: absolute; right: -.3em; bottom: -.3em; width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: 0 0 0 2px #000 }
.fr-p b { font: 400 .95em var(--ra-font-display); color: #fff; text-shadow: 0 1px 2px #000 } .fr-p small { font: 500 .68em var(--ra-font-ui); color: #cfc0a2 }
.fr-p.me .fr-por { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--fv-yellow), 0 0 18px rgb(255 209 0 / .6), 0 6px 16px #000 } .fr-p.me b { color: var(--fv-yellow) } .fr-p.off { opacity: .45; filter: grayscale(.8) }
.ra-side.rest .chatwin { min-height: 16em; font-size: calc(var(--u) * 1.2) }

/* ---------- Questtafel 2.0: hängende Schilder, angenagelte Zettel mit gerissenen Rändern, abgerissene Reste ---------- */
.qt-board { padding: 2.2em 1.6em 1.2em; background: radial-gradient(ellipse at 30% 20%, rgb(255 200 120 / .1), transparent 60%), url('/assets/ui/frames/fv-wood.webp') center / auto 58px repeat, #5e3d20 }
.qt-col { gap: clamp(10px, min(1vw, 1.8vh), 34px) }
.qt-sign { position: relative; padding-top: 1.1em; margin-bottom: .2em; animation: signsway 6s calc(var(--k) * -1.7s) ease-in-out infinite alternate; transform-origin: 50% -1em }
@keyframes signsway { from { transform: rotate(-.6deg) } to { transform: rotate(.6deg) } }
.qt-rope { position: absolute; top: 0; left: 18%; width: 3px; height: 1.2em; background: linear-gradient(#1a1a1a, #4a4a4a); box-shadow: 0 0 0 1px #000 } .qt-rope.r { left: auto; right: 18% }
.qt-cat { padding: .45em .6em; font-size: 1.2em; color: #f3dfae; text-shadow: 0 2px 0 #1a0f05; background: url('/assets/ui/frames/fv-plaque.webp') center / 100% 100% no-repeat, linear-gradient(#7a5530, #4e331a); border-radius: 4px; box-shadow: 0 0 0 2px #20130a, 0 6px 14px rgb(0 0 0 / .7); border: 0 }
.qt-cat .wi.cat { height: 1.6em; box-shadow: 0 0 0 1px #000, 0 0 0 2px #b08d3c }
.qt-ticket { min-height: 4.6em; padding: .55em .9em .5em .6em; border-radius: 1px; background: url('/assets/ui/frames/fv-questparch.webp') center / cover, #e3cb98 !important; box-shadow: 0 6px 14px rgb(0 0 0 / .55), inset 0 0 30px rgb(120 80 30 / .25); transition: transform .25s, box-shadow .25s, filter .3s; animation: qtin .5s calc(var(--k) * .06s) cubic-bezier(.2,1.2,.4,1) both;
  clip-path: polygon(0 3%, 4% 0, 12% 2%, 24% 0, 33% 3%, 47% 0, 58% 2%, 70% 0, 82% 2%, 93% 0, 100% 3%, 99% 20%, 100% 40%, 98% 60%, 100% 80%, 99% 100%, 88% 98%, 76% 100%, 63% 97%, 50% 100%, 38% 98%, 24% 100%, 12% 97%, 3% 100%, 0 90%, 1% 70%, 0 50%, 1% 30%) }
@keyframes qtin { from { opacity: 0; transform: rotate(var(--rot)) translateY(-14px) scale(.9) } }
.qt-ticket.v1 { filter: hue-rotate(-6deg) brightness(.97) } .qt-ticket.v2 { filter: brightness(1.04) } .qt-ticket.v3 { filter: sepia(.15) } .qt-ticket.v4 { filter: hue-rotate(5deg) brightness(.95) } .qt-ticket.v5 { filter: brightness(1.02) contrast(1.03) }
.qt-ticket::before { display: none }
.qt-nail { position: absolute; top: -.35em; left: 50%; width: .9em; height: .9em; margin-left: -.45em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8e8e8, #6a6a6a 55%, #2a2a2a); box-shadow: 0 2px 3px #000, inset 0 0 0 1px #000 }
.qt-ticket.v1 .qt-nail, .qt-ticket.v4 .qt-nail { left: 30% } .qt-ticket.v2 .qt-nail, .qt-ticket.v5 .qt-nail { left: 68% }
.qt-rew { display: grid; line-height: 1.05 } .qt-rew small { font: 700 .55em var(--ra-font-ui); letter-spacing: .1em; text-transform: uppercase; color: #6b4a24 }
.qt-ticket[data-a]:not(:disabled):hover, .qt-ticket.st-cur { transform: rotate(0deg) scale(1.06) translateY(-4px); box-shadow: 0 16px 30px rgb(0 0 0 / .7), 0 0 0 3px var(--fv-yellow), 0 0 24px rgb(255 209 0 / .5); z-index: 2 }
.qt-ticket.st-cur { animation: qtcur 1.4s ease-in-out infinite alternate } @keyframes qtcur { to { box-shadow: 0 16px 30px rgb(0 0 0 / .7), 0 0 0 3px #fff3c4, 0 0 36px rgb(255 209 0 / .8) } }
/* Erledigt: der Zettel ist abgerissen – nur ein Rest hängt noch am Nagel */
.qt-ticket.st-done { filter: sepia(.5) brightness(.75); transform: rotate(calc(var(--rot) * 2)) scale(.98); min-height: 4.6em; clip-path: polygon(0 0, 100% 0, 100% 34%, 88% 44%, 76% 30%, 62% 52%, 50% 36%, 38% 55%, 26% 40%, 14% 58%, 0 42%); box-shadow: 0 3px 6px rgb(0 0 0 / .5) }
.qt-ticket.st-done .qt-rew, .qt-ticket.st-done .ra-seal { opacity: .55 }
.qt-stamp { position: absolute; right: .5em; top: .3em; transform: rotate(-10deg); padding: .05em .45em; border: .16em solid #8a2a1e; border-radius: 3px; color: #8a2a1e; font: 700 .72em var(--ra-font-display); letter-spacing: .1em; text-transform: uppercase; opacity: .85; mix-blend-mode: multiply; z-index: 2 }
.qt-who { position: absolute; left: .6em; bottom: .35em; display: flex; gap: .2em } .qt-who i { width: .75em; height: .75em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #000 }
.qt-foot { margin-top: 1.2em; padding: .5em 1em; border-radius: 4px; background: rgb(20 12 5 / .55); box-shadow: inset 0 0 0 1px rgb(255 220 160 / .12); text-align: center }

/* Lagerfeuer: Portraits sitzen um das echte Feuer im Bild, Chatfenster groß unten rechts */
.camp-over { position: absolute; inset: 0; pointer-events: none; z-index: 3 }
.camp-over .firering { position: absolute; right: 1.2em; top: 4.5em; width: auto; height: auto; max-height: none; aspect-ratio: auto; display: grid; gap: .5em; font-size: 1.1em } .camp-over .fr-fire { display: none }
.camp-over .fr-p { position: static; margin: 0; width: 6em; transform: none; animation: fadeup .5s both }
.camp-over .chatwin { position: absolute; right: 1.5em; bottom: 4.5em; width: min(30em, 36vw); height: 9.5em; pointer-events: auto; font-size: calc(var(--u) * 1.25); background: linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / .8)) }

/* ---------- Gasthaus · Tier-List: Holzbrett mit Siegelplaketten, Reihen als dunkle Einlassungen ---------- */
.tl-screen { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.6em; padding: 1.2em 1.6em 5em; align-items: center }
.tl-left { display: grid; gap: .8em; align-content: center }
.tl-herowrap { position: relative; padding: .7em; border-radius: 6px; background: url('/assets/ui/frames/fv-wood.webp') center / auto 58px repeat, #5e3d20; box-shadow: inset 0 0 0 2px #2a180a, 0 0 0 4px #7d5a2e, 0 0 0 6px #24160a, 0 20px 50px rgb(0 0 0 / .7) }
.tl-hero { border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgb(0 0 0 / .6) }
.tl-cap { padding: .6em 1em .4em; text-align: center } .tl-name { font: 400 2.6em var(--ra-font-display); color: var(--fv-yellow); text-shadow: 0 2px 0 #000, 0 0 16px rgb(0 0 0 / .8) }
.tl-desc { font: italic 400 1.15em/1.35 var(--ra-font-display); color: #f3e6c8; margin: 0 auto }
.tl-votes { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center } .tl-votes .chip { animation: fadeup .4s both }
.tm-row.hit { box-shadow: inset 0 0 0 2px var(--fv-yellow), 0 0 22px rgb(255 209 0 / .45); animation: tmhit 1.2s ease-in-out 2 alternate } @keyframes tmhit { to { box-shadow: inset 0 0 0 2px #fff3c4, 0 0 40px rgb(255 209 0 / .8) } }
.tl-cap { position: absolute; left: .7em; right: .7em; bottom: .7em; padding: 2.4em 1em .7em; background: linear-gradient(transparent, rgb(0 0 0 / .9)); text-align: left; border-radius: 0 0 3px 3px }
.tl-stamp { right: 1.4em; top: 1.4em; font-family: var(--ra-font-epic); font-weight: 400 }

/* ---------- Goblin-Markt: Stände mit Gästen, Jackpot, Uhr, Ticker ---------- */
.gb-games { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7em }
.gb-markt { display: grid; gap: .9em }
.gb-head { display: flex; justify-content: space-between; align-items: center; gap: 1em }
.gb-jack { display: grid; padding: .4em 1.2em; border-radius: 6px; background: linear-gradient(#3a2a10, #1a1206); box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #c9a24a, 0 0 22px rgb(255 209 0 / .35); text-align: center } .gb-jack small { font: 700 .7em var(--ra-font-ui); letter-spacing: .14em; text-transform: uppercase; color: #ffd76a } .gb-jack b { font: 400 1.9em/1 var(--ra-font-display); color: #fff3c4; text-shadow: 0 0 14px rgb(255 209 0 / .7) }
.gb-clock { display: inline-flex; align-items: center; gap: .4em; padding: .3em .9em; border-radius: 6px; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1px #6e5433; font: 400 1.6em var(--ra-font-display); color: #e8dcc0 } .gb-clock.late { color: #ff6a5a; animation: pulse .8s ease-in-out infinite alternate }
.gb-stands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7em; align-items: end }
.gb-stand { position: relative; display: grid; grid-template-rows: auto auto minmax(6.5em, auto); gap: .3em; padding: 0 .4em .5em; border-radius: 6px; background: linear-gradient(rgb(40 28 14 / .7), rgb(20 14 8 / .9)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a3a24; animation: fadeup .5s calc(var(--k) * .08s) both; transition: box-shadow .4s }
.gb-stand.busy { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #a58a4a, 0 0 18px rgb(255 209 0 / .25) }
.gb-roof { height: 1.1em; margin: 0 -.4em; background: repeating-linear-gradient(90deg, #8a2a1e 0 1.2em, #e8dcc0 1.2em 2.4em); border-radius: 6px 6px 0 0; box-shadow: inset 0 -4px 6px rgb(0 0 0 / .5) }
.gb-stand:nth-child(2n) .gb-roof { background: repeating-linear-gradient(90deg, #1e4a8a 0 1.2em, #e8dcc0 1.2em 2.4em) } .gb-stand:nth-child(3n) .gb-roof { background: repeating-linear-gradient(90deg, #2a6a2a 0 1.2em, #e8dcc0 1.2em 2.4em) }
.gb-sign { display: flex; align-items: center; justify-content: center; gap: .4em; padding: .3em; background: url('/assets/ui/frames/fv-plaque.webp') center / 100% 100% no-repeat, #4e331a; border-radius: 4px; font: 400 1em var(--ra-font-display); color: #f3dfae; text-shadow: 0 1px 0 #000 } .gb-sign .wi { height: 1.5em }
.gb-guests { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: .4em; min-height: 6em }
.gb-guest { display: grid; justify-items: center; gap: .15em; animation: guestin .5s cubic-bezier(.2,1.4,.4,1) both } @keyframes guestin { from { opacity: 0; transform: translateY(12px) scale(.6) } }
.gb-guest .pu-por.sm { width: 3.2em; height: 3.2em } .gb-guest span { font: 600 .72em var(--ra-font-ui); color: #fff; text-shadow: 0 1px 2px #000 }
.gb-feed { display: grid; gap: .25em; min-height: 6em; padding: .5em .8em; border-radius: 6px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(110 84 51 / .5) }
.gb-fl { font: 500 .95em var(--ra-font-ui); color: #e8dcc0; animation: cwin .35s ease-out } .gb-fl.win { color: #5fdc5a } .gb-fl.lose { color: #ff9a8a } .gb-fl.jackpot { color: #ffd100; font-weight: 700; text-shadow: 0 0 12px rgb(255 209 0 / .7) } .gb-fl.loan, .gb-fl.pay { color: #8fd0ff }
.gb-bilanz { display: grid; gap: .4em; max-width: 30em; margin: 0 auto }
.gb-bl { display: grid; grid-template-columns: 1fr auto; gap: .2em .8em; align-items: center; padding: .5em .9em; border-radius: 6px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px #6e5433; animation: vdin .5s calc(var(--k) * .12s) both } .gb-bl b { font: 400 1.3em var(--ra-font-display); color: #e8dcc0 } .gb-bl.win b { color: #5fdc5a } .gb-bl.lose b { color: #ff6a5a } .gb-bl small { grid-column: 1 / -1; font: 500 .8em var(--ra-font-ui); color: #cfc0a2 }
/* Ton-Freigabe: der Browser spielt erst nach einem Klick – groß und unübersehbar, im Stil eines roten Spielknopfs */
.screen .soundgate { top: auto; bottom: 18vh; padding: .7em 1.6em; font: 400 1.5em var(--ra-font-display); color: #ffe8b0; background: url('/assets/ui/frames/fv-btn-red.webp') center / 100% 100%, linear-gradient(#a3221a, #4a0c08); border: 0; border-radius: 6px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #c9a24a, 0 0 30px rgb(255 209 0 / .5), 0 10px 30px #000; text-shadow: 0 1px 1px #000; animation: pulse 1.2s ease-in-out infinite alternate; cursor: pointer }

/* Antworten: gewählt = warmweiße Umrandung (Handy und Bildschirm), Auflösung grün/rot */
.ra-ans.mine { outline: 3px solid #f3e6c8; outline-offset: -3px; box-shadow: 0 8px 18px rgb(0 0 0 / .55), 0 0 18px rgb(243 230 200 / .35) !important }
.ra-ans.mine.ok { outline-color: #5fdc5a } .ra-ans.mine.no { outline-color: #ff5a4a }
/* Goblin-Markt: eigener Stand auf dem persönlichen Bildschirm */
.gb-mine { display: grid; gap: .5em; padding: .7em .9em; border-radius: 6px; background: linear-gradient(#2c2115, #17110b); box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #a58a4a, 0 0 18px rgb(255 209 0 / .2) }
.gb-mine.idle { color: #cfc0a2; font: 500 .95em var(--ra-font-ui) } .gb-mine.idle b { font: 400 1.2em var(--ra-font-display); color: var(--fv-yellow) }
.gb-mh { display: flex; align-items: center; gap: .5em; font: 400 1.2em var(--ra-font-display); color: var(--fv-yellow) } .gb-mh small { margin-left: auto; font: 600 .7em var(--ra-font-ui); color: #cfc0a2 } .gb-mh .wi { height: 1.4em }
.gb-mine .gb-machine { justify-self: center } .gb-mine .gb-lbl { text-align: center; font: 500 1em var(--ra-font-ui); color: #e8dcc0 } .gb-mine .gb-lbl.win { color: #5fdc5a } .gb-mine .gb-lbl.lose { color: #ff6a5a }
.gb-mine .gb-res { display: grid; justify-items: center; gap: .2em; text-align: center; padding: .5em } .gb-mine .gb-res b { font: 400 1.5em var(--ra-font-display); color: #e8dcc0 } .gb-mine .gb-res.win b { color: #5fdc5a } .gb-mine .gb-res.lose b { color: #ff6a5a } .gb-mine .gb-res span { font: 500 .95em var(--ra-font-ui) } .gb-mine .gb-res small { color: #cfc0a2 }
.gb-mine .gb-q.small { font-size: 1.1em } .gb-bag { font: 500 .95em var(--ra-font-ui); color: #e8dcc0 }
.gb-stand { animation: none } .gb-guest { animation: guestin .4s cubic-bezier(.2,1.4,.4,1) both }
/* Charakterauswahl: Portrait kleiner und weicher (Quelle ist 256 px), Knopf immer im Bild */
.csel-main { grid-template-rows: minmax(0, 1fr) auto; padding: 7vh 2vw 3vh; overflow: hidden }
.cs-stage { width: min(15vw, 24vh); margin-bottom: .6em } .cs-face { filter: contrast(1.04) saturate(1.05); box-shadow: 0 16px 50px #000, inset 0 0 40px rgb(0 0 0 / .3) }
.cs-name { font-size: 2.4em } .csel-enter { margin-top: .8em } .csel-enter .glue-red.big { margin-top: 0 }
/* Einlass: Feuerpartikel aus dem Portal */
.gp-embers { position: absolute; left: 10%; right: 10%; bottom: 0; height: 60%; pointer-events: none; overflow: visible }
.gp-embers i { position: absolute; left: calc(var(--x) * 1%); bottom: 0; width: .35em; height: .35em; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #ff9a30 50%, transparent 75%); box-shadow: 0 0 8px #ff8a30; opacity: 0; animation: ember calc(4s + var(--d) * 1s) calc(var(--d) * -1.7s) linear infinite }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(.6) } 10% { opacity: 1 } 100% { opacity: 0; transform: translate(calc(var(--sx) * 1em), -55vh) scale(.2) } }
.glue-in { width: 18em; height: 1.9em; font-size: 1em } .glue-lab { font-family: var(--ra-font-epic); font-size: 1.25em; letter-spacing: .04em } .glue-form .glue-red { min-width: 8.5em; height: 2.1em; font-size: 1.1em }
/* Questtafel 2.1: unregelmäßig angeschlagene Zettel, handschriftliche Überschrift, Schilder an Ketten */
.qt-board { padding: 2.4em 1.8em 1.2em; background: radial-gradient(ellipse at 50% 0%, rgb(255 200 120 / .12), transparent 55%), url('/assets/ui/frames/fv-wood.webp') center / auto 58px repeat, #5e3d20 }
.qt-grid { gap: clamp(14px, 1.6vw, 60px) } .qt-col { gap: clamp(6px, .7vw, 26px) }
.qt-ticket { min-height: 5em; padding: .6em 1em .6em .7em; grid-template-columns: auto 1fr auto; column-gap: .7em }
.qt-ticket .ra-seal { width: 3em; grid-row: span 2; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)) }
.qt-rar { display: grid; line-height: 1.1 } .qt-rar em { font: 400 1.5em/1 var(--ra-font-epic); color: #3a2812; text-transform: none; letter-spacing: 0; font-style: normal; text-shadow: 0 1px 0 rgb(255 255 255 / .35) }
.qt-rew { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 1.05em }
.qt-ticket.v0 { --rot: -1.6deg; width: 97%; justify-self: start } .qt-ticket.v1 { --rot: 1.2deg; width: 100%; margin-top: .2em } .qt-ticket.v2 { --rot: -.6deg; width: 95%; justify-self: end } .qt-ticket.v3 { --rot: 2deg; width: 98%; justify-self: center; margin-top: -.15em } .qt-ticket.v4 { --rot: -2.2deg; width: 96%; justify-self: start } .qt-ticket.v5 { --rot: .8deg; width: 99%; justify-self: end }
.qt-ticket.st-done { --rot: 4deg }
.qt-sign { padding-top: 1.4em } .qt-rope { height: 1.5em; width: 4px; background: repeating-linear-gradient(0deg, #2a2a2a 0 3px, #5a5a5a 3px 6px); box-shadow: 0 0 0 1px #000 }
.qt-cat { font-size: 1.3em; padding: .5em .8em }
.qt-rar em { font-size: 1.2em; white-space: nowrap } .qt-ticket { min-height: 5.2em }

/* ============ GM-Modus (27.09.2026): blau wie ein Game Master, dauerhaft unten in der Spielleiste ============ */
.gm-banner { position: fixed; left: 50%; bottom: 10px; translate: -50% 0; z-index: 9999; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 10px; border-radius: 99px; pointer-events: none; font: 700 14px var(--font-ui, 'Alegreya Sans', sans-serif); color: #fff; background: linear-gradient(#1f5fa8, #0a2a52); box-shadow: 0 0 0 1px #000, 0 0 0 2px #58b4ff, 0 0 22px rgb(60 150 255 / .55); animation: gmpulse 2.4s ease-in-out infinite }
.gm-banner i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d8eeff, #58b4ff 55%, #0a2a52); box-shadow: 0 0 8px #58b4ff }
.gm-banner b { letter-spacing: .12em; text-transform: uppercase } .gm-banner span { font-weight: 500; opacity: .9 }
@keyframes gmpulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 2px #a8d8ff, 0 0 34px rgb(60 150 255 / .8) } }
body[data-role="play"] .gm-banner { position: sticky; top: 0; bottom: auto; translate: none; left: auto; margin: 0 auto 4px; width: max-content; max-width: 96vw; padding: 3px 12px 3px 6px; font-size: 11px }
body[data-role="play"] .gm-banner span { display: none } body[data-role="play"] .gm-banner i { width: 12px; height: 12px }
/* Regie: Standard-Ebene und GM-Ebene */
.rg-gm { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-radius: 10px; background: linear-gradient(90deg, rgb(40 32 22 / .95), rgb(20 16 12 / .95)); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .35) }
.rg-gm div { display: grid; gap: 2px } .rg-gm b { font-size: 16px; color: var(--fv-yellow, #ffd100) } .rg-gm span { font-size: 13px; color: #b9a787 }
.rg-gm.on { background: linear-gradient(90deg, rgb(120 30 16 / .95), rgb(50 12 8 / .95)); box-shadow: inset 0 0 0 2px #ff9a5a, 0 0 24px rgb(255 90 40 / .35) } .rg-gm.on b { color: #fff } .rg-gm.on span { color: #ffd8c0 }
.rg.gm-on .wf.gm { box-shadow: inset 0 0 0 2px #ff7a4a !important } .wf.gm .wf-head small { font-size: 12px; font-weight: 500; opacity: .7; margin-left: 8px }
.rb.big { font-size: 1.15em; padding: .55em 1.4em }
.rg-flow { display: grid; gap: 4px } .rg-st { padding: 4px 10px; border-radius: 6px; color: #b9a787; background: rgb(0 0 0 / .25) } .rg-st.on { color: #1a1206; background: #e8c46a; font-weight: 700 } .rg-st.done { opacity: .45; text-decoration: line-through }
.bl-line .blizz { height: 1em; max-height: 16px; width: auto; margin-right: .25em; vertical-align: -.12em } .bl-line.gm, .bl-line.gm .bl-nm { color: #00b4ff }