/* ======================================================================
   RAIDABEND · Gestaltung 2.0 („Ein Abend in Azeroth“)
   Szenenrahmen, Gruppenleiste, Statusleiste, Frage-Komponente, Questtafel,
   Bosskampf, Effekte. Originalgrafiken aus dem WoW-Client unter /assets/ui/frames|tex|loading.
   ====================================================================== */
@font-face { font-family: 'Friz Quadrata'; src: url('/assets/ui/fonts/frizqt__.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Morpheus'; src: url('/assets/ui/fonts/morpheus.ttf') format('truetype'); font-display: swap; }

:root {
  --ra-bg: #0d1012; --ra-surface: #17191b; --ra-surface-raised: #242421;
  --ra-ivory: #f2e9d6; --ra-muted: #b9b09e; --ra-dim: #857b69;
  --ra-brass: #b89456; --ra-brass-light: #e2c58c; --ra-border: #665236;
  --ra-parchment: #e5d0a1; --ra-ink: #251b12; --ra-ink-2: #4a3620;
  --ra-success: #9fd390; --ra-danger: #f0a19c; --ra-focus: #e8d3a4; --ra-gold: #ffd100;
  --ra-common: #e2ded6; --ra-uncommon: #71b95a; --ra-rare: #70a9e8; --ra-epic: #bd90e4; --ra-legendary: #e5ad62;
  --ra-radius: 4px; --ra-ease: cubic-bezier(.22, 1, .36, 1);
  --ra-font-display: 'Friz Quadrata', 'Marcellus', Georgia, serif;
  --ra-font-epic: 'Morpheus', 'Friz Quadrata', Georgia, serif;
  --ra-font-ui: 'Alegreya Sans', system-ui, 'Segoe UI', sans-serif;
  --ra-shadow: 0 12px 32px rgb(0 0 0 / .45);
  --ra-frame: url('/assets/ui/frames/dialog-9.png');
  --ra-frame-gold: url('/assets/ui/frames/dialog-gold-9.png');
  --ra-frame-tt: url('/assets/ui/frames/tooltip-9.png');
  --ra-stone: url('/assets/ui/tex/stone-marble.webp');
  --ra-rock: url('/assets/ui/tex/stone-rock.webp');
  --ra-paper: url('/assets/ui/tex/parchment-quest.webp');
  --ra-paper-wide: url('/assets/ui/tex/parchment-wide.webp');
}
.r-c { --rc: var(--ra-common) } .r-u { --rc: var(--ra-uncommon) } .r-r { --rc: var(--ra-rare) } .r-e { --rc: var(--ra-epic) } .r-l { --rc: var(--ra-legendary) }

/* Material: dunkles Fenster mit Original-Rahmen (9-Slice) */
.ra-mat { border: 16px solid transparent; border-image: var(--ra-frame) 32 fill / 16px stretch; background: rgb(12 11 10 / .88) var(--ra-stone); background-clip: padding-box; box-shadow: var(--ra-shadow) }
.ra-mat.gold { border-image-source: var(--ra-frame-gold) }

/* ---------- Szenenrahmen ---------- */
.scr.ra-shell { font-size: clamp(13px, min(1.05vw, 1.87vh), 44px); grid-template-rows: auto 1fr auto; color: var(--ra-ivory); font-family: var(--ra-font-display) }
.ra-amb { position: fixed; inset: 0; z-index: -1; pointer-events: none }
.mood-tavern .ra-amb { background:
  radial-gradient(ellipse 55% 70% at 8% 75%, rgb(255 150 60 / .38), transparent 70%),
  radial-gradient(ellipse 40% 50% at 92% 20%, rgb(120 170 255 / .10), transparent 70%),
  radial-gradient(ellipse at 50% 50%, transparent 40%, rgb(0 0 0 / .75) 100%),
  repeating-linear-gradient(90deg, #2a1b10 0 3px, #3a2615 3px 118px, #2f1f12 118px 124px, #3d2916 124px 236px),
  #24170d; animation: hearth 5s ease-in-out infinite }
.mood-tavern .ra-amb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, rgb(0 0 0 / .08) 22px 23px); mix-blend-mode: multiply }
@keyframes hearth { 0%, 100% { filter: brightness(1) } 40% { filter: brightness(1.07) } 55% { filter: brightness(.96) } 70% { filter: brightness(1.04) } }
.mood-raid .ra-amb { background: radial-gradient(ellipse at 50% 20%, transparent 30%, rgb(0 0 0 / .55) 100%) }
.mood-camp .ra-amb { background: radial-gradient(ellipse 50% 50% at 25% 70%, rgb(255 140 50 / .3), transparent 70%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgb(0 0 0 / .8)) }

.ra-hud { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .55em clamp(20px, min(2.4vw, 4.27vh), 96px); background: linear-gradient(rgb(0 0 0 / .8), rgb(0 0 0 / .1)); position: relative; z-index: 3 }
.hud-l { display: flex; align-items: baseline; gap: .8em; min-width: 0 }
.hud-act { font: 400 .72em/1 var(--ra-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ra-brass-light) }
.hud-st { font-size: 1.15em; color: var(--ra-gold); text-shadow: 0 2px 0 #000 }
.hud-r { display: flex; gap: .5em }
.chip-r { display: inline-flex; align-items: center; gap: .35em; padding: .25em .6em; font: 500 .78em var(--ra-font-ui); color: var(--ra-ivory); background: rgb(0 0 0 / .55); border: 1px solid rgb(184 148 86 / .45); border-radius: 3px }
.wi.tiny { width: 1.1em; height: 1.1em; vertical-align: -.2em; border-radius: 2px } .wi.dk { width: 1.9em; height: 1.9em; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ra-border) } .wi.cat { width: 1.8em; height: 1.8em; border-radius: 3px; box-shadow: 0 0 0 1px #000 }

.ra-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, min(15.5vw, 27.59vh), 580px); gap: clamp(16px, min(1.6vw, 2.85vh), 64px); padding: .6em clamp(20px, min(2.4vw, 4.27vh), 96px) 1em; min-height: 0; position: relative; z-index: 2 }
.ra-stage { min-width: 0; min-height: 0; display: grid; align-content: center; position: relative }
.ra-panel { border: 16px solid transparent; border-image: var(--ra-frame) 32 fill / 16px stretch; background: rgb(14 12 10 / .9) var(--ra-stone); background-clip: padding-box; padding: 1em 1.3em; max-height: 100%; overflow: auto; box-shadow: var(--ra-shadow) }
.ra-full { min-height: 0; position: relative; z-index: 2 }
.is-full { grid-template-rows: 0 1fr auto } .is-full .ra-hud { display: none }
.ra-side { display: grid; grid-template-rows: auto 1fr; gap: .8em; min-height: 0 }

/* ---------- Gruppenleiste ---------- */
.party { border: 12px solid transparent; border-image: var(--ra-frame-tt) 16 fill / 12px stretch; background: rgb(8 8 10 / .86); background-clip: padding-box; padding: .35em .2em; display: grid; gap: .3em; align-content: start }
.pty-h { display: flex; justify-content: space-between; font: 500 .7em var(--ra-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ra-brass-light); padding: 0 .3em .2em; border-bottom: 1px solid rgb(184 148 86 / .25) }
.pf { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .15em .55em; align-items: center; padding: .4em .45em .45em; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); border: 1px solid rgb(255 255 255 / .04); transition: background-color .3s }
.pf-por { position: relative; width: 2.6em; height: 2.6em; grid-row: span 2 }
.pf-por .ico { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--ra-brass), 0 3px 8px #000 }
.pf-lv { position: absolute; right: -.35em; bottom: -.3em; min-width: 1.45em; height: 1.45em; display: grid; place-items: center; font-size: .66em; color: var(--ra-gold); background: radial-gradient(circle at 40% 35%, #4a3818, #120c05); border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ra-brass) }
.pf-main { min-width: 0; display: grid; gap: .18em }
.pf-name { font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: .3em; align-items: center }
.pf-name .nm { overflow: hidden; text-overflow: ellipsis }
.pf-name .fac { width: .9em; height: .9em }
.pf-xp, .pf-hp { position: relative; height: .5em; background: #0b0906; border-radius: 2px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(184 148 86 / .25); overflow: hidden }
.pf-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#c880f0, #6a1d9a); transition: width .9s var(--ra-ease) }
.pf-hp { height: 1.05em } .pf-hp i { position: absolute; inset: 0 auto 0 0; background: url('/assets/ui/frames/raid-hp-fill.png') 0 0 / auto 100%, linear-gradient(#3fd24a, #178a22); background-blend-mode: multiply; transition: width .6s var(--ra-ease) }
.pf-hp.low i { background-color: #c43; background-image: linear-gradient(#e25a3a, #8e1d10) } .pf-hp.dead i { width: 0 !important }
.pf-hp span { position: relative; display: block; text-align: center; font: 600 .62em/1.7 var(--ra-font-ui); color: #fff; text-shadow: 0 1px 1px #000 }
.pf-hp .sh { position: absolute; inset: 0 auto 0 0; background: rgb(255 255 255 / .35); mix-blend-mode: screen }
.pf-sub { display: flex; gap: .5em; align-items: center; font: 500 .66em var(--ra-font-ui); color: var(--ra-muted) }
.pf-rk { color: var(--ra-brass-light) } .mv { font-style: normal; font-size: .9em; margin-left: .15em } .mv.up { color: #6f6 } .mv.dn { color: #f66 }
.pf-state { position: absolute; right: .4em; bottom: .38em; font: 600 .6em var(--ra-font-ui); letter-spacing: .04em; padding: .12em .45em; border-radius: 99px; color: var(--ra-muted); opacity: 0; transition: opacity .25s }
.pf.st-think .pf-state { opacity: 1; color: var(--ra-muted); background: rgb(0 0 0 / .5) }
.pf.st-in .pf-state { opacity: 1; color: #1b1308; background: var(--ra-brass-light) }
.pf.st-ready .pf-state { opacity: 1; color: #0c1f09; background: var(--ra-success) }
.pf.st-pick .pf-state { opacity: 1; color: #1b1308; background: var(--ra-gold); animation: pulsechip 1.2s ease-in-out infinite }
.pf.st-off .pf-state, .pf.st-dead .pf-state { opacity: 1; color: #fff; background: #6b1c16 }
.pf.st-watch .pf-state { opacity: .8; background: rgb(0 0 0 / .45) }
.pf.st-ok .pf-state, .pf.st-no .pf-state { animation: chipin .35s var(--d, 1.5s) var(--ra-ease) both }
.pf.st-ok .pf-state { color: #0c1f09; background: var(--ra-success) } .pf.st-no .pf-state { color: #2a0906; background: var(--ra-danger) }
.pf.st-off, .pf.st-dead { filter: grayscale(.8) brightness(.7) }
.pf.st-pick { border-color: var(--ra-gold); box-shadow: 0 0 18px rgb(255 209 0 / .25) }
.pf.lead .pf-por .ico { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--ra-gold), 0 0 14px rgb(255 209 0 / .55) }
@keyframes chipin { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
@keyframes pulsechip { 50% { box-shadow: 0 0 12px rgb(255 209 0 / .8) } }
/* Momente an einzelnen Rahmen (von fx.js gesetzt) */
.pf.fx-lock { animation: pflock .8s ease-out } @keyframes pflock { 0% { background-color: rgb(226 197 140 / .45); transform: scale(1.03) } 100% { background-color: transparent; transform: none } }
.pf.fx-ready { animation: pfready .9s ease-out } @keyframes pfready { 0% { box-shadow: inset 0 0 0 2px var(--ra-success) } 100% { box-shadow: inset 0 0 0 2px transparent } }
.pf.fx-ok { animation: pfok 1.2s ease-out } @keyframes pfok { 0% { background-color: rgb(120 230 110 / .45) } 100% { background-color: transparent } }
.pf.fx-no { animation: pfno 1.2s ease-out } @keyframes pfno { 0% { background-color: rgb(240 90 70 / .45); transform: translateX(-3px) } 15% { transform: translateX(3px) } 30% { transform: none } 100% { background-color: transparent } }
.pf.fx-hurt { animation: pfno .7s ease-out }
.pf.fx-ding { animation: pfding 2.2s ease-out } @keyframes pfding { 0% { box-shadow: 0 0 0 2px var(--ra-gold), 0 0 40px rgb(255 209 0 / .9) } 100% { box-shadow: 0 0 0 0 transparent } }
.pf.fx-dead { animation: pfno 1.5s ease-out }
.hiddenlb { padding: 1em; text-align: center; color: var(--ra-muted) }

/* Kampflog */
.combatlog { align-self: end; font: 500 .66em/1.35 var(--ra-font-ui); color: var(--ra-muted); padding: .4em .6em; background: linear-gradient(transparent, rgb(0 0 0 / .55)); border-radius: 4px; max-height: 11em; overflow: hidden }
.combatlog .cl-h { font-size: .9em; letter-spacing: .14em; text-transform: uppercase; color: var(--ra-dim); margin-bottom: .2em }
.cl-line { animation: clin .4s var(--ra-ease) both } .cl-line:nth-last-child(n+4) { opacity: .55 }
@keyframes clin { from { opacity: 0; transform: translateX(12px) } }
.combatlog:has(.cl-lines:empty) { visibility: hidden }

/* ---------- Statusleiste unten ---------- */
.ra-dock { position: relative; z-index: 3; display: flex; align-items: center; gap: 1.2em; min-height: 3.6em; padding: .45em clamp(20px, min(2.4vw, 4.27vh), 96px); background: linear-gradient(rgb(0 0 0 / .1), rgb(0 0 0 / .85) 35%); border-top: 1px solid rgb(184 148 86 / .35) }
.dk-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6em; font-size: .95em }
.dk-main b { font-weight: 400; color: var(--ra-ivory) } .dk-main .mute, .dk-side .mute { color: var(--ra-muted); font: 500 .8em var(--ra-font-ui) }
.dk-side { display: flex; align-items: center; gap: .6em }
.dk-side .cnt { font-size: 1.1em; color: var(--ra-gold); font-weight: 400 }
.pips { display: flex; gap: .3em } .pips i { width: .7em; height: .7em; border-radius: 50%; background: #2a241c; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(255 255 255 / .1); transition: background .25s, box-shadow .25s }
.pips i.on { background: var(--c); box-shadow: 0 0 0 1px #000, 0 0 8px var(--c) }
/* Chromie als kurze Randnotiz im Dock – verdeckt nie die Aufgabe */
.narr { display: flex; align-items: center; gap: .6em; max-width: 44%; padding-right: 1em; border-right: 1px solid rgb(184 148 86 / .25); animation: narrin .6s var(--ra-ease) both, narrout .6s 12.5s ease forwards }
.narr-pic { width: 3.2em; height: 3.2em; border-radius: 50%; object-fit: cover; object-position: top; background: #1a1510; box-shadow: 0 0 0 2px #000, 0 0 0 3px #3fae8a; margin-top: -1.2em }
.narr-txt { font: italic 400 .82em/1.3 var(--ra-font-display); color: var(--ra-ivory) } .narr-txt b { font-style: normal; color: #7fe0b5; font-weight: 400 }
.narr-t { display: block; font: normal 500 .9em var(--ra-font-ui); color: var(--ra-muted) }
@keyframes narrin { from { opacity: 0; transform: translateY(12px) } } @keyframes narrout { to { opacity: 0; max-width: 0; padding: 0; border: 0; overflow: hidden } }
.scr.ra-shell .comp, .scr.ra-shell .nextbar { display: none }
.ra-stage > .chip.done { justify-self: center; margin-top: .8em }

/* ---------- Frage (Questtext + vier Antwortplatten) ---------- */
.ra-q { display: grid; gap: clamp(12px, min(1.2vw, 2.14vh), 44px); max-width: 56em; width: 100%; justify-self: center }
.ra-qpaper { position: relative; padding: 1.1em 1.6em 1em; color: var(--ra-ink); background: var(--ra-paper-wide) center / cover, var(--ra-parchment); border-radius: 3px; box-shadow: 0 0 0 1px #3a2812, 0 0 0 4px #6b5230, 0 0 0 5px #20160a, var(--ra-shadow) }
.ra-qhead { display: flex; align-items: center; gap: .7em; margin-bottom: .45em }
.ra-seal { width: 2.6em; height: auto; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5)) } .ra-seal.sm { width: 1.9em }
.ra-qmeta { display: grid; line-height: 1.15 }
.ra-rar { font: 700 .72em var(--ra-font-ui); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--rc, #555) 30%, #2a1a0a) }
.ra-cat { font-size: 1.05em; color: var(--ra-ink-2) }
.ra-tag { margin-left: auto; font: 700 .72em var(--ra-font-ui); padding: .3em .7em; color: #fff; background: #7a2a10; border-radius: 3px; box-shadow: 0 0 12px rgb(255 120 40 / .5) }
.ra-qtext { font-size: clamp(22px, min(1.8vw, 3.2vh), 76px); line-height: 1.25; text-wrap: balance; color: #1e140b }
.ra-qfoot { margin-top: .6em; font: 600 .72em var(--ra-font-ui); color: #3e2c16 } .ra-qfoot .mute { color: #3e2c16 }
.ra-q.allin .ra-qfoot .drum { color: #7a2a10; font-weight: 700; animation: drum .18s linear infinite alternate }
@keyframes drum { to { transform: translateX(1px) } }
.ra-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, min(.9vw, 1.6vh), 36px) }
.ra-ans { position: relative; display: flex; align-items: center; gap: .7em; min-height: 3.4em; padding: .6em 1em; font-size: clamp(18px, min(1.35vw, 2.4vh), 56px); line-height: 1.2; color: var(--ra-ivory); border: 12px solid transparent; border-image: var(--ra-frame) 32 fill / 12px stretch; background: rgb(16 14 12 / .92) var(--ra-rock); background-clip: padding-box; overflow-wrap: anywhere; transition: filter .4s, opacity .4s, transform .4s }
.ra-l { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; font-size: .85em; color: var(--ra-gold); background: radial-gradient(circle at 40% 35%, #3b2b12, #0d0904); border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ra-brass) }
.ra-at { flex: 1; min-width: 0 }
.ra-picks { position: absolute; right: .3em; bottom: -.9em; display: flex; gap: .25em; flex-wrap: wrap; justify-content: flex-end; max-width: 70% }
.ra-picks .pk { font: 600 .5em/1 var(--ra-font-ui); font-style: normal; padding: .35em .55em; color: #0d0a06; background: var(--c); border-radius: 99px; box-shadow: 0 2px 6px #000; animation: pickin .45s calc(.15s + var(--k) * .08s) var(--ra-ease) both }
@keyframes pickin { from { opacity: 0; transform: translateY(-14px) scale(.6) } }
.ra-q.rv .ra-ans.no > .ra-l, .ra-q.rv .ra-ans.no > .ra-at { animation: ansno .5s .9s ease both } .ra-q.rv .ra-ans.no { animation: ansnobg .5s .9s ease both } @keyframes ansno { to { opacity: .4; filter: grayscale(.8) } } @keyframes ansnobg { to { filter: brightness(.7) } }
.ra-q.rv .ra-ans.ok { animation: ansok .7s .9s var(--ra-ease) both; border-image-source: var(--ra-frame-gold) }
@keyframes ansok { 0% { transform: none } 40% { transform: scale(1.04); box-shadow: 0 0 40px rgb(255 209 0 / .7) } 100% { transform: scale(1.02); box-shadow: 0 0 24px rgb(255 209 0 / .45) } }
.ra-stamp { position: absolute; right: .5em; top: -.7em; font: 700 .55em var(--ra-font-ui); letter-spacing: .16em; text-transform: uppercase; color: #0c1f09; background: var(--ra-success); padding: .3em .7em; border-radius: 3px; transform: rotate(4deg); animation: stamp .45s 1.05s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 3px 8px #000 }
@keyframes stamp { from { opacity: 0; transform: rotate(4deg) scale(2.2) } }
.ra-ctx { font-size: .9em; line-height: 1.4; padding: .7em 1em; color: var(--ra-ivory); background: rgb(0 0 0 / .6); border-left: 3px solid var(--ra-brass); animation: fadeup .6s 1.7s var(--ra-ease) both }
.ra-ctx .src { margin-top: .3em; font: 500 .72em var(--ra-font-ui); color: var(--ra-muted) }
.ra-bounty { font: 600 .8em var(--ra-font-ui); color: #ffc48a; padding: .4em .8em; background: rgb(90 30 5 / .6); border-radius: 3px; animation: fadeup .5s 2.4s both }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px) } }
.ra-q.dark .ra-qpaper { color: var(--ra-ivory); background: rgb(10 9 8 / .9) var(--ra-stone); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--ra-border), var(--ra-shadow) }
.ra-q.dark .ra-qtext { color: var(--ra-ivory) } .ra-q.dark .ra-cat { color: var(--ra-muted) } .ra-q.dark .ra-rar { color: var(--rc) } .ra-q.dark .ra-qfoot, .ra-q.dark .ra-qfoot .mute { color: var(--ra-muted) }

/* ---------- Questtafel ---------- */
.qt { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1em }
.qt-board { position: relative; width: min(100%, 58em); padding: 1em 1.4em 1.1em; border-radius: 6px;
  background: radial-gradient(ellipse at 30% 20%, rgb(255 200 120 / .12), transparent 60%), repeating-linear-gradient(0deg, #5b3a1e 0 2px, #6b4526 2px 38px, #57371c 38px 40px, #664224 40px 78px), #5e3d20;
  box-shadow: inset 0 0 0 3px #2a180a, inset 0 0 40px rgb(0 0 0 / .6), 0 0 0 5px #7d5a2e, 0 0 0 8px #24160a, 0 20px 60px rgb(0 0 0 / .7) }
.qt-board::before, .qt-board::after { content: ""; position: absolute; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8c08a, #5a4524); box-shadow: 0 1px 2px #000 } .qt-board::before { left: 10px } .qt-board::after { right: 10px }
.qt-plank { display: flex; align-items: baseline; justify-content: center; gap: .8em; margin: -.2em auto .8em; padding: .35em 2em; width: fit-content; font-size: 1.5em; color: #f3dfae; text-shadow: 0 2px 0 #1a0f05; background: linear-gradient(#7a5530, #4e331a); border-radius: 4px; box-shadow: 0 0 0 2px #20130a, 0 4px 10px rgb(0 0 0 / .6) }
.qt-plank small { font: 500 .45em var(--ra-font-ui); letter-spacing: .12em; text-transform: uppercase; color: #d9c38f }
.qt-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(12px, min(1.3vw, 2.31vh), 52px) }
.qt-col { display: grid; gap: clamp(8px, min(.8vw, 1.42vh), 28px); align-content: start }
.qt-cat { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .35em .5em; font-size: 1.05em; color: #f3dfae; background: rgb(20 12 5 / .55); border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 220 160 / .12) }
.qt-ticket { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6em; align-items: center; min-height: 4.1em; padding: .45em .8em .45em .5em; text-align: left; font: inherit; color: var(--ra-ink); cursor: default; border: 0; background: var(--ra-paper) center / cover, var(--ra-parchment); border-radius: 2px; transform: rotate(var(--rot)); box-shadow: 0 1px 0 #a88752, 0 6px 12px rgb(0 0 0 / .55); transition: transform .35s var(--ra-ease), box-shadow .35s, filter .35s }
.qt-ticket::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #555); box-shadow: 0 2px 2px #000 }
.qt-ticket .ra-seal { grid-row: span 2; width: 2.5em }
.qt-rar { font: 700 .7em var(--ra-font-ui); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 30%, #2a1a0a) }
.qt-ticket:disabled { opacity: 1 }
.qt-rew { font-size: .9em; color: #3a2812 } .qt-rew .money { color: #3a2812; text-shadow: none }
.qt-ticket.st-done { filter: sepia(.6) brightness(.62); transform: rotate(var(--rot)) scale(.97) }
.qt-stamp { position: absolute; right: .4em; top: 50%; transform: translateY(-50%) rotate(-10deg); font: 700 .8em var(--ra-font-ui); letter-spacing: .12em; text-transform: uppercase; color: #7a1b10; border: 2px solid #7a1b10; padding: .1em .4em; border-radius: 3px; opacity: .85 }
.qt-who { position: absolute; left: .45em; bottom: .3em; display: flex; gap: 2px } .qt-who i { width: .55em; height: .55em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #000 }
.qt-ticket.st-cur { transform: rotate(0) scale(1.05); box-shadow: 0 0 0 3px var(--ra-gold), 0 0 30px rgb(255 209 0 / .6) }
.qt-foot { margin-top: .9em; text-align: center; font: 500 .72em var(--ra-font-ui); color: #e3cf9d }
.qt-picker { display: flex; align-items: center; gap: .8em; padding: .6em 1.2em .6em .7em; border: 12px solid transparent; border-image: var(--ra-frame-gold) 32 fill / 12px stretch; background: rgb(14 12 10 / .9); background-clip: padding-box; animation: fadeup .5s var(--ra-ease) both }
.qt-picker .ico { width: 3em; height: 3em; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--ra-gold), 0 0 18px rgb(255 209 0 / .5); animation: pulsechip 1.4s ease-in-out infinite }
.qt-picker div { display: grid } .qt-picker b { font-weight: 400; font-size: 1.2em } .qt-picker .small { font: 500 .72em var(--ra-font-ui); color: var(--ra-muted) } .kick { font: 600 .7em var(--ra-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ra-brass-light) }
.qt-question { display: grid; animation: qopen .55s var(--ra-ease) both } @keyframes qopen { from { opacity: 0; transform: scale(.94) translateY(16px) } }

/* ---------- Bosskampf ---------- */
.ra-stage.wide { align-content: stretch }
.bf2 { position: relative; display: grid; grid-template-rows: minmax(0, 1.25fr) auto; gap: .8em; height: 100%; min-height: 0 }
.bf2-stage { position: relative; min-height: 14em; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--ra-border), var(--ra-shadow) }
.ra-bossart { position: absolute; inset: 0 } .ra-bossart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; animation: bossbreath 7s ease-in-out infinite }
.ra-bossart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgb(0 0 0 / .75)), radial-gradient(ellipse at 50% 30%, transparent 40%, rgb(0 0 0 / .55)) }
@keyframes bossbreath { 50% { transform: scale(1.025) } }
.ra-bossart.fx-shake, .bf2 .fx-shake { animation: shake .45s ease }
@keyframes shake { 20% { transform: translate(-6px, 3px) } 40% { transform: translate(5px, -4px) } 60% { transform: translate(-3px, 2px) } 80% { transform: translate(2px, -1px) } }
.bf2.p2 .ra-bossart::after { background: linear-gradient(transparent 45%, rgb(20 0 0 / .8)), radial-gradient(ellipse at 50% 30%, transparent 35%, rgb(90 0 0 / .45)) }
.bf2-unit { position: absolute; left: 50%; top: .8em; transform: translateX(-50%); width: min(78%, 38em); display: flex; align-items: center; gap: .7em; padding: .45em .8em .5em .5em; background: rgb(0 0 0 / .72); border: 1px solid rgb(184 148 86 / .5); border-radius: 40px 6px 6px 40px; box-shadow: 0 8px 20px rgb(0 0 0 / .6) }
.u-por { position: relative; width: 3.8em; height: 3.8em; flex: none; border-radius: 50%; background: #1a1008; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--ra-gold) }
.u-por img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.u-drag { position: absolute; left: -1.7em; top: -1.2em; width: 4.6em; transform: scaleX(-1); filter: drop-shadow(0 2px 3px #000); pointer-events: none }
.u-main { flex: 1; min-width: 0; display: grid; gap: .25em }
.u-name { display: flex; align-items: baseline; gap: .6em; font-size: 1.3em; color: #ffd6a0; text-shadow: 0 2px 0 #000 }
.u-kind { font: 600 .5em var(--ra-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ra-brass-light) }
.u-hp { position: relative; height: 1.35em; background: #200606; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(184 148 86 / .4); overflow: hidden }
.u-hp i { position: absolute; inset: 0 auto 0 0; background: url('/assets/ui/frames/statusbar.png') 0 0 / auto 100%, linear-gradient(#e0342a, #7d0f0a); background-blend-mode: multiply; transition: width 1s var(--ra-ease) }
.u-hp .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgb(255 230 160 / .7) }
.u-hp span { position: relative; display: block; text-align: center; font: 700 .72em/1.9 var(--ra-font-ui); color: #fff; text-shadow: 0 1px 2px #000 }
.u-sub { font: 500 .66em var(--ra-font-ui); color: var(--ra-muted) } .u-sub b { color: #ff8a6a }
.bf2-cast { position: absolute; left: 50%; top: 6.2em; transform: translateX(-50%); width: min(60%, 28em); display: flex; gap: .6em; align-items: center; animation: fadeup .5s var(--ra-ease) both }
.bf2-cast > img { width: 2.6em; height: 2.6em; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ra-gold) }
.bf2-cast .cb { flex: 1; min-width: 0 }
.cb-bar { position: relative; height: 1.4em; background: rgb(0 0 0 / .75); border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ra-brass); overflow: hidden }
.cb-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#ffd24a, #b87a10); animation: castfill 1.8s cubic-bezier(.3, .6, .4, 1) both }
@keyframes castfill { from { width: 0 } }
.cb-bar span { position: relative; display: block; padding: 0 .6em; font-size: .8em; line-height: 1.75; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cb-d { font: 500 .66em var(--ra-font-ui); color: #ffcf9a; margin-top: .25em; text-shadow: 0 1px 2px #000 }
.bf2-yell { position: absolute; left: 1em; right: 1em; bottom: .8em; font-size: .9em; color: #ff5c3c; text-shadow: 0 2px 2px #000; animation: fadeup .5s both } .bf2-yell b { color: #ff9a7a; font-weight: 400 }
.bf2-console { min-height: 0; overflow: auto; display: grid }
.bf2-console .ra-q { max-width: none } .bf2-console .ra-qtext { font-size: clamp(20px, min(1.55vw, 2.76vh), 64px) } .bf2-console .ra-ans { min-height: 2.9em; font-size: clamp(16px, min(1.15vw, 2.05vh), 48px) }
.bf2-result { text-align: center; padding: 1em; border: 16px solid transparent; border-image: var(--ra-frame-gold) 32 fill / 16px stretch; background: rgb(12 10 8 / .92); background-clip: padding-box }
.bf2-result .big { font: 400 3em/1 var(--ra-font-epic); color: var(--ra-gold); text-shadow: 0 0 24px rgb(255 209 0 / .5) } .bf2-result.lose .big { color: #ff6b5b }
.bf2-awards { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin: .6em 0 } .bf2-awards div { display: grid; padding: .4em .8em; background: rgb(0 0 0 / .5); border-radius: 4px; border: 1px solid rgb(184 148 86 / .3) } .bf2-awards b { font: 600 .7em var(--ra-font-ui); color: var(--ra-brass-light) }
.bf2-meter { max-width: 34em; margin: 0 auto; text-align: left }
.bf2.killed .bf2-stage { animation: killglow 2s ease both } @keyframes killglow { 30% { box-shadow: 0 0 0 3px var(--ra-gold), 0 0 80px rgb(255 209 0 / .6) } }
.bf2.wiped .ra-bossart img { filter: saturate(.3) brightness(.6) }

/* ---------- Effekt-Ebene ---------- */
.fxcanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none }
.fxlayer { position: fixed; inset: 0; z-index: 41; pointer-events: none; overflow: hidden }
.ffloat { position: absolute; font: 700 clamp(14px, min(1.05vw, 1.87vh), 44px) var(--ra-font-display); text-shadow: 0 2px 0 #000, 0 0 10px #000; white-space: nowrap; animation: floatup 1.9s var(--ra-ease) forwards }
.ffloat.gold { color: #ffd65a } .ffloat.xp { color: #d9a6ff } .ffloat.dmg { color: #ff5a4a } .ffloat.heal { color: #7dff8a }
@keyframes floatup { 0% { opacity: 0; transform: translate(-10px, 10px) scale(.7) } 15% { opacity: 1; transform: translate(-30px, -8px) scale(1.15) } 100% { opacity: 0; transform: translate(-50px, -70px) scale(1) } }
.orb { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffb040 45%, transparent 70%); box-shadow: 0 0 18px 6px rgb(255 160 50 / .7) }
.bossdmg { position: absolute; transform: translate(-50%, -50%); font: 400 clamp(40px, min(4vw, 7.12vh), 168px) var(--ra-font-epic); color: #ffdf6a; text-shadow: 0 4px 0 #6a2a00, 0 0 30px rgb(255 120 0 / .8); animation: bossdmg 1.6s var(--ra-ease) forwards }
@keyframes bossdmg { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5) } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) } 70% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -110%) scale(1) } }
.raidwarns { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 45; display: grid; gap: .4em; justify-items: center; pointer-events: none; width: 90vw }
.raidwarn2 { display: flex; align-items: center; gap: .6em; font: 400 clamp(20px, min(2vw, 3.56vh), 80px) var(--ra-font-display); color: var(--wc, #ff3c28); text-shadow: 0 2px 0 #000, 0 0 12px #000, 0 0 30px rgb(0 0 0 / .8); animation: rwin .35s cubic-bezier(.2, 1.6, .4, 1) both; transition: opacity .5s, transform .5s }
.raidwarn2.big { font-size: clamp(34px, min(3.4vw, 6.05vh), 140px); font-family: var(--ra-font-epic) }
.raidwarn2 img { width: 1.25em; height: 1.25em; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(255 255 255 / .2) }
.raidwarn2.out { opacity: 0; transform: translateY(-20px) }
@keyframes rwin { from { opacity: 0; transform: scale(1.8) } }
.loadscreen { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; opacity: 0; transition: opacity .25s; pointer-events: none }
.loadscreen.in { opacity: 1 } .loadscreen.out { opacity: 0; transition: opacity .6s }
.ls-art { position: absolute; inset: 0; background: var(--ls, url('/assets/ui/loading/world.webp')) center / contain no-repeat; filter: saturate(1.05) }
.ls-box { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(70vw, 900px); text-align: center }
.ls-title { font: 400 clamp(22px, min(2.2vw, 3.92vh), 84px) var(--ra-font-display); color: var(--ra-gold); text-shadow: 0 2px 0 #000, 0 0 16px #000 }
.ls-sub { font: 500 .9em var(--ra-font-ui); color: var(--ra-ivory); text-shadow: 0 1px 2px #000 }
.ls-bar { margin-top: .7em; height: 18px; border: 9px solid transparent; border-image: var(--ra-frame-tt) 16 / 9px stretch; background: #111; background-clip: padding-box; overflow: hidden }
.ls-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#e6c24e, #8c5a0c); animation: lsbar 1.1s .1s cubic-bezier(.3, .7, .3, 1) forwards }
@keyframes lsbar { to { width: 100% } }
body.fx-hurtflash::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; box-shadow: inset 0 0 120px rgb(255 0 0 / .6); animation: hurtfl .7s ease-out forwards }
@keyframes hurtfl { to { opacity: 0 } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.toast.out { opacity: 0; transform: translateY(8px); transition: .35s }

/* Ding mit Original-Grafik */
.dingban { background: url('/assets/ui/frames/leveluptex.png') center 0 / 0 0 no-repeat, radial-gradient(ellipse at center, rgb(255 209 0 / .3), transparent 70%), rgb(8 6 3 / .94) }
.dingban .dl { font-family: var(--ra-font-epic) }

/* ---------- Handy ---------- */
body.play.ra { font-family: var(--ra-font-display) }
.play .pq-head { display: flex; align-items: center; gap: .5em; margin-bottom: .4em } .play .pq-head .rar { font: 700 12px var(--ra-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--rc) } .play .pq-head .qcol { margin-left: auto }
.play .ptext { font-size: 20px; line-height: 1.3; margin: .2em 0 .8em; padding: .8em .9em; color: var(--ra-ink); background: var(--ra-paper-wide) center / cover, var(--ra-parchment); border-radius: 3px; box-shadow: 0 0 0 1px #3a2812, 0 0 0 3px #6b5230 }
.pans { display: grid; gap: 10px }
.pa { display: flex; align-items: center; gap: .7em; width: 100%; min-height: 64px; padding: .7em .9em; text-align: left; font: 400 19px/1.25 var(--ra-font-display); color: var(--ra-ivory); border: 10px solid transparent; border-image: var(--ra-frame) 32 fill / 10px stretch; background: rgb(18 16 13 / .95) var(--ra-rock); background-clip: padding-box; transition: transform .12s, filter .2s, border-image-source .2s; cursor: pointer }
.pa .lt { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; font-size: .85em; font-weight: 400; color: var(--ra-gold); background: radial-gradient(circle at 40% 35%, #3b2b12, #0d0904); border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--ra-brass) }
.pa span { flex: 1; min-width: 0; overflow-wrap: anywhere }
.pa.pressed, .pb.pressed, .pbig.pressed { transform: scale(.97) } .pa.sel, .pa.sel-optim { border-image-source: var(--ra-frame-gold); box-shadow: 0 0 22px rgb(255 209 0 / .35) }
.pa:disabled:not(.sel):not(.sel-optim) { opacity: .45 } .pa.gone { opacity: .2; text-decoration: line-through }
.plocked { display: flex; align-items: center; gap: .8em; margin: .9em 0; padding: .7em .9em; background: rgb(0 0 0 / .5); border: 1px solid rgb(184 148 86 / .4); border-radius: 4px; animation: lockin .5s cubic-bezier(.2, 1.5, .4, 1) both }
.plocked img { width: 46px; filter: drop-shadow(0 2px 3px #000) } .plocked div { display: grid } .plocked b { font-weight: 400; color: var(--ra-gold); font-size: 18px }
@keyframes lockin { from { opacity: 0; transform: scale(1.5) rotate(-8deg) } }
.presult { position: relative; margin-bottom: 12px }
.presult .pr-drum { text-align: center; font-size: 22px; color: var(--ra-muted); padding: 1.2em 0; animation: prdrum 1s ease forwards } @keyframes prdrum { 0%, 80% { opacity: 1; height: auto } 100% { opacity: 0; height: 0; padding: 0; overflow: hidden } }
.presult .pr-card { display: grid; gap: .6em; justify-items: center; text-align: center; padding: 1.1em .8em; border: 14px solid transparent; border-image: var(--ra-frame) 32 fill / 14px stretch; background: rgb(12 10 8 / .95); background-clip: padding-box; animation: prcard .55s .95s cubic-bezier(.2, 1.5, .4, 1) both }
@keyframes prcard { from { opacity: 0; transform: scale(.7) } }
.presult.ok .pr-card { border-image-source: var(--ra-frame-gold); box-shadow: 0 0 40px rgb(120 230 100 / .3) }
.pr-big { font: 400 34px/1 var(--ra-font-epic) } .presult.ok .pr-big { color: #9fe38a; text-shadow: 0 0 20px rgb(120 230 100 / .6) } .presult.no .pr-big { color: #ff8a7a } .presult.neutral .pr-big { color: var(--ra-ivory) }
.pr-sol { display: grid; gap: .1em } .pr-sol b { font-weight: 400; font-size: 20px; color: var(--ra-gold) }
.pbig.waiting { opacity: .35; filter: grayscale(.6) } .pbig.waiting::after { content: " …" }
.pq-pick h4 { margin: .2em 0 } .play .qt-grid { gap: 8px } .play .qt-col { gap: 8px } .play .qt-cat { font-size: 12px; padding: 4px; flex-direction: column; gap: 2px; text-align: center } .play .qt-cat span { line-height: 1.1 }
.play .qt-ticket { min-height: 58px; grid-template-columns: 1fr; justify-items: center; padding: 6px 4px; text-align: center; cursor: pointer } .play .qt-ticket .ra-seal { grid-row: auto; width: 30px } .play .qt-ticket .qt-rew { display: none } .play .qt-rar { font-size: 9px }
.play .qt-ticket:not(:disabled) { animation: ticketpulse 2s ease-in-out infinite } @keyframes ticketpulse { 50% { box-shadow: 0 0 0 2px var(--ra-gold), 0 6px 12px rgb(0 0 0 / .55) } }
.small-btn { font-size: 14px !important; min-height: 40px !important }

@media (max-width: 1400px) { .ra-main { grid-template-columns: minmax(0, 1fr) 230px } }
@media (prefers-reduced-motion: reduce) {
  .ra-amb, .ra-bossart img, .pf *, .ra-q *, .qt-ticket, .presult *, .plocked, .cl-line, .narr { animation: none !important; transition: none !important }
}

/* Musikregler oben mittig in der Kopfleiste statt über der Statusleiste */
body.screen .music { top: 10px; bottom: auto; left: 50%; transform: translateX(-50%); opacity: .45; transition: opacity .3s } body.screen .music:hover { opacity: 1 }
.u-por .u-fb { position: absolute; inset: 12%; width: 76%; height: 76%; border-radius: 50%; z-index: -1 }
/* Questtafel-Frage: größer und luftiger, damit die Fläche genutzt wird */
.qt-question .ra-q { max-width: 64em; gap: clamp(16px, min(1.6vw, 2.85vh), 60px) }
.qt-question .ra-ans { min-height: 4.2em; font-size: clamp(20px, min(1.6vw, 2.85vh), 68px) }
.qt-question .ra-qtext { font-size: clamp(28px, min(2.3vw, 4.09vh), 100px) }
.ra-qpaper .ra-rar { color: color-mix(in srgb, var(--rc, #555) 25%, #1a0f04); text-shadow: 0 1px 0 rgb(255 240 200 / .35) }
.u-por .u-fb { z-index: 0 } .u-por img:first-child { position: relative; z-index: 1 }
.bf2-cast small, .bf2-cast .cb-sub, .bf2-cast .mute { text-shadow: 0 1px 2px #000, 0 0 6px #000 }