/* ============================================================================================
   FOREVER-SKIN v2 – nach der Blaupause (Screenshots des Forever-Clients, 25.09.2026).
   Bausatz: public/ui/fx/ (aus den Original-Texturen geschnitten, Metall warm getönt wie im Client).
   Wird NACH fv.css (Bildschirm) bzw. ph.css (Handy) geladen und übersteuert nur Optik.
   Eine Fensterfamilie: warmer Metallrahmen mit flacher Kopfleiste, Goldtitel, Portrait-Medaillon.
   ============================================================================================ */
:root {
  --fx-body: #171310; --fx-raise: #241c16; --fx-edge: #66503a; --fx-edge-hi: #a98a58;
  --fx-gold: #e5c36b; --fx-yellow: #ffd100; --fx-text: #eee4ce; --fx-muted: #bcaf94; --fx-ink: #302211; --fx-tip: #10101c;
  --fx-win: url('/assets/ui/fx/win-9.png'); --fx-rock: url('/assets/ui/fx/bg-rock.webp');
  --fx-red: url('/assets/ui/fx/btn-red-up.png'); --fx-red-down: url('/assets/ui/fx/btn-red-down.png'); --fx-dark: url('/assets/ui/fx/btn-red-dark.png');
  --fx-parch: url('/assets/ui/fx/parchment-wide.webp');
  --fx-paper: url('/assets/ui/fx/parchment-wide.webp') center / cover, #e6cf9e; --fx-paper-sh: inset 0 0 0 1px rgb(90 60 20 / .55), inset 0 0 calc(2.6 * var(--fu)) rgb(120 72 24 / .5), 0 0 0 1px #000, 0 0 0 2px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); --fx-slot: url('/assets/ui/fx/aslot.png'); --fx-slot-gold: url('/assets/ui/fx/aslot-gold.png'); --fx-slot-dark: url('/assets/ui/fx/aslot-dark.png');
}


/* ============================================================================================
   GEOMETRIE nach Review v2: u = 1 vmin (1080p und 2560×1080: 10,8 px). Ultrawide = mehr Breite, gleiche Schrift.
   ============================================================================================ */
:root { --fu: 1vmin; --edge: calc(2 * var(--fu)); --gap: calc(2 * var(--fu)); --rail-w: calc(32 * var(--fu)); --footer-h: calc(8 * var(--fu)); --core-max: calc(138 * var(--fu)); --two-max: calc(172 * var(--fu)) }
@media (min-aspect-ratio: 21/10) { :root { --core-max: calc(154 * var(--fu)); --two-max: calc(172 * var(--fu)) } }

/* ---------- 1. Fenster (GameWindow): Kante schmal, Kopfzone 3,2u, Titel 2,4u ---------- */
.wf, .fv, .ra-panel, .fv.gb-main, .vo-right.wf, .csel-list, .lootwin, .tl-screen .wf, .th {
  border: calc(2.2 * var(--fu)) solid transparent; border-top-width: calc(3.2 * var(--fu)); border-image: var(--fx-win) 168 120 120 120 / calc(3.2 * var(--fu)) calc(2.2 * var(--fu)) stretch;
  background: linear-gradient(rgb(23 19 16 / .9), rgb(20 16 13 / .94)) padding-box, var(--fx-rock) center / calc(40 * var(--fu)) padding-box;
  box-shadow: 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); border-radius: 0; margin: 0 }
.wf-head, .fv-head, .csl-h { position: absolute; left: calc(-2.2 * var(--fu)); right: calc(-2.2 * var(--fu)); top: calc(-3.2 * var(--fu)); height: calc(3.2 * var(--fu)); margin: 0; padding: 0 calc(5 * var(--fu)); border: 0; background: none; box-shadow: none; display: grid; place-items: center;
  font: 400 calc(2.4 * var(--fu))/1 var(--ra-font-display); color: #e4c46e; text-shadow: 0 1px 0 #000, 0 0 6px rgb(0 0 0 / .8); z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wf-head::before, .fv-head::before, .csl-h span { display: none }
.wf-body { padding: calc(1 * var(--fu)) calc(.4 * var(--fu)) calc(.4 * var(--fu)); gap: calc(1.2 * var(--fu)) }
.wf-x { top: calc(-2.9 * var(--fu)); right: calc(-1.6 * var(--fu)); width: calc(2.6 * var(--fu)); height: calc(2.6 * var(--fu)); border-radius: 0; background: url('/assets/ui/fx/close-up.png') center / 100% 100% no-repeat; box-shadow: none; color: transparent; font-size: 0 }
.wf-x:active { background-image: url('/assets/ui/fx/close-down.png') }
.wf .medal { left: calc(-4.6 * var(--fu)); top: calc(-5.4 * var(--fu)); width: calc(6 * var(--fu)); height: calc(6 * var(--fu)); border: 0; border-radius: 50%; background: #0c0906; box-shadow: none; overflow: visible; z-index: 4 }
.wf .medal::after { content: ""; position: absolute; inset: -13%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none }
.wf .medal img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover }
.sec, .inset, .insp-sec, .fold, .rg-block { border: 1px solid #000; border-radius: 4px; background: #241d16; box-shadow: inset 0 0 0 1px rgb(120 96 62 / .3); padding: calc(1.2 * var(--fu)) calc(1.6 * var(--fu)) }
.sec > h3, .insp-h, .fold-h { color: #e4c46e; font: 400 calc(2.2 * var(--fu)) var(--ra-font-display); text-shadow: 0 1px 0 #000 }

/* ---------- 1b. Bühne: Außenabstand 2u, HUD rechts 32u, Statusstreifen 8u ---------- */
.ra-hud { min-height: calc(6 * var(--fu)); padding: calc(.8 * var(--fu)) var(--edge); box-sizing: border-box }
.ra-main { grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--gap); padding: 0 var(--edge) calc(1.5 * var(--fu)) }
.ra-full { padding: calc(1.5 * var(--fu)) var(--edge) calc(1.5 * var(--fu)) }
.ra-side { grid-template-rows: auto minmax(calc(25.7 * var(--fu)), 1fr); gap: calc(1.5 * var(--fu)) }
.ra-q { max-width: var(--core-max) }
.ra-stage > .ra-q, .bf2-console .ra-q { margin-left: auto; margin-right: auto }

/* ---------- 5. Raid-Unit-Frame 32u × 7,1u: Ring separat (rund), Platte aus CSS-Metall ---------- */
.party { background: none; border: 0; box-shadow: none; padding: 0; gap: calc(.7 * var(--fu)); border-radius: 0; font-size: calc(1.8 * var(--fu)) }
.pty-h { display: flex; justify-content: space-between; align-items: center; height: calc(3.4 * var(--fu)); padding: 0 calc(.6 * var(--fu)) 0 calc(1 * var(--fu)); margin: 0; font: 400 calc(2.4 * var(--fu)) var(--ra-font-display); color: #e4c46e; text-shadow: 0 1px 0 #000; border-bottom: 1px solid #59442c; box-shadow: 0 1px 0 rgb(167 138 85 / .35) }
.pty-n { font-size: calc(1.8 * var(--fu)); color: #c6b898 }
.pf { position: relative; display: block; height: calc(7.1 * var(--fu)); width: 100%; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; filter: none; overflow: visible; aspect-ratio: auto }
/* Platte: von 5,4u bis rechts, Metallkante + Nietenband oben */
.pf::before { content: ""; position: absolute; left: calc(5.4 * var(--fu)); right: 0; top: calc(.45 * var(--fu)); bottom: calc(.45 * var(--fu)); border-radius: 0 3px 3px 0; background: url('/assets/ui/fx/rail-top.png') top / auto calc(.9 * var(--fu)) repeat-x, linear-gradient(#221a14, #15100c 55%, #120e0a); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, inset 0 calc(.9 * var(--fu)) 0 rgb(0 0 0 / .25), 0 calc(.3 * var(--fu)) calc(.6 * var(--fu)) rgb(0 0 0 / .5) }
.pf-por { position: absolute; left: calc(.3 * var(--fu)); top: calc(.45 * var(--fu)); width: calc(6.2 * var(--fu)); height: calc(6.2 * var(--fu)); margin: 0; grid-row: auto; z-index: 1; aspect-ratio: auto }
.pf-por::after { content: ""; position: absolute; inset: -8%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none; z-index: 3 }
.pf-por .ico { width: 100%; height: 100%; border-radius: 50%; box-shadow: none; background: #0a0806; overflow: hidden }
.pf-por .ico img { border-radius: 50% }
.pf-por .ico.pf-face { position: absolute; inset: 0; z-index: 1 } .pf-por .ico.pf-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.04) }
.pf-por .ico.cls { position: absolute; right: -9%; top: -5%; width: calc(1.8 * var(--fu)); height: calc(1.8 * var(--fu)); z-index: 4; box-shadow: 0 0 0 1px #000, 0 0 0 1px #a78a55; background: #000 } .pf-por .pf-face + .ico.cls img { transform: none }
.pf-lv { left: -6%; right: auto; bottom: -5%; min-width: calc(1.7 * var(--fu)); height: calc(1.7 * var(--fu)); padding: 0 .2em; font: 400 calc(1.2 * var(--fu)) var(--ra-font-display); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2a2016, #0b0805); box-shadow: 0 0 0 1px #000, 0 0 0 1px #a78a55, 0 1px 3px #000; color: #f1d34b; display: grid; place-items: center; z-index: 4 }
.pf-main { position: absolute; inset: 0; display: block; gap: 0 }
.pf-name { position: absolute; left: calc(7.2 * var(--fu)); right: calc(.8 * var(--fu)); top: calc(.5 * var(--fu)); height: calc(2.1 * var(--fu)); display: flex; align-items: center; gap: .3em; font-size: calc(1.8 * var(--fu)); padding: 0; color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; overflow: hidden }
.pf.me .pf-name { color: #f1d34b } .pf-name .nm { font-size: 1em } .pf-name .fac { width: .85em; height: .85em }
.pf-name .wi.tiny, .pf-name .pf-sbuff, .pf-name .pf-sit { font-size: .75em }
.pf-xp, .pf-hp { position: absolute; left: calc(7.2 * var(--fu)); right: calc(.8 * var(--fu)); top: calc(2.85 * var(--fu)); height: calc(1.35 * var(--fu)); margin: 0; border-radius: 2px; background: #0c0a08; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(0 0 0 / .6) }
.pf-xp i { background: linear-gradient(#b477e0, #9a5bcf 55%, #6a3a9a) } .pf-hp i { background: linear-gradient(#6fd858, #4dbe37 55%, #2f8a24) !important }
.pf-hp span { font: 600 calc(1.05 * var(--fu))/1 var(--ra-font-ui); height: 100%; display: grid; place-items: center }
.pf-sub { position: absolute; left: calc(7.2 * var(--fu)); right: calc(11 * var(--fu)); top: calc(4.55 * var(--fu)); height: calc(1.9 * var(--fu)); margin: 0; padding: 0 .1em; display: flex; align-items: center; gap: .5em; font: 500 calc(1.45 * var(--fu)) var(--ra-font-ui); color: #f0e5cb; white-space: nowrap; overflow: hidden }
.pf-sub .pf-rk { color: #f1d34b } .pf-sub .pf-ep { color: #c6b898 } .pf-sub .mv { font-size: .9em }
.pf-state { position: absolute; right: calc(.8 * var(--fu)); top: calc(4.65 * var(--fu)); bottom: auto; height: calc(1.7 * var(--fu)); display: grid; place-items: center; font: 600 calc(1.35 * var(--fu)) var(--ra-font-ui); padding: 0 .5em; border-radius: 3px; z-index: 2; letter-spacing: .02em }
.pf-auras { right: calc(.8 * var(--fu)); top: calc(.5 * var(--fu)) } .pf-auras img { width: calc(1.7 * var(--fu)); height: calc(1.7 * var(--fu)) }
.pf-cast { left: calc(7.2 * var(--fu)); right: calc(.8 * var(--fu)); bottom: calc(.5 * var(--fu)); z-index: 3 }
.pf.st-pick, .pf.me, .pf.lead { box-shadow: none } .pf.me::before { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #a78a55, inset 0 calc(.9 * var(--fu)) 0 rgb(0 0 0 / .25), 0 0 calc(1 * var(--fu)) rgb(241 211 75 / .25) }
.pf.lead .pf-por .ico.pf-face { box-shadow: 0 0 calc(1.2 * var(--fu)) rgb(255 209 0 / .55) }
.pf.st-off, .pf.st-dead { filter: grayscale(.8) brightness(.6) }
.pf-tabard { display: none }


/* ============================================================================================
   BOSSKAMPF – eine zusammenhängende Encounter-Ansicht: links oben Zielrahmen + Wirkbereich als ein Block,
   rechts das Bossmotiv, darunter Frage und Antworten in derselben Spalte. Hintergrund örtlich abgedunkelt.
   ============================================================================================ */
.bf2 { display: block; position: relative; height: 100% }
.bf2-stage { position: absolute; inset: 0; border-radius: 3px; box-shadow: 0 0 0 1px #000 !important; overflow: hidden; animation: none !important }
.bf2 .ra-bossart img { object-position: 68% 12% }
.bf2 .ra-bossart::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(8 5 3 / .78) 0, rgb(8 5 3 / .55) calc(64 * var(--fu)), transparent calc(84 * var(--fu))),
  linear-gradient(180deg, rgb(0 0 0 / .25), transparent calc(6 * var(--fu)), transparent calc(30 * var(--fu)), rgb(10 6 4 / .82) calc(46 * var(--fu)), rgb(10 6 4 / .9)) }
.bf2.p2 .ra-bossart::after { background: linear-gradient(90deg, rgb(20 4 2 / .8) 0, rgb(20 4 2 / .55) calc(64 * var(--fu)), transparent calc(84 * var(--fu))), linear-gradient(180deg, rgb(0 0 0 / .25), transparent calc(6 * var(--fu)), transparent calc(30 * var(--fu)), rgb(24 4 2 / .85) calc(46 * var(--fu)), rgb(20 4 2 / .92)) }
.bf2-fullbg::after { background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .7)) }
.bf2-yell { position: absolute; left: calc(64 * var(--fu)); right: calc(2 * var(--fu)); top: calc(20 * var(--fu)); bottom: auto; transform: none; width: auto; text-align: left; font-size: calc(2 * var(--fu)); z-index: 2 }
/* Encounter-Spalte */
.bf2-enc { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(2 * var(--fu)); max-width: var(--core-max); margin: 0 auto; padding: calc(2 * var(--fu)) calc(2 * var(--fu)) calc(1.8 * var(--fu)); box-sizing: border-box; width: 100% }
.bf2-top { display: grid; grid-template-columns: calc(62 * var(--fu)) minmax(0, 1fr); align-items: start }
.bf2-hud { position: relative; width: calc(62 * var(--fu)); display: grid; gap: 0 }
/* Zielrahmen: Metallplatte mit Nietenband, Portrait im Ring rechts, Balken links */
.bf2-unit { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: none; height: calc(11.5 * var(--fu)); padding: 0; aspect-ratio: auto; display: block; background: none; border: 0; box-shadow: none; border-radius: 0; filter: none; font-size: calc(2 * var(--fu)); animation: none; z-index: 2 }
.bf2-unit::before { content: ""; position: absolute; left: 0; right: calc(8.6 * var(--fu)); top: calc(.7 * var(--fu)); bottom: 0; border-radius: 3px 0 0 0; background: url('/assets/ui/fx/rail-top.png') top / auto calc(1.1 * var(--fu)) repeat-x, linear-gradient(#221a14, #15100c 55%, #120e0a); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, inset 0 calc(1.1 * var(--fu)) 0 rgb(0 0 0 / .25) }
.bf2-unit .u-por { position: absolute; right: calc(.4 * var(--fu)); top: calc(1 * var(--fu)); width: calc(9.5 * var(--fu)); height: calc(9.5 * var(--fu)); aspect-ratio: auto; box-shadow: none; background: #0a0806; overflow: hidden; border-radius: 50%; z-index: 2 }
.bf2-unit .u-por::after { content: ""; position: absolute; inset: -8%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none; z-index: 3 }
.bf2-unit .u-por img:first-child, .bf2-unit .u-por .u-fb { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; border-radius: 50%; object-fit: cover; object-position: 50% 25% } .bf2-unit .u-drag { display: none }
.bf2-unit .u-main { position: absolute; inset: 0; display: block; gap: 0 }
.bf2-unit .u-name { position: absolute; left: calc(1.4 * var(--fu)); right: calc(10.5 * var(--fu)); top: calc(1.4 * var(--fu)); height: calc(2.6 * var(--fu)); display: flex; align-items: baseline; gap: .5em; font-size: calc(2.2 * var(--fu)); padding: 0; color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; white-space: nowrap; overflow: hidden }
.bf2-unit .u-kind { font: 600 calc(1.3 * var(--fu)) var(--ra-font-ui); letter-spacing: .1em; color: #e4c46e }
.bf2-unit .u-hp { position: absolute; left: calc(1.4 * var(--fu)); right: calc(10.5 * var(--fu)); top: calc(4.6 * var(--fu)); height: calc(2.2 * var(--fu)); margin: 0; border-radius: 2px; box-shadow: 0 0 0 1px #000; background: #1a0808 }
.bf2-unit .u-hp i { background: linear-gradient(#e0483c, #c9362c 55%, #8a1f18) } .bf2-unit .u-hp span { font: 700 calc(1.5 * var(--fu))/1 var(--ra-font-ui); height: 100%; display: grid; place-items: center }
.bf2-unit .u-sub { position: absolute; left: calc(1.4 * var(--fu)); right: calc(10.5 * var(--fu)); top: calc(7.4 * var(--fu)); height: calc(2 * var(--fu)); display: flex; align-items: center; padding: 0; font: 500 calc(1.6 * var(--fu)) var(--ra-font-ui); color: #c6b898 }
/* Wirkbereich hängt direkt unter der Platte (gleiche Breite, eine Fassung) */
.bf2-cast { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: none; min-height: calc(7 * var(--fu)); box-sizing: border-box; margin: 0; padding: calc(.8 * var(--fu)) calc(1.4 * var(--fu)) calc(.9 * var(--fu)); display: grid; gap: calc(.4 * var(--fu)); background: rgb(23 19 16 / .96); border-radius: 0 0 3px 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, inset 0 1px 0 #000, 0 calc(.6 * var(--fu)) calc(1.6 * var(--fu)) rgb(0 0 0 / .6); animation: fadeup .4s var(--ra-ease) both }
.bf2-cast .cb-who { font: 600 calc(1.4 * var(--fu)) var(--ra-font-ui); letter-spacing: .08em; text-transform: uppercase; color: #c6b898 } .bf2-cast .cb-who b { color: #f0e5cb }
.bf2-cast .cb-row { display: flex; align-items: center; gap: calc(.8 * var(--fu)) } .bf2-cast .cb-row > img { width: calc(3 * var(--fu)); height: calc(3 * var(--fu)); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 1px #59442c }
.bf2-cast .cb-bar { height: calc(2.2 * var(--fu)); border-radius: 2px; box-shadow: 0 0 0 1px #000 } .bf2-cast .cb-bar span { font-size: calc(1.7 * var(--fu)); line-height: calc(2.2 * var(--fu)) }
.bf2-cast .cb-info, .bf2-cast .cb-d, .bf2-cast small { font-size: calc(2 * var(--fu)) !important; color: #f0e5cb } .bf2-cast .cb-info { display: flex; flex-wrap: wrap; gap: .2em calc(1 * var(--fu)); align-items: center }
/* Frage + Antworten unten in derselben Spalte */
.bf2-console { position: static; left: auto; right: auto; bottom: auto; max-height: none; min-height: 0; overflow: visible; display: grid; align-content: end; z-index: auto }
.bf2-console .ra-q { max-width: none; width: 100%; margin: 0 }
.bf2-console > .wait { text-align: center; font-size: calc(2.6 * var(--fu)); color: #f0e5cb; text-shadow: 0 2px 4px #000; padding: calc(4 * var(--fu)) 0 }
.bf2-console .ra-qpaper, .bf2-console .ra-q.dark .ra-qpaper { padding: calc(1.4 * var(--fu)) calc(2.4 * var(--fu)) calc(1.2 * var(--fu)) !important; min-height: calc(17 * var(--fu)); border: 0 !important; border-image: none !important; background: var(--fx-paper) !important; box-shadow: var(--fx-paper-sh) !important; color: #2b2016 !important }
.bf2-console .ra-q.dark .ra-qtext, .bf2-console .ra-q.dark .ra-qfoot, .bf2-console .ra-q.dark .ra-qhead { color: #1e140b !important; text-shadow: none !important }
.bf2-console .ra-q.dark .ra-qtext { color: #1e140b; text-shadow: none; text-align: left } .bf2-console .ra-qhead { justify-content: flex-start } .bf2-console .ra-qfoot { text-align: left }
.bf2-console .ra-q.dark .ra-cat { color: #5a4020 } .bf2-console .ra-q.dark .ra-qfoot, .bf2-console .ra-q.dark .ra-qfoot .mute { color: #6b5230 }
.bf2-console .ra-qtext { font-size: calc(3.2 * var(--fu)) !important }
.bf2-console .ra-ans { font-size: calc(2.5 * var(--fu)) !important; min-height: calc(10.5 * var(--fu)) }
.bf2-result { width: min(100%, calc(80 * var(--fu))); margin: 0 auto; border: 0; border-image: none; background: rgb(23 19 16 / .96); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); border-radius: 3px; padding: calc(2 * var(--fu)) }
.bf2-result .big { font-family: var(--ra-font-display); font-size: calc(5 * var(--fu)) } .bf2-result .lead { font-size: calc(2.2 * var(--fu)) }
.bf2-awards div { background: #241d16; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(120 96 62 / .3); font-size: calc(1.9 * var(--fu)) }
/* ---------- 6. Frage & Antworten: echtes Pergament (gekachelt, nicht gestreckt), Antworten als Metallplatten mit Buchstaben-Slot ---------- */
.ra-qpaper, .ra-q.dark .ra-qpaper { border: 0 !important; border-image: none !important; border-radius: 3px; color: #2b2016 !important; min-height: calc(18 * var(--fu)); box-sizing: border-box; padding: calc(1.6 * var(--fu)) calc(3 * var(--fu)) calc(1.4 * var(--fu)) !important; display: grid; align-content: center;
  background: var(--fx-paper) !important; box-shadow: var(--fx-paper-sh) !important }
.ra-qtext, .ra-q.dark .ra-qtext, .bf2-console .ra-qtext { color: #1e140b; font-size: calc(3.2 * var(--fu)); line-height: 1.18; text-shadow: none }
.ra-qhead { margin-bottom: calc(.8 * var(--fu)); padding-bottom: calc(.6 * var(--fu)); border-bottom: 1px solid rgb(90 60 20 / .3) } .ra-seal { width: calc(4 * var(--fu)); height: calc(4 * var(--fu)) }
.ra-cat, .ra-rar, .ra-tag { font-size: calc(2 * var(--fu)) } .ra-qfoot { font-size: calc(1.6 * var(--fu)) }
.ra-q.dark .ra-cat { color: #5a4020 } .ra-q.dark .ra-rar { color: var(--rc) } .ra-q.dark .ra-qfoot, .ra-q.dark .ra-qfoot .mute { color: #6b5230 }
.ra-answers { gap: calc(1.5 * var(--fu)) !important; row-gap: calc(1.5 * var(--fu)) !important; margin-top: 0 }
.ra-ans, .opt {
  position: relative; min-height: calc(10.5 * var(--fu)); box-sizing: border-box; padding: calc(1 * var(--fu)) calc(1.5 * var(--fu)) !important; font-size: calc(2.5 * var(--fu)); line-height: 1.22;
  display: grid !important; grid-template-columns: calc(5 * var(--fu)) minmax(0, 1fr) !important; column-gap: calc(1.4 * var(--fu)); row-gap: calc(.6 * var(--fu)); align-items: center;
  border: 0 !important; border-image: none !important; border-radius: 3px !important;
  background: linear-gradient(#241d16, #171310 60%, #14100d) !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, inset 0 2px 0 rgb(167 138 85 / .18), 0 calc(.5 * var(--fu)) calc(1.2 * var(--fu)) rgb(0 0 0 / .5) !important; color: #f0e5cb }
.opt { min-height: calc(10 * var(--fu)) }
.ra-ans .ra-at, .opt .t { font-family: var(--ra-font-display); text-shadow: 0 1px 0 #000; padding: 0; border: 0; margin: 0 }
.ra-ans::after, .opt::after { display: none }
.ra-l, .opt .l { width: calc(5 * var(--fu)) !important; height: calc(5 * var(--fu)) !important; font: 400 calc(2.4 * var(--fu))/1 var(--ra-font-display) !important; border-radius: 6px !important; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ac) 22%, #140f0a), #0a0806 75%) !important; color: var(--ac, #e4c46e) !important; text-shadow: 0 1px 1px #000, 0 0 calc(1 * var(--fu)) color-mix(in srgb, var(--ac) 60%, transparent) !important; box-shadow: none !important; flex: none; align-self: center; margin: 0 !important }
.ra-l::after, .opt .l::after { inset: -9% !important; background: var(--fx-slot-dark) center / 100% 100% no-repeat !important }
.ra-ans:nth-child(1), .opt:nth-child(1) { --ac: #d9953b } .ra-ans:nth-child(2), .opt:nth-child(2) { --ac: #5eadde } .ra-ans:nth-child(3), .opt:nth-child(3) { --ac: #73ba69 } .ra-ans:nth-child(4), .opt:nth-child(4) { --ac: #b08ada }
.ra-ans.mine { outline: 2px solid #f5ebd3; outline-offset: -2px }
.ra-q.rv .ra-ans.ok, .opt.ok { background: linear-gradient(#233a1c, #142611 60%, #0f1c0d) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #55cb68, inset 0 0 0 1px rgb(85 203 104 / .5), 0 calc(.5 * var(--fu)) calc(1.4 * var(--fu)) rgb(0 0 0 / .5) !important }
.ra-q.rv .ra-ans.ok .ra-l, .opt.ok .l { --ac: #55cb68 }
.ra-q.rv .ra-ans.ok::before, .opt.ok::before { display: none }
.ra-q.rv .ra-ans.no { filter: saturate(.3) brightness(.55) !important } .ra-q.rv .ra-ans.no .ra-picks { filter: none }
/* Namensschilder: eigene Zeile IM Plättchen, unter dem Text; Stempel oben rechts */
.ra-picks { position: static !important; grid-column: 2; display: flex; flex-wrap: wrap !important; gap: calc(.4 * var(--fu)); justify-content: flex-start; max-width: none !important; margin: 0; z-index: auto }
.ra-picks:empty { display: none }
.ra-picks .pk { font: 600 calc(1.45 * var(--fu))/1.1 var(--ra-font-ui) !important; padding: .25em .7em !important; border-radius: 3px; color: #0d0a06; box-shadow: 0 0 0 1px #000 !important; animation: none }
.ra-stamp { position: absolute; right: calc(1 * var(--fu)); top: calc(-1.2 * var(--fu)); font-size: calc(1.6 * var(--fu)); transform: rotate(-4deg) }
.ra-ctx { font-size: calc(2 * var(--fu)); background: rgb(23 19 16 / .96); border-left: 2px solid #e4c46e; box-shadow: 0 0 0 1px #000 } .ra-ctx small, .ra-ctx .src { font-size: calc(1.6 * var(--fu)) }

/* ---------- 7. Kopfzeile, Statusstreifen 8u (Wyvern 10,5u, Schutzzone 12u), Chat ---------- */
.ra-hud { background: linear-gradient(rgb(0 0 0 / .8), rgb(0 0 0 / .2)); } .hud-st { color: #e4c46e; font-size: calc(2.4 * var(--fu)) } .hud-act { color: #c6b898; font-size: calc(1.6 * var(--fu)) }
.ra-dock { position: relative; height: var(--footer-h); min-height: 0; max-height: none; box-sizing: border-box; padding: 0 calc(12 * var(--fu)) !important; gap: calc(2 * var(--fu)); border-top: 0; border-radius: 0; overflow: visible;
  background: url('/assets/ui/fx/rail-top.png') top / auto calc(.6 * var(--fu)) repeat-x, url('/assets/ui/fx/rail-bottom.png') bottom / auto calc(.5 * var(--fu)) repeat-x, linear-gradient(rgb(34 26 19 / .97), rgb(18 13 10 / .98)), var(--fx-rock) center / calc(40 * var(--fu));
  box-shadow: 0 calc(-.5 * var(--fu)) calc(1.5 * var(--fu)) rgb(0 0 0 / .55) }
.ra-dock::before, .ra-dock::after { content: ""; position: absolute; bottom: calc(.15 * var(--fu)); width: calc(10.5 * var(--fu)); height: calc(10.5 * var(--fu)); background: url('/assets/ui/fx/wyvern-l.png') center bottom / contain no-repeat; pointer-events: none; z-index: 4; filter: drop-shadow(.1em .3em .4em rgb(0 0 0 / .85)) drop-shadow(0 0 1.2em rgb(0 0 0 / .5)) }
.ra-dock::before { left: calc(.5 * var(--fu)) } .ra-dock::after { right: calc(.5 * var(--fu)); background-image: url('/assets/ui/fx/wyvern-r.png'); filter: drop-shadow(-.1em .3em .4em rgb(0 0 0 / .85)) drop-shadow(0 0 1.2em rgb(0 0 0 / .5)) }
.ra-dock > * { position: relative; z-index: 5 }
.narr { max-width: calc(66 * var(--fu)); max-height: none; gap: calc(1 * var(--fu)); padding-right: calc(1.5 * var(--fu)); border-right-color: #59442c }
.narr-pic { width: calc(5 * var(--fu)) !important; height: calc(5 * var(--fu)) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #a78a55 }
.narr-txt { font-size: calc(1.9 * var(--fu)); line-height: 1.3; -webkit-line-clamp: 2 } .narr-t { font-size: calc(1.7 * var(--fu)) }
.dk-main { font-size: calc(2.1 * var(--fu)) } .dk-main .mute, .dk-side .mute { font-size: calc(1.7 * var(--fu)); color: #c6b898 }
.dk-side { gap: calc(1 * var(--fu)) } .dk-side .cnt { font-size: calc(2 * var(--fu)); color: #f1d34b }
.pips { gap: calc(.4 * var(--fu)) } .pips i { width: calc(.8 * var(--fu)); height: calc(.8 * var(--fu)) }
.ra-main { padding-bottom: calc(1.5 * var(--fu)) }
.chatwin { border: 0; border-image: none; background: linear-gradient(rgb(0 0 0 / .2), rgb(0 0 0 / .6)); box-shadow: inset 0 0 0 1px rgb(89 68 44 / .5); border-radius: 4px; padding-top: 0; font-size: calc(1.9 * var(--fu)) }
.cw-tabs { display: flex; align-items: end; gap: 2px; padding: 0 calc(.5 * var(--fu)); margin-bottom: 0; border: 0; background: none }
.cw-tabs span { font-size: calc(1.8 * var(--fu)); padding: .25em 1em .3em }
.cw-log { padding: calc(.5 * var(--fu)) calc(.8 * var(--fu)); font-size: calc(1.9 * var(--fu)); line-height: 1.3 } .cw-input, .cw-in { border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(150 120 80 / .4); background: rgb(0 0 0 / .45); border-radius: 3px; font-size: calc(1.6 * var(--fu)) }
.cw-l.sys { color: #e4c46e }
.bl-chat, .bl-big { border: 0; border-image: none; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .35) }

/* ---------- 2. Knöpfe ---------- */
.pbig, .glue-red, .btn.primary, .rb.primary, .gate-btn, button.pbig, .cd-tabs .on, .csel-enter {
  border: 13px solid transparent !important; border-image: var(--fx-red) 144 fill / 13px stretch !important; background: none !important; border-radius: 0 !important;
  color: var(--fx-yellow) !important; text-shadow: 0 1px 1px #000, 0 0 6px rgb(0 0 0 / .6); box-shadow: 0 5px 12px rgb(0 0 0 / .5) !important; font-family: var(--ra-font-display) !important; letter-spacing: .01em }
.pbig:active, .glue-red:active, button.pbig:active, .csel-enter:active { border-image: var(--fx-red-down) 144 fill / 13px stretch !important; transform: translateY(1px) }
.pbig.alt, .pbig[disabled], .pb, .rb, .hb, .glue-btn, .pb.sm, .so-opt.pb, .cd-tabs button, .rb.alt {
  border: 11px solid transparent !important; border-image: var(--fx-dark) 144 fill / 11px stretch !important; background: none !important; border-radius: 0 !important; box-shadow: 0 3px 8px rgb(0 0 0 / .45) !important; color: var(--fx-text) }
.pb:active, .rb:active { border-image: var(--fx-red-down) 144 fill / 11px stretch !important }
.pbig[disabled] { opacity: .55 } .pbig small { color: #f0d6a0 }
.rb { padding: .1em .8em; min-height: 2.1em; font-family: var(--ra-font-display) }
.rb.on { border-image: var(--fx-red) 144 fill / 11px stretch !important; color: var(--fx-yellow) }
.glue-btn { width: 10em; height: 2.4em; color: var(--fx-text) }

/* ---------- 3. Slots & Icons (Aktionsleisten-Fassung, abgerundet) ---------- */
.ab { border-radius: 8px } .ab::after, .wi.big::after { background-image: var(--fx-slot) !important }
.ab img, .wi.big img { border-radius: 7px }
.ab.on::after, .ab.sel::after { background-image: var(--fx-slot-gold) !important }
.ra-l, .opt .l, .pa .lt { border-radius: 6px; background: #100c09; color: var(--ac, var(--fx-gold)); font-weight: 400; box-shadow: none; width: 1.55em; height: 1.55em; font-size: .95em }
.ra-l::after, .opt .l::after, .pa .lt::after { inset: -9%; background-image: var(--fx-slot-dark) }
.tn::after, .cd-slot::after { background-image: var(--fx-slot) } .tn.on::after { background-image: var(--fx-slot-gold); filter: none } .tn.lock::after { filter: brightness(.6) }
.tn img { border-radius: 8px }
.cd-slot.empty { background: url('/assets/ui/fx/slot-empty.png') center / 100% 100% no-repeat } .cd-slot.empty::after { opacity: 1 }

/* ---------- 4. Reiter (Tabs) ---------- */
.cw-tabs span, .chat-tabs span, .cd-tabs button, .ptabs-sub button {
  border: 0 !important; border-image: none !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  padding: .3em 1.1em .35em; margin: 0 -2px 0 0; font: 400 .95em var(--ra-font-display); color: var(--fx-muted); text-shadow: 0 1px 0 #000; position: relative; z-index: 0 }
.cw-tabs span::before, .chat-tabs span::before, .cd-tabs button::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 12px solid transparent; border-width: 0 16px 6px 16px; border-image: url('/assets/ui/fx/tab-off.png') 0 148 24 148 fill / 0 16px 6px 16px stretch }
.cw-tabs span.on::before, .chat-tabs span.on::before, .cd-tabs button.on::before, .chatwin[data-tab="all"] .cw-tabs [data-cw="all"]::before, .chatwin[data-tab="log"] .cw-tabs [data-cw="log"]::before { border-image-source: url('/assets/ui/fx/tab-on.png'); border-image-slice: 0 148 24 148 fill }
.cw-tabs span.on, .chat-tabs span.on, .cd-tabs button.on, .chatwin[data-tab="all"] .cw-tabs [data-cw="all"], .chatwin[data-tab="log"] .cw-tabs [data-cw="log"] { color: var(--fx-yellow) }
.cd-tabs .on { border-image: none !important; color: var(--fx-yellow) !important }

/* ---------- 8. Einlass & Charakterauswahl (Glue) ---------- */
.glue-form { width: 25em; aspect-ratio: 399 / 327; padding: 0; gap: 0; display: block; top: 40%; background: url('/assets/ui/fx/login-box.png') center / 100% 100% no-repeat; filter: drop-shadow(0 20px 50px #000) }
.glue-form .glue-lab { position: absolute; left: 0; right: 0; text-align: center; font-size: 1.1em; color: var(--fx-yellow) } .glue-form .glue-lab:nth-of-type(1) { top: 22% } .glue-form .glue-lab:nth-of-type(2) { top: 48.5% }
.glue-form .glue-in { position: absolute; left: 8.5%; width: 83%; height: 9.5%; background: none; box-shadow: none; font-size: 1.15em; color: #fff } .glue-form .glue-in:focus { box-shadow: 0 0 0 1px #ffd100 inset } .glue-form #sl-n { top: 32% } .glue-form #sl-p { top: 56.5% }
.glue-form .glue-red { position: absolute; left: 50%; top: 84%; transform: translateX(-50%); margin: 0; min-width: 9em; height: 2.4em; font-size: 1.15em }
.glue-form .gl-err { position: absolute; left: 0; right: 0; top: 70%; text-align: center } .glue-form .glue-hint { position: absolute; left: 0; right: 0; top: 104% }
.csl-row { border: 12px solid transparent; border-image: url('/assets/ui/fx/csel-row-dark.png') 160 fill / 12px stretch; background: none; box-shadow: none; border-radius: 0; margin: -5px 0 }
.csl-row.me { border-image: url('/assets/ui/fx/csel-row-gold.png') 160 fill / 12px stretch } .csl-row.me b { color: #1a1206; text-shadow: 0 1px 0 rgb(255 255 255 / .3) } .csl-row.me span { color: #3a2a10 }
.csl-row b { color: var(--fx-yellow) }
.csel-list { padding: .8em .6em; overflow: visible }
.cs-stage .cs-ring { display: none } .cs-stage::after { content: ""; position: absolute; inset: -2%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none; filter: drop-shadow(0 0 12px rgb(0 0 0 / .6)) }
.cs-name { color: var(--fx-yellow) }

/* ---------- 9. Portraits (Handy & Karten): Ring aus dem Client ---------- */
.pu-por { box-shadow: none } .pu-por::before { content: ""; position: absolute; inset: -9%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none; z-index: 2 }
.pu-por .pu-face { border-radius: 50%; box-shadow: 0 0 0 2px #000 }
.cd-face { box-shadow: 0 16px 40px #000 } .cd-model::after { content: ""; position: absolute; left: 50%; top: 50%; width: 98%; max-width: 274px; aspect-ratio: 1; transform: translate(-50%, -50%); background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none }
.fr-por { box-shadow: 0 6px 16px #000 } .fr-por::after { content: ""; position: absolute; inset: -9%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none }

/* ---------- 10. Handy ---------- */
.ptabs { background: linear-gradient(#1e1712, #0f0b08); box-shadow: inset 0 1px 0 rgb(169 138 88 / .6), inset 0 2px 0 rgb(0 0 0 / .6) }
.fan-items button { border: 11px solid transparent; border-image: var(--fx-dark) 144 fill / 11px stretch; background: none; border-radius: 0; box-shadow: 0 8px 18px rgb(0 0 0 / .7) }
.fan-items button.on { border-image: var(--fx-red) 144 fill / 11px stretch; color: var(--fx-yellow) }
.so-menu, .achv-head, .cdoll, .bagwin, .ttree, .cs-card, .cr-info, .gb-stand-body, .ppane .wf {
  border: 13px solid transparent; border-top-width: 13px; border-image: var(--fx-win) 168 120 120 120 / 13px stretch; border-radius: 0; box-shadow: 0 10px 30px rgb(0 0 0 / .6);
  background: linear-gradient(rgb(23 19 16 / .9), rgb(20 16 13 / .94)) padding-box, var(--fx-rock) center / 300px padding-box }
.phead .pu { position: relative; display: block; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 392 / 159; background: url('/assets/ui/fx/uf-player.png') 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .7)) }
.phead .pu-por { position: absolute; left: 6.4%; top: 13.2%; width: 28%; height: auto; aspect-ratio: 1; margin: 0; box-shadow: none; background: #000 }
.phead .pu-por::before { display: none } .phead .pu-por::after { box-shadow: inset 0 0 0 2px #000 }
.phead .pu-por .pu-lv { left: -6%; bottom: -4%; min-width: 26px; height: 26px; font-size: 14px } .phead .pu-por .pu-cls { right: -4%; top: -2%; width: 26px; height: 26px }
.phead .pu-main { position: absolute; left: 40%; right: 3%; top: 19.5%; bottom: 22.5%; display: grid; grid-template-rows: 33% 37% 30%; gap: 0; align-items: center }
.phead .pu-name { align-items: center; gap: 6px; line-height: 1 } .phead .pu-n { font-size: 18px; color: #fff } .phead .pu-rk { font-size: 11px; padding: 0 5px }
.phead .pu-sub { display: none }
.phead .pu-bar { height: 78%; border-radius: 2px; box-shadow: none; background: #0c0a08; margin: 0 1% }
.phead .pu-bar span { font-size: 10.5px; line-height: 1; display: grid; place-items: center; height: 100% }
.phead .pu-chips { gap: 8px; font-size: 12px; flex-wrap: nowrap; overflow: hidden; margin: 0 1%; color: #d8d0c0 }
body.qmode .phead .pu { max-width: 300px } body.qmode .phead .pu-por { width: 28%; height: auto } body.qmode .phead .pu-main { grid-template-rows: 1fr } body.qmode .phead .pu-n { font-size: 17px }
.play .ptext, .bubble, .parch, .qt-ticket, .gb-bub, .tl-cap-paper { background: var(--fx-parch) center / cover !important; color: var(--fx-ink) !important; box-shadow: inset 0 0 30px rgb(120 80 30 / .25), 0 6px 16px rgb(0 0 0 / .5) !important; border: 0 !important }

/* ---------- 11. Goblin-Markt ---------- */
.gb-main { overflow: visible; margin-top: 2.2em; max-height: calc(100% - 2.6em) }
.gb-body { overflow: visible; padding: .9em 1em 1em }
.gb-head { align-items: center }
.gb-jack, .gb-clock { border: 1px solid #000; border-radius: 4px; background: linear-gradient(#2a2016, #16110c); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .4); margin: 0; padding: .25em 1em }
.gb-jack.jack, .gb-jack { color: var(--fx-yellow) } .gb-clock { font-size: 1.5em; padding: 0 .8em }
.gb-stands { gap: .6em; align-items: stretch; margin-top: .3em }
.gb-stand { grid-template-rows: auto minmax(6.2em, auto); gap: .4em; padding: .5em .5em .6em; border: 1px solid #000; border-radius: 6px; background: linear-gradient(#241c16, #14100c); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .3), 0 6px 14px rgb(0 0 0 / .5); margin: 0; box-sizing: border-box; min-width: 0; transition: box-shadow .4s }
.gb-stand.busy { box-shadow: inset 0 0 0 1px rgb(150 120 80 / .3), 0 0 0 2px var(--fx-gold), 0 0 18px rgb(229 195 107 / .35) }
.gb-stand.busy::before { display: none } .gb-roof { display: none }
.gb-sign { flex-direction: column; gap: .35em; padding: .2em 0 .1em; background: none; border-radius: 0; text-shadow: 0 1px 0 #000; color: var(--fx-yellow) }
.gb-sign .wi { position: relative; width: 2.6em; height: 2.6em; border-radius: 50%; box-shadow: 0 0 0 1px #000 } .gb-sign .wi img { border-radius: 50% }
.gb-sign .wi::after { content: ""; position: absolute; inset: -12%; background: url('/assets/ui/fx/medal-sm.png') center / 100% 100% no-repeat; pointer-events: none }
.gb-sign b { font-size: .95em; line-height: 1.1; text-align: center }
.gb-feed { border: 1px solid #000; border-radius: 4px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .3); padding: .45em .7em }
.gb-mine { border: 1px solid #000; border-radius: 6px; background: linear-gradient(#2a2016, #16110c); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .4), 0 0 0 2px rgb(229 195 107 / .35); margin: 0; padding: .5em .8em .6em }
.gb-mh { color: var(--fx-yellow) }
.gb-plate { border-radius: 4px; background: linear-gradient(#2a2016, #16110c); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(150 120 80 / .4), 0 8px 18px #000; padding: .4em 1.4em }
.gb-bub { width: 22em; max-width: 22em; box-sizing: border-box } .gb-bub .gb-say { overflow-wrap: anywhere }
.gb-game { border: 1px solid #000; border-radius: 6px; background: linear-gradient(#241c16, #14100c); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .3); margin: 0 }
.gb-bl { border: 11px solid transparent; border-image: url('/assets/ui/fx/csel-row-dark.png') 160 fill / 11px stretch; border-radius: 0; background: none; box-shadow: none; margin: -4px 0 }
.gb-bl.win { border-image: url('/assets/ui/fx/csel-row-gold.png') 160 fill / 11px stretch } .gb-bl.win b { color: #1d6b1d } .gb-bl.win small, .gb-bl.win .ntag { color: #2a1a06 }

/* ---------- 12. Ladebildschirm wie im Client: dunkles Leder oben/unten, Goldornament links/rechts vom Bild, Tipp + Balken ---------- */
.loadscreen { background: linear-gradient(rgb(28 22 16 / .9), rgb(22 17 13 / .92)), url('/assets/ui/fx/load-bottom.webp') center / 564px 322px repeat, #1a1410 }
.loadscreen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .5), transparent 12%, transparent 86%, rgb(0 0 0 / .6)); pointer-events: none }
.ls-art { inset: auto; top: 9vh; left: 50%; height: 66vh; width: min(84vw, calc(66vh * 16 / 9)); transform: translateX(-50%); background-size: cover; background-position: center; filter: none; box-shadow: 0 0 0 2px #000, 0 0 60px rgb(0 0 0 / .7) }
.ls-art::before, .ls-art::after { content: ""; position: absolute; top: -2%; bottom: -2%; width: calc(66vh * 176 / 576 * 1.04); background: url('/assets/ui/fx/load-bookend.png') center / 100% 100% no-repeat; pointer-events: none; opacity: .9 }
.ls-art::before { right: 100%; margin-right: -1.5vw } .ls-art::after { left: 100%; margin-left: -1.5vw; transform: scaleX(-1) }
.ls-box { bottom: 6vh; width: min(60vw, 800px) }
.ls-title { font-size: clamp(20px, 1.6vw, 40px); color: var(--fx-yellow) } .ls-sub { color: var(--fx-text) }
.ls-bar { height: 22px; border: 0; border-radius: 0; background: url('/assets/ui/fx/loadbar-bg.png') center / 100% 100% no-repeat; box-shadow: none; position: relative; overflow: visible; margin-top: .5em }
.ls-bar::after { content: ""; position: absolute; inset: 0; background: url('/assets/ui/fx/loadbar-frame.png') center / 100% 100% no-repeat; pointer-events: none }
.ls-bar i { position: absolute; left: 1.4%; top: 22%; height: 56%; background: linear-gradient(#5ab0ff, #1a5ac0 60%, #123f90) !important; width: 0; animation: lsbar 1.1s .1s cubic-bezier(.3, .7, .3, 1) forwards; max-width: 97.2% }

/* Beutefenster: gleiche Fensterfamilie, Medaillon oben links */
.lootwin { width: min(24em, 100%) !important; aspect-ratio: auto !important; min-height: 12em; padding: 1em .8em .8em !important; background: linear-gradient(rgb(23 19 16 / .9), rgb(20 16 13 / .94)) padding-box, var(--fx-rock) center / 420px padding-box !important; box-shadow: 0 14px 40px rgb(0 0 0 / .65) !important; filter: none; margin-top: 1.4em }
.lootwin .lw-por { left: -2.5em !important; top: -2.9em !important; width: 3.6em !important; height: 3.6em !important; clip-path: none; overflow: visible; border-radius: 50%; z-index: 4 !important }
.lootwin .lw-por img { border-radius: 50%; transform: none; box-shadow: inset 0 0 0 2px #000 } .lootwin .lw-por::after { content: ""; position: absolute; inset: -12%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none }
.lootwin .lw-head { position: absolute !important; left: -.95em !important; right: -.95em !important; width: auto !important; top: -1.55em !important; height: 1.55em !important; display: grid; place-items: center; font: 400 1.05em/1 var(--ra-font-display) !important; color: var(--fx-yellow); text-shadow: 0 1px 0 #000; z-index: 3 }
.lootwin > .lw-x { left: auto !important; right: -.75em !important; top: -1.45em !important; width: 1.4em !important; height: 1.4em !important; background: url('/assets/ui/fx/close-up.png') center / 100% 100% no-repeat !important; font-size: 0 }
.lootwin .lw-list { position: static; max-height: 60vh !important; overflow: auto !important; padding: 0 }
.lw-row .lw-n { background: linear-gradient(#241c16, #14100c); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .3); border-radius: 4px }
.lw-empty { padding: 2.5em 1em }
/* Siegerehrung: drei Medaillons mit PvP-Rangabzeichen statt leerer Podeste */
.podium { align-items: end; gap: 1.2em; margin: .8em 0 .4em }
.pod { height: auto !important; border: 0; border-image: none; background: none; padding: 0 0 .6em; display: grid; justify-items: center; gap: .15em }
.pod-por { position: relative; margin-bottom: .4em } .pod-por .pu-por.big { width: 7em; height: 7em } .pod.h1 .pod-por .pu-por.big { width: 9em; height: 9em }
.pod-por .pu-por.big .pu-lv, .pod-por .pu-por.big .pu-cls { display: none }
.pod-rank { position: absolute; right: -.4em; bottom: -.2em; width: 2.6em; height: 2.6em; z-index: 3; filter: drop-shadow(0 2px 3px #000) } .pod.h1 .pod-rank { width: 3.2em; height: 3.2em }
.pod .place { font-size: 1.6em; color: var(--fx-yellow); text-shadow: 0 2px 0 #000 } .pod.h1 .place { font-size: 2.2em }
.pod-sub { font: 500 .85em var(--ra-font-ui); color: var(--fx-muted) }
.pod.h1 .pod-por::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle, rgb(255 209 0 / .35), transparent 65%); pointer-events: none }
.titles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em } .titles > div { border: 1px solid #000; border-radius: 4px; background: rgb(0 0 0 / .3); box-shadow: inset 0 0 0 1px rgb(150 120 80 / .3); padding: .5em .8em } .titles b { color: var(--fx-yellow); font: 400 1em var(--ra-font-display) }

/* ---------- 13. Stimmen aus Azeroth & Questtafel: kompaktere Titel, Fensterfamilie ---------- */
.bonusbar { border-radius: 2px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(150 120 80 / .4) }
.qt-title { font: 400 clamp(26px, calc(var(--u) * 2.4), 72px)/1 var(--ra-font-display); -webkit-text-fill-color: initial; background: none; color: var(--fx-yellow); text-shadow: 0 2px 0 #000, 0 0 12px rgb(0 0 0 / .8) }
.qt-board { border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #6b5230, 0 0 0 4px #20160a, 0 20px 60px rgb(0 0 0 / .7) }
.qt-board::before, .qt-board::after { display: none }
.qt-picker { display: none }

/* Markt-Erklärung: fünf gleich breite Zellen, Icon eigene Zeile, Titel und Beschreibung getrennte Blöcke */
.gb-games { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(1 * var(--fu)); margin: 0 }
.gb-game { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start; gap: calc(.8 * var(--fu)); padding: calc(1.4 * var(--fu)) calc(1.2 * var(--fu)) calc(1.2 * var(--fu)); text-align: center; min-height: calc(23 * var(--fu)); box-sizing: border-box }
.gb-game .wi, .gb-game .wi.big, .gb-game .ab { width: calc(4 * var(--fu)) !important; height: calc(4 * var(--fu)) !important }
.gb-game b { display: block; font: 400 calc(2 * var(--fu))/1.15 var(--ra-font-display); color: #e4c46e }
.gb-game span { display: block; font: 500 calc(1.85 * var(--fu))/1.3 var(--ra-font-ui); color: #f0e5cb }
.gb-rule { font-size: calc(1.9 * var(--fu)); color: #c6b898 }
.gb-screen { grid-template-columns: calc(32 * var(--fu)) minmax(0, 1fr); gap: var(--gap); max-width: calc(170 * var(--fu)); margin: 0 auto; width: 100% }
@media (min-aspect-ratio: 21/10) { .gb-screen { grid-template-columns: calc(36 * var(--fu)) minmax(0, 1fr); gap: calc(3 * var(--fu)); max-width: calc(208 * var(--fu)) } }
.gb-pic { width: calc(22 * var(--fu)); height: calc(22 * var(--fu)) } .gb-bub { width: calc(28 * var(--fu)); max-width: 100%; font-size: calc(1.9 * var(--fu)) } .gb-say { font-size: 1em }
.gb-plate b { font-size: calc(2.2 * var(--fu)) } .gb-plate span { font-size: calc(1.5 * var(--fu)) }
/* Lagerfeuer: Fenster 82u, Bild max 26u, Portraits 5,5u im Bogen über dem Feuer, Chat 68u × 23u unten rechts */
.camp { grid-template-columns: calc(82 * var(--fu)) minmax(0, 1fr); gap: var(--gap); padding: 0; align-items: start }
@media (min-aspect-ratio: 21/10) { .camp { grid-template-columns: calc(88 * var(--fu)) minmax(0, 1fr) } }
.camp-main { max-height: calc(72 * var(--fu)); box-sizing: border-box; padding: calc(1.6 * var(--fu)) calc(2 * var(--fu)); background: rgb(23 19 16 / .94); border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); backdrop-filter: none; overflow: hidden; display: grid; gap: calc(1 * var(--fu)); align-content: start }
.camp-main .hd { font-size: calc(2.8 * var(--fu)); margin: 0; color: #e4c46e } .camp-main .kick { font-size: calc(1.5 * var(--fu)) }
.camp-img { width: 100%; height: calc(26 * var(--fu)); max-height: none; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #000 } .camp-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.camp-main .chromie { align-items: flex-start; gap: calc(1 * var(--fu)) } .camp-main .avatar { width: calc(5 * var(--fu)); height: calc(5 * var(--fu)) }
.camp-main .bubble { font-size: calc(2.1 * var(--fu)); line-height: 1.35; padding: calc(1 * var(--fu)) calc(1.4 * var(--fu)); max-height: none; overflow: visible }
.camp-ask { font-size: calc(2.7 * var(--fu)); line-height: 1.25; color: #f0e5cb }
.camp-main .mute { font-size: calc(1.9 * var(--fu)); margin: 0 }
.camp-over .firering { position: absolute; left: 69.5%; top: 57%; right: auto; width: 0; height: 0; display: block; font-size: calc(1.8 * var(--fu)); --rx: calc(31 * var(--fu)); --ry: calc(19 * var(--fu)) }
.camp-over .fr-p { position: absolute; left: calc(sin(var(--a)) * var(--rx)); top: calc(cos(var(--a)) * var(--ry) * -1); width: calc(10 * var(--fu)); margin: calc(-3.6 * var(--fu)) 0 0 calc(-5 * var(--fu)); transform: none !important; gap: calc(.2 * var(--fu)) }
.camp-over .fr-p b { font: 400 calc(1.7 * var(--fu)) var(--ra-font-display); text-shadow: 0 1px 0 #000, 0 0 6px #000, 0 0 12px #000 } .camp-over .fr-p small { font: 500 calc(1.3 * var(--fu)) var(--ra-font-ui); color: #e4d6b6; text-shadow: 0 1px 0 #000, 0 0 6px #000 }
.camp-over .fr-por { width: calc(5.5 * var(--fu)); height: calc(5.5 * var(--fu)) } .camp-over .fr-p b { font-size: calc(1.6 * var(--fu)) } .camp-over .fr-p small { font-size: calc(1.3 * var(--fu)) }
.camp-over .chatwin { right: calc(10 * var(--fu)); bottom: calc(1 * var(--fu)); width: calc(64 * var(--fu)); height: calc(22 * var(--fu)); font-size: calc(1.9 * var(--fu)); background: linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / .8)) }
@media (min-aspect-ratio: 21/10) { .camp-over .chatwin { width: calc(84 * var(--fu)); height: calc(25 * var(--fu)) } .camp-over .firering { left: 66% } }
/* Checkpoint: Tabelle mit Spalten 28/20/10/27/15 %, Zeilen 5,8u, Zahlen rechtsbündig */
.scr.sc-checkpoint .ra-panel { max-width: var(--core-max); margin: 0 auto; width: 100% }
.scr.sc-checkpoint .tbl { table-layout: fixed; border-spacing: 0 calc(.4 * var(--fu)) } .scr.sc-checkpoint .tbl th, .scr.sc-checkpoint .tbl td { height: calc(5.8 * var(--fu)); box-sizing: border-box; padding: 0 calc(1 * var(--fu)); font-size: calc(2 * var(--fu)) }
.scr.sc-checkpoint .tbl th { height: calc(3.5 * var(--fu)); font-size: calc(1.8 * var(--fu)); color: #e4c46e }
.scr.sc-checkpoint .tbl th:nth-child(1), .scr.sc-checkpoint .tbl td:nth-child(1) { width: 28% } .scr.sc-checkpoint .tbl th:nth-child(2), .scr.sc-checkpoint .tbl td:nth-child(2) { width: 20% } .scr.sc-checkpoint .tbl th:nth-child(3), .scr.sc-checkpoint .tbl td:nth-child(3) { width: 10% } .scr.sc-checkpoint .tbl th:nth-child(4), .scr.sc-checkpoint .tbl td:nth-child(4) { width: 27% } .scr.sc-checkpoint .tbl th:nth-child(5), .scr.sc-checkpoint .tbl td:nth-child(5) { width: 15% }
.scr.sc-checkpoint .tbl .num, .scr.sc-checkpoint .tbl th.num { text-align: right; font-variant-numeric: tabular-nums } .scr.sc-checkpoint .tbl .buff { font-size: calc(1.7 * var(--fu)) }
.scr.sc-checkpoint .ra-panel .hd { font-size: calc(2.8 * var(--fu)) } .scr.sc-checkpoint .bubble { font-size: calc(2 * var(--fu)) }
/* Beute: Fenster 42u, als Gruppe mit der Erläuterung zentriert (max 104u) */
.loot2 { max-width: calc(104 * var(--fu)); margin: 0 auto; gap: calc(4 * var(--fu)); align-items: center; justify-content: center }
.lootwin { width: calc(42 * var(--fu)) !important; min-height: calc(24 * var(--fu)); margin-top: calc(3 * var(--fu)) }
.lootwin .lw-por { width: calc(6 * var(--fu)) !important; height: calc(6 * var(--fu)) !important; left: calc(-4.6 * var(--fu)) !important; top: calc(-5.4 * var(--fu)) !important }
.lootwin .lw-head { left: calc(-2.2 * var(--fu)) !important; right: calc(-2.2 * var(--fu)) !important; top: calc(-3.2 * var(--fu)) !important; height: calc(3.2 * var(--fu)) !important; font-size: calc(2.4 * var(--fu)) !important }
.lootwin > .lw-x { right: calc(-1.6 * var(--fu)) !important; top: calc(-2.9 * var(--fu)) !important; width: calc(2.6 * var(--fu)) !important; height: calc(2.6 * var(--fu)) !important }
.lw-empty { font-size: calc(2.2 * var(--fu)); color: #c6b898 } .lw-row { min-height: calc(8 * var(--fu)) } .lw-row .lw-ic { width: calc(5 * var(--fu)); height: calc(5 * var(--fu)) } .lw-row .lw-n b { font-size: calc(2 * var(--fu)) }
.loot-side h2, .loot-side .hd { font-size: calc(3 * var(--fu)) } .loot-side p, .loot-side .mute { font-size: calc(2.2 * var(--fu)) }
/* Siegerehrung: Portraits 16u / 13u, Rangabzeichen 3,2u unten am Ring */
.scr.sc-end .ra-panel { max-width: var(--core-max); margin: 0 auto; width: 100% }
.pod-por .pu-por.big { width: calc(13 * var(--fu)); height: calc(13 * var(--fu)) } .pod.h1 .pod-por .pu-por.big { width: calc(16 * var(--fu)); height: calc(16 * var(--fu)) }
.pod-rank, .pod.h1 .pod-rank { width: calc(3.2 * var(--fu)); height: calc(3.2 * var(--fu)); right: calc(50% - 1.6 * var(--fu)); bottom: calc(-1.2 * var(--fu)) }
.pod .place { font-size: calc(3 * var(--fu)) } .pod.h1 .place { font-size: calc(3.4 * var(--fu)) } .pod .ntag, .pod .nm { font-size: calc(2.3 * var(--fu)) } .pod-sub { font-size: calc(1.8 * var(--fu)) }
.titles > div { min-height: calc(8 * var(--fu)); box-sizing: border-box; padding: calc(1.4 * var(--fu)) } .titles b { font-size: calc(2 * var(--fu)) } .titles > div .ntag { font-size: calc(2 * var(--fu)) }
.scr.sc-end .mech { font-size: calc(2 * var(--fu)); min-height: calc(5 * var(--fu)) }
/* Einführung: Gruppe max 166u (UW 190u), Figur 30u, Dialog max 108u, Titel 4,4u, Aktkarten gleich breit */
.cq { grid-template-columns: calc(34 * var(--fu)) minmax(0, calc(129 * var(--fu))); gap: calc(3 * var(--fu)); max-width: calc(166 * var(--fu)); margin: 0 auto; padding: 0; width: 100%; justify-content: center }
@media (min-aspect-ratio: 21/10) { .cq { max-width: calc(190 * var(--fu)) } }
.cq-left { height: auto; max-height: calc(60 * var(--fu)) } .cq-chromie { max-height: calc(56 * var(--fu)) } .cq-halo { width: 90% }
.cq-h { font-size: calc(4.4 * var(--fu)); line-height: 1.05 }
.cq-bubble { max-width: calc(108 * var(--fu)); min-height: calc(18 * var(--fu)); box-sizing: border-box; font-size: calc(2.3 * var(--fu)); line-height: 1.35; background: var(--fx-parch) center / cover; box-shadow: 0 0 0 1px #000, 0 0 0 3px #6b5230, 0 0 0 4px #20160a, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); border-radius: 3px }
.cq-name, .cq-key { font-size: calc(2.2 * var(--fu)) }
.cx-road { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(1 * var(--fu)); width: 100% }
.cx-stop { min-width: 0; height: calc(12 * var(--fu)); box-sizing: border-box; padding: calc(.8 * var(--fu)) calc(.6 * var(--fu)); background: #241d16; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(120 96 62 / .3); border-radius: 4px; align-content: center }
.cx-stop .i { display: block; width: calc(4.2 * var(--fu)); height: calc(4.2 * var(--fu)); font-size: 1em; line-height: 0 } .cx-stop .i .wi, .cx-stop .i .wi.big, .cx-stop .i img { width: calc(4.2 * var(--fu)) !important; height: calc(4.2 * var(--fu)) !important; display: block } .cx-stop b { font-size: calc(1.8 * var(--fu)); line-height: 1.1 } .cx-stop small { font-size: calc(1.5 * var(--fu)) }
.cx-arrow { display: none }
/* Aktauftakt: Titel 5,8u max 125u breit, Stationen als Slot-Reihe 3,5u, Text 1,8u, Umbruch in zwei Zeilen erlaubt */
.actintro { min-height: 0 } .ai-text { padding: 0 calc(8 * var(--fu)) calc(4 * var(--fu)); gap: calc(1 * var(--fu)) }
.ai-name { font-size: calc(5.8 * var(--fu)); max-width: calc(125 * var(--fu)); line-height: 1.02 } .ai-sub { font-size: calc(2.3 * var(--fu)); max-width: calc(110 * var(--fu)) }
@media (min-aspect-ratio: 21/10) { .ai-name { max-width: calc(140 * var(--fu)) } }
.ai-steps { gap: calc(.8 * var(--fu)) calc(1.2 * var(--fu)); max-width: calc(125 * var(--fu)); row-gap: calc(1.4 * var(--fu)) } .ai-steps i { display: none }
.ai-steps span { height: calc(5 * var(--fu)); box-sizing: border-box; padding: 0 calc(1.2 * var(--fu)) 0 calc(.6 * var(--fu)); gap: calc(.8 * var(--fu)); font-size: calc(1.8 * var(--fu)); background: rgb(23 19 16 / .92); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgb(120 96 62 / .35); border-radius: 4px; color: #f0e5cb }
.ai-steps span .wi, .ai-steps span img { width: calc(3.5 * var(--fu)); height: calc(3.5 * var(--fu)); border-radius: 4px }
@media (min-aspect-ratio: 21/10) { .ai-steps { max-width: calc(205 * var(--fu)) } }
/* Tier-Liste: Bild 91u · 3u · Tabelle 76u, Zeilen 8u, Buchstabenspalte 7u, Fassung wie die übrigen Fenster */
.tl-screen { grid-template-columns: calc(91 * var(--fu)) calc(76 * var(--fu)); gap: calc(3 * var(--fu)); justify-content: center; padding: calc(5 * var(--fu)) 0 calc(1 * var(--fu)); align-items: center }
@media (min-aspect-ratio: 21/10) { .tl-screen { grid-template-columns: calc(105 * var(--fu)) calc(94 * var(--fu)) } }
.tl-herowrap { padding: calc(.8 * var(--fu)); background: #171310; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); border-radius: 3px }
.tl-name { font-size: calc(3.2 * var(--fu)) } .tl-desc { font-size: calc(2.1 * var(--fu)) }
.tm-row { grid-template-columns: calc(7 * var(--fu)) 1fr; min-height: calc(8 * var(--fu)); box-sizing: border-box; border-bottom-color: #0c0a08 } .tm-label { font-size: calc(2.5 * var(--fu)) } .tm-items { background: #171310 }
.tiermaker { border: 1px solid #000; box-shadow: 0 0 0 1px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6); background: #171310 }
.tl-left .kick, .tl-screen .kick { font-size: calc(1.5 * var(--fu)) } .tl-left .mute, .tl-left p { font-size: calc(1.9 * var(--fu)) }
/* Questtafel: Tafel max 132u (UW 145u), ruhige Kopfzone 7u mit Kategorien, Reihen 11,5u, erledigte Karte behält Größe */
.qt-board { max-width: calc(132 * var(--fu)); width: 100%; margin: 0 auto; box-sizing: border-box; padding: calc(2 * var(--fu)) calc(2 * var(--fu)) calc(1.4 * var(--fu)); background: radial-gradient(ellipse at 50% 0%, rgb(255 200 120 / .08), transparent 55%), url('/assets/ui/frames/fv-wood.webp') center / auto calc(11 * var(--fu)) repeat, #4e3218 }
@media (min-aspect-ratio: 21/10) { .qt-board { max-width: calc(145 * var(--fu)) } }
.qt-col { gap: calc(1.3 * var(--fu)) } .qt-grid { gap: calc(1.5 * var(--fu)) }
.qt-sign { padding-top: 0; margin-bottom: calc(.4 * var(--fu)); animation: none; transform: none } .qt-rope { display: none }
.qt-cat { height: calc(7 * var(--fu)); box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--fu)); padding: 0 calc(1 * var(--fu)); font-size: calc(2.2 * var(--fu)); background: linear-gradient(#2a2016, #16110c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #59442c, inset 0 1px 0 rgb(167 138 85 / .35); border-radius: 3px; color: #e4c46e }
.qt-cat .wi.cat { height: calc(4 * var(--fu)); width: calc(4 * var(--fu)) }
.qt-ticket { min-height: calc(11.5 * var(--fu)) !important; box-sizing: border-box; padding: calc(1 * var(--fu)) calc(1.4 * var(--fu)) calc(.9 * var(--fu)) calc(1.2 * var(--fu)); display: grid; grid-template-columns: calc(4 * var(--fu)) 1fr auto; align-items: center; gap: calc(1 * var(--fu)) }
.qt-ticket .ra-seal { width: calc(4 * var(--fu)); height: calc(4 * var(--fu)); position: static; margin: 0 } .qt-ticket .qt-nail { z-index: 2 } .qt-ticket .qt-stamp, .qt-ticket .qt-who { position: absolute }
.qt-rar { font-size: calc(1.7 * var(--fu)) } .qt-rar em, .qt-rar b { font-size: calc(2 * var(--fu)) }
.qt-rew { font-size: calc(2 * var(--fu)) } .qt-rew small { font-size: calc(1.3 * var(--fu)) }
.qt-ticket.st-done { transform: rotate(var(--rot)) scale(1); min-height: calc(11.5 * var(--fu)) !important; clip-path: none; filter: sepia(.5) brightness(.7); opacity: .85 }
.qt-foot { font-size: calc(1.9 * var(--fu)); min-height: calc(4.5 * var(--fu)) }
.qt-title { font-size: calc(3.2 * var(--fu)) } .qt-sub { font-size: calc(2 * var(--fu)) }

/* ============================================================================================
   FRAGE (alle Szenen): Siegel sitzt als Wachssiegel auf der Kante, Kopfzeile ruhig (Seltenheit in Qualitätsfarbe,
   Kategorie klein), Antwortplatten mit fester Namensschild-Reihe in der Auflösung (keine springenden Höhen)
   ============================================================================================ */
.ra-qpaper { position: relative; overflow: visible }
.ra-qhead { position: static; display: flex; align-items: center; gap: calc(1.2 * var(--fu)); padding-left: calc(5.4 * var(--fu)); min-height: calc(3.2 * var(--fu)) }
.ra-qhead .ra-seal { position: absolute; left: calc(-2 * var(--fu)); top: calc(-2.2 * var(--fu)); width: calc(7 * var(--fu)) !important; height: auto; filter: drop-shadow(0 calc(.3 * var(--fu)) calc(.5 * var(--fu)) rgb(0 0 0 / .6)); z-index: 2 }
.ra-qmeta { display: flex; align-items: baseline; gap: calc(1 * var(--fu)) }
.ra-qpaper .ra-rar, .ra-rar { margin: 0; padding: 0; background: none !important; box-shadow: none !important; border: 0; font: 700 calc(1.5 * var(--fu)) var(--ra-font-ui) !important; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--rc, #555) 55%, #2a1a0a) !important; text-shadow: 0 1px 0 rgb(255 240 200 / .5) }
.ra-rar::after { content: "·"; margin-left: calc(1 * var(--fu)); color: #8a6a40 }
.ra-qpaper .ra-cat { font: 400 calc(1.9 * var(--fu))/1 var(--ra-font-display) !important; color: #5a4020 !important; text-shadow: 0 1px 0 rgb(255 240 200 / .5) }
.ra-tag { font-size: calc(1.5 * var(--fu)) !important; padding: .3em .8em; background: #7a2412; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgb(255 180 120 / .35) }
/* Auflösung: Buchstabe über beide Zeilen, Text oben, Namensschilder immer in eigener Zeile */
.ra-q.rv .ra-ans { grid-template-rows: auto calc(2.2 * var(--fu)) !important; align-content: center }
.ra-q.rv .ra-ans .ra-l { grid-row: 1 / span 2 }
.ra-q.rv .ra-ans .ra-at { grid-row: 1; align-self: end }
.ra-q.rv .ra-ans .ra-picks { grid-row: 2; align-self: start; display: flex !important; min-height: calc(2.2 * var(--fu)) }
.ra-stamp { z-index: 4 }
.ra-ctx { border: 0 !important; border-left: calc(.3 * var(--fu)) solid #e4c46e !important; border-radius: 3px; padding: calc(1.2 * var(--fu)) calc(1.8 * var(--fu)) !important; background: rgb(23 19 16 / .96) !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c !important }
.ra-ctx .src { color: #c6b898; font-size: calc(1.6 * var(--fu)); margin-top: calc(.6 * var(--fu)); padding-top: calc(.6 * var(--fu)); border-top: 1px solid rgb(89 68 44 / .6) }

/* ============================================================================================
   MINISPIELE (Stimmen, Gebietsmusik, Tooltip-Schmiede): ein Fensterpaar gleicher Höhe –
   links die Quelle (Stimme/Karte/Tooltip) als Fenster mit Kopfzeile, rechts die Antworten.
   ============================================================================================ */
.vo-screen, .tf-screen { display: grid; grid-template-columns: calc(66 * var(--fu)) calc(72 * var(--fu)); gap: var(--gap); justify-content: center; align-content: center; align-items: stretch; padding: calc(4 * var(--fu)) 0 calc(2 * var(--fu)); height: 100%; box-sizing: border-box; min-height: 0 }
@media (min-aspect-ratio: 21/10) { .vo-screen, .tf-screen { grid-template-columns: calc(84 * var(--fu)) calc(88 * var(--fu)); gap: calc(3 * var(--fu)) } }
.vo-left, .tf-left { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: calc(1.6 * var(--fu)); text-align: left; min-height: calc(62 * var(--fu)); max-height: calc(76 * var(--fu)); box-sizing: border-box; padding: calc(1.6 * var(--fu)) calc(1.4 * var(--fu)) calc(1.4 * var(--fu));
  border: calc(2.2 * var(--fu)) solid transparent; border-top-width: calc(3.2 * var(--fu)); border-image: var(--fx-win) 168 120 120 120 / calc(3.2 * var(--fu)) calc(2.2 * var(--fu)) stretch;
  background: linear-gradient(rgb(23 19 16 / .9), rgb(20 16 13 / .94)) padding-box, var(--fx-rock) center / calc(40 * var(--fu)) padding-box; box-shadow: 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6) }
.vo-right.wf, .tf-right.wf { align-self: stretch; display: flex; flex-direction: column; min-height: calc(62 * var(--fu)); max-height: calc(76 * var(--fu)); box-sizing: border-box }
.vo-right .wf-body, .tf-right .wf-body { flex: 1; display: flex; flex-direction: column; gap: calc(1.2 * var(--fu)); padding: calc(1.2 * var(--fu)) calc(.4 * var(--fu)) calc(.4 * var(--fu)) }
/* Kopfzeile links = Spielname; darunter die Aufforderung als Titel */
.vo-left > .kick, .tf-left > .kick { position: absolute; left: calc(-2.2 * var(--fu)); right: calc(-2.2 * var(--fu)); top: calc(-3.2 * var(--fu)); height: calc(3.2 * var(--fu)); display: flex; align-items: center; justify-content: center; gap: .5em; margin: 0; font: 400 calc(2.2 * var(--fu))/1 var(--ra-font-display) !important; letter-spacing: 0 !important; text-transform: none !important; color: #e4c46e !important; text-shadow: 0 1px 0 #000 }
.vo-left > .kick .wi, .tf-left > .kick .wi { height: calc(2 * var(--fu)); width: calc(2 * var(--fu)) }
.vo-h { margin: 0; font: 400 calc(3.4 * var(--fu))/1.1 var(--ra-font-display) !important; color: #f1d34b !important; -webkit-text-fill-color: currentColor; background: none; text-shadow: 0 2px 0 #000; text-align: left }
/* Sprecherfeld: ruhige Sektion statt eigenem Fenster */
.th { position: relative; display: grid; grid-template-columns: calc(14 * var(--fu)) minmax(0, 1fr); align-items: center; gap: calc(2 * var(--fu)); width: 100%; box-sizing: border-box; margin: 0; min-height: calc(20 * var(--fu)); padding: calc(1.6 * var(--fu)); border: 1px solid #000 !important; border-image: none !important; border-radius: 4px; background: radial-gradient(ellipse 60% 90% at 18% 50%, rgb(110 70 200 / .18), transparent 70%), #16120f !important; box-shadow: inset 0 0 0 1px rgb(120 96 62 / .35) !important }
.th-flo, .th-por .fr { display: none }
.th-por { width: calc(14 * var(--fu)); height: calc(14 * var(--fu)) } .th-sil { inset: 7%; border-radius: 50% } .th-sil b { font-size: calc(6 * var(--fu)) }
.th-por::after { content: ""; position: absolute; inset: -2%; background: url('/assets/ui/fx/medal.png') center / 100% 100% no-repeat; pointer-events: none; z-index: 2 }
.th-txt { gap: calc(.8 * var(--fu)) } .th-name { font: 400 calc(2.6 * var(--fu)) var(--ra-font-display) !important; color: #e4c46e } .th-say { font: italic 400 calc(2 * var(--fu))/1.3 var(--ra-font-display) !important; color: #f0e5cb }
.th-wave { height: calc(6 * var(--fu)); max-width: none; gap: calc(.35 * var(--fu)) }
/* Voice-Lines als Reiter-Reihe */
.vo-lines { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: calc(.8 * var(--fu)); width: 100% }
.vo-l { display: flex !important; align-items: center; justify-content: center; gap: .5em; min-width: 0; height: calc(4.6 * var(--fu)); box-sizing: border-box; padding: 0 .6em !important; font: 400 calc(1.8 * var(--fu)) var(--ra-font-display) !important; white-space: nowrap; overflow: hidden; color: #8f836c; background: #14100d !important; border: 1px solid #000 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 1px rgb(89 68 44 / .5) !important }
.vo-l .wi { width: calc(2.6 * var(--fu)); height: calc(2.6 * var(--fu)); flex: none }
.vo-l.on { color: #f1d34b; background: linear-gradient(#2e2418, #1a140e) !important; box-shadow: inset 0 0 0 1px #a78a55, 0 0 calc(1 * var(--fu)) rgb(241 211 75 / .25) !important } .vo-l.done { color: #f0e5cb }
/* Belohnung + Bonusbalken unten im Fenster */
.vo-reward { margin-top: auto; display: grid; gap: calc(.6 * var(--fu)); font: 400 calc(2.1 * var(--fu)) var(--ra-font-display); color: #f0e5cb; text-align: left }
.vo-reward small { display: block; font: 500 calc(1.6 * var(--fu))/1.3 var(--ra-font-ui); color: #c6b898 }
.bonusbar { height: calc(2.4 * var(--fu)); margin: 0; border-radius: 2px; background: #0c0a08; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(89 68 44 / .6) } .bonusbar b { font: 700 calc(1.4 * var(--fu))/calc(2.4 * var(--fu)) var(--ra-font-ui) }
.vo-reveal { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 4px; overflow: hidden; background: #0c0a08; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(89 68 44 / .5) } .vo-reveal img { max-width: 100%; max-height: calc(44 * var(--fu)); object-fit: contain }
.vo-name { font: 400 calc(2.6 * var(--fu)) var(--ra-font-display); color: #f1d34b; padding: calc(1 * var(--fu)) }
/* Karte (Gebietsmusik) füllt das linke Fenster */
.km .km-map { flex: 1; min-height: calc(36 * var(--fu)); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(89 68 44 / .5) }
/* Tooltip-Schmiede: großer Tooltip, fester Slot, Stufenleiste unten */
.tf-anvil { flex: 1; display: grid; place-items: center; padding: calc(1 * var(--fu)) 0; border-radius: 4px; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgb(255 140 40 / .12), transparent 70%), #16120f; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(89 68 44 / .45) }
.ttf { display: grid; grid-template-columns: calc(7 * var(--fu)) calc(44 * var(--fu)); gap: calc(1 * var(--fu)); align-items: start; font-size: calc(2.1 * var(--fu)) }
.ttf-icon { width: calc(7 * var(--fu)); height: calc(7 * var(--fu)); border-radius: 6px; background: #0a0806; box-shadow: 0 0 0 1px #000, 0 0 0 2px #59442c; display: grid; place-items: center; font: 400 calc(3.4 * var(--fu)) var(--ra-font-display); color: #6b5a42 } .ttf-icon img { width: 100%; height: 100%; border-radius: 6px }
.ttf-tt { font-size: calc(2.1 * var(--fu)) !important; line-height: 1.3; padding: calc(1.2 * var(--fu)) calc(1.6 * var(--fu)) !important; background: rgb(16 16 27 / .97) !important; border-radius: 4px !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #6f6f86 !important; border: 0 !important }
.ttf-tt .ttn { font-size: calc(2.5 * var(--fu)) }
.tf-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(.6 * var(--fu)); width: 100% }
.tf-steps span { display: grid; align-content: center; justify-items: center; gap: .15em; height: calc(7.2 * var(--fu)); min-width: 0; box-sizing: border-box; padding: .3em .3em; text-align: center; font: 500 calc(1.45 * var(--fu))/1.1 var(--ra-font-ui); color: #8f836c; background: #14100d; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(89 68 44 / .5) }
.tf-steps b { font: 400 calc(2 * var(--fu)) var(--ra-font-display); color: inherit } .tf-steps small { font-size: calc(1.4 * var(--fu)); color: #c6b898 }
.tf-steps .on { color: #f1d34b; box-shadow: inset 0 0 0 1px #a78a55, 0 0 calc(1 * var(--fu)) rgb(241 211 75 / .25) } .tf-steps .done { color: #f0e5cb }
/* Antwortliste rechts */
.opts.one { display: grid; grid-template-columns: 1fr; gap: calc(1 * var(--fu)) }
.opts.one .opt { grid-template-columns: calc(5 * var(--fu)) minmax(0, 1fr) auto !important; min-height: calc(9.5 * var(--fu)); font: 400 calc(2.5 * var(--fu))/1.2 var(--ra-font-display) }
.opt .n { display: flex; gap: calc(.3 * var(--fu)) } .opt .n .dot { width: calc(1.2 * var(--fu)); height: calc(1.2 * var(--fu)); box-shadow: 0 0 0 1px #000 }
.opt.no { filter: saturate(.3) brightness(.55) }
.vo-right .who, .tf-right .who, .vo-right .res, .tf-right .res { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--fu)); margin-top: auto }
.vo-right .who span, .tf-right .who span, .vo-right .res span, .tf-right .res span { font: 600 calc(1.5 * var(--fu)) var(--ra-font-ui); padding: .25em .6em; border-radius: 3px; background: #14100d; box-shadow: inset 0 0 0 1px rgb(89 68 44 / .5); color: #8f836c }
.vo-right .who span.in, .tf-right .who span.in { color: #f0e5cb; box-shadow: inset 0 0 0 1px #a78a55 }
.vo-right .mute.small, .tf-right .mute.small { font-size: calc(1.6 * var(--fu)); line-height: 1.35; color: #c6b898; margin: 0 }
.vo-right .ctx, .tf-right .ctx { font-size: calc(2 * var(--fu)); color: #f0e5cb } .vo-right .src, .tf-right .src { font-size: calc(1.6 * var(--fu)); color: #c6b898 }
.vo-l > span { display: grid; line-height: 1.05 } .vo-l small { font: 500 calc(1.3 * var(--fu)) var(--ra-font-ui); color: #7a6e58 }
.vo-reward { display: block } .vo-reward .money { font-size: 1em } .vo-reward .bonusbar { margin-top: calc(.8 * var(--fu)) }
.ttf-tt { width: calc(44 * var(--fu)); box-sizing: border-box }
.tf-steps span { height: calc(8.4 * var(--fu)) }

/* Brachland: Chat wie im Spiel (dunkel, Reiter oben, keine Fassung), rechts das Fragefenster – beide an derselben Oberkante */
.bl-screen { grid-template-columns: calc(98 * var(--fu)) calc(70 * var(--fu)) !important; gap: calc(3 * var(--fu)) !important; justify-content: center; align-items: start; padding: calc(5 * var(--fu)) var(--edge) calc(2 * var(--fu)) !important; box-sizing: border-box }
@media (min-aspect-ratio: 21/10) { .bl-screen { grid-template-columns: calc(118 * var(--fu)) calc(84 * var(--fu)) !important } }
.bl-main { position: relative; height: 100%; min-height: 0; gap: calc(.8 * var(--fu)) }
.bl-main > .kick { font: 400 calc(2.2 * var(--fu)) var(--ra-font-display) !important; letter-spacing: 0 !important; text-transform: none !important; color: #e4c46e !important; text-shadow: 0 1px 0 #000, 0 0 8px #000 }
.bl-chat { background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .66)) !important; border: 0 !important; border-image: none !important; border-radius: 3px; box-shadow: none !important }
.bl-tabs { background: none !important; padding: 0 calc(.6 * var(--fu)) !important; gap: 2px }
.bl-tabs span { position: relative; z-index: 0; padding: .3em 1.1em .35em !important; font: 400 calc(1.8 * var(--fu)) var(--ra-font-display) !important; color: #c6b898 !important; background: none !important; border: 0 !important }
.bl-tabs span::before { content: ""; position: absolute; inset: 0; z-index: -1; border-style: solid; border-color: transparent; border-width: 0 16px 6px 16px; border-image: url('/assets/ui/fx/tab-off.png') 0 148 24 148 fill / 0 16px 6px 16px stretch }
.bl-tabs span.on { color: #f1d34b !important } .bl-tabs span.on::before { border-image-source: url('/assets/ui/fx/tab-on.png') }
.bl-log { padding: calc(1 * var(--fu)) calc(1.6 * var(--fu)) calc(1.2 * var(--fu)) !important; gap: calc(.35 * var(--fu)) !important; font: 500 calc(2 * var(--fu))/1.32 var(--ra-font-ui) !important; text-shadow: 0 1px 1px #000 }
.bl-ch { color: #ffc0a0; opacity: .6 }
.bl-line.player { background: rgb(255 255 255 / .06) !important }
.bl-side { overflow: visible !important; max-height: none !important; align-self: start; margin-top: calc(4 * var(--fu)) }
.bl-asker .bl-chan { font: 500 calc(1.7 * var(--fu)) var(--ra-font-ui) !important; color: #ffc0a0 } .bl-asker .qtext { font: 400 calc(3 * var(--fu))/1.2 var(--ra-font-display) !important; color: #fff; margin: calc(.4 * var(--fu)) 0 calc(1 * var(--fu)) !important }
.bl-side .opts { display: grid; grid-template-columns: 1fr; gap: calc(1 * var(--fu)) }
.bl-side .opt { grid-template-columns: calc(5 * var(--fu)) minmax(0, 1fr) auto !important; min-height: calc(8.4 * var(--fu)) !important; font: 400 calc(2.4 * var(--fu))/1.2 var(--ra-font-display) !important }
.bl-side .mute.small { font-size: calc(1.6 * var(--fu)); color: #c6b898 }
.bl-side .who, .bl-side .res { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--fu)) }
.bl-side .who span, .bl-side .res span, .bl-side .chip { font: 600 calc(1.5 * var(--fu)) var(--ra-font-ui) !important }

/* ---------- Erfolgs-Einblendung wie im Spiel: unten mittig über der Statusleiste (verdeckt keine Kopfzeile) ---------- */
body:not(.play) .achtoast { top: auto; bottom: calc(var(--footer-h) + 2 * var(--fu)); width: calc(56 * var(--fu)); font-size: calc(1.8 * var(--fu)) }
/* ---------- Goblin-Bilanz: zwei Spalten statt schmaler Liste ---------- */
.gb-bilanz { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: calc(.8 * var(--fu)) calc(1.4 * var(--fu)); margin: 0 }
.gb-bl { min-height: calc(7 * var(--fu)); box-sizing: border-box; padding: calc(.6 * var(--fu)) calc(1.4 * var(--fu)) !important; margin: 0 !important }
.gb-bl .nm { font-size: calc(2 * var(--fu)) } .gb-bl b { font-size: calc(2.2 * var(--fu)) } .gb-bl small { font-size: calc(1.5 * var(--fu)) }
/* ---------- Checkpoint: passt in die Bühne ---------- */
.scr.sc-checkpoint .tbl th, .scr.sc-checkpoint .tbl td { height: calc(4.6 * var(--fu)) } .scr.sc-checkpoint .tbl th { height: calc(3.2 * var(--fu)) }
.scr.sc-checkpoint .ra-panel { display: grid; align-content: start; gap: calc(1 * var(--fu)) }
.scr.sc-checkpoint .chromie .bubble { padding: calc(.8 * var(--fu)) calc(1.4 * var(--fu)) }
/* ---------- Beute: Fenster und Erläuterung als eine zentrierte Gruppe ---------- */
.loot2 { grid-template-columns: calc(42 * var(--fu)) minmax(0, calc(60 * var(--fu))) !important; justify-content: center; align-content: center; gap: calc(4 * var(--fu)) !important; padding: calc(4 * var(--fu)) 0 0 !important; height: 100% }
.loot-side { gap: calc(1 * var(--fu)) } .loot-side .kick { font-size: calc(1.5 * var(--fu)) } .loot-side .lead { font-size: calc(2.2 * var(--fu)); color: #f0e5cb }
.loot-side { padding: calc(1.6 * var(--fu)) calc(2 * var(--fu)); background: rgb(23 19 16 / .9); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .5) }
.loot-side .hd { margin: 0; color: #f1d34b }
.gb-main { max-height: none !important; align-self: center }
.gb-screen { align-items: center; height: 100%; padding-top: calc(3 * var(--fu)) }

/* ============================================================================================
   BOSSAUFTAKT (Zwischenboss): Titel links auf ruhiger, abgedunkelter Fläche, Motiv rechts; Mechaniken als geordnete Slot-Reihe;
   Bereitschaftscheck als gleiche Statusplatte wie überall
   ============================================================================================ */
.bossintro:not(.e2) { grid-template-columns: minmax(0, calc(78 * var(--fu))) minmax(0, 1fr); gap: calc(4 * var(--fu)); padding: 0 calc(6 * var(--fu)); align-items: center }
.bossintro:not(.e2)::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(8 5 3 / .85) 0, rgb(8 5 3 / .6) calc(70 * var(--fu)), transparent calc(110 * var(--fu))) }
.bossintro:not(.e2) .bi-text { position: relative; z-index: 2; gap: calc(1.2 * var(--fu)) }
.bi-kick { font: 600 calc(1.7 * var(--fu)) var(--ra-font-ui) !important; letter-spacing: .3em; color: #ff8a5a }
.bossintro:not(.e2) .bi-name { font: 400 calc(6.2 * var(--fu))/1 var(--ra-font-display) !important; color: #f1d34b; -webkit-text-fill-color: currentColor; background: none; text-shadow: 0 3px 0 #000, 0 0 24px rgb(0 0 0 / .8) }
.bi-title { font: 400 calc(2.4 * var(--fu)) var(--ra-font-display) !important; color: #ffcf9a } .bi-desc { font: italic 400 calc(2.1 * var(--fu))/1.4 var(--ra-font-display) !important; color: #f0e5cb; max-width: calc(70 * var(--fu)) }
.bi-stats { display: grid !important; grid-template-columns: repeat(auto-fill, calc(15 * var(--fu))); gap: calc(1 * var(--fu)); margin-top: calc(1.4 * var(--fu)) }
.bi-stats span { display: grid !important; justify-items: center; align-content: start; gap: calc(.6 * var(--fu)); padding: calc(1 * var(--fu)) calc(.6 * var(--fu)) !important; min-height: calc(10 * var(--fu)); box-sizing: border-box; text-align: center; font: 400 calc(1.7 * var(--fu))/1.15 var(--ra-font-display) !important; color: #f0e5cb; background: rgb(23 19 16 / .92) !important; border: 1px solid #000 !important; border-radius: 3px; box-shadow: inset 0 0 0 1px #59442c !important }
.bi-stats span .wi { width: calc(5 * var(--fu)) !important; height: calc(5 * var(--fu)) !important; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 1px #a78a55 }
.bossintro:not(.e2) .bi-art { position: relative; z-index: 2; height: calc(60 * var(--fu)) }
.bi-ready { bottom: calc(var(--footer-h) + 2 * var(--fu)) !important; padding: calc(1 * var(--fu)) calc(2 * var(--fu)) !important; min-width: calc(60 * var(--fu)); background: rgb(23 19 16 / .95) !important; border: 0 !important; border-image: none !important; border-radius: 3px !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgb(0 0 0 / .6) !important }
.bi-ready .kick { font: 600 calc(1.4 * var(--fu)) var(--ra-font-ui) !important; letter-spacing: .2em; color: #c6b898 !important }
/* Bereitschafts-Chips (überall gleich): gedämpft bis bereit, dann goldene Kante */
.gatebox .chip, .gate-who .chip, .bi-ready .chip { font: 600 calc(1.5 * var(--fu)) var(--ra-font-ui) !important }
/* Fähigkeits-Einblendung: feste Zone oben im Kernbereich – verdeckt nie Frage oder Antworten */
.spellcard { top: calc(9 * var(--fu)) !important; left: calc((100vw - var(--rail-w) - 2 * var(--edge)) / 2) !important; font-size: calc(1.55 * var(--fu)) !important; max-width: calc(64 * var(--fu)); box-sizing: border-box; background: linear-gradient(90deg, rgb(var(--rgb) / .2), rgb(23 19 16 / .96) 30%, rgb(23 19 16 / .96) 80%, rgb(var(--rgb) / .1)) !important; border-radius: 3px !important }
body.sc-boss .spellcard, .scr.sc-boss ~ .spellcard, body:has(.bf2) .spellcard { left: calc(var(--edge) + 64 * var(--fu) + (100vw - var(--rail-w) - 3 * var(--edge) - 64 * var(--fu)) / 2) !important; top: calc(7 * var(--fu)) !important; max-width: calc(58 * var(--fu)) }

.sc-n { font-size: calc(3.2 * var(--fu)) !important; line-height: 1.05 }
.bi-stats { grid-template-columns: repeat(auto-fill, calc(17 * var(--fu))) }
/* Einführung: Sprechtext auf dem gleichen Pergament wie Fragen; Reise als Route mit Wegstrich statt sechs grauer Kästen */
.cq-talk .cq-bubble { background: var(--fx-paper) !important; box-shadow: var(--fx-paper-sh) !important; border: 0 !important; border-radius: 3px !important; padding: calc(2.2 * var(--fu)) calc(2.8 * var(--fu)) !important; font-size: calc(2.3 * var(--fu)) !important; line-height: 1.45 !important; color: #2b1c0b }
.cq-talk .cq-bubble::before { left: calc(-1.4 * var(--fu)); top: calc(3 * var(--fu)); width: calc(2.6 * var(--fu)); height: calc(2.6 * var(--fu)); background: #e6cf9e; border: 0; box-shadow: -1px 1px 0 0 #000, -2px 2px 0 0 #59442c; clip-path: polygon(0 0, 0 100%, 100% 100%) }
.cq-right { max-width: calc(116 * var(--fu)) }
.cx-road { position: relative; margin-top: calc(2 * var(--fu)); gap: 0 }
.cx-road::before { content: ""; position: absolute; left: 8%; right: 8%; top: calc(3.6 * var(--fu)); height: 3px; background: repeating-linear-gradient(90deg, #a78a55 0 calc(1.2 * var(--fu)), transparent 0 calc(2 * var(--fu))); box-shadow: 0 1px 0 #000; opacity: .8 }
.cx-stop { position: relative; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; display: grid; justify-items: center; gap: calc(.6 * var(--fu)); text-align: center; padding: 0 calc(.4 * var(--fu)) !important }
.cx-stop .i { width: calc(7.2 * var(--fu)) !important; height: calc(7.2 * var(--fu)) !important; border-radius: 50%; padding: calc(.5 * var(--fu)); box-sizing: border-box; background: radial-gradient(#241d16, #0e0b08); box-shadow: 0 0 0 1px #000, 0 0 0 calc(.35 * var(--fu)) #a78a55, 0 0 0 calc(.35 * var(--fu) + 1px) #000, 0 calc(.6 * var(--fu)) calc(1.4 * var(--fu)) rgb(0 0 0 / .7) }
.cx-stop .i .wi, .cx-stop .i .wi.big, .cx-stop .i img { width: 100% !important; height: 100% !important; border-radius: 50% }
.cx-stop b { font: 400 calc(1.9 * var(--fu))/1.1 var(--ra-font-display) !important; color: #f1d34b; text-shadow: 0 2px 0 #000, 0 0 8px #000 }
.cx-stop small { font: 600 calc(1.35 * var(--fu)) var(--ra-font-ui) !important; letter-spacing: .14em; text-transform: uppercase; color: #c6b898; text-shadow: 0 1px 0 #000 }
.cx-stop:first-child .i { box-shadow: 0 0 0 1px #000, 0 0 0 calc(.35 * var(--fu)) #f1d34b, 0 0 0 calc(.35 * var(--fu) + 1px) #000, 0 0 calc(2.4 * var(--fu)) rgb(241 211 75 / .55) }
.cx-stop:last-child .i { filter: grayscale(.6) brightness(.8) }
/* Namenschips des Bereitschafts-Tors: dunkle Chips mit Häkchen (statt heller Etiketten), bereit = goldene Kante */
.row.gate .who span { background: rgb(23 19 16 / .92) !important; color: #c6b898 !important; border: 0 !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c !important; border-radius: 3px !important; padding: calc(.3 * var(--fu)) calc(.9 * var(--fu)) !important; font: 600 calc(1.5 * var(--fu)) var(--ra-font-ui) !important }
.row.gate .who span.in { color: #f0e5cb !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #a78a55 !important }
.row.gate .mute { font-size: calc(1.6 * var(--fu)) !important; color: #a79a80 !important }
/* Handy: Anfragen kompakt (eine Zeile je Anfrage, Knöpfe rechts), höchstens ~2 sichtbar – die Aufgabe darunter bleibt im Blick */
body.play .offers { max-height: 132px; overflow-y: auto; margin-bottom: 8px; padding: 6px; background: rgb(23 19 16 / .9); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c }
body.play .offers > .sec { font: 600 11px var(--ra-font-ui); letter-spacing: .16em; text-transform: uppercase; color: #c6b898; margin: 0 0 4px 2px; padding: 0; background: none; border: 0 }
body.play .offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 0 4px; padding: 4px 4px 4px 10px; font-size: 14px; line-height: 1.25; background: linear-gradient(#1c2230, #10141c); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #3d5f94; border-radius: 3px }
body.play .offer .so-row { display: flex; gap: 4px; margin: 0 }
body.play .offer .so-row .pb.sm { min-height: 40px; min-width: 0; padding: 0 10px; font-size: 13px }
/* Handy Stimmen: Abspiel-Knöpfe als volle Zeile mit Icon links */
body.play.sc-stimmen .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin-bottom: 8px }
body.play.sc-stimmen .seg .pb { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; font-size: 15px; white-space: nowrap }
body.play.sc-stimmen .seg .pb .wi { width: 24px; height: 24px; flex: none }
/* Handy-Antworten: Buchstabe immer links neben dem Text (auch bei langen Antworten) */
body.play .pa { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-auto-flow: column; align-items: center !important; column-gap: 12px }
body.play .pa > span { min-width: 0; grid-row: 1 }
body.play .pa > .lt { grid-row: 1; grid-column: 1 }
body.play .pb:has(> .lt) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; text-align: left }
body.play .pb:has(> .lt) > span { min-width: 0 }
/* Aktauftakt: Stationen nummeriert (Reihenfolge des Akts), Nummer als kleines Goldschild am Icon */
.ai-steps { counter-reset: aist } .ai-steps span { position: relative; counter-increment: aist }
.ai-steps span::before { content: counter(aist); position: absolute; left: calc(-.6 * var(--fu)); top: calc(-.9 * var(--fu)); z-index: 2; min-width: calc(2 * var(--fu)); height: calc(2 * var(--fu)); padding: 0 calc(.3 * var(--fu)); box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font: 700 calc(1.2 * var(--fu))/1 var(--ra-font-ui); color: #1a1208; background: linear-gradient(#f1d34b, #b8902f); box-shadow: 0 0 0 1px #000 }
/* EP-Leiste wie im Client: Segmentstriche auf der Spur, damit eine leere Leiste als EP-Leiste lesbar bleibt */
.pf-xp { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgb(167 138 85 / .35) calc(10% - 1px) 10%), linear-gradient(#1a1422, #0c0a08) !important }
.pf-xp i { position: relative; display: block; height: 100% }

/* ============================================================================================
   NEUE MINISPIELE & FINALE (Chroniken, Kartograph, Zauberbuch, Jackpot, Schmiede, Legendäre Quest)
   ============================================================================================ */
/* Chroniken: Ereigniskarten als dunkle Platten mit Buchstaben-/Positions-Slot */
.ch-screen .chromie { font-size: calc(1.8 * var(--fu)) }
.ch-cards { display: grid; gap: calc(.9 * var(--fu)) }
.ch-card { display: grid; grid-template-columns: calc(4.6 * var(--fu)) minmax(0, 1fr); align-items: center; gap: calc(1.2 * var(--fu)); min-height: calc(6.4 * var(--fu)); padding: calc(.6 * var(--fu)) calc(1.2 * var(--fu)) calc(.6 * var(--fu)) calc(.6 * var(--fu)); box-sizing: border-box;
  background: linear-gradient(#241d16, #171310 60%, #14100d); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c; animation: chin .45s calc(var(--k) * .08s) both }
@keyframes chin { from { opacity: 0; transform: translateX(calc(-2 * var(--fu))) } }
.ch-card .ch-n { width: calc(4.6 * var(--fu)); height: calc(4.6 * var(--fu)); display: grid; place-items: center; border-radius: 6px; font: 400 calc(2.4 * var(--fu)) var(--ra-font-display); color: #f1d34b; background: radial-gradient(#1c1510, #0a0806); box-shadow: 0 0 0 1px #000, 0 0 0 2px #a78a55 }
.ch-card b { display: block; font: 400 calc(2.1 * var(--fu))/1.2 var(--ra-font-display); color: #f0e5cb } .ch-card small { font: 600 calc(1.5 * var(--fu)) var(--ra-font-ui); color: #f1d34b; letter-spacing: .06em }
.ch-card.ok { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #73ba69 } .ch-card.ok .ch-n { box-shadow: 0 0 0 1px #000, 0 0 0 2px #73ba69; color: #b8f0a8 }
.ch-res { display: grid; gap: calc(.5 * var(--fu)) }
.ch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto calc(8 * var(--fu)); align-items: center; gap: calc(1 * var(--fu)); padding: calc(.5 * var(--fu)) calc(1 * var(--fu)); font-size: calc(1.8 * var(--fu)); background: #171310; border-radius: 3px; box-shadow: inset 0 0 0 1px #3b2e20 }
.ch-row b { text-align: right; font: 400 calc(2 * var(--fu)) var(--ra-font-display); color: #f0e5cb } .ch-row.perfect { box-shadow: inset 0 0 0 1px #f1d34b } .ch-row.perfect b { color: #f1d34b }
.ch-seq { display: flex; gap: 3px } .ch-seq i { width: calc(2.4 * var(--fu)); height: calc(2.4 * var(--fu)); display: grid; place-items: center; font: 700 calc(1.3 * var(--fu)) var(--ra-font-ui); font-style: normal; border-radius: 3px; background: #0c0a08 }
.ch-seq i.ok { color: #b8f0a8; box-shadow: inset 0 0 0 1px #73ba69 } .ch-seq i.no { color: #ff9a8a; box-shadow: inset 0 0 0 1px #8a3a2a }
/* Kartograph: große Karte links, Ort + Ergebnis rechts */
.ka-screen { grid-template-columns: calc(96 * var(--fu)) calc(50 * var(--fu)) !important }
@media (min-aspect-ratio: 21/10) { .ka-screen { grid-template-columns: calc(118 * var(--fu)) calc(58 * var(--fu)) !important } }
.ka-left { padding: calc(1 * var(--fu)) !important }
.ka-map { position: relative; line-height: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #59442c; align-self: center; max-height: 100%; background: #0a0806 }
.ka-map img { width: 100%; height: auto; max-height: calc(64 * var(--fu)); object-fit: contain; display: block; filter: sepia(.25) saturate(.9) }
.ka-pin, .ka-goal { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; font-style: normal; line-height: 1.2; z-index: 2 }
.ka-pin::before { content: ""; position: absolute; left: calc(-.9 * var(--fu)); top: calc(-.9 * var(--fu)); width: calc(1.8 * var(--fu)); height: calc(1.8 * var(--fu)); border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 0 2px #000, 0 0 calc(1 * var(--fu)) rgb(0 0 0 / .8); animation: pinin .4s both }
.ka-pin b { position: absolute; left: calc(1.2 * var(--fu)); top: calc(-1 * var(--fu)); white-space: nowrap; font: 700 calc(1.3 * var(--fu)) var(--ra-font-ui); color: var(--c, #fff); text-shadow: 0 1px 0 #000, 0 0 4px #000 }
.ka-goal::before { content: ""; position: absolute; left: calc(-1.6 * var(--fu)); top: calc(-1.6 * var(--fu)); width: calc(3.2 * var(--fu)); height: calc(3.2 * var(--fu)); border-radius: 50%; border: 3px solid #f1d34b; box-shadow: 0 0 0 2px #000, 0 0 calc(2 * var(--fu)) #f1d34b; animation: goal 1.2s ease-out both }
.ka-goal b { position: absolute; left: 50%; top: calc(2 * var(--fu)); transform: translateX(-50%); white-space: nowrap; padding: .15em .6em; font: 400 calc(1.8 * var(--fu)) var(--ra-font-display); color: #f1d34b; background: rgb(10 8 6 / .9); border-radius: 3px; box-shadow: 0 0 0 1px #59442c }
@keyframes pinin { from { transform: translateY(calc(-3 * var(--fu))); opacity: 0 } }
@keyframes goal { from { transform: scale(3); opacity: 0 } }
.ka-name { margin: 0; font: 400 calc(3.4 * var(--fu))/1.1 var(--ra-font-display); color: #f1d34b; text-shadow: 0 2px 0 #000 }
.ka-bar { width: calc(12 * var(--fu)); height: calc(1.2 * var(--fu)); background: #0c0a08; border-radius: 2px; box-shadow: inset 0 0 0 1px #3b2e20; overflow: hidden } .ka-bar i { display: block; height: 100%; background: linear-gradient(#f1d34b, #b8902f) }
/* Zauberbuch: Kopfzeile über der normalen Frage */
.zb-stage { display: grid; gap: calc(1 * var(--fu)); align-content: center; height: 100% } .zb-head .kick { font-size: calc(1.6 * var(--fu)) }
/* Finale: Jackpot & Schmiede als ein zentrales Fenster */
.fn-screen { display: grid; place-items: center; height: 100%; padding: calc(3 * var(--fu)) 0 calc(2 * var(--fu)); box-sizing: border-box }
.fn-win { width: calc(110 * var(--fu)); max-width: 92vw } .fn-win .wf-body { display: grid; gap: calc(1.4 * var(--fu)); padding: calc(1.4 * var(--fu)) }
.jp-pot { display: flex; align-items: center; gap: calc(1.6 * var(--fu)); padding: calc(1 * var(--fu)) calc(1.4 * var(--fu)); background: #171310; border-radius: 3px; box-shadow: inset 0 0 0 1px #59442c }
.jp-pot .wi { width: calc(7 * var(--fu)) !important; height: calc(7 * var(--fu)) !important } .jp-pot b { display: block; font: 400 calc(4 * var(--fu)) var(--ra-font-display); color: #f1d34b } .jp-pot small { color: #c6b898; font-size: calc(1.5 * var(--fu)) }
.jp-q { padding: calc(1.6 * var(--fu)) calc(2 * var(--fu)); font: 400 calc(3 * var(--fu))/1.25 var(--ra-font-display); color: #2b1c0b; background: var(--fx-paper); box-shadow: var(--fx-paper-sh); border-radius: 3px }
.jp-ans { font: 400 calc(2.6 * var(--fu)) var(--ra-font-display); color: #f0e5cb } .jp-ans b { color: #73ba69 }
.fn-reag { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.2 * var(--fu)) }
.fn-r { display: grid; justify-items: center; gap: calc(.6 * var(--fu)); padding: calc(1.4 * var(--fu)); background: #171310; border-radius: 3px; box-shadow: inset 0 0 0 1px #ff8000; text-align: center }
.fn-r .wi { width: calc(7 * var(--fu)) !important; height: calc(7 * var(--fu)) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff8000, 0 0 calc(2 * var(--fu)) rgb(255 128 0 / .5) } .fn-r b { font: 400 calc(2.2 * var(--fu)) var(--ra-font-display); color: #ff8000 } .fn-r span { color: #f0e5cb; font-size: calc(1.8 * var(--fu)) }
.fn-bag { display: flex; gap: 3px } .fn-bag .wi { width: calc(2.4 * var(--fu)) !important; height: calc(2.4 * var(--fu)) !important }
/* Legendäre Quest: Kategorie-/Überraschungskarte in Legendär-Orange */
.lg-card { display: grid; justify-items: center; gap: calc(1.4 * var(--fu)); max-width: calc(120 * var(--fu)); margin: auto; padding: calc(4 * var(--fu)) calc(5 * var(--fu)); text-align: center;
  background: radial-gradient(ellipse at 50% 0, rgb(255 128 0 / .18), transparent 60%), linear-gradient(rgb(23 19 16 / .95), rgb(14 11 8 / .96)); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #ff8000, 0 0 calc(6 * var(--fu)) rgb(255 128 0 / .25) }
.lg-card h1 { margin: 0; font: 400 calc(6 * var(--fu))/1.05 var(--ra-font-display); color: #ff8000; text-shadow: 0 3px 0 #000, 0 0 calc(3 * var(--fu)) rgb(255 128 0 / .5); animation: lgin .9s cubic-bezier(.2, 1.3, .4, 1) both }
.lg-card .lead { font-size: calc(2.2 * var(--fu)); color: #f0e5cb; margin: 0 } .lg-card .kick { font-size: calc(1.7 * var(--fu)); letter-spacing: .3em }
.lg-card.twist { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #c77dff, 0 0 calc(8 * var(--fu)) rgb(199 125 255 / .35) } .lg-card.twist h1 { color: #c77dff; text-shadow: 0 3px 0 #000, 0 0 calc(3 * var(--fu)) rgb(199 125 255 / .6) }
.lg-card .chromie { text-align: left; font-size: calc(2 * var(--fu)) }
@keyframes lgin { from { transform: scale(1.6); opacity: 0; filter: blur(8px) } }
.lg-q .ra-qpaper { box-shadow: var(--fx-paper-sh), 0 0 0 2px #ff8000, 0 0 calc(3 * var(--fu)) rgb(255 128 0 / .35) }
/* Handy */
body.play .ka-map.ph { margin: 6px 0 10px; border-radius: 6px } body.play .ka-map.ph img { max-height: 58vh } body.play .ka-map.tap { cursor: crosshair; touch-action: manipulation }
body.play .ka-pin::before { width: 18px; height: 18px; left: -9px; top: -9px } body.play .ka-goal::before { width: 26px; height: 26px; left: -13px; top: -13px } body.play .ka-goal b { top: 16px; font-size: 13px }
body.play .ch-b.on { opacity: .55 } body.play .ch-b.on .lt { color: #73ba69 }
body.play .ch-sol { margin: 8px 0 12px; padding-left: 22px; font-size: 15px; line-height: 1.5 } body.play .ch-sol small { color: #f1d34b }
body.play .lg-items { display: grid; gap: 6px; margin-top: 10px } body.play .lg-items .kick { font-size: 11px; letter-spacing: .16em; color: #ff8000 }
/* Raid-Hintergrund folgt dem aktuellen Akt (body[data-raid] kommt vom Server: Boss-Raid oder Raid des Akts) */
body { --raid-bg: url('/assets/ui/backgrounds/raid-mc.webp') }
body[data-raid="bwl"] { --raid-bg: url('/assets/ui/backgrounds/raid-bwl.webp') } body[data-raid="zg"] { --raid-bg: url('/assets/ui/backgrounds/raid-zg.webp') }
body[data-raid="aq"] { --raid-bg: url('/assets/ui/backgrounds/raid-aq.webp') } body[data-raid="kara"] { --raid-bg: url('/assets/ui/backgrounds/raid-kara.webp') }
body[data-raid="ony"] { --raid-bg: url('/assets/ui/backgrounds/raid-ony.webp') } body[data-raid="tut"], body[data-raid="finale"] { --raid-bg: url('/assets/ui/loading/cavernstime.webp') }
.scr.sc-tooltip .ra-amb, .scr.sc-checkpoint .ra-amb, .scr.sc-zauberbuch .ra-amb, .scr.sc-kartograph .ra-amb { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgb(0 0 0 / .3), rgb(0 0 0 / .88)), var(--raid-bg) center / cover !important }
.scr.sc-chroniken .ra-amb, .scr.sc-jackpot .ra-amb, .scr.sc-schmiede .ra-amb, .scr.sc-legend .ra-amb { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgb(0 0 0 / .25), rgb(0 0 0 / .85)), url('/assets/ui/loading/cavernstime.webp') center / cover !important }
.scr.sc-legend .ra-amb { background: radial-gradient(ellipse 60% 60% at 50% 40%, rgb(255 128 0 / .12), rgb(0 0 0 / .88)), url('/assets/ui/loading/halloflegends.webp') center / cover !important }
.fn-win .ch-row { grid-template-columns: minmax(0, 1fr) auto auto calc(3 * var(--fu)) }
/* Einlass: Felder exakt auf die dunklen Eingabefelder der Login-Box (vermessen: 38–50 % und 68–80 % der Höhe) */
.glue-form .glue-lab:nth-of-type(1) { top: 26% !important } .glue-form .glue-lab:nth-of-type(2) { top: 56% !important }
.glue-form .glue-in { left: 9.5% !important; width: 81% !important; height: 11% !important; padding: 0 1em !important; box-sizing: border-box; text-align: center; line-height: normal }
.glue-form #sl-n { top: 38.6% !important } .glue-form #sl-p { top: 68.6% !important }
.glue-form .glue-red { top: 85% !important }
.glue-form .gl-err { top: 51.5% !important; font-size: .9em }
/* Charakterauswahl ohne Figur in der Mitte: nur „Welt betreten“ bzw. Wartehinweis unten mittig, kein roter Kasten */
.csel-main > .csel-enter { grid-row: 2; align-self: end; border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important }
.csel-main > .csel-enter .glue-red.big { min-width: 12em; height: 2.6em; font-size: 1.3em }
/* Statusstreifen im Einlass bei schmalen/hohen Bildschirmen: nur die Hauptaussage */
@media (max-aspect-ratio: 3/2) { .scr.sc-lobby .ra-dock .dk-main > .mute { display: none } .scr.sc-lobby .ra-dock .dk-main b { white-space: nowrap } }
/* Pull-Countdown: immer bildschirmmittig (die Zweispalten-Aufteilung des Bossauftakts gilt hier nicht) */
.bossintro.pull { grid-template-columns: 1fr !important; padding: 0 !important; place-items: center !important; justify-content: center }
.bossintro.pull::before { background: radial-gradient(ellipse at center, rgb(8 5 3 / .35), rgb(8 5 3 / .75)) !important }
/* Erfolgsbanner: Rahmen ist jetzt ein eigenes Bild (aus dem Atlas geschnitten, 4× hochskaliert) */
.achtoast { background: url(/assets/ui/frames/achv-alert-wide.png) center / 100% 100% no-repeat !important; aspect-ratio: 308 / 86; box-sizing: border-box; padding: 0 5% 0 2.5% !important; gap: 3% !important; align-items: center }
body:not(.play) .achtoast { width: calc(60 * var(--fu)); height: auto; font-size: calc(1.8 * var(--fu)) }
body:not(.play) .achtoast .at-shield { width: calc(8 * var(--fu)); height: calc(8 * var(--fu)) } body:not(.play) .achtoast .at-shield img { width: calc(4.2 * var(--fu)); height: calc(4.2 * var(--fu)) }
body:not(.play) .achtoast .at-txt small { font-size: calc(1.2 * var(--fu)) } body:not(.play) .achtoast .at-txt b { font-size: calc(2.4 * var(--fu)) } body:not(.play) .achtoast .at-txt span { font-size: calc(1.4 * var(--fu)) }
body:not(.play) .achtoast .at-pts { font-size: calc(2.2 * var(--fu)) }
body.play .achtoast { width: min(94vw, 420px); padding: 0 5% 0 2.5% !important }
.at-txt { min-width: 0 } .at-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* Kopf der Raidliste: flache dunkle Titelplatte wie die Fensterköpfe (statt gestreckter Holztextur), Anzahl als kleiner Chip */
.pty-h { background: linear-gradient(#241d16, #171310) !important; border: 0 !important; border-radius: 3px !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #59442c, 0 calc(.4 * var(--fu)) calc(1 * var(--fu)) rgb(0 0 0 / .5) !important;
  height: calc(3.6 * var(--fu)) !important; padding: 0 calc(.6 * var(--fu)) 0 calc(1.2 * var(--fu)) !important; margin: 0 0 calc(.8 * var(--fu)) !important; font: 400 calc(2.2 * var(--fu)) var(--ra-font-display) !important; color: #f1d34b !important; letter-spacing: .01em; text-transform: none !important }
.pty-h .pty-n { min-width: calc(2.6 * var(--fu)); height: calc(2.3 * var(--fu)); display: grid; place-items: center; padding: 0 calc(.5 * var(--fu)); box-sizing: border-box; font: 700 calc(1.4 * var(--fu)) var(--ra-font-ui); color: #f0e5cb; background: #0c0a08; border-radius: 3px; box-shadow: inset 0 0 0 1px #59442c }
/* Persönlicher Bildschirm: eigene falsche Antwort rot, eigene richtige mit grünem „Du“ */
.ra-ans.no.mine { opacity: .95 !important; filter: none !important; box-shadow: 0 0 0 2px #ff5a4a, 0 0 22px rgb(255 70 50 / .45) !important; background-color: rgb(80 16 12 / .9) !important }
.ra-ans.no.mine .ra-me { background: #c0281c; color: #fff } .ra-ans.ok.mine .ra-me { background: #5ee07a; color: #0e3a1a }

/* Handy koppeln (09.10.2026): eigener QR-Code in der Charakterauswahl – Einmal-Code, scannen = Handy sofort angemeldet */
.csl-qr { display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center; margin-top: .7em; padding: .7em; border-radius: 4px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(214 176 98 / .35) }
.csl-qr .qr-me { width: 8.6em; height: 8.6em; padding: .4em; border-radius: 4px; background: #120e0a; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 98 / .5) }
.csl-qr .qr-me svg, .qr-me svg { width: 100%; height: 100%; display: block }
.csl-qr .tx { display: grid; gap: .3em; font: 500 .82em/1.35 var(--ra-font-ui); color: #d8ccb2 }
.csl-qr .tx b { font: 400 1.25em/1.1 var(--ra-font-display); color: var(--fx-yellow, #ffd100) }
.csl-qr .tx em { font-style: normal; color: #fff }
.csl-qr .tx small { font-size: .85em; color: #9c8b6b }
.csl-qr.on { grid-template-columns: auto 1fr; box-shadow: inset 0 0 0 1px rgb(143 224 122 / .35) }
.csl-qr.on .qr-me { width: 4.6em; height: 4.6em; padding: .25em; opacity: .85 }
.csl-qr.on .tx b { color: #8fe07a }
.csel-figure .qr-me.big { width: 9em; height: 9em; margin: .6em auto 0; padding: .45em; border-radius: 4px; background: #120e0a; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 98 / .5) }