/* Gold-auf-Dunkel-Stil, Grafiken aus /ui (gleiche wie in Unreal) */
:root {
  --gold: #ffd16b;
  --gold-dunkel: #b8862f;
  --text: #f3f3f6;
  --grau: #b3b3bd;
  --schatten: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0a0e; color: var(--text);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif; user-select: none; }
#welt { position: fixed; inset: 0; }
#welt canvas { display: block; }
[hidden] { display: none !important; }

.vollbild { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; }
.dunkel { background: rgba(4, 4, 10, .66); }
.rot { background: rgba(30, 0, 0, .7); }
#laden { background: #0b0a0e; z-index: 50; }
.lade-text { color: var(--gold); font-size: 28px; letter-spacing: 4px; text-shadow: var(--schatten); }

/* Paneele: 9-Slice über border-image */
.karte, #spielerfenster .fenster, .karten-reihe .wahl {
  border: 22px solid transparent;
  border-image: url(ui/paneel.png) 26 fill / 22px stretch;
}

/* Startbildschirm */
#lobby { background: radial-gradient(ellipse at center, #2a1f1a 0%, #0b0a0e 70%); }
.lobby-karte { width: min(520px, 92vw); padding: 10px 18px 6px; display: flex; flex-direction: column; gap: 14px; }
h1 { margin: 0; text-align: center; font-size: 56px; letter-spacing: 10px; color: var(--gold);
  text-shadow: 0 3px 0 #5a3a10, 0 0 24px rgba(255, 180, 60, .45); }
.unterzeile { margin: -6px 0 6px; text-align: center; color: var(--grau); }
label { display: flex; flex-direction: column; gap: 6px; color: var(--grau); font-size: 14px; }
input { background: #0d0b10; border: 2px solid var(--gold-dunkel); color: var(--text); padding: 10px 12px;
  font-size: 18px; border-radius: 6px; outline: none; }
input:focus { border-color: var(--gold); }
.beitreten { display: flex; gap: 10px; }
.beitreten input { flex: 1; text-transform: uppercase; letter-spacing: 4px; }
.knopf { cursor: var(--zeiger-klick); border: 2px solid var(--gold-dunkel); background: linear-gradient(#2c2633, #141118);
  color: var(--text); padding: 12px 18px; font-size: 17px; border-radius: 8px; font-weight: 600; }
.knopf:hover { border-color: var(--gold); }
.knopf.gold { background: linear-gradient(#ffe39a, #c98a22); color: #2a1702; border-color: #ffefc2; font-size: 20px; }
.knopf.mini { padding: 3px 10px; font-size: 13px; margin-left: 8px; }
.einladung { text-align: center; color: var(--gold); }
.fehler { color: #ff7a70; min-height: 1em; margin: 0; text-align: center; }
.steuerung { color: var(--grau); font-size: 14px; }
.steuerung summary { cursor: var(--zeiger-klick); color: var(--gold); }
.steuerung table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.steuerung td { padding: 3px 6px; border-bottom: 1px solid #2a2530; }

/* HUD oben */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button { pointer-events: auto; }
.oben { position: absolute; left: 14px; right: 30px; top: 6px; height: 112px; }
.balken { position: absolute; height: 30px; background: url(ui/balken_grund.png) center / 100% 100%;
  border: 10px solid transparent; border-image: url(ui/balken_rahmen.png) 12 fill / 10px stretch; }
.balken .fuellung { position: absolute; inset: -6px auto -6px -6px; width: 0%; background-size: 100% 100%;
  transition: width .2s; box-shadow: 3px 0 6px rgba(255, 255, 255, .5); }
.balken span { position: absolute; inset: -10px 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; text-shadow: var(--schatten); }
.xp { left: 86px; right: 0; top: 16px; }
.xp .fuellung { background-image: url(ui/balken_xp.png); }
.leben .fuellung { background-image: url(ui/balken_leben.png); }
.mana .fuellung { background-image: url(ui/balken_mana.png); }

.abzeichen { position: absolute; left: 0; top: 0; width: 108px; height: 108px; background: url(ui/abzeichen.png) center / contain no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.abzeichen span { font-size: 12px; color: var(--gold); font-weight: 700; text-shadow: var(--schatten); }
.abzeichen b { font-size: 36px; line-height: 1; text-shadow: var(--schatten); }
.abzeichen.gross { position: static; width: 150px; height: 150px; }
.abzeichen.gross b { font-size: 60px; }

.zeitblock { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); text-align: center; }
#zeit { font-size: 46px; font-weight: 800; text-shadow: var(--schatten); letter-spacing: 2px; }
#kapitel { color: var(--gold); font-size: 18px; text-shadow: var(--schatten); }
.rechts-oben { position: absolute; right: 74px; top: 58px; text-align: right; }
#kills { font-size: 26px; font-weight: 800; text-shadow: var(--schatten); }
.klein { font-size: 14px; color: var(--grau); text-shadow: var(--schatten); }
.raum-info { margin-top: 8px; font-size: 15px; text-shadow: var(--schatten); }
.raum-info b { color: var(--gold); letter-spacing: 3px; }

/* Spielerfenster unten links */
#spielerfenster { position: absolute; left: 60px; bottom: 26px; display: flex; gap: 70px; }
.fenster { position: relative; width: 470px; height: 170px; padding-left: 118px; }
.portraet { position: absolute; left: -76px; top: -36px; width: 178px; height: 178px; }
.portraet img { position: absolute; inset: 11px; width: 156px; height: 156px; border-radius: 50%; }
.portraet .ring { position: absolute; inset: 0; background: url(ui/portraet_ring.png) center / contain no-repeat; }
.portraet .farbe { position: absolute; left: 67px; bottom: 4px; width: 44px; height: 8px; border-radius: 3px; }
.fenster.am-boden img { filter: grayscale(1) brightness(.5) sepia(.6) hue-rotate(-30deg); }
.fenster .kopf { display: flex; justify-content: space-between; align-items: baseline; margin-top: -8px; }
.fenster .klasse { color: var(--gold); font-size: 24px; font-weight: 800; letter-spacing: 2px; text-shadow: var(--schatten); }
.fenster .wer { color: var(--grau); font-size: 14px; text-shadow: var(--schatten); }
.fenster .balken { position: relative; margin-top: 8px; }
.fenster .leben { height: 30px; }
.fenster .mana { height: 22px; }
.fenster .ausdauer { height: 14px; margin-top: 6px; }
.ausdauer .fuellung { background: linear-gradient(#b6ff8a, #4fc23a); border-radius: 3px; inset: -3px auto -3px -3px; opacity: .75; }
.ausdauer.bereit .fuellung { opacity: 1; box-shadow: 0 0 8px rgba(140, 255, 120, .6); }
.ausdauer .striche { position: absolute; inset: -3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--ladungen, 1) - 2px), rgba(0, 0, 0, .7) calc(100% / var(--ladungen, 1) - 2px) calc(100% / var(--ladungen, 1))); }
.ausdauer span { font-size: 11px !important; letter-spacing: 1px; }
.fenster .hinweis { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .6); text-shadow: var(--schatten); }
.fenster .boden-text { margin-top: 6px; font-size: 14px; color: #ff8070; font-weight: 700; text-shadow: var(--schatten); }

/* Gruppenanzeige oben links unter Stufe und EP-Balken */
.mitspieler { position: absolute; left: 18px; top: 122px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: auto; max-width: 300px; }
.mitspieler .eintrag { display: grid; grid-template-columns: 28px auto auto auto 1fr; align-items: center; column-gap: 6px; row-gap: 2px; font-size: 13px; text-shadow: var(--schatten);
  padding: 4px 8px; background: linear-gradient(90deg, rgba(10, 8, 12, .72), rgba(10, 8, 12, .25)); border-left: 2px solid rgba(227, 160, 46, .45); border-radius: 0 4px 4px 0; transition: border-color .15s, box-shadow .15s; }
.mitspieler .eintrag .gp-bild { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #111;
  box-shadow: 0 0 0 2px var(--f, #e3a02e), 0 0 0 3px #000, 0 2px 6px rgba(0, 0, 0, .6); }
.mitspieler .eintrag.spricht .gp-bild { box-shadow: 0 0 0 2px #6aff8a, 0 0 0 3px #000, 0 0 10px rgba(58, 255, 106, .6); }
.mitspieler .eintrag .name { font-weight: 700; color: #f2e6cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.mitspieler .eintrag small { color: #a89e8c; white-space: nowrap; }
.mitspieler .eintrag small.boden { color: #ff8a6a; font-weight: 700; }
.mitspieler .eintrag .mini-balken { grid-column: 2 / -1; }
.mitspieler .mini-balken { width: 100%; min-width: 150px; height: 6px; background: #200; border: 1px solid #000; }
.mitspieler.viele .eintrag { padding: 2px 6px; }
.mitspieler.viele .eintrag small:not(.boden) { display: none; }
.mitspieler.viele .eintrag .mini-balken { grid-column: auto; min-width: 60px; width: 60px; }
.mitspieler.viele .eintrag .gp-bild { grid-row: auto; width: 22px; height: 22px; }
.mitspieler .vc-ich { display: flex; gap: 6px; font-size: 12px; color: #c9bfa8; border-left-color: rgba(120, 200, 140, .5); }
.mitspieler .vc-ich.vc-aus, .mitspieler .vc-ich.vc-fehler { color: #e08a6a; border-left-color: rgba(224, 110, 80, .6); }
.mitspieler .mini-balken div { height: 100%; background: linear-gradient(#ff6a5a, #a81020); }

/* Schadenszahlen */
#zahlen { position: absolute; inset: 0; }
.zahl { position: absolute; font-weight: 900; font-size: 20px; color: #fff4c0; text-shadow: var(--schatten);
  animation: hoch .7s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes hoch { to { transform: translate(-50%, -160%) scale(1.15); opacity: 0; } }

/* Aufstieg */
#aufstieg h2 { margin: 6px 0 24px; font-size: 52px; color: var(--gold); letter-spacing: 6px; text-shadow: var(--schatten); }
.karten-reihe { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.spalte { display: flex; flex-direction: column; gap: 14px; width: 420px; }
.spalte .wer { font-size: 18px; font-weight: 700; text-shadow: var(--schatten); }
.wahl { cursor: var(--zeiger-klick); min-height: 96px; padding: 0 6px; transition: transform .1s, filter .1s; pointer-events: auto; }
.wahl:hover { transform: scale(1.03); filter: brightness(1.25); }
.wahl .taste { color: var(--gold); font-size: 14px; font-weight: 700; }
.wahl .text { font-size: 24px; font-weight: 700; text-shadow: var(--schatten); }
.gewaehlt { color: #8dff8d; font-size: 20px; text-shadow: var(--schatten); }
.status { margin-top: 26px; font-size: 22px; color: var(--grau); text-shadow: var(--schatten); }
.status.countdown { font-size: 44px; color: var(--gold); font-weight: 800; }

/* Klassenwahl */
.lobby-karte { width: min(860px, 96vw); }
.klassen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.klasse-wahl { cursor: var(--zeiger-klick); text-align: center; padding: 10px 6px 12px; border-radius: 10px; border: 2px solid #3a3040;
  background: linear-gradient(#211b26, #120f15); transition: transform .1s, border-color .1s; }
.klasse-wahl:hover { transform: translateY(-2px); border-color: var(--gold-dunkel); }
.klasse-wahl.aktiv { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 200, 90, .35); }
.klasse-wahl img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--gold-dunkel); object-fit: cover; background: #2a2026; }
.klasse-wahl b { display: block; color: var(--gold); margin-top: 6px; font-size: 17px; }
.klasse-wahl small { display: block; color: var(--grau); font-size: 12px; margin-top: 4px; min-height: 44px; }
.klasse-wahl .icons { display: flex; justify-content: center; gap: 3px; margin-top: 6px; }
.klasse-wahl .icons img { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--gold-dunkel); }

/* Wellen, Boss, Ansagen */
.welle { font-size: 17px; font-weight: 800; color: #ffe8b0; letter-spacing: 3px; text-shadow: var(--schatten); }
.welle small { font-size: 13px; color: #ff9a8a; letter-spacing: 1px; }
.bossleiste { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); width: min(720px, 70vw); text-align: center; }
.bossname { font-size: 22px; font-weight: 900; color: #ff6a5a; letter-spacing: 4px; text-shadow: var(--schatten); margin-bottom: 4px; }
.balken.boss { position: relative; height: 30px; }
.boss .fuellung { background-image: url(ui/balken_leben.png); filter: hue-rotate(-10deg) saturate(1.4); }
.ansage { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-size: 54px; font-weight: 900;
  color: var(--gold); letter-spacing: 6px; text-shadow: 0 3px 0 #000, 0 0 30px rgba(255, 160, 40, .6); opacity: 0;
  text-align: center; white-space: nowrap; }
.ansage.zeigen { animation: ansage 2.6s ease-out forwards; }
.ansage small { display: block; font-size: 22px; letter-spacing: 2px; color: var(--text); }
@keyframes ansage { 0% { opacity: 0; transform: translate(-50%, -40%) scale(1.3); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
.truhen-info { margin-top: 10px; padding: 8px 12px; border: 2px solid var(--gold-dunkel); border-radius: 8px;
  background: rgba(20, 14, 6, .75); font-size: 15px; text-align: left; display: flex; gap: 10px; align-items: center; }
.truhen-info img { width: 40px; height: 40px; border-radius: 6px; }
.truhen-pfeil { position: absolute; width: 54px; height: 54px; background: url(icons/truhe.png) center / cover; border-radius: 50%;
  border: 3px solid var(--gold); box-shadow: 0 0 16px rgba(255, 200, 80, .7); transform: translate(-50%, -50%); }

/* Fähigkeitenleiste im Spielerfenster */
.faehigkeiten { position: absolute; left: 118px; top: -64px; display: flex; gap: 8px; }
.faehigkeit { position: relative; width: 52px; height: 52px; border-radius: 8px; border: 2px solid var(--gold-dunkel);
  background: #111 center / cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.faehigkeit .abklingen { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .68); }
.faehigkeit .taste { position: absolute; left: 3px; top: 1px; font-size: 12px; font-weight: 900; text-shadow: var(--schatten); }
.faehigkeit .kosten { position: absolute; right: 3px; bottom: 1px; font-size: 11px; color: #9ac8ff; font-weight: 800; text-shadow: var(--schatten); }
.faehigkeit.kein-mana { filter: saturate(.2) brightness(.6); border-color: #3355aa; }

/* Belohnungskarten mit Icon */
.wahl { display: flex; align-items: center; gap: 14px; }
.wahl img { width: 64px; height: 64px; border-radius: 10px; border: 2px solid var(--gold-dunkel); flex: none; }
.wahl.truhe { border-image-source: url(ui/paneel.png); filter: drop-shadow(0 0 10px rgba(255, 200, 60, .5)); }
.aufstieg-bild { width: 150px; height: 150px; border-radius: 22px; border: 4px solid var(--gold); box-shadow: 0 0 40px rgba(255, 190, 60, .6); }
.aufstieg-unter { margin: -12px 0 20px; color: var(--grau); font-size: 18px; }

/* Spielende */
.gross-rot { font-size: 64px; color: #ff4d40; letter-spacing: 4px; text-shadow: var(--schatten); margin: 0 0 20px; }
#ende-werte { font-size: 22px; padding: 4px 20px; margin-bottom: 26px; }
#knopf-ende-menue { margin-top: 12px; }
#pause { z-index: 30; }
.pause-fenster { display: flex; flex-direction: column; gap: 12px; min-width: 320px; padding: 26px 34px 20px;
  text-align: center; border: 2px solid var(--gold-dunkel); border-radius: 12px;
  background: linear-gradient(#221d29, #110e15); box-shadow: 0 0 40px rgba(0, 0, 0, .7); }
.pause-fenster h2 { margin: 0 0 4px; font-size: 42px; letter-spacing: 8px; color: var(--gold); text-shadow: var(--schatten); }
.pause-fenster .knopf { font-size: 18px; padding: 10px 18px; }
#knopf-beenden.scharf { border-color: #ff5a4a; color: #ffb0a8; }
.pause-titel { margin-top: 6px; font-size: 14px; color: var(--gold); }
.pause-titel small { color: #9a93a6; font-size: 12px; }
.pause-klassen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pause-klasse { cursor: var(--zeiger-klick); padding: 6px 4px; border: 2px solid #3a3242; border-radius: 8px; background: #17131c;
  color: #eee; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pause-klasse:hover { border-color: var(--gold); }
.pause-klasse.aktiv { border-color: var(--gold); background: #2a2131; }
.pause-klasse img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------------------- Hauptmenü, Lobby-Browser, Raum-Lobby */
.menue-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menue-kopf h1 { text-align: left; font-size: 48px; }
.menue-kopf h2 { margin: 0; color: var(--gold); letter-spacing: 6px; font-size: 30px; text-shadow: var(--schatten); }
.menue-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menue-knoepfe .knopf small { opacity: .7; font-size: 12px; margin-left: 4px; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.schalter { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; flex-wrap: wrap; }
.schalter small { color: #9a93a6; }
.schalter input { width: 18px; height: 18px; accent-color: var(--gold); }
.abschnitt { margin: 4px 0 0; color: var(--gold); font-size: 15px; letter-spacing: 2px; }
.hinweis-klein { margin: 0; color: #9a93a6; font-size: 13px; text-align: center; }
.tag { display: inline-block; padding: 2px 8px; border: 1px solid #5a4a2a; border-radius: 999px; font-size: 12px; color: #d9c79a; }
.tag.ok { border-color: #3f8a4a; color: #9fe0a6; }
.einladung .knopf { margin-left: 8px; }

/* Coins */
.muenz-anzeige { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 22px; font-weight: 800; text-shadow: var(--schatten); }
.muenz-anzeige.klein-hud { font-size: 18px; justify-content: flex-end; margin-top: 2px; }
.muenze { display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, #ffd34d 19% 55%, #b8801c 56% 100%);
  box-shadow: inset 0 0 0 2px #8a5a10, 0 0 8px rgba(255, 200, 60, .6); }
.zahl.muenze { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: #ffd34d; font-size: 22px; }

/* Lobby-Browser */
.lobby-liste { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; }
.lobby-liste .leer { margin: 0; color: #9a93a6; text-align: center; }
.lobby-eintrag { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid #3a3242; border-radius: 8px; background: #17131c; cursor: var(--zeiger-klick); }
.lobby-eintrag:hover { border-color: var(--gold); }
.lobby-eintrag small { display: block; color: #9a93a6; font-size: 12px; }
.lobby-eintrag .anzahl { color: var(--gold); font-weight: 700; }
.erstellen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.erstellen input:not([type]) { flex: 1; min-width: 160px; }

/* Raum-Lobby */
.rl-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); }
.rl-code b { color: var(--gold); letter-spacing: 4px; font-size: 20px; }
.rl-spieler { display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow-y: auto; }
.rl-eintrag { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #3a3242; border-radius: 8px; background: #17131c; }
.rl-eintrag img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.rl-eintrag .farbe { width: 10px; height: 10px; border-radius: 50%; }
.rl-eintrag small { color: #9a93a6; margin-left: auto; }
.rl-eintrag .kick { margin-left: 6px; }

/* Streamermodus: Raum-Codes verpixelt (Text unsichtbar, Pixelmuster darüber) */
.streamer .code { color: transparent !important; text-shadow: none !important; user-select: none; border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 209, 107, .55) 25%, rgba(120, 90, 40, .55) 25% 50%, rgba(255, 209, 107, .35) 50% 75%, rgba(80, 60, 30, .6) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, .35) 50%, transparent 50%);
  background-size: 8px 8px, 8px 8px; }

/* Pfeile zu Mitspielern außerhalb des Bildes */
#spieler-pfeile { position: absolute; inset: 0; pointer-events: none; }
.spieler-pfeil { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.spieler-pfeil i { width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  border-left: 20px solid var(--farbe); filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.spieler-pfeil span { padding: 2px 8px; border-radius: 6px; background: rgba(10, 8, 14, .78); border: 2px solid var(--farbe);
  color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; text-align: center; }
.spieler-pfeil small { display: block; color: #cfc6dc; font-weight: 400; font-size: 11px; }
.spieler-pfeil.am-boden span { animation: blinken 0.8s infinite alternate; border-color: #ff5a4a; }
@keyframes blinken { from { opacity: 1; } to { opacity: .45; } }

/* Pausemenü: Reiter */
.reiter { display: flex; gap: 6px; border-bottom: 2px solid #3a3242; }
.reiter button { flex: 1; cursor: var(--zeiger-klick); padding: 8px; border: 0; border-radius: 8px 8px 0 0; background: #17131c; color: #b9b0c6; font-weight: 700; }
.reiter button.aktiv { background: #2a2131; color: var(--gold); }
.reiter-inhalt { display: flex; flex-direction: column; gap: 12px; }
.reiter-inhalt[hidden] { display: none; }
.upgrade-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 50vh; overflow-y: auto; }
.upgrade-liste .leer { grid-column: 1 / -1; color: #9a93a6; margin: 8px 0; }
.upgrade-eintrag { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #3a3242; border-radius: 8px; background: #17131c; text-align: left; }
.upgrade-eintrag img { width: 36px; height: 36px; }
.upgrade-eintrag b { margin-left: auto; color: var(--gold); }

/* Lobby: Einstellungen */
.rl-regeln { display: flex; flex-direction: column; gap: 8px; }
.rl-regeln select { background: #0d0b10; border: 2px solid var(--gold-dunkel); color: var(--text); padding: 6px 8px; border-radius: 6px; }
.rl-regeln select:disabled, .rl-regeln input:disabled { opacity: .6; }
.abschnitt small { color: #9a93a6; font-weight: 400; letter-spacing: 0; }

/* Belohnungswahl: Restzeit */
.wahl-timer { color: #ffb26b; font-weight: 700; margin-top: 6px; }
label.schalter { flex-direction: row; display: flex; text-align: left; justify-content: flex-start; }

/* Vollbild-Knopf */
.vollbild-knopf { position: fixed; right: 16px; top: 58px; z-index: 60; width: 44px; height: 44px; padding: 8px; cursor: var(--zeiger-klick);
  border: 2px solid var(--gold-dunkel); border-radius: 8px; background: rgba(20, 17, 24, .85); }
.vollbild-knopf:hover { border-color: var(--gold); }
.vollbild-knopf svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vollbild-knopf .aus, :fullscreen .vollbild-knopf .an { display: none; }
:fullscreen .vollbild-knopf .aus { display: block; }

/* ---------------------------------------------------------------- Eigener Mauszeiger (überall)
   Menüs: goldene Klinge · Klickbares: glühende Klinge · Spielfeld: Runen-Fadenkreuz zum Zielen */
:root {
  --zeiger: url(ui/zeiger.svg) 3 3, auto;
  --zeiger-klick: url(ui/zeiger_klick.svg) 3 3, pointer;
  --zeiger-ziel: url(ui/zeiger_ziel.svg) 16 16, crosshair;
}
html, body { cursor: var(--zeiger); }
a, button, select, summary, label, [role="button"], input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"] { cursor: var(--zeiger-klick); }
button:disabled { cursor: var(--zeiger); }
input:not([type]), input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], textarea, [contenteditable="true"] { cursor: text; }
body:not(.im-menue) #welt, body:not(.im-menue) #welt canvas { cursor: var(--zeiger-ziel); }