/* ======================================================================
   UI-Kit „WoW Forever“ – Komponenten nutzen ausschließlich Tokens (theme.css).
   Aufbau nach Vorbild der Forever-Oberfläche: dunkle Fenster mit Bronze-Rahmen,
   Titelplatte mit gelber Schrift, rundes Medaillon oben links, rote Buttons,
   Pergament für Erzähltexte, Tooltips in Nachtblau.
   ====================================================================== */
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.4 }
button { font: inherit; color: inherit; cursor: pointer }
button:focus-visible, input:focus-visible, [data-a]:focus-visible { outline: 2px solid var(--wow-yellow); outline-offset: 2px }
img { max-width: 100% }
.row { display: flex; gap: .6em; flex-wrap: wrap; align-items: center }
.between { justify-content: space-between } .push { margin-left: auto } .center { text-align: center }
.mute { color: var(--mute) } .small { font-size: .82em; color: var(--mute) } .big { font-size: 1.25em }

/* ---------- Typografie ---------- */
.kick { display: block; font-family: var(--font-caps); font-size: .78em; letter-spacing: .12em; color: var(--wow-label); text-transform: uppercase }
.hd { font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow); margin: 0; font-size: 1.8em; line-height: 1.15; text-wrap: balance; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.8) }
.lead { color: var(--text); font-size: 1.02em; max-width: 64ch; margin: 0 }
.nm { font-weight: 700; text-shadow: 0 1px 0 #000 }

/* ---------- Fenster (Frame) ---------- */
.wf {
  position: relative; border-radius: var(--radius);
  background: var(--tex-panel) center / cover, radial-gradient(ellipse at 50% 0%, #221b14, var(--panel) 70%);
  border: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--metal-shine) 0%, var(--metal-mid) 18%, var(--metal-dark) 50%, var(--metal-mid) 82%, var(--metal-light) 100%) 1;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 24px rgba(0,0,0,.7), var(--shadow-win);
  display: flex; flex-direction: column; min-height: 0;
}
.wf-head {
  position: relative; flex: none; height: 2.2em; display: grid; place-items: center;
  background: var(--tex-plate) center / cover, linear-gradient(#1b150e, var(--plate));
  border-bottom: 2px solid var(--metal-mid); box-shadow: 0 1px 0 #000, inset 0 -1px 0 rgba(255,209,0,.08);
  font-family: var(--font-display); color: var(--wow-yellow); font-size: 1.05em; letter-spacing: .02em; text-shadow: 0 1px 0 #000;
  padding: 0 2.6em 0 3.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-head.nomedal { padding-left: 2.6em }
.wf-x { position: absolute; right: .35em; top: 50%; transform: translateY(-50%); width: 1.45em; height: 1.45em; border-radius: 3px;
  background: linear-gradient(#c32a1c, #6a0d07); box-shadow: inset 0 0 0 1px #f0b44a, 0 0 0 1px #000; display: grid; place-items: center; color: #ffd100; font-size: .8em; font-family: var(--font-ui); font-weight: 800 }
.wf-body { padding: 1em 1.2em; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: .85em; flex: 1 }

/* Medaillon oben links (Porträt, Klassen-Icon, Szenen-Icon) */
.medal { position: absolute; left: -1em; top: -1em; z-index: 3; width: 4em; height: 4em; border-radius: 50%;
  background: var(--img-medallion-ring) center / cover, radial-gradient(circle at 40% 35%, #3a2a18, #0c0806 70%);
  box-shadow: 0 0 0 2px #120c06, 0 0 0 4px var(--metal-light), 0 0 0 6px #2a1d10, 0 6px 16px #000;
  display: grid; place-items: center; overflow: hidden; font-family: var(--font-display); color: var(--wow-yellow); font-size: 1.5em }
.medal img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0 }

/* Abschnittskopf („Players —“) */
.sec { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); color: var(--wow-yellow);
  background: linear-gradient(90deg, rgba(120,80,25,.45), rgba(40,28,14,.15)); border-top: 1px solid var(--line-2); border-bottom: 1px solid #000;
  padding: .3em .7em; font-size: 1em; text-shadow: 0 1px 0 #000 }
.sec::after { content: "—"; color: var(--wow-yellow); opacity: .9 }

/* Innenfläche (vertieft) */
.qcard, .inset { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.2)); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line), inset 0 8px 20px rgba(0,0,0,.4); border-radius: 4px; padding: 1em 1.1em; display: grid; gap: .7em }

/* ---------- Buttons ---------- */
.btn, .pbig {
  font-family: var(--font-display); color: var(--btn-text); text-shadow: 0 1px 1px #000; letter-spacing: .02em;
  background: linear-gradient(#b8301f 0%, #7a130b 55%, #4d0906 100%); border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--btn-border), inset 0 1px 0 rgba(255,210,150,.35), 0 2px 4px rgba(0,0,0,.6);
}
.btn { padding: .4em 1.1em } .btn:hover, .pbig:hover { filter: brightness(1.15) }
.btn.alt, .pbig.alt { color: var(--wow-yellow); background: linear-gradient(#2e261b, #14100b); box-shadow: inset 0 0 0 1px var(--metal-mid), inset 0 1px 0 rgba(255,220,150,.12), 0 2px 4px rgba(0,0,0,.6) }
button[disabled] { opacity: .45; cursor: default; filter: grayscale(.4) }

/* ---------- Chips & Geld ---------- */
.chip { border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line-2); background: linear-gradient(#1f1911, #0f0c08); border-radius: 3px; padding: .15em .7em; font-size: .82em; white-space: nowrap; color: var(--text) }
.chip.warn { box-shadow: inset 0 0 0 1px var(--warn) } .chip.done { align-self: flex-start; box-shadow: inset 0 0 0 1px var(--ok); color: #c9ffd1 }
.money { font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; text-shadow: 0 1px 0 #000 }
.money i { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin: 0 .25em 0 .1em; vertical-align: -.05em; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.6) }
.money .g { background: var(--au) url('/assets/ui/icons/coins/gold.webp') center / cover }
.money .s { background: var(--ag) url('/assets/ui/icons/coins/silver.webp') center / cover }
.money .c { background: var(--cu) url('/assets/ui/icons/coins/copper.webp') center / cover }
.moneybar { display: inline-flex; gap: .8em; align-items: center; padding: .25em .8em; background: linear-gradient(#0f0c08, #1b150e); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid); border-radius: 3px }
.dkp { color: #8fd0ff; font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 0 #000 }
.buff { display: inline-flex; align-items: center; gap: .3em; font-size: .75em; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--ok); border-radius: 3px; padding: 0 .45em; color: #d8ffd8; background: #0f1a0f }

/* ---------- Icons (Klasse, Volk, Features) ---------- */
.ico { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; overflow: hidden; vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c, #888) 70%, #fff), var(--c, #888) 55%, #000 120%); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--metal-light) }
.ico::before { content: attr(data-l); font-family: var(--font-display); font-size: .75em; color: #000; opacity: .75 }
.ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ico.sq { border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a4a4a }
.dot { width: .8em; height: .8em; border-radius: 50%; display: inline-block; border: 1px solid #000; margin-right: .15em; vertical-align: middle }

/* ---------- Chromie / Erzähltext auf Pergament ---------- */
.chromie { display: flex; gap: 1em; align-items: flex-start }
.avatar { position: relative; flex: none; width: 4em; height: 4em; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #ffe0a0, #c98a2f 55%, #5e3510); box-shadow: 0 0 0 2px #120c06, 0 0 0 4px var(--metal-light), 0 4px 10px #000;
  font-family: var(--font-display); color: #3a220a; font-size: 1.4em }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.bubble, .parch {
  background: var(--tex-parchment) center / cover, linear-gradient(170deg, var(--parch-1), var(--parch-2));
  color: var(--ink); border-radius: 3px; padding: .8em 1.1em; max-width: 64ch; font-family: var(--font-body);
  box-shadow: inset 0 0 30px rgba(120,80,30,.45), 0 0 0 1px #000, 0 0 0 3px var(--metal-mid), 0 4px 12px rgba(0,0,0,.6) }
.bubble b, .parch b { color: #6b2208 }
.parch h3 { font-family: var(--font-display); font-variant: small-caps; color: var(--ink-head); margin: 0 0 .3em; font-size: 1.25em }

/* ---------- Frage & Antworten ---------- */
.rar { display: inline-flex; gap: .4em; align-items: center; font-family: var(--font-display); font-size: .85em }
.rar::before { content: ""; width: .75em; height: .75em; border-radius: 2px; background: currentColor; box-shadow: 0 0 0 1px #000, 0 0 8px currentColor }
.qimg { border-radius: 3px; overflow: hidden; max-height: 46vh; display: grid; place-items: center; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--metal-mid) }
.qimg img, .qimg video { max-height: 46vh; object-fit: contain }
.qtext { font-family: var(--font-display); font-size: 1.45em; line-height: 1.25; text-wrap: balance; color: #fff; text-shadow: 0 1px 0 #000 }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5em }
.opt { display: flex; gap: .7em; align-items: center; padding: .45em .7em .45em .45em; border: 1px solid #000; border-radius: 3px;
  background: linear-gradient(#211a13, #15110c); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--font-display) }
.opt .l { flex: none; width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 3px; color: var(--wow-yellow); background: linear-gradient(#3a2d1b, #120d08); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--metal-mid) }
.opt .n { margin-left: auto }
.opt.ok { box-shadow: inset 0 0 0 2px var(--ok), 0 0 14px rgba(64,214,90,.35); background: linear-gradient(#1b2a17, #111a0e) }
.opt.no { opacity: .45 }
.who { display: flex; gap: .35em; flex-wrap: wrap; font-size: .82em; font-family: var(--font-ui) }
.who span { padding: .1em .55em; border-radius: 3px; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line); opacity: .5 } .who span.in { opacity: 1; box-shadow: inset 0 0 0 1px var(--wow-yellow) }
.src { font-size: .85em; color: var(--mute); border-top: 1px solid var(--line); padding-top: .5em; font-family: var(--font-ui) } .src b { color: var(--text); font-weight: 500 }
.ctx { color: #ffe9b0; font-style: italic }
.res { display: flex; gap: .4em; flex-wrap: wrap; font-size: .85em }
.res span { padding: .15em .55em; border-radius: 3px; background: #120e0a; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line) }
.res span.ok { box-shadow: inset 0 0 0 1px var(--ok) } .res span.no { box-shadow: inset 0 0 0 1px #7a2a20 }
.mech { border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--warn), 0 0 14px rgba(255,178,56,.2); background: linear-gradient(90deg, rgba(90,50,10,.6), rgba(40,25,8,.4)); color: #ffd79a; border-radius: 3px; padding: .45em .8em; font-family: var(--font-display) }
.gate { justify-content: space-between }
.banner { font-family: var(--font-display); font-size: 2.3em; text-align: center; letter-spacing: .04em; text-shadow: 0 2px 0 #000, 0 0 18px currentColor } .banner.good { color: var(--ok) } .banner.bad { color: var(--bad) }

/* ---------- Tabellen & Listen (wie LFG-/Werte-Listen) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .92em }
.tbl th { color: var(--wow-yellow); font-family: var(--font-display); font-weight: 400; text-align: left; padding: .35em .55em; background: linear-gradient(90deg, rgba(120,80,25,.35), transparent); border-bottom: 1px solid #000 }
.tbl td { padding: .35em .55em; border-bottom: 1px solid #0a0806; background: linear-gradient(#1b1611, #14100c) }
.tbl tr:hover td { background: var(--panel-3) }
.num { font-variant-numeric: tabular-nums; text-align: right !important }
.stat { display: flex; justify-content: space-between; gap: 1em; padding: .25em .6em; background: linear-gradient(#1b1611, #14100c); border-bottom: 1px solid #0a0806 }
.stat > span:first-child { color: var(--wow-label) }

/* ---------- Questtafel ---------- */
.board { display: grid; gap: .45em } .bh { text-align: center; font-family: var(--font-display); color: var(--wow-yellow); font-size: .9em; text-shadow: 0 1px 0 #000 }
.bf { border: 1px solid #000; border-radius: 3px; padding: .7em .2em; font-family: var(--font-display); background: linear-gradient(#262017, #120e0a);
  box-shadow: inset 0 0 0 2px currentColor, inset 0 0 18px rgba(0,0,0,.8), 0 0 10px color-mix(in srgb, currentColor 25%, transparent) }
.bf .money { color: inherit } .bf.used { opacity: .25; box-shadow: inset 0 0 0 1px #333 }

/* ---------- Boss ---------- */
.boss { display: grid; grid-template-columns: auto 1fr; gap: 1.1em; align-items: center }
.bossimg { position: relative; width: 6em; height: 6em; border-radius: 50%; overflow: hidden; display: grid; place-items: center; line-height: 1;
  background: radial-gradient(circle at 40% 35%, #4a1c12, #120605); box-shadow: 0 0 0 3px #120c06, 0 0 0 5px #c0392b, 0 0 0 7px #2a0d08, 0 0 30px rgba(200,40,20,.45) }
.bossimg > span { font-size: 2.6em } .bossimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.bossinfo { display: grid; gap: .35em }
.hp { height: 1.5em; background: #1a0605; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid); border-radius: 2px; overflow: hidden; position: relative }
.hp > i { position: absolute; inset: 1px auto 1px 1px; background: linear-gradient(#e2452f, #9b1a0e 60%, #6a0f07); box-shadow: inset 0 1px 0 rgba(255,200,180,.4); transition: width .6s }
.hp span { position: relative; font-size: .82em; padding-left: .6em; line-height: 1.8em; font-family: var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000 }
.meter { display: grid; gap: .22em; align-content: start }
.mrow { position: relative; height: 1.55em; background: #0d0a07; border: 1px solid #000; overflow: hidden; font-size: .85em }
.mrow > i { position: absolute; inset: 0 auto 0 0; opacity: .9; background-image: linear-gradient(rgba(255,255,255,.18), rgba(0,0,0,.2)) }
.mrow > span { position: relative; padding: 0 .5em; line-height: 1.75em; display: flex; justify-content: space-between; font-family: var(--font-display); text-shadow: 0 1px 1px #000, 0 0 3px #000 }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1em; align-items: start }
.split.wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) } .stack { display: grid; gap: .6em }

/* ---------- Tier-Liste ---------- */
.tiers { display: grid; gap: .3em } .tier { display: grid; grid-template-columns: 2.3em 1fr; gap: .35em }
.tier b { display: grid; place-items: center; border-radius: 3px; font-family: var(--font-display); color: #140d05; font-size: 1.1em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 0 1px #000 }
.tier .it { display: flex; flex-wrap: wrap; gap: .3em; background: rgba(0,0,0,.35); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line); border-radius: 3px; padding: .3em; min-height: 2.1em }
.tier .it span { background: linear-gradient(#2a2117, #17120d); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 3px; padding: .1em .55em; font-size: .88em; font-family: var(--font-display) }
.tier .it span.hot { box-shadow: inset 0 0 0 1px var(--warn), 0 0 8px rgba(255,178,56,.4) }
.tiername { font-family: var(--font-display); font-size: 1.9em; color: var(--wow-yellow); text-shadow: 0 2px 0 #000 }

/* ---------- Tooltip (Item) ---------- */
.tt { background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 4px; padding: .6em .8em; max-width: 24em; font-family: var(--font-body); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.7); line-height: 1.35 }
.tt .ttn { font-size: 1.1em } .tt .gr { color: var(--q2) } .tt .bad { color: #ff3030 } .tt .leg { color: #ff8000 } .tt .set { margin: 4px 0 } .tt .set > b { color: #ffd100 } .tt .mute { color: #808080 } .tt .fl { color: var(--wow-yellow) } .tt .hint { color: #7fb2ff }

/* ---------- Karten (Auswahl wie „Choose your gameplay style“) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: .7em }
.pcard { display: flex; gap: .7em; align-items: center; padding: .6em .8em; border: 1px solid #000; border-radius: 3px; background: linear-gradient(#1f1912, #120e0a); box-shadow: inset 0 0 0 1px var(--line-2) }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.wfcard { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; padding: 16px 10px 14px; border-radius: 6px; color: var(--text);
  background: linear-gradient(#1c1610, #0e0b08); border: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--metal-light), var(--metal-dark) 50%, var(--metal-mid)) 1; box-shadow: inset 0 0 20px rgba(0,0,0,.7) }
.wfcard .t { font-family: var(--font-display); color: var(--wow-yellow); font-size: 18px }
.wfcard .d { font-size: 13px; color: var(--text); opacity: .9 }
.wfcard .ico { width: 64px; height: 64px; font-size: 26px }
.wfcard:hover, .wfcard.sel { border-image: linear-gradient(180deg, #fff3a0, var(--wow-yellow) 40%, #a88200) 1; box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 0 18px rgba(255,209,0,.45) }

/* ---------- Siegerehrung ---------- */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; align-items: end; text-align: center }
.pod { border: 3px solid transparent; border-image: linear-gradient(180deg, var(--metal-light), var(--metal-dark)) 1; background: linear-gradient(#241c12, #0e0b08); padding: .6em .3em; display: grid; gap: .2em; align-content: end }
.pod.h0 { height: 5.5em } .pod.h1 { height: 7.5em } .pod.h2 { height: 4.5em } .place { font-family: var(--font-display); font-size: 1.4em; color: var(--wow-yellow) }
.titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: .4em }
.titles div { border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 3px; padding: .4em .6em; background: linear-gradient(#1f1912, #120e0a) }
.titles b { display: block; color: var(--wow-yellow); font-family: var(--font-display); font-weight: 400 }
.hiddenlb { border: 1px dashed var(--metal-mid); border-radius: 3px; padding: 1em; text-align: center; color: var(--mute) }

/* ====================================================================== */
/*  SPIELBILDSCHIRM                                                        */
/* ====================================================================== */
body.screen { height: 100vh; overflow: hidden; background: #000 }
.scr { position: relative; z-index: 1; height: 100vh; display: grid; grid-template-rows: auto 1fr; font-size: clamp(14px, 1.25vw, 28px) }
/* Hintergrund pro Szene: Bild aus theme.css, optional Video (siehe .bg video) */
.bg { position: fixed; inset: 0; z-index: 0; background: var(--bg-scene, var(--bg-default)) center / cover no-repeat, radial-gradient(ellipse at 50% 30%, #2a2118, #0a0806 75%) }
.bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.bg::after { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.15), rgba(0,0,0,.75) 85%), linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)) }
body[data-scene="lobby"] { --bg-scene: var(--bg-lobby) } body[data-scene="intro"] { --bg-scene: var(--bg-intro) }
body[data-scene="board"] { --bg-scene: var(--bg-board) } body[data-scene="checkpoint"] { --bg-scene: var(--bg-checkpoint) }
body[data-scene="boss"] { --bg-scene: var(--bg-boss) } body[data-scene="inn"] { --bg-scene: var(--bg-inn) }
body[data-scene="loot"] { --bg-scene: var(--bg-loot) } body[data-scene="end"] { --bg-scene: var(--bg-end) }

.hud { display: flex; align-items: center; gap: 1em; padding: .7em 1.4em .3em }
.hud .act { font-family: var(--font-display); color: var(--wow-yellow); text-shadow: 0 2px 0 #000, 0 0 10px #000; font-size: 1.05em }
.hud .right { margin-left: auto; display: flex; gap: .6em }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 17em; gap: 1.4em; padding: 1.4em 1.6em 1.4em 2.4em; min-height: 0 }
.stage > .wf { min-height: 0 }
.main-win > .wf-body { padding-top: 2.3em }
.side .wf-body { gap: .15em; padding: .6em }
.lb { display: grid; grid-template-columns: auto 1fr auto; gap: .5em; align-items: center; padding: .35em .45em; background: linear-gradient(#1b1611, #14100c); border-bottom: 1px solid #0a0806; font-size: .9em }
.lb .ico { width: 1.5em; height: 1.5em }
.lb .sub { grid-column: 2 / 4; display: flex; justify-content: space-between; font-size: .78em; color: var(--mute); margin-top: -.2em; font-family: var(--font-ui) }
.lb .rk { color: var(--dim); font-family: var(--font-display) }
.lootline { font-size: .85em; padding: .15em .45em; font-family: var(--font-display); text-shadow: 0 1px 0 #000 }
.pause { position: absolute; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; font-family: var(--font-display); font-size: 3em; color: var(--wow-yellow); text-shadow: 0 2px 0 #000; z-index: 10 }
@media (max-width: 900px) { body.screen { height: auto; overflow: auto } .scr { height: auto } .stage { grid-template-columns: 1fr; padding: 1.2em } .split, .split.wide, .opts { grid-template-columns: 1fr } }

/* ====================================================================== */
/*  HANDY                                                                  */
/* ====================================================================== */
body.play { --fc: var(--metal-light); min-height: 100vh; font-family: var(--font-body);
  background: var(--tex-panel) center / cover fixed, radial-gradient(ellipse at 50% 0%, #241c14, #0b0907 70%) }
body.play.horde { --fc: #c8392b } body.play.alliance { --fc: #4a8ae0 }
.phead { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px 14px;
  background: var(--tex-plate) center / cover, linear-gradient(color-mix(in srgb, var(--fc) 22%, #0e0b08), #0e0b08);
  border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--metal-dark), var(--metal-light), var(--metal-dark)) 1; box-shadow: 0 6px 16px rgba(0,0,0,.6) }
.phead .pm { grid-row: span 3; position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #3a2a18, #0c0806 70%); box-shadow: 0 0 0 2px #120c06, 0 0 0 4px var(--metal-light), 0 0 0 6px #2a1d10; font-family: var(--font-display); color: var(--wow-yellow); font-size: 22px }
.phead .pm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.phead .nmrow { font-family: var(--font-display); font-size: 18px; line-height: 1.1 }
.phead .lvl { font-family: var(--font-display); font-size: 13px; color: var(--wow-label) }
.phead .st { display: flex; gap: 10px; font-size: 14px; flex-wrap: wrap; align-items: center }
.phead .bfs { grid-column: 1 / 3; display: flex; gap: 4px; flex-wrap: wrap }
.pbody { padding: 16px 14px 90px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; max-width: 520px; margin: 0 auto }
.pbody h4 { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--wow-yellow); margin: 0; text-shadow: 0 1px 0 #000 }
.ptext { font-family: var(--font-display); font-size: 18px; color: #fff; text-shadow: 0 1px 0 #000 }
.pb { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px solid #000; border-radius: 3px;
  background: linear-gradient(#211a13, #14100b); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--font-display); color: var(--text) }
.pb small { display: block; width: 100%; color: var(--mute); font-size: 12.5px; font-family: var(--font-ui) }
.pb:hover { box-shadow: inset 0 0 0 1px var(--fc) } .pb.sel { box-shadow: inset 0 0 0 2px var(--wow-yellow), 0 0 12px rgba(255,209,0,.35); background: linear-gradient(#34281a, #1a140d) }
.pb .lt { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 3px; color: var(--wow-yellow); background: linear-gradient(#3a2d1b, #120d08); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--metal-mid) }
.pbig { width: 100%; padding: 13px; font-size: 17px }
.pin { width: 100%; background: #070604; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid), inset 0 2px 6px rgba(0,0,0,.8); color: var(--text); border-radius: 3px; padding: 11px; font: 16px var(--font-ui) }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.hints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.hb { border-radius: 3px; border: 1px solid #000; box-shadow: inset 0 0 0 1px currentColor; background: linear-gradient(#1c160f, #0f0c08); padding: 7px 4px; font-size: 12.5px; font-family: var(--font-display) }
.hint { background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 4px; padding: 8px 10px; font-size: 14px; color: #cfe0ff }
.tbtn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px }
.tbtn button { border: 1px solid #000; background: linear-gradient(#211a13, #0f0c08); box-shadow: inset 0 0 0 1px currentColor; border-radius: 3px; padding: 14px 0; font-family: var(--font-display); font-size: 21px }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mute); font-family: var(--font-ui) }
.wait { text-align: center; color: var(--mute); padding: 20px 8px; display: grid; gap: 8px; place-items: center }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--wow-yellow); animation: sp 1s linear infinite }
@keyframes sp { to { transform: rotate(360deg) } }
.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; pointer-events: none; z-index: 9; max-width: 480px; margin: 0 auto }
.toast { background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 4px; padding: 9px 12px; font-size: 14px; font-family: var(--font-display); box-shadow: 0 4px 14px rgba(0,0,0,.6); animation: tin .25s ease-out }
@keyframes tin { from { transform: translateY(8px); opacity: 0 } }
.offline { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: grid; place-items: center; text-align: center; z-index: 9000; padding: 20px; font-family: var(--font-display) }
@media (prefers-reduced-motion: reduce) { .spin, .toast { animation: none } }

/* ====================================================================== */
/*  LOGIN & REGIE                                                          */
/* ====================================================================== */
.login { max-width: 420px; margin: 8vh auto; padding: 0 16px }
.login .wf-body { gap: 10px }
.login .logo { display: block; max-width: 80%; margin: 0 auto 6px }
.err { color: var(--bad); font-size: 14px; min-height: 1.2em; font-family: var(--font-ui) }
body.regie { padding: 24px 16px; background: radial-gradient(ellipse at 50% 0%, #241c14, #0b0907 70%) fixed }
.rg { display: grid; gap: 22px; max-width: 1200px; margin: 0 auto; font-family: var(--font-ui) }
.rg .wf-body { gap: 10px }
.rb { background: linear-gradient(#2e261b, #14100b); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid); border-radius: 3px; padding: 6px 11px; font-size: 13px; color: var(--text) }
.rb:hover { box-shadow: inset 0 0 0 1px var(--wow-yellow) } .rb.on { color: var(--wow-yellow); box-shadow: inset 0 0 0 2px var(--wow-yellow) } .rb.danger { box-shadow: inset 0 0 0 1px var(--bad) }
.scenes { display: flex; flex-wrap: wrap; gap: 6px }

/* ====================================================================== */
/*  BOSSKAMPF – Vollbild wie im Spiel (Boss-Frame, Raid-Frames, Details)   */
/* ====================================================================== */
body[data-scene="boss"][data-raid="mc"] { --bg-scene: var(--bg-raid-mc) }
body[data-scene="boss"][data-raid="bwl"] { --bg-scene: var(--bg-raid-bwl) }
body[data-scene="boss"][data-raid="zg"] { --bg-scene: var(--bg-raid-zg) }
body[data-scene="boss"][data-raid="aq40"] { --bg-scene: var(--bg-raid-aq40) }
body[data-scene="boss"][data-raid="ony"] { --bg-scene: var(--bg-raid-onyxia) }
body[data-scene="boss"][data-raid="kara"] { --bg-scene: var(--bg-raid-karazhan) }
body[data-scene="boss"] .bg::after { background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.85) 100%), linear-gradient(rgba(40,0,0,.1), rgba(0,0,0,.35)) }

.bossfight { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1em; padding: .6em 1.6em 1.2em; min-height: 0; overflow: hidden }
.bf-top { display: grid; justify-items: center; gap: .7em; position: relative; z-index: 2 }
.uf-boss { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; width: min(46em, 94%) }
.uf-portrait { position: relative; z-index: 2; width: 6.4em; height: 6.4em; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1em;
  background: radial-gradient(circle at 40% 35%, #5a1d10, #140504); box-shadow: 0 0 0 3px #120806, 0 0 0 6px var(--metal-light), 0 0 0 8px #2a1208, 0 0 40px rgba(255,90,20,.55) }
.uf-portrait > span { font-size: 2.8em } .uf-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.uf-main { margin-left: -1.6em; padding: .45em .9em .5em 2.2em; display: grid; gap: .3em; background: linear-gradient(90deg, rgba(10,6,4,.92), rgba(20,12,8,.85)); border: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--metal-shine), var(--metal-mid) 40%, var(--metal-dark) 70%, var(--metal-light)) 1; box-shadow: 0 8px 24px rgba(0,0,0,.7) }
.uf-name { display: flex; justify-content: space-between; font-family: var(--font-display); color: var(--wow-yellow); font-size: 1.35em; text-shadow: 0 2px 0 #000 }
.uf-lvl { color: #ff4b3a; font-size: .8em; align-self: center; border: 1px solid #000; box-shadow: inset 0 0 0 1px #7a2a1a; padding: 0 .4em; border-radius: 3px; background: #1a0605 }
.uf-hp { position: relative; height: 1.7em; background: #120403; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid); overflow: hidden }
.uf-hp > i { position: absolute; inset: 1px auto 1px 1px; background: linear-gradient(#ff5a32, #c21d0c 45%, #7c0d06); box-shadow: inset 0 1px 0 rgba(255,220,200,.45), 0 0 16px rgba(255,60,20,.6); transition: width .9s cubic-bezier(.2,.8,.2,1) }
.uf-hp .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,230,160,.8); box-shadow: 0 0 6px #ffd100 }
.uf-hp .t, .uf-hp .p { position: absolute; top: 0; line-height: 1.7em; font-family: var(--font-display); font-size: .85em; text-shadow: 0 1px 1px #000, 0 0 4px #000 }
.uf-hp .t { left: .7em } .uf-hp .p { right: .7em; color: #fff }
.uf-sub { font-size: .8em; color: #ffcf9a; font-family: var(--font-display) } .uf-sub b { color: #ff7a4a; font-weight: 400 }
.floats { position: absolute; left: 6.5em; right: 0; top: -.4em; height: 0; pointer-events: none }
.floats span { position: absolute; left: calc(18% + var(--k) * 12%); font-family: var(--font-display); font-size: 1.5em; color: #ffe24a; text-shadow: 0 2px 0 #000, 0 0 10px #ff8a00; animation: dmgfloat 2.4s ease-out forwards; animation-delay: calc(var(--k) * .12s); opacity: 0 }
.floats .tot { left: auto; right: 4%; font-size: 2.3em; color: #fff3b0; animation-delay: .6s }
@keyframes dmgfloat { 0% { opacity: 0; transform: translateY(20px) scale(.6) } 15% { opacity: 1; transform: translateY(0) scale(1.15) } 100% { opacity: 0; transform: translateY(-60px) scale(1) } }
.shake .uf-boss { animation: hit .5s ease-out }
@keyframes hit { 0%, 100% { transform: translate(0) } 20% { transform: translate(-6px, 2px) } 40% { transform: translate(5px, -2px) } 60% { transform: translate(-3px, 1px) } 80% { transform: translate(2px, 0) } }
.raidwarn { font-family: var(--font-display); font-size: 1.35em; color: #ff8a1f; text-align: center; max-width: 42em; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,120,0,.7); animation: warn 1.6s ease-in-out infinite }
@keyframes warn { 50% { color: #ffd100; text-shadow: 0 2px 0 #000, 0 0 26px rgba(255,209,0,.8) } }
.bf-mid { display: grid; grid-template-columns: 13em minmax(0, 1fr) 15em; gap: 1.2em; min-height: 0; align-items: start; position: relative; z-index: 2 }
.wf.mini .wf-head { height: 1.9em; font-size: .9em } .wf.mini .wf-body { padding: .5em; gap: .3em }
.bf-center { background: linear-gradient(rgba(12,9,6,.9), rgba(12,9,6,.82)); max-height: 100%; overflow: auto }
.rtile { position: relative; height: 2.6em; border: 1px solid #000; background: #0c0907; overflow: hidden; display: grid; align-content: center; padding: 0 .5em; box-shadow: inset 0 0 0 1px #2c2218 }
.rtile > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); opacity: .55 }
.rtile.wait > i { opacity: .18 }
.rtile .rn, .rtile .rs { position: relative; font-family: var(--font-display); text-shadow: 0 1px 1px #000, 0 0 3px #000; line-height: 1.15 }
.rtile .rn { font-size: .9em } .rtile .rs { font-size: .72em } .rtile .rs b { font-weight: 400 }
.rtile .ok { color: #9dff9d } .rtile .no { color: #ff9c8c } .rtile .rd { color: #ffe9a8 } .rtile .wt { color: #bbb }
.bf-emote { position: relative; z-index: 2; justify-self: center; max-width: 60em; padding: .35em 1em; background: rgba(0,0,0,.55); border-radius: 3px; color: #ff4b3a; font-family: var(--font-display); text-shadow: 0 1px 0 #000; font-size: 1em }
.bf-emote b { font-weight: 400; color: #ff7a5a }
.bf-result { text-align: center; display: grid; gap: .6em; justify-items: center; padding: 1em }
.bf-result .big { font-family: var(--font-display); font-size: 3.2em; letter-spacing: .04em; text-shadow: 0 3px 0 #000 }
.bf-result.win .big { color: var(--wow-yellow); text-shadow: 0 3px 0 #000, 0 0 30px rgba(255,209,0,.7) }
.bf-result.lose .big { color: #bbb; text-shadow: 0 3px 0 #000, 0 0 20px rgba(0,0,0,.9) }
.bossfight.wiped .bf-top { filter: grayscale(1) brightness(.7) }
.bossfight.killed .uf-portrait { filter: grayscale(.6) brightness(.6) }
/* Glut-Funken */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 1 }
.embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px rgba(255,120,20,.8); opacity: 0; animation: ember 7s linear infinite }
.embers i:nth-child(1) { left: 5%; animation-delay: 0s } .embers i:nth-child(2) { left: 12%; animation-delay: 2.1s } .embers i:nth-child(3) { left: 20%; animation-delay: 4.3s }
.embers i:nth-child(4) { left: 28%; animation-delay: 1.2s } .embers i:nth-child(5) { left: 35%; animation-delay: 5.5s } .embers i:nth-child(6) { left: 44%; animation-delay: 3.1s }
.embers i:nth-child(7) { left: 52%; animation-delay: .6s } .embers i:nth-child(8) { left: 60%; animation-delay: 4.9s } .embers i:nth-child(9) { left: 68%; animation-delay: 2.7s }
.embers i:nth-child(10) { left: 75%; animation-delay: 6.1s } .embers i:nth-child(11) { left: 82%; animation-delay: 1.8s } .embers i:nth-child(12) { left: 88%; animation-delay: 3.8s }
.embers i:nth-child(13) { left: 94%; animation-delay: 5.1s } .embers i:nth-child(14) { left: 40%; animation-delay: 6.6s }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) } 10% { opacity: .9 } 100% { opacity: 0; transform: translate(40px, -90vh) } }
@media (prefers-reduced-motion: reduce) { .embers, .floats span, .raidwarn, .shake .uf-boss { animation: none !important } .embers { display: none } }
@media (max-width: 900px) { .bf-mid { grid-template-columns: 1fr } }

/* ====================================================================== */
/*  MUSIK-STEUERUNG (nur Spielbildschirm, pro Zuschauer)                   */
/* ====================================================================== */
.music { position: fixed; left: 14px; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 6px 12px; font: 13px var(--font-ui);
  background: linear-gradient(#1b150e, #0e0b08); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid), 0 4px 12px rgba(0,0,0,.6); border-radius: 4px; color: var(--text) }
.music button { background: none; border: 0; font-size: 18px; padding: 0 2px; color: var(--wow-yellow) }
.music input[type=range] { width: 110px; accent-color: var(--wow-yellow) }
.music .tr { color: var(--mute); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.music.start { box-shadow: inset 0 0 0 1px var(--wow-yellow), 0 0 14px rgba(255,209,0,.4) }

/* ---------- Boss-Intro (Kino) & Pull-Countdown ---------- */
.bossintro { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2em; padding: 1em 4em 5em; min-height: 0; overflow: hidden }
.letterbox { position: absolute; width: 0; height: 0 }
.letterbox::before, .letterbox::after { content: ""; position: fixed; left: 0; right: 0; height: 9vh; background: #000; z-index: 5; animation: lb 1.1s cubic-bezier(.2,.8,.2,1) both }
.letterbox::before { top: 0 } .letterbox::after { bottom: 0; animation-name: lb2 }
@keyframes lb { from { transform: translateY(-100%) } } @keyframes lb2 { from { transform: translateY(100%) } }
.bi-art { position: relative; order: 2; justify-self: center; height: 66vh; aspect-ratio: 3 / 4; max-width: 100%; animation: artin 1.6s .3s cubic-bezier(.15,.8,.2,1) both }
.bi-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--metal-light), 0 0 0 7px #000, 0 30px 80px rgba(0,0,0,.8), 0 0 90px rgba(255,90,20,.35); mask-image: linear-gradient(#000 80%, transparent) }
.bi-glow { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 40%, rgba(255,120,30,.35), transparent 60%); animation: glow 3s ease-in-out infinite; pointer-events: none; mix-blend-mode: screen }
@keyframes artin { from { opacity: 0; transform: translateX(8%) scale(1.08); filter: brightness(2) blur(6px) } }
@keyframes glow { 50% { opacity: .5 } }
.bi-text { display: grid; gap: .6em; order: 1 }
.bi-kick { font-family: var(--font-caps); letter-spacing: .35em; text-transform: uppercase; color: #ff7a4a; font-size: 1em; animation: fadeup .8s .6s both; text-shadow: 0 2px 0 #000 }
.bi-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 5.2em; line-height: .95; letter-spacing: .01em; color: #ffd100;
  text-shadow: 0 4px 0 #000, 0 0 30px rgba(255,150,30,.65), 0 0 80px rgba(255,90,0,.35); animation: namein 1.2s .8s cubic-bezier(.2,.9,.2,1) both }
@keyframes namein { from { opacity: 0; transform: scale(1.4); letter-spacing: .25em; filter: blur(8px) } }
.bi-title { font-family: var(--font-display); color: #ffcf9a; font-size: 1.5em; animation: fadeup .8s 1.4s both; text-shadow: 0 2px 0 #000 }
.bi-desc { margin: 0; max-width: 34em; color: var(--text); font-size: 1.05em; animation: fadeup .8s 1.7s both; text-shadow: 0 1px 2px #000 }
.bi-stats { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .6em; animation: fadeup .8s 2s both }
.bi-stats span { font-family: var(--font-display); font-size: .9em; padding: .3em .8em; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid); background: rgba(10,6,4,.8); border-radius: 3px }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px) } }
.bi-ready { position: fixed; left: 50%; bottom: calc(9vh + 1.2em); transform: translateX(-50%); z-index: 6; display: grid; justify-items: center; gap: .4em; padding: .6em 1.2em; background: rgba(0,0,0,.6); border-radius: 4px }
.bossintro.pull { display: grid; place-items: center; grid-template-columns: 1fr; height: 100% }
.countdown { position: relative; width: 100%; height: 40vh; display: grid; place-items: center }
.countdown span { position: absolute; font-family: var(--font-display); font-size: 12em; color: #ffd100; text-shadow: 0 6px 0 #000, 0 0 50px rgba(255,120,0,.8); opacity: 0; animation: cd 1s var(--d) both }
.countdown .go { font-size: 9em; color: #ff5a2a; animation-duration: 1.4s }
@keyframes cd { 0% { opacity: 0; transform: scale(2.4) } 20% { opacity: 1; transform: scale(1) } 80% { opacity: 1 } 100% { opacity: 0; transform: scale(.7) } }
.bi-stage { display: contents }
@keyframes readyin { from { opacity: 0 } }
.bi-ready.listen b { font-family: var(--font-display); color: #ffcf9a; font-size: 1.2em }

/* Endboss-Inszenierung */
.bossintro.epic { grid-template-columns: 1fr; padding: 5.5em 4em 8.5em; height: 100% }
.epic .bi-kick { display: none }
.epic ~ .bi-ready { bottom: calc(12vh + .6em) }
.epic .bi-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2em; position: relative; z-index: 2; animation: shake .8s 3.5s both }
.epic .letterbox::before, .epic .letterbox::after { height: 12vh; animation-duration: 1.8s }
.bi-black { position: fixed; inset: 0; background: #000; z-index: 8; pointer-events: none; animation: blackout 2.8s .3s ease-in both }
@keyframes blackout { to { opacity: 0; visibility: hidden } }
.bi-heat { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 45% at 50% 105%, rgba(255,80,10,.55), rgba(160,20,0,.25) 45%, transparent 75%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.85));
  animation: heat 2.4s ease-in-out infinite alternate }
@keyframes heat { to { filter: brightness(1.35) } }
.bi-embers { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
.bi-embers i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255,120,20,.9);
  animation: ember var(--t) var(--d) linear infinite; opacity: 0 }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) } 10% { opacity: 1 } 70% { opacity: .8 } 100% { opacity: 0; transform: translate(40px, -95vh) } }
.bi-flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff6d0, #ff8a2a 40%, transparent 75%); opacity: 0; animation: flash .9s 3.45s ease-out both }
.bi-flash.go { animation-delay: 3s }
@keyframes flash { 0% { opacity: 0 } 12% { opacity: .95 } 100% { opacity: 0 } }
@keyframes shake { 0%, 100% { transform: none } 10% { transform: translate(-14px, 6px) } 20% { transform: translate(12px, -8px) } 30% { transform: translate(-10px, 4px) } 45% { transform: translate(8px, -4px) } 60% { transform: translate(-5px, 3px) } 80% { transform: translate(3px, -1px) } }
.bi-warn { position: fixed; top: calc(12vh + 1.2em); left: 50%; transform: translateX(-50%); z-index: 6; font-family: var(--font-display); font-size: 1.6em; letter-spacing: .5em; color: #ff3b1f;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,40,0,.9); padding: .2em 1.2em; border-top: 1px solid rgba(255,60,30,.6); border-bottom: 1px solid rgba(255,60,30,.6);
  background: linear-gradient(90deg, transparent, rgba(60,0,0,.75), transparent); animation: warnin .5s 3.5s both, warnpulse 1.4s 4s ease-in-out infinite }
.bi-warn span { letter-spacing: 0 }
@keyframes warnin { from { opacity: 0; transform: translateX(-50%) scaleX(2.5) } }
@keyframes warnpulse { 50% { color: #ff8a5a; text-shadow: 0 2px 0 #000, 0 0 30px rgba(255,60,0,1) } }
.epic .bi-art { height: 60vh; animation: epicart 2.4s 1s cubic-bezier(.15,.8,.2,1) both }
.epic .bi-art img { box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--metal-light), 0 0 0 7px #000, 0 30px 80px rgba(0,0,0,.8), 0 0 140px rgba(255,90,20,.55) }
.epic .bi-glow { animation: glow 1.3s ease-in-out infinite; background: radial-gradient(circle at 50% 40%, rgba(255,110,20,.5), transparent 62%) }
@keyframes epicart { from { opacity: 0; transform: translateY(14%) scale(1.18); filter: brightness(0) blur(10px) } 60% { filter: brightness(1.8) blur(0) } }
.epic .bi-kick { animation-delay: 4.3s; font-size: 1.1em }
.epic .bi-name { font-size: 6em; animation: epicname .7s 3.5s cubic-bezier(.2,1.4,.3,1) both, namefire 2.2s 4.3s ease-in-out infinite }
@keyframes epicname { from { opacity: 0; transform: scale(2.8); filter: blur(12px) } }
@keyframes namefire { 50% { text-shadow: 0 4px 0 #000, 0 0 40px rgba(255,170,40,.95), 0 0 110px rgba(255,70,0,.6) } }
.epic .bi-title { animation-delay: 4.7s } .epic .bi-desc { animation-delay: 5.3s } .epic .bi-stats { animation-delay: 6s }
.bossintro.pull.epic .countdown span { animation-name: cdepic }
@keyframes cdepic { 0% { opacity: 0; transform: scale(3.2) } 18% { opacity: 1; transform: scale(1) } 24% { transform: translate(-8px, 4px) } 30% { transform: translate(6px, -3px) } 36% { transform: none } 80% { opacity: 1 } 100% { opacity: 0; transform: scale(.6) } }
@media (prefers-reduced-motion: reduce) { .letterbox::before, .letterbox::after, .bi-art, .bi-kick, .bi-name, .bi-title, .bi-desc, .bi-stats, .bi-ready, .bi-glow, .bi-black, .bi-flash, .bi-embers i, .bi-warn, .bi-stage, .bi-heat { animation: none !important } .bi-black, .bi-flash { display: none } }
@media (max-width: 900px) { .bossintro { grid-template-columns: 1fr; padding: 1.5em } .bi-art { order: 0; height: 40vh } .bi-name { font-size: 3em } }

/* ---------- Tier-List im TierMaker-Stil (S–F) ---------- */
.tiermaker { position: relative; background: #1a1a17; border: 1px solid #000; box-shadow: 0 0 0 2px #2b2b27, 0 8px 24px rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; font-family: var(--font-ui) }
.tm-row { display: grid; grid-template-columns: 4.2em 1fr; min-height: 4.2em; border-bottom: 2px solid #000 }
.tm-row:last-of-type { border-bottom: 0 }
.tm-label { display: grid; place-items: center; color: #1a1a17; font: 700 1.5em/1 var(--font-ui); text-shadow: none }
.tm-items { display: flex; flex-wrap: wrap; align-content: center; gap: 4px; padding: 4px 6px; background: #1a1a17 }
.tm-brand { position: absolute; right: .7em; top: .45em; font: 800 .75em var(--font-ui); letter-spacing: .12em; color: rgba(255,255,255,.35); pointer-events: none }
.tm-tile { position: relative; width: 3.8em; height: 3.8em; border-radius: 2px; overflow: hidden; display: grid; align-items: end; background: linear-gradient(135deg, #3b3526, #1e1b14); box-shadow: 0 0 0 1px #000; animation: tilein .5s ease-out both }
.tm-tile.seen { animation: none } .tm-tile.landing { opacity: 0; animation: none }
.tm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.3) }
.tm-tile b { position: relative; display: block; padding: .15em .2em; font: 800 .5em/1.1 var(--font-ui); text-transform: uppercase; color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.85)); text-shadow: 0 1px 1px #000; overflow-wrap: normal; hyphens: auto; letter-spacing: -.02em }
.tm-tile.hot { box-shadow: 0 0 0 2px #ff8a1f, 0 0 10px rgba(255,138,31,.6) }
.tm-tile.xl { width: 7em; height: 7em; flex: none } .tm-tile.xl b { font-size: .8em }
@keyframes tilein { from { transform: scale(.4); opacity: 0 } }
.tiermaker.big .tm-row { min-height: 5em } .tiermaker.big .tm-tile { width: 4.6em; height: 4.6em }
.tm-current { grid-template-columns: auto 1fr; align-items: center; gap: 1em; display: grid }
.tbtn.seven { grid-template-columns: repeat(7, 1fr) } .tbtn.seven button { color: #1a1a17; font: 800 22px var(--font-ui); box-shadow: 0 0 0 1px #000 }
.soundgate { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 50; font-family: var(--font-display); font-size: 1.1em; color: #1a1206; background: linear-gradient(#ffe27a, #d9a520); border: 1px solid #000; border-radius: 4px; padding: .5em 1.4em; box-shadow: 0 0 0 2px #7a5a10, 0 0 30px rgba(255,209,0,.6); animation: sgp 1.6s ease-in-out infinite }
@keyframes sgp { 50% { box-shadow: 0 0 0 2px #7a5a10, 0 0 50px rgba(255,209,0,.9) } }

/* Tier-List Vollbild: großes Bild links, Liste rechts */
.tl-screen { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2em; align-items: start; padding: 1.4em 2em 5em; height: 100%; min-height: 0 }
.tl-left { display: grid; gap: .9em; align-content: start; min-width: 0 }
.tl-right { min-width: 0; align-self: center }
.tl-right .tiermaker { font-size: 1.05em }
.tl-herowrap { position: relative; border-radius: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--metal-light), 0 0 0 7px #000, 0 24px 60px rgba(0,0,0,.75) }
.tl-hero { position: relative; aspect-ratio: 16 / 9; max-height: 62vh; overflow: hidden; border-radius: 3px; background: radial-gradient(ellipse at 50% 35%, #4a3d26, #15110b 75%); animation: heroin .9s cubic-bezier(.2,.8,.2,1) both }
.tl-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kenburns 22s ease-in-out infinite alternate; filter: drop-shadow(0 0 24px rgba(0,0,0,.8)) }
/* Bilder in anderem Format (z. B. 4:3-Ladebildschirme): ganz zeigen, Rand mit unscharfer Kopie füllen */
.tl-blur { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(22px) brightness(.45) saturate(1.2) }
.tl-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 3.2em; color: rgba(255,209,0,.18); text-align: center; padding: 1em }
@keyframes heroin { from { opacity: 0; transform: scale(1.04); filter: brightness(1.8) } }
@keyframes kenburns { to { transform: scale(1.08) translate(-1.5%, -1%) } }
.tl-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3em 1.2em .9em; background: linear-gradient(transparent, rgba(0,0,0,.88)); border-radius: 0 0 3px 3px; pointer-events: none }
.tl-name { font-family: var(--font-display); color: var(--wow-yellow); font-size: 2.6em; line-height: 1.05; text-shadow: 0 3px 0 #000, 0 0 18px rgba(0,0,0,.9) }
.tl-desc { color: #eee; font-style: italic; font-size: 1.1em; text-shadow: 0 1px 2px #000 }
.tl-herowrap.rev .tl-hero { filter: brightness(.55) saturate(.7); transition: filter .6s }
.tl-stamp { position: absolute; right: 1.2rem; top: 1.2rem; width: 2.2em; height: 2.2em; display: grid; place-items: center; font: 900 3.4em/1 var(--font-ui); color: #1a1a17; background: var(--c);
  border-radius: 6px; box-shadow: 0 0 0 3px #000, 0 10px 30px rgba(0,0,0,.7); animation: stamp .45s cubic-bezier(.2,1.6,.4,1) both }
@keyframes stamp { from { opacity: 0; transform: scale(2.6) rotate(-12deg) } }
.tl-votes { display: flex; flex-wrap: wrap; gap: .4em }
.tl-end { padding: 1.4em 3em 5em; display: grid; gap: .8em; max-width: 1200px; margin: 0 auto }
.tl-flyer { position: fixed; z-index: 30; pointer-events: none; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 2px #000, 0 20px 50px rgba(0,0,0,.7); background: #2a2419 center / cover }
@media (max-width: 900px) { .tl-screen { grid-template-columns: 1fr } }

/* ---------- Einführungsquest mit Chromie ---------- */
.cq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: 2.5em; align-items: center; padding: 1em 3em 5em; height: 100%; min-height: 0 }
.cq-left { position: relative; display: grid; place-items: center; height: 78vh }
.cq-halo { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,90,.35), rgba(255,170,40,.08) 55%, transparent 70%); animation: halo 4s ease-in-out infinite }
@keyframes halo { 50% { transform: scale(1.08); opacity: .7 } }
.cq-chromie { position: relative; max-height: 74vh; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); animation: chin .9s cubic-bezier(.2,.9,.3,1.2) both, float 5s 1s ease-in-out infinite }
.cq.slides .cq-chromie, .cq.outro .cq-chromie { border-radius: 8px }
@keyframes chin { from { opacity: 0; transform: translateX(-30px) scale(.92) } }
@keyframes float { 50% { transform: translateY(-12px) } }
.cq-right { display: grid; gap: 1em; align-content: center; min-width: 0 }
.cq-anim { display: grid; gap: .7em }
.cq-step { display: flex; align-items: center; gap: 1em }
.cq-dots { display: flex; gap: 6px } .cq-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3024; box-shadow: 0 0 0 1px #000 } .cq-dots i.done { background: #8a6d2a } .cq-dots i.on { background: var(--wow-yellow); box-shadow: 0 0 10px var(--wow-yellow) }
.cq-h { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow); font-size: 3em; line-height: 1.05; text-shadow: 0 3px 0 #000, 0 0 20px rgba(0,0,0,.8); animation: fadeup .6s .15s both }
.cq-bubble { position: relative; background: var(--tex-parchment) center / cover, linear-gradient(#efe0bd, #d9c393); color: #2a1d0e; border-radius: 10px; padding: 1.1em 1.4em 1.2em; font-size: 1.28em; line-height: 1.45; box-shadow: 0 0 0 2px #6b4f25, 0 12px 30px rgba(0,0,0,.6); animation: bubble .6s .3s cubic-bezier(.2,1.3,.4,1) both }
.cq-bubble::before { content: ""; position: absolute; left: -16px; top: 2em; border: 10px solid transparent; border-right: 16px solid #6b4f25 }
.cq-bubble b { color: #6a1d05 } .cq-bubble i { color: #4a3515 }
.cq-who { display: block; font-family: var(--font-display); color: #8a5a10; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2em }
@keyframes bubble { from { opacity: 0; transform: translateY(10px) scale(.96) } }
.cq-gate { margin-top: .4em }
.cq.probe .qcard { font-size: .95em }
.cx { animation: fadeup .6s .8s both }
.cx-go { font-family: var(--font-display); font-size: 3em; color: #ff8a3a; text-shadow: 0 3px 0 #000, 0 0 30px rgba(255,120,30,.8); animation: epicname .7s .6s cubic-bezier(.2,1.4,.3,1) both }
/* Beispiele */
.cx-road { display: flex; align-items: center; flex-wrap: wrap; gap: .4em }
.cx-stop { display: grid; justify-items: center; gap: .1em; padding: .6em .8em; min-width: 7.5em; background: linear-gradient(#211a12, #120e09); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--metal-mid); border-radius: 6px; animation: fadeup .5s calc(1s + var(--k) * .15s) both }
.cx-stop .i { font-size: 1.8em } .cx-stop b { font-family: var(--font-display); color: var(--wow-yellow); font-weight: 400; text-align: center } .cx-stop small { color: var(--mute) }
.cx-arrow { color: var(--wow-yellow); font-size: 1.6em; opacity: .7 } .cx-arrow.big { font-size: 2.6em }
.cx-devices { display: flex; align-items: center; gap: 1.4em }
.cx-tv { display: grid; gap: .4em; padding: 1em 1.2em; min-width: 16em; background: #0d0b08; border: 1px solid #000; box-shadow: inset 0 0 0 2px #3a3024, 0 10px 24px rgba(0,0,0,.6); border-radius: 6px }
.cx-q { font-family: var(--font-display); color: #fff; font-size: 1.2em } .cx-dots { display: flex; gap: 5px } .cx-dots i { width: 12px; height: 12px; border-radius: 50%; background: #333 } .cx-dots i.on { background: var(--ok) }
.cx-phone { position: relative; display: grid; gap: .35em; width: 10em; padding: 1.4em .6em .7em; background: #111; border-radius: 18px; box-shadow: 0 0 0 3px #333, 0 0 0 5px #000, 0 14px 30px rgba(0,0,0,.7) }
.cx-notch { position: absolute; top: .45em; left: 50%; width: 3em; height: .35em; transform: translateX(-50%); background: #333; border-radius: 4px }
.cx-pb { font-size: .8em; padding: .35em .5em; background: #221c14; border-radius: 4px; box-shadow: inset 0 0 0 1px #4a3a22 } .cx-pb b { color: var(--wow-yellow); margin-right: .3em }
.cx-pb.sel { background: #3b2a0e; box-shadow: inset 0 0 0 2px var(--wow-yellow); animation: pbsel 2.4s 1.4s ease-in-out infinite }
@keyframes pbsel { 50% { box-shadow: inset 0 0 0 2px var(--wow-yellow), 0 0 12px rgba(255,209,0,.6) } }
.cx-ok { font-size: .8em; text-align: center; padding: .35em; margin-top: .2em; color: #fff; background: linear-gradient(#b8301f, #6a0d07); border-radius: 4px }
.cx-rar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em }
.cx-card { display: grid; justify-items: center; gap: .3em; padding: 1em .6em; background: linear-gradient(#1b1610, #0d0a07); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--c), 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); animation: fadeup .5s calc(1s + var(--k) * .18s) both }
.cx-card b { color: var(--c); font-family: var(--font-display); font-weight: 400; font-size: 1.15em } .cx-card span { font-size: 1.1em }
.cx-gem { width: 1.6em; height: 1.6em; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 14px var(--c); border-radius: 3px }
.cx-loot { display: grid; gap: .8em }
.cx-item { display: flex; gap: .8em; align-items: center; padding: .7em 1em; background: rgba(8,10,24,.92); border: 1px solid #000; box-shadow: inset 0 0 0 1px #5a5a7a; border-radius: 4px; max-width: 30em }
.cx-icon { width: 2.4em; height: 2.4em; display: grid; place-items: center; font-size: 1.4em; background: #221a30; border-radius: 4px; box-shadow: 0 0 0 2px var(--q4) }
.cx-item small { display: block; color: #1eff00 }
.cx-bids { display: flex; flex-wrap: wrap; gap: .5em; align-items: center }
.cx-bid { padding: .3em .8em; background: #1a1510; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--metal-mid); animation: fadeup .4s calc(1.2s + var(--k) * .25s) both }
.cx-win { color: var(--wow-yellow); font-family: var(--font-display); margin-left: .4em }
.cx-boss { display: grid; gap: .5em; max-width: 34em; position: relative }
.cx-uf { display: grid; gap: .3em; padding: .6em .9em; background: rgba(10,6,4,.85); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--metal-mid) } .cx-uf b { font-family: var(--font-display); color: #ff6a4a; font-weight: 400 }
.cx-hp { position: relative; height: 1.3em; background: #2a0a06; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px #000 }
.cx-hp i { position: absolute; inset: 0 38% 0 0; background: linear-gradient(#e0342a, #8e130c); animation: hpdrop 1.6s 1.4s ease-out both } .cx-hp span { position: relative; display: block; text-align: center; font-size: .8em; line-height: 1.3em }
@keyframes hpdrop { from { right: 0 } }
.cx-hits { display: flex; gap: 1em; height: 1.6em } .cx-hits span { font: 800 1.4em var(--font-ui); color: #ffd84a; text-shadow: 0 2px 0 #000; animation: hit 1.2s calc(1.4s + var(--k) * .3s) both }
@keyframes hit { 0% { opacity: 0; transform: translateY(10px) scale(.6) } 30% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-20px) } }
.cx-help { display: flex; flex-wrap: wrap; gap: .6em }
.cx-hb { display: grid; justify-items: center; padding: .6em 1em; min-width: 8em; font-family: var(--font-display); background: linear-gradient(#211a12, #120e09); border-radius: 5px; box-shadow: inset 0 0 0 1px currentColor; animation: fadeup .5s calc(1s + var(--k) * .15s) both }
.cx-hb small { color: var(--mute); font-family: var(--font-body) } .cx-hb.appeal { color: #ffb35a }
.lex { background: rgba(0,0,0,.35); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--metal-mid); padding: .5em .8em; font-size: .9em }
.lex summary { cursor: pointer; color: var(--wow-yellow); font-family: var(--font-display) } .lex div { margin-top: .4em; line-height: 1.45 }
@media (max-width: 900px) { .cq { grid-template-columns: 1fr } .cq-left { height: 30vh } .cx-rar { grid-template-columns: repeat(2, 1fr) } }

/* ---------- Chromie-Sprechblase v2: Namensplakette, Pergament mit Goldrahmen, Schreibmaschine, Merksatz ---------- */
.cq-talk { position: relative; display: grid; gap: .55em; animation: bubble .6s .25s cubic-bezier(.2,1.3,.4,1) both }
.cq-plate { justify-self: start; display: inline-flex; align-items: center; gap: .55em; padding: .25em 1em .25em .3em; margin-left: 1.4em; margin-bottom: -1.05em; position: relative; z-index: 2;
  background: linear-gradient(#3a2a14, #1c140a); border: 1px solid #000; border-radius: 999px; box-shadow: inset 0 0 0 1px #c9a24a, 0 4px 10px rgba(0,0,0,.6) }
.cq-plate img { width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #c9a24a, 0 0 0 3px #000 }
.cq-plate b { font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow); font-size: 1.1em; text-shadow: 0 1px 0 #000 }
.cq-plate small { color: #d9b56a; font-size: .75em; letter-spacing: .08em; text-transform: uppercase }
.cq-talk .cq-bubble { animation: none; position: relative; margin: 0; padding: 1.6em 1.8em 1.3em; border-radius: 18px; font-size: 1.32em; line-height: 1.5; color: #2b1c0b;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.45), transparent 60%), var(--tex-parchment) center / cover, linear-gradient(#f3e5c4, #dcc592);
  box-shadow: 0 0 0 2px #7a5a26, 0 0 0 5px #1a1206, 0 0 0 7px #c9a24a, 0 0 0 8px #000, inset 0 0 30px rgba(120,80,20,.35), 0 18px 40px rgba(0,0,0,.65) }
.cq-talk .cq-bubble::before { content: ""; position: absolute; left: -30px; top: 1.9em; width: 40px; height: 40px; transform: rotate(45deg); background: #ebdab2;
  border-left: 3px solid #c9a24a; border-bottom: 3px solid #c9a24a; box-shadow: -3px 3px 0 #000; border-radius: 0 0 0 4px; z-index: -1 }
.cq-talk .cq-bubble p { margin: 0 } .cq-talk .cq-bubble b { color: #7a1c04 } .cq-talk .cq-bubble i { color: #5a3a10 }
.tw .caret { display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.12em; background: #7a5a26; animation: caret .8s steps(2) infinite }
@keyframes caret { 50% { opacity: 0 } }
.cq-key { justify-self: start; display: inline-flex; gap: .6em; align-items: center; padding: .45em 1.2em .45em .9em; font-family: var(--font-display); font-size: 1.15em; color: #1a1206;
  background: linear-gradient(90deg, #ffe07a, #e0a92a); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 22px rgba(255,200,60,.45); animation: keyin .5s cubic-bezier(.2,1.4,.4,1) both }
.cq-key span { color: #7a3a00 }
@keyframes keyin { from { opacity: 0; transform: translateX(-16px) scale(.96) } }
.cq-chromie { max-height: 70vh }
.pkey { font-family: var(--font-display); color: #1a1206; background: linear-gradient(90deg, #ffe07a, #e0a92a); border-radius: 4px; padding: .4em .8em }

/* Original-Mini-Icons aus dem Spiel */
img.mini { height: 1.05em; width: auto; vertical-align: -.18em; image-rendering: auto }
.ico.cls { border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--c) }
.mech::before, .raidwarn::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .4em; vertical-align: -.15em; background: url('/assets/ui/icons/mini/important.png') center / contain no-repeat }
.hints::before { content: ""; display: none }

/* Chromie schwebt samt Namensschild (wie im Spiel: Name + <Gilde> über dem Kopf) */
.cq-left { height: 80vh }
.cq-float { position: relative; display: grid; justify-items: center; gap: .3em; animation: float 5s ease-in-out infinite }
.cq-float .cq-chromie { animation: chin .9s cubic-bezier(.2,.9,.3,1.2) both; max-height: 62vh }
.cq-name { display: grid; justify-items: center; line-height: 1.15; font-family: var(--font-ui, sans-serif); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 6px rgba(0,0,0,.9) }
.cq-name b { color: #40ff40; font-size: 1.9em; font-weight: 700; letter-spacing: .01em }
.cq-name span { color: #40ff40; font-size: 1.15em }
.cq-talk .cq-bubble { margin-top: .2em }
/* Münzen: echte Spiel-Icons ohne Kreis/Schatten darüber */
.money i { width: 1em; height: 1em; border-radius: 0; box-shadow: none; margin: 0 .2em 0 .08em; vertical-align: -.14em; background-size: contain !important; background-repeat: no-repeat !important; background-color: transparent !important; filter: drop-shadow(0 1px 0 #000) }
.nm .fac { height: .95em; width: auto; margin-right: .3em; vertical-align: -.1em }

/* Echte WoW-Icons */
.wi { height: 1.25em; width: auto; aspect-ratio: 1; border-radius: 3px; vertical-align: -.28em; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5b4a2c; object-fit: cover }
.wi.big { height: 2.2em } .wi.card { height: 3.2em; box-shadow: 0 0 0 1px #000, 0 0 0 2px #b08d3c, 0 4px 10px rgba(0,0,0,.6) }
.wi.bot { height: .95em; vertical-align: -.12em; box-shadow: 0 0 0 1px #000; opacity: .8 }
.cx-stop .i { font-size: 1em } .bi-warn .wi.big { height: 1.4em; vertical-align: -.25em }
.cx-icon .wi.big { height: 100% } .bi-stats .wi { height: 1.2em }
.ico.sq img { image-rendering: auto }
/* Tabellenkopf: eine durchgehende Leiste statt Verlauf je Zelle */
.tbl thead tr, .tbl tr:first-child:has(th) { background: linear-gradient(90deg, rgba(120,80,25,.45), rgba(40,28,14,.25)) }
.tbl th { background: none; border-bottom: 1px solid var(--metal-mid) }
/* Chromie im runden Avatar (Pergament-Texte): Comic-Bild ganz zeigen */
.chromie .avatar img { object-fit: contain; background: radial-gradient(circle, #2a3b5a, #0c1220) }
/* Handy: große Tier-Knöpfe als Reihen wie in der Tier-List */
.tbtn.seven { display: grid; grid-template-columns: 1fr !important; gap: 6px; margin: .4em 0 }
.tbtn.seven button { display: grid; grid-template-columns: 64px 1fr; align-items: stretch; min-height: 58px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #1c1c19; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); text-align: left }
.tbtn.seven button b { display: grid; place-items: center; background: var(--tc); color: #1a1a17; font: 900 28px var(--font-ui, sans-serif) }
.tbtn.seven button span { display: flex; align-items: center; padding: 0 16px; color: #e8e2d0; font: 600 17px var(--font-ui, sans-serif); border-left: 2px solid #000 }
.tbtn.seven button:active { transform: scale(.98); filter: brightness(1.15) }
/* Veteran/Frischling: PvP-Rangabzeichen aus Classic, pixelscharf vergrößert */
.rankbadge { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 6px; background: radial-gradient(circle, #3a2c16, #120d07); box-shadow: 0 0 0 1px #000, 0 0 0 2px #b08d3c, 0 4px 10px rgba(0,0,0,.6) }
.rankbadge img { width: 2.6em; height: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px #000) }
/* Geschlechtswahl: alle Völker der Fraktion als 2×2-Porträts */
.faces { display: grid; grid-template-columns: repeat(2, auto); gap: 4px }
.faces .ico { width: 2.3em; height: 2.3em; font-size: 1em }

/* ---------- Questtafel im WoW-Stil ---------- */
.qhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em }
.qpicker { display: flex; align-items: center; gap: .6em; padding: .4em .9em .4em .5em; background: rgba(0,0,0,.45); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--metal-mid) }
.qpicker .ico { width: 2.4em; height: 2.4em } .qpicker div { display: grid; line-height: 1.2 } .qpicker b { font-size: 1.2em }
.qboard { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.2em; padding: 1.2em 1.2em 1.4em; border-radius: 8px;
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45)), repeating-linear-gradient(0deg, #4a3220 0 46px, #3a2718 46px 48px, #563a24 48px 94px, #2c1d12 94px 96px);
  box-shadow: inset 0 0 0 3px #1c120a, inset 0 0 0 5px #7a5a2c, inset 0 0 40px rgba(0,0,0,.7), 0 14px 30px rgba(0,0,0,.6) }
.qcol { display: grid; gap: .8em; align-content: start }
.qsign { display: flex; align-items: center; justify-content: center; gap: .6em; padding: .45em .8em; margin-bottom: .2em; font-family: var(--font-display); font-size: 1.15em; color: #ffe8a8; text-shadow: 0 2px 0 #000;
  background: linear-gradient(#6b4a2a, #3e2a17); border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px #9a7440, 0 4px 8px rgba(0,0,0,.6) }
.qnote { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7em; align-items: center; text-align: left; min-height: 4.2em; padding: .6em .9em .55em;
  border: 0; border-radius: 2px; color: #2b1c0b; transform: rotate(var(--rot)); transition: transform .15s, filter .15s;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%), var(--tex-parchment) center / cover, linear-gradient(#efdfb8, #d8c08c);
  box-shadow: 0 0 0 1px rgba(60,40,15,.6), inset 0 -3px 0 var(--rc), 0 6px 12px rgba(0,0,0,.55) }
.qnote .pin { position: absolute; top: -.35em; left: 50%; width: .8em; height: .8em; margin-left: -.4em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb0a0, #9a1a10 60%, #3a0604); box-shadow: 0 2px 3px rgba(0,0,0,.7) }
.qnote .qmark { grid-row: span 2; height: 2em; width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) }
.qnote .qr { font-family: var(--font-display); font-size: 1.05em; color: var(--rt) }
.qnote .qrew { font-size: .95em } .qnote .qrew .money { color: #2b1c0b; text-shadow: none }
.q-c { --rc: #8a8a8a; --rt: #3a3a3a } .q-u { --rc: #1eff00; --rt: #1b7a0c } .q-r { --rc: #0070dd; --rt: #0a4f9e } .q-e { --rc: #a335ee; --rt: #6a1ea8 }
.qboard.pick .qnote:not(.used):hover, .qboard.pick .qnote:not(.used):active { transform: rotate(0) scale(1.04); filter: brightness(1.08) }
.qnote.used { filter: grayscale(.9) brightness(.55); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.4) }
.qnote .qdone { grid-column: span 2; justify-self: center; font-family: var(--font-display); font-size: 1.05em }
.qhint { margin: .2em 0 0; color: var(--mute); font-size: .95em } .qhint b { color: var(--text) }
/* Handy: kompakt, gleiche Spalten */
.play .qboard { gap: .4em; padding: .5em .4em .6em; font-size: 13px } .play .qcol { gap: .45em }
.play .qsign { font-size: .9em; padding: .35em .2em; flex-direction: column; gap: .2em; text-align: center } .play .qsign .wi.big { height: 1.8em }
.play .qnote { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 3.4em; padding: .5em .2em .45em; transform: none }
.play .qnote .qmark { display: none }
.newtag { display: inline-block; margin-left: .3em; padding: 0 .4em; font: 700 .68em var(--font-ui, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: #1a1206; background: linear-gradient(#ffe07a, #e0a92a); border-radius: 3px; vertical-align: .15em }
/* Geschlechtswahl: bei 5 Völkern 3 + 2 */
.faces { grid-template-columns: repeat(3, auto); justify-content: center }
.qnote[disabled] { opacity: 1; filter: none; cursor: default } .qnote.used[disabled] { filter: grayscale(.9) brightness(.55) }
.qnote .pin { width: 12px; height: 12px; margin-left: -6px; top: -5px }
.qboard { gap: 1em; padding: 1em 1em 1.1em } .qcol { gap: .6em } .qnote { min-height: 3.6em; padding: .45em .9em .4em } .qsign { padding: .3em .8em }
.play .qnote { padding-top: .75em; font-size: 12px } .play .qnote .qr { font-size: 1em }
.play .qnote .pin { width: 8px !important; height: 8px !important; min-width: 0 !important; margin-left: -4px !important; top: -3px !important; padding: 0 !important }
/* Questtafel v2: Zettel als klare Karten – farbiges Seltenheitsband oben, Belohnung groß */
.qcol { justify-items: center }
.qsign { width: 100%; max-width: 20em }
.qnote { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 20em; min-height: 0; padding: 0; overflow: visible; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(60,40,15,.7), 0 6px 12px rgba(0,0,0,.55) }
.qnote .qr { display: block; padding: .3em .6em .25em; text-align: center; font-family: var(--font-display); font-size: 1.1em; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px #000;
  background: linear-gradient(color-mix(in srgb, var(--rc) 85%, #000), color-mix(in srgb, var(--rc) 55%, #000)); border-radius: 3px 3px 0 0; border-bottom: 1px solid rgba(0,0,0,.5) }
.q-c .qr { background: linear-gradient(#8d8d8d, #5a5a5a) }
.qnote .qbody { display: flex; align-items: center; justify-content: center; gap: .6em; padding: .45em .6em .5em }
.qnote .qmark { height: 1.7em; grid-row: auto } .qnote .qrew { font-size: 1.35em; font-family: var(--font-display) } .qnote .qrew .money i { width: .85em; height: .85em }
.qnote .pin { top: -6px; z-index: 2 }
.qnote.used .qr { background: #555 }
.play .qnote .qr { font-size: 1em; padding: .25em .2em } .play .qnote .qbody { padding: .3em .2em .35em } .play .qnote .qrew { font-size: 1.15em } .play .qnote .qmark { display: none } .play .qnote { padding-top: 0 }
/* kompakter, damit die Tafel auf jeden Bildschirm passt */
.qboard { gap: .8em; padding: .8em .9em .9em } .qcol { gap: .55em }
.qsign { font-size: 1em; padding: .25em .6em } .qsign .wi.big { height: 1.7em }
.qnote .qr { font-size: .95em; padding: .18em .5em .15em } .qnote .qbody { padding: .28em .5em .32em } .qnote .qrew { font-size: 1.15em } .qnote .qmark { height: 1.35em }
.q-u { --rc: #1d8f0e } .q-u .qr { background: linear-gradient(#26a814, #145e0a) }
.qhead .hd { font-size: 1.6em }
/* Pins in die Ecken, damit sie nichts verdecken */
.qnote .pin { left: 10px !important; margin-left: 0 !important }
.qnote::after { content: ""; position: absolute; top: -6px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb0a0, #9a1a10 60%, #3a0604); box-shadow: 0 2px 3px rgba(0,0,0,.7); z-index: 2 }
.play .qnote::after { width: 8px; height: 8px; top: -3px; right: 6px } .play .qnote .pin { left: 6px !important }
.qnote.used::after { filter: grayscale(1) }
.qnote .pin { width: 12px !important; height: 12px !important; top: -6px !important; padding: 0 !important; min-width: 0 !important }
.play .qnote .pin { width: 8px !important; height: 8px !important; top: -3px !important }

/* ---------- Chromie als Begleiterin (Einblendung unten links) ---------- */
.comp { position: fixed; left: 1.2em; bottom: 3.6em; z-index: 40; display: flex; align-items: flex-end; gap: .2em; max-width: 34em; pointer-events: none;
  animation: compin .6s cubic-bezier(.2,1.3,.4,1) both, compout .8s 12s ease-in forwards }
@keyframes compin { from { opacity: 0; transform: translateX(-40px) scale(.9) } } @keyframes compout { to { opacity: 0; transform: translateY(20px) } }
.comp-pic img { width: 8.5em; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.8)); animation: float 4s ease-in-out infinite }
.comp-bub { position: relative; margin-bottom: 2.4em; padding: .7em 1em .75em; border-radius: 12px; color: #2b1c0b;
  background: var(--tex-parchment) center / cover, linear-gradient(#f3e5c4, #dcc592); box-shadow: 0 0 0 2px #7a5a26, 0 0 0 4px #1a1206, 0 0 0 5px #c9a24a, 0 12px 28px rgba(0,0,0,.7) }
.comp-bub::before { content: ""; position: absolute; left: -12px; bottom: 1.2em; width: 20px; height: 20px; transform: rotate(45deg); background: #e7d3a8; border-left: 3px solid #c9a24a; border-bottom: 3px solid #c9a24a; z-index: -1 }
.comp-name { font-family: var(--font-ui, sans-serif); font-weight: 700; color: #1f9e1f; font-size: .9em } .comp-name span { font-weight: 400; color: #2f7d2f; font-size: .85em }
.comp-s { font-style: italic; font-size: 1.05em; line-height: 1.35 } .comp-t { margin-top: .3em; font-size: .9em; color: #5a3a10 }

/* ---------- Akt-Start ---------- */
.actintro { position: relative; height: 100%; min-height: 80vh; display: grid; align-items: end; overflow: hidden }
.ai-bg { position: absolute; inset: 0; background: center / cover no-repeat; animation: kenburns 30s ease-in-out infinite alternate, heroin 1.6s both }
.ai-shade { position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0,0,0,.92) 85%), radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,.6)) }
.ai-text { position: relative; padding: 2em 4em 4em; display: grid; gap: .5em }
.ai-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 5em; line-height: 1; color: #ffd100; text-shadow: 0 4px 0 #000, 0 0 40px rgba(255,120,30,.6); animation: namein 1.2s .6s both }
.ai-sub { margin: 0; font-size: 1.3em; color: #f0e2c0; max-width: 46em; animation: fadeup .8s 1.3s both; text-shadow: 0 2px 4px #000 }
.ai-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .6em } .ai-steps i { color: var(--wow-yellow); font-style: normal; opacity: .7 }
.ai-steps span { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; background: rgba(10,7,4,.8); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--metal-mid); animation: fadeup .5s calc(1.8s + var(--k) * .15s) both }
.ai-gate { margin-top: 1em }

/* ---------- Steckbrief ---------- */
.wanted-wrap { display: grid; grid-template-columns: minmax(0, 24em) minmax(0, 1fr); gap: 2em; align-items: start; margin-top: .6em }
.wanted { display: grid; justify-items: center; gap: .5em; padding: 1.2em 1.2em 1.4em; color: #3a2410; transform: rotate(-1deg);
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.3), transparent 60%), var(--tex-parchment) center / cover, linear-gradient(#ecd9aa, #cfb27a);
  box-shadow: inset 0 0 40px rgba(110,70,20,.45), 0 0 0 1px #5a3c18, 0 14px 30px rgba(0,0,0,.6); border-radius: 3px }
.w-head { font-family: var(--font-display); font-size: 2.6em; letter-spacing: .15em; color: #5a1d08; text-shadow: 0 1px 0 rgba(255,255,255,.4) }
.w-img { width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: #2a1c10; box-shadow: inset 0 0 0 3px #5a3c18, inset 0 0 30px rgba(0,0,0,.8) }
.w-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; transition: filter 1.2s, transform 1.2s }
.w-img.st0 img { filter: blur(22px) brightness(.35) saturate(.2); transform: scale(1.3) } .w-img.st1 img { filter: blur(9px) brightness(.7) saturate(.6); transform: scale(1.12) } .w-img.st2 img { filter: blur(2px) } .w-img.rv img { filter: none; transform: none }
.w-name { font-family: var(--font-display); font-size: 1.8em; color: #3a1a06 } .w-reward { font-size: 1.05em } .w-reward .money { color: #3a2410; text-shadow: none }
.w-side { display: grid; gap: .8em; align-content: start } .w-q { font-family: var(--font-display); font-size: 2em; color: var(--wow-yellow); text-shadow: 0 2px 0 #000 }
.w-clues { display: grid; gap: .5em } .w-clue { padding: .5em .8em; background: rgba(0,0,0,.45); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--metal-mid); font-size: 1.15em; animation: fadeup .6s both }
.who .more { box-shadow: inset 0 0 0 1px #6aa0ff }

/* ---------- Gerüchte: Brachland-Chat ---------- */
.chatwin { margin-top: .6em; background: rgba(0,0,0,.72); border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #3a3024; overflow: hidden }
.chat-tabs { display: flex; gap: 2px; background: #0c0a08; padding: 4px 4px 0 } .chat-tabs span { padding: .25em .9em; font: 600 .85em var(--font-ui, sans-serif); color: #aaa; background: #1c1812; border-radius: 4px 4px 0 0 } .chat-tabs .on { color: #ffd100; background: #2a2218 }
.chat-log { display: grid; gap: .7em; padding: 1em 1.2em 1.2em; font: 1.35em/1.45 var(--font-ui, sans-serif); color: #ffc0c0 }
.chat-line { position: relative; padding: .45em .6em .45em 2.8em; border-radius: 4px; background: rgba(255,255,255,.03); animation: fadeup .5s calc(var(--k) * .6s) both; color: #ffc9a8 }
.chat-line .l { position: absolute; left: .5em; top: .45em; width: 1.6em; height: 1.6em; display: grid; place-items: center; font: 700 .8em var(--font-ui, sans-serif); color: #1a1206; background: var(--wow-yellow); border-radius: 3px }
.chat-line .ch { color: #ffc0a0; opacity: .8 } .chat-line .cwho { color: #ff8a4a }
.chat-line.fake { background: rgba(170,20,10,.25); box-shadow: inset 0 0 0 1px #c0392b } .chat-line.true { background: rgba(20,120,20,.18); box-shadow: inset 0 0 0 1px #2e8b2e }
.chat-line .stamp { margin-left: .6em; padding: 0 .5em; font: 800 .7em var(--font-ui, sans-serif); letter-spacing: .08em; border-radius: 3px; vertical-align: .15em }
.chat-line.fake .stamp { background: #c0392b; color: #fff } .chat-line.true .stamp { background: #2e8b2e; color: #fff }
.chat-ctx { margin-top: .25em; font-size: .78em; color: #e8e2d0; font-style: italic }

/* ---------- Lagerfeuer ---------- */
.camp { display: grid; grid-template-columns: 16em minmax(0, 1fr); gap: 2em; align-items: center; padding: 1em 2.5em 5em; min-height: 80vh }
.camp-fire { position: relative; height: 22em; } .camp-fire .logs { position: absolute; left: 15%; right: 15%; bottom: 2em; height: 1.4em; background: linear-gradient(#5a3a1c, #2a1a0c); border-radius: 1em; box-shadow: 0 -6px 30px rgba(255,120,20,.6), 0 0 80px 30px rgba(255,100,20,.25) }
.flame { position: absolute; left: 50%; bottom: 3em; width: 7em; height: 11em; margin-left: -3.5em; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #fff6c0, #ffb020 35%, #ff5a10 60%, transparent 72%); filter: blur(2px); animation: flick 1.1s ease-in-out infinite alternate; transform-origin: 50% 100% }
.flame.f2 { width: 4.5em; height: 8em; margin-left: -2.25em; opacity: .8; animation-duration: .8s } @keyframes flick { 50% { transform: scaleY(1.08) skewX(3deg) } 100% { transform: scaleY(.94) skewX(-3deg) } }
.camp-fire i { position: absolute; bottom: 7em; left: var(--x); width: 4px; height: 4px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px #ff8a20; animation: ember 3.5s var(--d) linear infinite; opacity: 0 }
.camp-main { display: grid; gap: .8em } .camp-img { max-width: 40em; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--metal-light), 0 14px 30px rgba(0,0,0,.6) } .camp-img img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 25s ease-in-out infinite alternate }
.camp-ask { font-family: var(--font-display); font-size: 1.4em; color: #ffe8a8 }
.recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: .8em }
.recipe { position: relative; display: grid; justify-items: center; gap: .3em; padding: 1em .6em; text-align: center; background: linear-gradient(#241c12, #120e09); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--metal-mid) }
.recipe b { font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow) } .recipe small { color: var(--mute) } .recipe .cnt { position: absolute; top: .4em; right: .6em; font: 700 1.2em var(--font-ui, sans-serif); color: #fff }
.recipe.win { box-shadow: inset 0 0 0 2px var(--wow-yellow), 0 0 24px rgba(255,209,0,.35) }
.nextbar { position: fixed; left: 50%; bottom: 1em; transform: translateX(-50%); z-index: 30; display: grid; gap: .4em; justify-items: center; padding: .6em 1.4em; background: rgba(10,7,4,.92); border-radius: 6px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--wow-yellow), 0 10px 30px rgba(0,0,0,.7); animation: fadeup .5s both }
.nextbar > span { font-family: var(--font-display); color: var(--wow-yellow) }

/* Chromie-Einblendung unten rechts (über dem freien Teil der Rangliste), Bild rechts */
.comp { left: auto; right: 1.2em; bottom: 1.2em; flex-direction: row-reverse; max-width: 30em }
.comp-bub { margin-bottom: 2em } .comp-bub::before { left: auto; right: -12px; border-left: 0; border-bottom: 0; border-right: 3px solid #c9a24a; border-top: 3px solid #c9a24a }
.comp-pic img { width: 7.5em }
.chatwin.rv .chat-line { animation: none }
.w-clue { animation: none }
.chat-log { font-size: 1.15em; gap: .5em; padding: .8em 1em 1em } .chat-line { padding: .35em .6em .35em 2.6em }

/* ===================== Brachland-Chat ===================== */
.bl-screen { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.2em; padding: 1em 1.6em 1.4em; min-height: 0; height: 100%; }
.bl-bg { position: absolute; inset: 0; background: url('/assets/ui/backgrounds/brachland.webp') center/cover, url('/assets/ui/tierlist/_fallback/kalimdor.webp') center/cover; filter: saturate(.9) brightness(.55); z-index: -1; }
.bl-main { display: grid; grid-template-rows: auto 1fr; gap: .4em; min-height: 0 }
.bl-chat { display: grid; grid-template-rows: auto 1fr; min-height: 0; background: rgba(0,0,0,.62); border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #3a3024; overflow: hidden }
.bl-tabs { display: flex; gap: 2px; background: rgba(12,10,8,.9); padding: 4px 4px 0 } .bl-tabs span { padding: .25em .9em; font: 600 .8em var(--font-ui, sans-serif); color: #aaa; background: #1c1812; border-radius: 4px 4px 0 0 } .bl-tabs .on { color: #ffd100; background: #2a2218 }
.bl-log { display: flex; flex-direction: column; justify-content: flex-end; gap: .18em; padding: .7em 1em .9em; overflow: hidden; font: 500 1.06em/1.34 var(--font-ui, 'Alegreya Sans', sans-serif); color: #ffc0c0; text-shadow: 1px 1px 0 #000, 0 0 2px #000 }
.bl-line { animation: blin .35s ease-out both; word-break: break-word }
@keyframes blin { from { opacity: 0; transform: translateY(.6em) } to { opacity: 1; transform: none } }
.bl-ch { color: #ffc0c0; opacity: .75 } .bl-nm { color: #ffc0c0 } .bl-line.asker .bl-nm { color: #ffe27a } .bl-line.asker { color: #ffe0c0 }
.bl-line.player { color: #fff; background: rgba(255,255,255,.07); border-radius: 3px; margin: .1em -.3em; padding: .05em .3em }
.bl-line.wh { color: #ff80ff } .bl-line.sys { color: #ffff00 }
.bl-item.q-g { color: var(--q2) } .bl-item.q-w { color: #fff } .bl-item.q-b { color: var(--q3-text) } .bl-item.q-e { color: var(--q4) }
.bl-side { align-self: start; max-height: 100%; overflow: auto }
.bl-asker .qtext { font-size: 1.35em; margin: .2em 0 .6em }
.opt .safe { margin-left: .25em; padding: 0 .3em; font: 800 .6em var(--font-ui, sans-serif); color: #1a1206; background: var(--wow-yellow); border-radius: 2px; vertical-align: .2em }
.pbig small, .pb small { display: block; font-size: .72em; opacity: .85; font-family: var(--font-body) }
@media (max-width: 900px) { .bl-screen { grid-template-columns: 1fr } }

/* ===================== Stimmen aus Azeroth ===================== */
.vo-screen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.4em; padding: 1.2em 1.8em 1.4em; height: 100%; min-height: 0 }
.vo-left { display: grid; align-content: center; justify-items: center; gap: 1em; text-align: center }
.vo-h { margin: 0; font: 400 3.2em var(--font-display); color: var(--wow-yellow); text-shadow: 0 2px 0 #000, 0 0 24px rgba(255,200,60,.35) }
.vo-wave { display: flex; align-items: center; gap: .32em; height: 11em; width: min(46em, 100%); padding: 0 1.2em; background: radial-gradient(ellipse at center, rgba(90,60,160,.35), rgba(0,0,0,.6) 70%); border-radius: 50% / 30%; box-shadow: inset 0 0 40px rgba(0,0,0,.8) }
.vo-wave i { flex: 1; height: 8%; border-radius: 3px; background: linear-gradient(#e6d3ff, #8e5cff 60%, #4a2a9a); box-shadow: 0 0 10px rgba(160,110,255,.6); opacity: .45 }
.vo-wave.live i { opacity: 1; animation: vobar .55s calc(var(--k) * -37ms) ease-in-out var(--n) alternate }
@keyframes vobar { from { height: 8% } to { height: var(--h) } }
.vo-lines { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center }
.vo-l { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border: 1px solid var(--line-2); background: rgba(0,0,0,.5); border-radius: 4px; color: var(--mute); font-family: var(--font-display) }
.vo-l.on { color: var(--wow-yellow); border-color: var(--wow-yellow); box-shadow: 0 0 12px rgba(255,209,0,.35) } .vo-l.done { color: var(--text) }
.vo-reward { font-size: 1.2em } .vo-reward small { color: var(--mute) }
.vo-reveal { position: relative; width: min(30em, 90%); aspect-ratio: 4/3; border: 2px solid var(--metal-light); box-shadow: 0 0 0 2px #000, 0 10px 40px rgba(0,0,0,.8); background: #000; animation: voin .8s cubic-bezier(.2,.8,.2,1) both; overflow: hidden }
.vo-reveal img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.vo-reveal.noimg { aspect-ratio: auto; padding: 2em }
.vo-name { position: absolute; left: 0; right: 0; bottom: 0; padding: .5em; font: 1.5em var(--font-display); color: var(--wow-yellow); background: linear-gradient(transparent, rgba(0,0,0,.9)) }
@keyframes voin { from { opacity: 0; transform: scale(.85) rotate(-2deg) } to { opacity: 1; transform: none } }
.vo-right { align-self: center }
.opts.one { grid-template-columns: 1fr }
.seg .pb { flex: 1 }
@media (max-width: 900px) { .vo-screen { grid-template-columns: 1fr } }

/* ===================== Tooltip-Schmiede ===================== */
.tf-screen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4em; padding: 1.2em 1.8em 1.4em; height: 100%; min-height: 0 }
.tf-left { display: grid; align-content: center; justify-items: center; gap: 1.2em }
.tf-anvil { position: relative; padding: 2.2em 2.6em; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,140,40,.18), transparent 70%) }
.ttf { display: flex; gap: .7em; align-items: flex-start; font-size: 1.22em }
.ttf-tt { font-family: var(--font-ui, 'Alegreya Sans', sans-serif) } .ttf-tt .ttn { font-family: var(--font-display) }
.ttf-icon { width: 3.1em; height: 3.1em; flex: none; border: 2px solid #555; border-radius: 6px; background: #111; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 1px #000 }
.ttf-icon span { font: 2em var(--font-display); color: #444 } .ttf-icon.on { border-color: #999; animation: ttpop .5s both } .ttf-icon img { width: 100%; height: 100% }
.ttf-tt { max-width: 18em; min-width: 15em; border-color: var(--qc); box-shadow: 0 0 0 1px #000, 0 0 22px color-mix(in srgb, var(--qc) 45%, transparent), 0 6px 18px rgba(0,0,0,.7) }
.ttf-tt .ttn { font-size: 1.12em; margin-bottom: .1em }
.tt2 { display: flex; justify-content: space-between; gap: 1em }
.ttf-sec { animation: ttpop .5s both }
.ttf-hidden { color: #666; font-style: italic; display: flex; align-items: center; gap: .4em; margin: .2em 0 } .ttf-hidden .wi { width: 1em; height: 1em; opacity: .5 }
.ttf-sell { color: #fff; margin-top: .2em } .ttf-from { margin-top: .4em; padding-top: .35em; border-top: 1px solid #333; color: #7fb2ff; display: flex; align-items: center; gap: .35em } .ttf-from .wi { width: 1.1em; height: 1.1em }
@keyframes ttpop { from { opacity: 0; transform: translateY(-.3em); filter: brightness(2.5) } to { opacity: 1; transform: none; filter: none } }
.tf-steps { display: flex; gap: .4em; flex-wrap: wrap; justify-content: center }
.tf-steps span { display: grid; justify-items: center; padding: .35em .7em; min-width: 7.5em; border: 1px solid var(--line-2); background: rgba(0,0,0,.5); border-radius: 4px; color: var(--mute); font-size: .85em }
.tf-steps b { font: 1.2em var(--font-display) } .tf-steps small { opacity: .8 } .tf-steps .on { color: var(--wow-yellow); border-color: var(--wow-yellow) } .tf-steps .done { color: var(--text) }
.tf-right { align-self: center }
@media (max-width: 900px) { .tf-screen { grid-template-columns: 1fr } .ttf { font-size: 1.1em } }

/* ===================== Baron Klimpergelds Glücksbude ===================== */
.gb-screen { position: relative; display: grid; grid-template-columns: minmax(0, 20em) minmax(0, 1fr); gap: 1.4em; padding: 1em 1.6em 1.4em; height: 100%; min-height: 0; align-items: center }
.gb-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 60%, rgba(255,190,40,.18), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(60,200,80,.12), transparent 60%) }
.gb-baron { display: grid; justify-items: center; gap: .8em; animation: fadeup .6s both }
.gb-pic { width: 13em; height: 13em; border-radius: 50%; border: 3px solid var(--metal-light); box-shadow: 0 0 0 3px #000, 0 0 40px rgba(255,200,40,.35); background: radial-gradient(#3b5a1f, #13200a); display: grid; place-items: center; overflow: hidden; position: relative }
.gb-pic img:not(.wi) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1 } .gb-pic .wi { width: 6em; height: 6em; border-radius: 12px }
.gb-bub { background: linear-gradient(var(--parch-1), var(--parch-2)); color: var(--ink); border-radius: 10px; padding: .8em 1em; box-shadow: 0 0 0 2px #6b4f22, 0 8px 22px rgba(0,0,0,.6); max-width: 22em }
.gb-bub .comp-name { color: #1d6b1d } .gb-bub .comp-name span { color: #5a4020 } .gb-say { font-style: italic; font-size: 1.05em; line-height: 1.4 }
.gb-main { align-self: stretch; overflow: auto }
.gb-games { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; margin: .6em 0 1em }
.gb-card { display: grid; justify-items: center; gap: .3em; padding: 1em .6em; text-align: center; background: rgba(0,0,0,.45); border: 1px solid var(--line-2); border-radius: 6px; animation: fadeup .5s calc(var(--k) * .15s) both }
.gb-card b { font-family: var(--font-display); color: var(--wow-yellow) } .gb-card small { color: var(--mute) }
.gb-q { font: 1.6em var(--font-display); margin: .3em 0 }
.gb-pot { margin: .8em 0; font-size: 1.3em } .gb-pot small { color: var(--mute); font-size: .7em } .gb-pot.jack { color: var(--wow-yellow); text-shadow: 0 0 18px rgba(255,209,0,.7); animation: pulse 1s infinite alternate }
@keyframes pulse { to { transform: scale(1.04) } }
.gb-stakes { display: grid; grid-template-columns: 1fr 1fr; gap: .4em }
.gb-axis { position: relative; height: 12em; margin: 2em 3em .5em }
.gb-line { position: absolute; left: 0; right: 0; top: 35%; height: 3px; background: linear-gradient(90deg, #3a2a10, var(--metal-light), #3a2a10) }
.gb-ans { position: absolute; top: calc(35% - 3.9em); transform: translateX(-50%); display: grid; justify-items: center; color: var(--ok); font-family: var(--font-display); animation: fadeup .6s 1.2s both }
.gb-ans b { font-size: 1.4em } .gb-ans::after { content: ''; width: 3px; height: 2.2em; background: var(--ok); box-shadow: 0 0 10px var(--ok) }
.gb-mark { position: absolute; top: 35%; transform: translateX(-50%); display: grid; justify-items: center; animation: fadeup .5s calc(var(--k) * .25s) both }
.gb-mark i { width: 1em; height: 1em; margin-top: -.5em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #000 }
.gb-mark span { margin-top: calc(.3em + var(--lvl, 0) * 2.5em); font-size: .8em; text-align: center; white-space: nowrap } .gb-mark.over { opacity: .55 } .gb-mark.over i { background: var(--bad) }
.gb-mark.win i { box-shadow: 0 0 0 2px #000, 0 0 14px 4px var(--wow-yellow) } .gb-mark.win span { color: var(--wow-yellow) }
.gb-crate { display: flex; gap: 2em; align-items: center; justify-content: center; margin: 1em 0 }
.gb-box .wi { width: 7em; height: 7em; border-radius: 10px; box-shadow: 0 0 0 2px #000, 0 0 30px rgba(255,200,40,.4) }
.gb-crate:not(.open) .gb-box { animation: wobble 1.2s ease-in-out infinite }
@keyframes wobble { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-4deg) } 75% { transform: rotate(4deg) } }
.gb-prize { display: grid; justify-items: center; gap: .3em; text-align: center; max-width: 18em; animation: voin .8s .3s both } .gb-prize .wi { width: 5em; height: 5em; border-radius: 8px } .gb-prize b { font: 1.3em var(--font-display); color: var(--wow-yellow) } .gb-prize small { color: var(--mute) }
.gb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: .8em; margin: .6em 0 }
.gb-slot { padding: .6em; background: rgba(0,0,0,.45); border: 1px solid var(--line-2); border-radius: 6px } .gb-slot.fin { opacity: .6 }
.gb-who { display: flex; justify-content: space-between; align-items: baseline; gap: .5em } .gb-who small { color: var(--mute) }
.gb-reels { display: flex; gap: .4em; justify-content: center; margin: .5em 0 } .gb-reels .wi { width: 3.2em; height: 3.2em; border-radius: 6px; box-shadow: 0 0 0 2px #000 }
.gb-reels.small .wi { width: 2.6em; height: 2.6em }
.gb-reel.spin { animation: reel .9s calc(var(--k) * .35s) cubic-bezier(.2,.9,.3,1.2) both }
@keyframes reel { 0% { transform: translateY(-120%); filter: blur(4px); opacity: 0 } 60% { filter: blur(2px) } 100% { transform: none; filter: none; opacity: 1 } }
.gb-lbl { text-align: center; font-family: var(--font-display); color: var(--mute) } .gb-lbl.win { color: var(--wow-yellow) } .gb-lbl.lose { color: var(--bad) }
.gb-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin: .6em 0 1em }
.gb-ware { display: grid; justify-items: center; gap: .3em; text-align: center; padding: .8em; background: rgba(0,0,0,.45); border: 1px solid var(--line-2); border-radius: 6px } .gb-ware .wi { width: 3.4em; height: 3.4em; border-radius: 6px } .gb-ware b { font-family: var(--font-display); color: var(--wow-yellow) } .gb-ware small { color: var(--mute) }
@media (max-width: 900px) { .gb-screen { grid-template-columns: 1fr } .gb-games { grid-template-columns: 1fr 1fr } }

/* ===================== Bosskampf 2.0 ===================== */
.rtile2 { position: relative; display: grid; gap: .15em; padding: .3em .45em .35em; border: 1px solid #000; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #0c0907), #0c0907 80%); box-shadow: inset 0 0 0 1px #2c2218; margin-bottom: .3em }
.rtile2.dead { filter: grayscale(1) brightness(.6) } .rtile2.tgt { box-shadow: inset 0 0 0 2px #ff3b2a, 0 0 14px rgba(255,60,40,.6); animation: warn 1.4s ease-in-out infinite }
.rt-top { display: flex; justify-content: space-between; align-items: center; gap: .3em } .rt-top .rn { font-family: var(--font-display); font-size: .9em; color: var(--c); text-shadow: 0 1px 1px #000 }
.rt-ic { display: inline-flex; gap: 2px; align-items: center } .rt-ic .wi { width: 1.1em; height: 1.1em; border-radius: 2px } .cp { color: #ffd100; font-size: .7em; letter-spacing: -.1em }
.rt-hp { position: relative; height: 1.05em; background: #0a1a0a; border: 1px solid #000; overflow: hidden }
.rt-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#5fe35f, #1e9a1e 60%, #0f5a0f); transition: width .8s cubic-bezier(.2,.8,.2,1) }
.rt-hp span { position: relative; display: block; text-align: center; font-size: .72em; line-height: 1.45em; color: #fff; text-shadow: 0 1px 1px #000 }
.rtile2 .rs { font-size: .72em; font-family: var(--font-display) } .rtile2 .rs b { font-weight: 400 } .rtile2 .ok { color: #9dff9d } .rtile2 .no { color: #ff9c8c } .rtile2 .rd { color: #ffe9a8 } .rtile2 .wt { color: #bbb }
.bf-cast { display: flex; align-items: center; gap: .7em; margin-bottom: .7em; padding: .5em .7em; background: rgba(60,10,5,.55); border: 1px solid #6a2a18; border-radius: 4px; animation: fadeup .4s both }
.bf-cast-ic .wi { width: 2.6em; height: 2.6em; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255,90,30,.5) }
.bf-cast > div { flex: 1 } .bf-cast b { font-family: var(--font-display); font-weight: 400; color: #ffcf7a } .bf-cast .tg { margin-left: .3em }
.castbar { position: relative; height: .7em; margin-top: .3em; background: #1a0d05; border: 1px solid #000; overflow: hidden }
.castbar i { position: absolute; inset: 0; background: linear-gradient(#ffd96b, #e0a21a); transform-origin: left; animation: cast 2.2s cubic-bezier(.3,.1,.3,1) forwards }
@keyframes cast { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.bf-log { margin-top: .6em; padding-top: .4em; border-top: 1px solid var(--line); font-size: .85em; color: #ffb38a; display: grid; gap: .1em }
.bf-log div { animation: fadeup .4s both } .bf-log div::before { content: '» '; color: var(--mute) }
.bf-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: .5em; width: 100% }
.bf-awards > div { display: grid; justify-items: center; gap: .2em; padding: .5em; background: rgba(0,0,0,.4); border: 1px solid var(--line-2); border-radius: 4px } .bf-awards b { font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow) } .bf-awards small { color: var(--mute) }
.sk-bar, .sk-pick { display: grid; gap: .4em; margin-top: .8em }
.skb { display: flex; gap: .6em; align-items: center; width: 100%; text-align: left; padding: .45em .6em; background: linear-gradient(#2a2117, #17120c); border: 1px solid var(--line-2); border-radius: 5px; color: var(--text); font: inherit; cursor: pointer }
.skb:disabled { opacity: .45; cursor: default } .skb.used { opacity: .3 } .skb .wi, .skb img.sk { width: 2.4em; height: 2.4em; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px #000 }
.skb b { display: block; font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow) } .skb small { display: block; font-size: .78em; color: var(--mute); line-height: 1.25 }
.skb:not(:disabled):active { transform: scale(.98) }
.me-hp { display: grid; gap: .3em; margin-bottom: .6em } .me-hp .rt-hp { height: 1.4em } .me-hp .rt-hp span { font-size: .85em; line-height: 1.65em } .me-hp.dead .rt-hp { filter: grayscale(1) }
.me-hp .chip { justify-self: start }
.cls-sk { display: grid; gap: .2em; margin-top: .35em; font-size: .78em; color: var(--mute); text-align: left } .cls-sk span { display: flex; gap: .35em; align-items: flex-start; line-height: 1.25 } .cls-sk img { width: 1.3em; height: 1.3em; border-radius: 2px; flex: none } .cls-sk b { color: var(--wow-yellow); font-weight: 400; white-space: nowrap }
.bl-line.emote { color: #ff8040 }
.rested { color: #6fb4ff; font-size: .9em; white-space: nowrap } .bounty { color: #ff8a6a; font-size: .9em; white-space: nowrap } .bounty .wi { width: 1em; height: 1em; vertical-align: -.15em }

/* ---------- Erfahrung, Stufen, Talente (progress.js) ---------- */
.lvbadge { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .25em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a3818, #140e06); box-shadow: 0 0 0 1px #000, 0 0 0 2px #b08d3c; color: var(--wow-yellow); font-family: var(--font-display); font-size: .85em; font-variant-numeric: tabular-nums }
.xpbar { position: relative; height: 12px; background: #0b0906; border: 1px solid #000; box-shadow: 0 0 0 1px #3b2e1d; border-radius: 2px; overflow: hidden }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#b05ce0, #6a1d9a); box-shadow: inset 0 1px 0 rgba(255,255,255,.25) }
.xpbar span { position: relative; display: block; text-align: center; font: 10px/12px var(--font-ui); color: #f3e8ff; text-shadow: 0 1px 1px #000 }
.lb .xpbar { grid-column: 2 / 4; margin-top: -.15em }
.lb .cur { color: var(--mute) } .lb .cur .money { font-size: 1em }
.xpbar.me { margin: 6px 0 2px; height: 16px } .xpbar.me span { font-size: 11px; line-height: 16px }
.st .lvbadge { margin-right: .3em }
.toast .ep { color: #d9a6ff } .toast .ding-t { color: var(--wow-yellow); font-size: 1.15em; margin-right: .3em }
.qcol { font-family: var(--font-ui) }
.choice.tiers { grid-template-columns: 1fr }
.choice.tiers .wfcard { display: grid; grid-template-columns: auto 1fr; column-gap: .8em; text-align: left; align-items: center }
.choice.tiers .wfcard .rankbadge { grid-row: span 2 } .choice.tiers .wfcard .rankbadge .wi { width: 2.4em; height: 2.4em }
.cls-sk .sklv { font-style: normal; color: var(--wow-yellow); font-size: .85em }
.skb.locked { opacity: .35; filter: grayscale(1) }
.talent { display: grid; gap: 6px; padding: 10px; margin-bottom: 10px; border: 1px solid #b08d3c; border-radius: 6px; background: radial-gradient(ellipse at top, rgba(176,141,60,.25), transparent 70%), #120d07; box-shadow: 0 0 18px rgba(255,209,0,.18); animation: talentpulse 2.4s ease-in-out infinite }
@keyframes talentpulse { 50% { box-shadow: 0 0 28px rgba(255,209,0,.35) } }
.chest { display: flex; gap: .8em; align-items: center; padding: .6em .8em; margin: .6em 0; border: 1px solid var(--line-2); border-radius: 6px; background: linear-gradient(#2a2117, #17120c) }
.chest b { display: block; font-family: var(--font-display); font-weight: 400; color: var(--wow-yellow) }
/* Ding! – Stufenaufstieg auf dem Spielbildschirm */
.dings { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); display: grid; gap: 10px; z-index: 20; pointer-events: none; width: min(92vw, 760px) }
.dingban { position: relative; text-align: center; padding: 14px 20px 16px; background: radial-gradient(ellipse at center, rgba(255,209,0,.3), transparent 70%), rgba(8,6,3,.94); box-shadow: 0 10px 40px rgba(0,0,0,.8); border-top: 2px solid #ffd100; border-bottom: 2px solid #ffd100; animation: dingin 7s ease both }
.dingban::before { content: ''; position: absolute; left: 50%; top: -60vh; width: 140px; height: 60vh; transform: translateX(-50%); background: linear-gradient(transparent, rgba(255,230,120,.55)); filter: blur(8px); animation: dingbeam 1.4s ease-out both }
.dingban .dl { font: 400 clamp(38px, 6vw, 64px)/1 var(--font-display); color: var(--wow-yellow); text-shadow: 0 0 18px rgba(255,209,0,.7), 0 3px 0 #000 }
.dingban .dn { font: 400 clamp(18px, 2.3vw, 26px) var(--font-display); color: var(--text) } .dingban .dn b { color: var(--wow-yellow); font-weight: 400 }
.dingban .du { font: 15px var(--font-ui); color: #d9a6ff; margin-top: 4px }
.dingban.big .dl { font-size: clamp(48px, 8vw, 84px) }
@keyframes dingin { 0% { opacity: 0; transform: scale(.7) } 8% { opacity: 1; transform: scale(1.06) } 14% { transform: scale(1) } 85% { opacity: 1 } 100% { opacity: 0 } }
@keyframes dingbeam { from { opacity: 0; height: 0 } 30% { opacity: 1 } to { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .dingban, .dingban::before, .talent { animation: none } }
.phead .xpbar.me { grid-column: 1 / -1; margin: 2px 0 0 }