/* ============================================================ Geschmiedetes Licht
   Redesign nach dem Claude-Design-Entwurf "Lichtbruch Redesign" (Runde 2,
   2026-11-04): geschmiedete Eisenrahmen mit Goldkante, Nieten, Kugeln in
   Steinfassungen, durchgehende Aktionsleiste mit Schlussstein, Beute-Schilder.
   Liegt als eigene Schicht NACH style.css, damit die alte Fassung lesbar
   bleibt und jede Regel hier bewusst ueberschreibt. Farben weiter nur aus
   tokens.css; Cinzel fuer Ueberschriften, Chakra Petch fuer Zahlen.
   Goldkanten an schraegen Formen: zwei uebereinanderliegende clip-path-
   Ebenen (Gold unten, Platte 1,5 px kleiner oben) statt filter:drop-shadow -
   ein Filter auf der Leiste wuerde jedes Bild neu gerastert (Abklingkegel). */
:root {
  --gold-deep: color-mix(in oklch, var(--gold), var(--ink) 60%);
  --gold-mid: color-mix(in oklch, var(--gold), var(--ink) 30%);
  --gold-dim: color-mix(in oklch, var(--gold), var(--ink) 55%);
  --frame: 0 0 0 1px var(--ink), 0 0 0 2px rgba(var(--gold-rgb), .32), 0 0 0 5px var(--bg-soft), 0 0 0 6px var(--border), 0 0 0 7px var(--ink);
  --slot-ring: 0 0 0 1px var(--ink), 0 0 0 2px var(--border), 0 0 0 3px var(--gold-mid), 0 0 0 5px var(--ink), 0 0 0 6px var(--gold-deep);
  --panel-bg: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 30%, var(--ink) 100%);
  --plate-bg: linear-gradient(180deg, var(--border), var(--ink));
  --gold-gem: linear-gradient(135deg, var(--gold), var(--gold-deep));
  --text-lift: 0 1px 0 var(--ink), 0 1px 4px var(--ink);
}

/* Die NOVA-Hilfslinien (Eckklammern, Skalenstriche, Etikett) weichen dem Goldrahmen */
.hud-frame, .hud-corner, .hud-tag { display: none; }

/* ------------------------------------------------------------ Grundbausteine */
.glass { background: var(--panel-bg); box-shadow: var(--frame), 0 24px 50px rgba(0, 0, 0, .75), inset 0 0 50px rgba(0, 0, 0, .6); clip-path: none; border-radius: 0; backdrop-filter: none; }
.glass::before { display: none; }
/* Nieten an den oberen Ecken grosser Fenster */
#charpanel::before, #charpanel::after, #buildpanel::before, #buildpanel::after, #dlg::before, #dlg::after {
  content: ""; display: block; position: absolute; top: -12px; width: 12px; height: 12px; padding: 0; z-index: 4; transform: rotate(45deg);
  background: var(--gold-gem); box-shadow: 0 0 0 1px var(--ink), 0 0 10px rgba(var(--gold-rgb), .45); -webkit-mask: none; mask: none; animation: none; inset: -12px auto auto -12px; }
#charpanel::after, #buildpanel::after, #dlg::after { inset: -12px -12px auto auto; }
#charpanel, #buildpanel { overflow: visible; }
kbd { font: 700 9px var(--font-display); color: var(--fg); background: rgba(var(--ink-rgb), .85); padding: 0 4px; border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--border); }
.mini { font: 600 11px var(--font-title); letter-spacing: .08em; color: var(--fg); background: linear-gradient(180deg, var(--bg-soft), var(--ink)); border: 0; border-radius: 0; padding: 6px 12px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); }
.mini:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-mid); color: var(--gold); }
.mini.warn { color: var(--danger); background: linear-gradient(180deg, rgba(var(--danger-rgb), .14), var(--ink)); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px rgba(var(--danger-rgb), .55); }
/* Hauptknopf: Rubin mit Goldkante (Entwurf "Punkt setzen" / "Weiterspielen") */
.cta { clip-path: none; font: 700 14px var(--font-title); letter-spacing: .18em; color: var(--gold); text-shadow: 0 2px 0 var(--ink); padding: 11px 22px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--danger), var(--ink) 58%), color-mix(in oklch, var(--danger), var(--ink) 84%));
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold), 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-deep), inset 0 1px 0 rgba(var(--gold-rgb), .4), 0 0 26px rgba(var(--danger-rgb), .25); }
.cta:hover:not(:disabled) { filter: brightness(1.2); }

/* ------------------------------------------------------------ Quest-Verfolgung */
#quest { width: 340px; padding: 2px 10px 8px 26px; background: linear-gradient(90deg, rgba(var(--ink-rgb), .6), rgba(var(--ink-rgb), .25) 70%, transparent); border-radius: 0; text-shadow: var(--text-lift); }
#quest::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), .2) 70%, transparent); }
#quest::after { content: ""; position: absolute; left: 0; top: 2px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--ink); box-shadow: 0 0 0 3px var(--gold), 0 0 10px rgba(var(--gold-rgb), .5); }
#quest .qkick { display: block; margin-top: 2px; font: 600 10.5px var(--font-display); letter-spacing: .2em; color: var(--fg-dim); text-transform: uppercase; }
#quest h3 { margin: 3px 0 4px; font: 700 20px/1.15 var(--font-title); letter-spacing: .04em; text-transform: none; color: var(--gold); text-shadow: 0 1px 0 var(--ink), 0 0 14px rgba(var(--gold-rgb), .3); }
#quest h3::before { content: none; }
#quest h3.done { color: var(--accent-3); }
#quest .qrule { display: block; width: 130px; height: 1px; margin: 0 0 8px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .7), transparent); position: relative; }
#quest .qrule::after { content: ""; position: absolute; left: 128px; top: -3px; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid var(--gold); }
#quest p { font: 400 13px/1.5 var(--font-body); color: var(--accent-tint); opacity: 1; margin-bottom: 8px; }
#quest li { font: 400 13px var(--font-body); align-items: center; }
#quest li span { flex: 1; display: flex; align-items: center; gap: 9px; font: inherit; color: var(--fg); letter-spacing: 0; }
#quest li span::before { content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--gold); }
#quest li.ok span::before { background: var(--ok); border-color: var(--ok); }
#quest li b { font: 600 12px var(--font-display); color: var(--fg-dim); }
#quest h4 { margin: 12px 0 4px; font: 700 13px var(--font-title); letter-spacing: .06em; text-transform: none; color: var(--accent-3); }

/* ------------------------------------------------------------ Rohstoffe: Platte mit Schwalbenschwanz */
#res { top: calc(14px + env(safe-area-inset-top, 0px)); padding: 10px 54px 11px; gap: 2px; border-radius: 0; background: none; isolation: isolate; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .8)); }
#res::before, #res::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
#res::before { inset: 0; background: var(--gold-mid); }
#res::after { inset: 1.5px; background: linear-gradient(180deg, var(--border), var(--bg) 55%, var(--ink)); }
#res span { padding: 3px 12px; gap: 7px; border-radius: 0; }
#res b { font: 700 16px var(--font-display); }
#res em { font: 600 11px var(--font-title); letter-spacing: .08em; opacity: 1; text-transform: none; font-variant: small-caps; }
#res span:nth-child(1) { color: var(--gold); }

/* ------------------------------------------------------------ Minikarte im Kompassring */
#mapwrap { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); width: 210px; height: 236px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
#mapwrap .ring { position: absolute; left: 0; top: 0; width: 210px; height: 210px; border-radius: 50%; opacity: .75;
  background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 2deg, transparent 2deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 88%, #000 89%, #000 97%, transparent 98%); mask-image: radial-gradient(closest-side, transparent 88%, #000 89%, #000 97%, transparent 98%); }
#mapwrap .mapframe { position: absolute; left: 13px; top: 13px; width: 184px; height: 184px; padding: 12px; border-radius: 50%;
  background: conic-gradient(from 20deg, var(--border), var(--bg), var(--border), var(--bg), var(--border));
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold-mid), 0 0 0 4px var(--ink), 0 14px 30px rgba(0, 0, 0, .8); }
#minimap { width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px rgba(var(--gold-rgb), .45); }
#mapwrap .north { position: absolute; left: 105px; top: 1px; width: 22px; height: 22px; transform: translateX(-50%) rotate(45deg); background: var(--gold-gem); box-shadow: 0 0 0 1px var(--ink), 0 0 12px rgba(var(--gold-rgb), .5); display: grid; place-items: center; font: 800 10px var(--font-title); font-style: normal; color: var(--ink); }
#mapwrap .north::first-line { line-height: 1; }
#mapwrap .pin { position: absolute; top: 99px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 1px var(--ink); }
#mapwrap .pin.l { left: 3px; } #mapwrap .pin.r { right: 3px; }
#zone, #mapwrap b { bottom: 4px; padding: 7px 30px 8px; border: 0; border-radius: 0; background: none; isolation: isolate; font: 700 12px var(--font-title); letter-spacing: .2em; color: var(--gold); text-shadow: 0 1px 0 var(--ink); }
#mapwrap b::before, #mapwrap b::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); }
#mapwrap b::before { inset: 0; background: var(--gold-mid); }
#mapwrap b::after { inset: 1.5px; background: var(--plate-bg); }

/* ------------------------------------------------------------ Untere Leiste: Kugeln + Aktionsleiste */
#bottom { bottom: 0; gap: 0; align-items: flex-end; }
#center { position: relative; z-index: 1; margin: 0 -44px; padding: 34px 64px 12px; gap: 10px; isolation: isolate; }
#center::before, #center::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 100%, 0 34%, 3% 18%, 42% 18%, 45% 0, 55% 0, 58% 18%, 97% 18%, 100% 34%, 100% 100%); }
#center::before { inset: 0; background: var(--gold-mid); }
#center::after { inset: 1.5px 1.5px 0; background: radial-gradient(ellipse 30% 40% at 50% 0%, rgba(var(--accent-rgb), .1), transparent 70%), linear-gradient(180deg, var(--border) 0%, var(--bg-soft) 20%, var(--bg) 55%, var(--ink) 100%); }
#center .keystone { position: absolute; left: 50%; top: -14px; width: 34px; height: 34px; transform: translateX(-50%) rotate(45deg); background: var(--gold-gem); box-shadow: 0 0 0 1px var(--ink), 0 0 18px rgba(var(--gold-rgb), .4); }
#center .keystone::after { content: ""; position: absolute; inset: 7px; background: radial-gradient(circle at 35% 35%, var(--accent-tint), var(--accent) 40%, var(--accent-2) 80%); box-shadow: 0 0 0 2px var(--ink), 0 0 16px var(--accent); }
.barrow { display: flex; align-items: center; gap: 14px; }
.barrow .sep { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--gold); margin: 0 2px; }
#skills, #skills.glass { gap: 14px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.sk { width: 60px; height: 60px; clip-path: none; border-radius: 0; overflow: visible;
  background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .26), var(--ink) 72%); box-shadow: var(--slot-ring), inset 0 0 14px rgba(0, 0, 0, .9); }
.sk::after { inset: 0; }
.sk svg { width: 32px; height: 32px; }
.sk em { left: 3px; top: 2px; font: 600 8px var(--font-title); letter-spacing: .03em; color: var(--gold); text-transform: none; max-width: 92%; }
.sk kbd { right: 2px; bottom: 2px; }
.sk .lock { font-family: var(--font-display); }
.sk:active { transform: scale(.94); }
#potionbtn { width: 50px; height: 50px; clip-path: none; align-self: center; overflow: visible;
  background: radial-gradient(circle at 50% 40%, rgba(var(--danger-rgb), .28), var(--ink) 72%); box-shadow: var(--slot-ring), inset 0 0 12px rgba(0, 0, 0, .9); }
#potionbtn b { font: 700 11px var(--font-display); }
#potioncd { z-index: 1; }
#menu { display: flex; gap: 10px; }
#menu button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; pointer-events: auto; touch-action: manipulation; color: var(--gold); }
#menu span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--font-title);
  background: radial-gradient(circle at 40% 35%, var(--border), var(--ink) 75%); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-mid), 0 0 0 3px var(--ink), inset 0 0 8px rgba(0, 0, 0, .8); }
#menu button:hover span, body.charopen #menu button.on span, body.building #menu [data-menu="build"] span { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold), 0 0 0 3px var(--ink), 0 0 14px rgba(var(--gold-rgb), .45); color: var(--accent-tint); }
#menu small { font: 600 8.5px var(--font-title); letter-spacing: .08em; color: var(--fg-dim); text-transform: uppercase; }
#menubadge { position: absolute; top: -7px; right: -5px; width: 17px; height: 17px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 1px var(--ink), 0 0 10px var(--gold); display: grid; place-items: center; font: 700 10px var(--font-display); font-style: normal; color: var(--ink); }
#menubadge[hidden] { display: none; }
#xp { gap: 10px; font: inherit; letter-spacing: 0; padding: 0 4px; }
#xp > b { font: 700 11px var(--font-title); letter-spacing: .16em; color: var(--gold); white-space: nowrap; }
#xp .dia { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 1px var(--ink); }
#xp .bar { position: relative; height: 8px; border-radius: 0; background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); overflow: hidden; }
#xp .bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%); }
#xpfill { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); box-shadow: 0 0 10px rgba(var(--gold-rgb), .6); }
#xp em { font: 600 11px var(--font-display); font-style: normal; color: var(--fg-dim); min-width: 34px; }

/* Kugeln: Strahlenkranz + Steinfassung + Edelstein + Namensschild */
.orbw { position: relative; z-index: 2; width: 196px; height: 196px; margin-bottom: 14px; display: grid; place-items: center; }
.orbw .ticks { inset: 0; opacity: .8; animation: none; background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 100%, transparent 100%); mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 100%, transparent 100%); }
.orbw.hp .ticks { background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 3deg, transparent 3deg 15deg); }
.orbw::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: conic-gradient(from 200deg, var(--border), var(--bg), var(--border), var(--bg), var(--border));
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold-mid), 0 0 0 4px var(--ink), 0 14px 34px rgba(0, 0, 0, .85); }
.orbw.mp::before { background: conic-gradient(from 20deg, var(--border), var(--bg), var(--border), var(--bg), var(--border)); }
.globe, .orbw.hp .globe { position: relative; width: 142px; height: 142px; border: 0; background: radial-gradient(circle at 50% 60%, var(--bg-soft), var(--ink)); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px rgba(var(--gold-rgb), .4); }
#hpg .fill { background: radial-gradient(ellipse 80% 40% at 50% 0%, color-mix(in oklch, var(--danger), var(--fg) 25%), transparent 70%), linear-gradient(180deg, var(--danger), color-mix(in oklch, var(--danger), var(--ink) 55%) 70%, color-mix(in oklch, var(--danger), var(--ink) 75%)); box-shadow: inset 0 0 40px rgba(var(--ink-rgb), .6); }
#mpg .fill { background: radial-gradient(ellipse 80% 40% at 50% 0%, var(--accent-tint), transparent 70%), linear-gradient(180deg, var(--accent), var(--accent-2) 60%, color-mix(in oklch, var(--accent-2), var(--ink) 55%)); box-shadow: inset 0 0 40px rgba(var(--ink-rgb), .5); }
.globe .shine { background: radial-gradient(circle at 34% 24%, rgba(234, 242, 251, .4), transparent 26%), radial-gradient(circle at 50% 50%, transparent 55%, rgba(var(--ink-rgb), .65)); }
.globe .val { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; letter-spacing: 0; }
.globe .val b { font: 700 19px var(--font-display); color: var(--fg); text-shadow: 0 2px 3px var(--ink); }
.globe .val small { font: 600 10px var(--font-display); color: var(--fg); opacity: .7; text-shadow: 0 1px 3px var(--ink); }
.orbw .gem { position: absolute; left: 50%; top: 4px; width: 22px; height: 22px; transform: translateX(-50%) rotate(45deg); z-index: 1;
  background: radial-gradient(circle at 35% 35%, var(--fg), var(--danger) 40%, color-mix(in oklch, var(--danger), var(--ink) 50%)); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold), 0 0 0 5px var(--ink), 0 0 14px var(--danger); }
.orbw.mp .gem { background: radial-gradient(circle at 35% 35%, var(--accent-tint), var(--accent) 40%, var(--accent-2) 85%); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold), 0 0 0 5px var(--ink), 0 0 14px var(--accent); }
.orbw .plate { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 1; padding: 5px 28px 6px; isolation: isolate; font: 700 12px var(--font-title); letter-spacing: .24em; text-transform: uppercase; color: var(--danger); white-space: nowrap; }
.orbw.mp .plate { color: var(--accent); }
.orbw .plate::before, .orbw .plate::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 10% 50%); }
.orbw .plate::before { inset: 0; background: var(--gold-mid); }
.orbw .plate::after { inset: 1.5px; background: var(--plate-bg); }
/* Am PC ersetzen die Menue-Knoepfe der Leiste die Seitenknoepfe */
#charbtn, #buildbtn { display: none; }

/* Seitenknoepfe (Handy) und Reiten */
#charbtn, #buildbtn, #mountbtn { border-radius: 0; font: 700 13px var(--font-title); letter-spacing: .1em; }
#charbtn:hover, #buildbtn:hover, #mountbtn:hover, body.building #buildbtn, body.mounted #mountbtn { border-color: transparent; box-shadow: var(--frame), 0 0 18px rgba(var(--gold-rgb), .35); }
#mountbtn { bottom: 220px; }

/* ------------------------------------------------------------ Boss- und Rissleiste */
#bossbar { width: min(720px, 62vw); padding: 0; background: none; box-shadow: none; border: 0; top: calc(78px + env(safe-area-inset-top, 0px)); height: 104px; }
#bossbar .bt { display: block; text-align: center; margin: 0; }
#bossbar b { display: inline-flex; align-items: baseline; gap: 12px; font: 800 24px var(--font-title); letter-spacing: .18em; color: var(--fg); text-shadow: 0 2px 0 var(--ink), 0 0 18px rgba(var(--danger-rgb), .55); overflow: visible; }
#bossbar b small { font: 500 14px var(--font-title); letter-spacing: .06em; color: var(--fg-dim); text-transform: none; text-shadow: 0 1px 0 var(--ink); }
#bossbar .bb { position: absolute; left: 100px; right: 100px; top: 44px; height: 24px; border-radius: 0; overflow: visible; background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px color-mix(in oklch, var(--gold), var(--ink) 25%), 0 0 0 4px var(--bg-soft), 0 0 0 5px var(--border), 0 0 0 6px var(--ink), 0 10px 26px rgba(0, 0, 0, .8); }
#bossfill { inset: 3px auto 3px 3px; max-width: calc(100% - 6px); background: linear-gradient(180deg, var(--danger) 0%, color-mix(in oklch, var(--danger), var(--ink) 35%) 50%, color-mix(in oklch, var(--danger), var(--ink) 60%) 100%); box-shadow: 0 0 14px rgba(var(--danger-rgb), .6); }
#bossbar .bb::after { content: ""; position: absolute; inset: 3px; background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(var(--ink-rgb), .45) 39px 40px); pointer-events: none; }
#bossbar .bb em { top: -5px; bottom: -5px; width: 2px; background: var(--gold); box-shadow: 0 0 0 1px var(--ink); z-index: 1; }
#bossbar #bosstier { position: absolute; left: 50%; top: 66px; width: 28px; height: 28px; transform: translateX(-50%) rotate(45deg); z-index: 2; display: grid; place-items: center;
  background: var(--gold-gem); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--bg-soft), 0 0 0 4px var(--gold), 0 0 16px rgba(var(--gold-rgb), .5); font: 800 10px var(--font-title); color: var(--ink); white-space: nowrap; }
#bossbar #bosstier::first-letter { }
#bossbar .wing { position: absolute; top: 34px; width: 112px; height: 50px; background: var(--gold-mid);
  clip-path: polygon(100% 20%, 100% 80%, 60% 70%, 30% 100%, 35% 65%, 0 75%, 20% 50%, 0 25%, 35% 35%, 30% 0, 60% 30%); }
#bossbar .wing::after { content: ""; position: absolute; inset: 1.5px; background: linear-gradient(90deg, var(--ink), var(--border)); clip-path: inherit; }
#bossbar .wing.l { left: 0; } #bossbar .wing.r { right: 0; transform: scaleX(-1); }
#riftbar { background: var(--panel-bg); box-shadow: var(--frame), 0 10px 26px rgba(0, 0, 0, .7); border: 0; border-radius: 0; top: calc(196px + env(safe-area-inset-top, 0px)); }
#riftbar b { font: 700 13px var(--font-title); letter-spacing: .12em; }
#riftbar .bb { border-radius: 0; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
body.boss #riftbar { top: calc(196px + env(safe-area-inset-top, 0px)); }

/* ------------------------------------------------------------ Welt: Zahlen, Schilder, Lebensbalken */
.dmg { font: 700 20px var(--font-display); color: var(--fg); text-shadow: 0 2px 0 var(--ink), 0 0 10px rgba(var(--accent-rgb), .7); }
.dmg.crit { font-size: 34px; color: var(--gold); text-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(var(--gold-rgb), .8); }
.dmg.crit::before { content: "Kritisch"; display: block; text-align: center; font: 700 10px var(--font-title); letter-spacing: .25em; text-transform: uppercase; text-shadow: 0 1px 0 var(--ink); }
.dmg.hurt { color: var(--danger); font-size: 17px; text-shadow: 0 2px 0 var(--ink); }
.gain { font: 700 15px var(--font-display); text-shadow: 0 2px 0 var(--ink), 0 0 8px currentColor; }
.lootlbl { width: auto; max-width: 220px; margin-left: 0; translate: -50% 0; padding: 4px 12px 5px; border: 0; border-radius: 0; font: 600 12.5px var(--font-title); letter-spacing: .02em;
  background: rgba(var(--ink-rgb), .88); box-shadow: 0 0 0 1px currentColor, 0 0 14px -2px currentColor; }
.ehp { height: 8px; width: 56px; margin-left: -28px; border: 0; border-radius: 0; background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
.ehp.big { width: 86px; margin-left: -43px; height: 9px; }
.ehp i { background: linear-gradient(180deg, var(--danger), color-mix(in oklch, var(--danger), var(--ink) 50%)); box-shadow: none; }
.ehp.hov { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold); }
.ehp.elite { width: 96px; margin-left: -48px; height: 9px; border: 0; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
.ehp.elite::before { bottom: 12px; font: 700 12.5px var(--font-title); letter-spacing: .05em; color: var(--gold); text-shadow: 0 1px 0 var(--ink), 0 0 8px var(--ink); }
.btag { font: 700 12px var(--font-title); }

/* ------------------------------------------------------------ Meldungen */
#toasts { width: 380px; max-width: 380px; }
.toast { padding: 8px 14px; border: 0; border-left: 2px solid var(--gold); border-radius: 0; background: linear-gradient(90deg, rgba(var(--ink-rgb), .9), rgba(var(--ink-rgb), .5)); font: 600 13px var(--font-body); color: var(--fg); }
.toast b { font-family: var(--font-title); color: var(--gold); }
.toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); color: var(--warn); } .toast.dim { border-left-color: var(--border); color: var(--fg-dim); }
#banner h2 { font: 800 34px var(--font-title); letter-spacing: .18em; color: var(--fg); text-shadow: 0 2px 0 var(--ink), 0 0 26px rgba(var(--accent-rgb), .7); }
#banner.gold h2 { color: var(--gold); text-shadow: 0 2px 0 var(--ink), 0 0 26px rgba(var(--gold-rgb), .6); }
#banner.big h2 { font-size: 52px; }
#banner.small h2 { font-size: 19px; letter-spacing: .12em; }
#banner::before { height: 10px; width: 360px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .7) 45%, transparent 45% 55%, rgba(var(--gold-rgb), .7) 55%, transparent) center / 100% 1px no-repeat; }
#banner::after { content: ""; position: absolute; left: 50%; top: 1px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: var(--gold); }
#banner.small::after { display: none; }
#banner p { font: 600 12px var(--font-display); letter-spacing: .2em; color: var(--accent-tint); }
#banner p::before, #banner p::after { content: none; }
#prompt { border-radius: 0; font: 700 14px var(--font-title); letter-spacing: .1em; }
#prompt kbd { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); padding: 1px 6px; }
#hint { border: 0; border-radius: 0; background: rgba(var(--ink-rgb), .9); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); font: 600 12px var(--font-body); }
#channel { border: 0; border-radius: 0; height: 9px; background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
#channel::after { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); box-shadow: 0 0 12px rgba(var(--gold-rgb), .6); }
#dead h2 { font: 800 50px var(--font-title); letter-spacing: .3em; }
#keys { bottom: 236px; }
#keys b { font-family: var(--font-title); color: var(--gold); font-variant: small-caps; }
#fps, #soundbtn { bottom: 8px; }
#dlg { border-radius: 0; padding: 24px 22px 20px; }
#dlg h3 { font: 700 22px var(--font-title); letter-spacing: .12em; color: var(--gold); }
#dlgbtns small { font-family: var(--font-body); }

/* ============================================================ Fenster */
/* ------------------------------------------------------------ Start (Entwurf 1a) */
#intro { background: radial-gradient(ellipse 50% 40% at 50% 38%, rgba(var(--accent-rgb), .12), transparent 70%), radial-gradient(ellipse at 50% 55%, rgba(11, 19, 34, .45), rgba(var(--ink-rgb), .9) 80%); }
#intro .kicker { font: 600 13px var(--font-title); letter-spacing: .4em; color: var(--gold); text-shadow: 0 1px 0 var(--ink); }
#intro h1 { margin: 12px 0 4px; font: 800 clamp(44px, 8.4vw, 118px)/1.05 var(--font-title); letter-spacing: .06em; padding: 0 .1em;
  background: linear-gradient(180deg, var(--fg) 25%, var(--accent-tint) 55%, color-mix(in oklch, var(--accent), var(--ink) 25%) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 30px rgba(var(--accent-rgb), .45)); }
#intro .orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 16px; }
#intro .orn::before, #intro .orn::after { content: ""; width: min(300px, 26vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .7)); }
#intro .orn::after { background: linear-gradient(90deg, rgba(var(--gold-rgb), .7), transparent); }
#intro .orn i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), .6); }
#intro .orn i.o { width: 5px; height: 5px; background: none; box-shadow: 0 0 0 1px var(--gold); }
#intro .sub { font: 400 16px/1.55 var(--font-body); color: var(--fg); max-width: 640px; margin: 0 auto 26px; }
#intro .note { font-family: var(--font-body); }
.ctrlbox summary { font: 600 11px var(--font-title); letter-spacing: .24em; color: var(--gold-mid); }
.ctrlbox[open] .ctrl { position: relative; padding: 18px 26px; background: var(--panel-bg); box-shadow: var(--frame); }
#intro .ctrl b { font: 700 13px var(--font-title); color: var(--gold); font-variant: small-caps; letter-spacing: .04em; }
/* Charakterwahl */
.cscard, .csclass, .csdetail { clip-path: none; background: var(--panel-bg); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); }
.cscard { padding: 12px 14px; }
.cscard:hover { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
.csico, .csclass { color: var(--accent-tint); }
.csinfo b { font: 700 17px var(--font-title); letter-spacing: .04em; color: var(--gold); }
.csinfo small { font: 600 10.5px var(--font-display); letter-spacing: .18em; }
.csnew { font: 600 13px var(--font-title); letter-spacing: .14em; color: var(--gold); background: rgba(var(--ink-rgb), .55); border: 1px dashed var(--gold-dim); }
.csclass b { font: 700 14px var(--font-title); letter-spacing: .04em; }
.csclass small { font: 600 9px var(--font-display); letter-spacing: .12em; }
.csclass.on { color: var(--gold); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold), 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-deep), 0 0 24px rgba(var(--gold-rgb), .25); }
.csclass.on svg { filter: drop-shadow(0 0 8px var(--gold)); }
.csskills span { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border), 0 0 0 3px var(--gold-dim); background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .22), var(--ink) 75%); }
.csskills i { font-family: var(--font-display); }
.csname input { font: 600 15px var(--font-body); background: rgba(var(--ink-rgb), .9); border: 0; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); }
.csname input:focus { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-mid), 0 0 14px rgba(var(--gold-rgb), .25); }

/* ------------------------------------------------------------ Heldenfenster (Entwurf 1c/1d) */
#charpanel { bottom: 196px; top: calc(96px + env(safe-area-inset-top, 0px)); right: calc(26px + env(safe-area-inset-right, 0px)); width: min(820px, calc(100vw - 250px)); }
#charpanel > header { padding: 0 12px 0 14px; border-bottom: 1px solid rgba(var(--gold-rgb), .25); }
#chartabs { gap: 2px; }
#chartabs button { font: 600 12.5px var(--font-title); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); border: 0; border-radius: 0; padding: 15px 12px 13px; }
#chartabs button:hover { color: var(--fg); }
#chartabs button.on { color: var(--gold); background: linear-gradient(0deg, rgba(var(--gold-rgb), .1), transparent 70%); box-shadow: inset 0 -2px 0 var(--gold); border: 0; }
#charclose { width: 32px; height: 32px; padding: 0; }
#charbody { padding: 16px 18px; font: 400 13px var(--font-body); }
#charbody h5 { margin: 14px 0 8px; font: 700 13px var(--font-title); letter-spacing: .14em; color: var(--gold); }
#charbody h5::after { content: ""; flex: 1; height: 1px; margin-left: 10px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .4), transparent); order: 1; }
#charbody h5 small { order: 2; font: 600 10.5px var(--font-display); letter-spacing: .14em; color: var(--fg-dim); text-transform: uppercase; }
.points { font: 600 13px var(--font-title); letter-spacing: .06em; color: var(--fg); }
.points b { font: 700 16px var(--font-display); }
/* Plaetze: quadratisch, Seltenheit als Ring (Entwurf: Tuerkis magisch, Blau selten, Gold legendaer) */
.cell { width: 56px; height: 56px; clip-path: none; background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .1), var(--ink) 75%); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); }
.cell svg { width: 32px; height: 32px; }
.cell.void { background: rgba(var(--ink-rgb), .55); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px rgba(27, 39, 64, .6); }
.cell.empty { color: rgba(118, 134, 159, .35); }
.cell.r0 { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--accent-2), inset 0 0 14px rgba(var(--accent-2-rgb), .25); }
.cell.r1 { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--accent-3), inset 0 0 14px rgba(var(--accent-3-rgb), .25); }
.cell.r2 { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold), 0 0 0 3px var(--ink), 0 0 12px rgba(var(--gold-rgb), .35), inset 0 0 18px rgba(var(--gold-rgb), .3); }
.cell.sel { outline: 1px solid var(--fg); outline-offset: -5px; }
.gear .bag { grid-template-columns: repeat(6, 56px); gap: 6px; padding: 8px; background: rgba(var(--ink-rgb), .45); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); width: max-content; }
.doll { gap: 14px; }
.dcol { gap: 10px; }
.portrait { width: 100%; height: 120px; border-radius: 0; background: radial-gradient(ellipse at 50% 60%, rgba(var(--accent-rgb), .16), transparent 70%), repeating-linear-gradient(135deg, rgba(234, 242, 251, .02) 0 2px, transparent 2px 14px), var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); }
.portrait svg { width: 70px; height: 70px; }
.dcenter b { font: 700 20px var(--font-title); letter-spacing: .06em; color: var(--gold); margin-top: 6px; }
.dcenter small { font: 600 10.5px var(--font-display); letter-spacing: .2em; color: var(--fg-dim); }
.dcenter .stats { padding-top: 10px; margin-top: 6px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .45), transparent) top / 100% 1px no-repeat; }
.stats { font: 400 12.5px var(--font-body); gap: 3px 10px; }
.stats dd { font: 600 12.5px var(--font-display); color: var(--fg); }
.baghead h5 { margin: 0 !important; }
.idetail { border: 0; border-radius: 0; background: rgba(var(--ink-rgb), .6); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); padding: 0; }
.idetail .tt { box-shadow: none; }
.idetail .row { padding: 0 12px 12px; }
.hintline { font-size: 12px; line-height: 1.5; }
/* Tooltip im Goldrahmen (Entwurf 1c) */
.tt { clip-path: none; padding: 14px 18px 12px; background: var(--panel-bg); font: 400 13px var(--font-body); text-align: left;
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--rc, var(--border)), 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-deep), 0 16px 40px rgba(0, 0, 0, .7); }
.tt.r0 { --rc: var(--accent-2); } .tt.r1 { --rc: var(--accent-3); } .tt.r2 { --rc: var(--gold); }
.tt h4 { font: 700 19px var(--font-title); letter-spacing: .03em; }
.tt small { font: 600 10.5px var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.tt ul { padding: 10px 0 0; margin: 10px 0 4px; list-style: none; border-top: 1px solid rgba(var(--gold-rgb), .2); }
.tt .power { margin: 10px 0 4px; padding: 8px 12px; font-style: italic; background: rgba(var(--gold-rgb), .07); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35); }
.tt .cmphead { margin-top: 12px; font: 600 10.5px var(--font-display); letter-spacing: .16em; }
.tt .delta { font: 600 12.5px var(--font-body); margin-top: 4px; }
/* Faehigkeiten, Handwerk, Reittiere: Reihen als Karten */
.skrow, .recipe, .talent, .qchain { background: linear-gradient(180deg, rgba(11, 19, 34, .7), rgba(var(--ink-rgb), .7)); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); border: 0; border-radius: 0; }
.skrow { padding: 10px 12px; margin-bottom: 8px; }
.skrow b, .recipe b, .talent b { font: 700 14px var(--font-title); letter-spacing: .03em; }
.skico { box-shadow: var(--slot-ring); background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .26), var(--ink) 72%); width: 46px; height: 46px; margin: 4px; }
.skrow small.meta { font: 600 10.5px var(--font-display); letter-spacing: .1em; }
.skrow .lv { font: 600 10.5px var(--font-display); letter-spacing: .14em; }
.recipe { padding: 9px 12px; margin-bottom: 8px; }
.recipe small { font-size: 11.5px; }
.prof b { font: 700 14px var(--font-title); }
.prof em { font: 600 12px var(--font-display); }
.pbar { height: 8px; background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
.pbar i { background: linear-gradient(180deg, var(--accent-3), color-mix(in oklch, var(--accent-3), var(--ink) 45%)); }
/* Aufgaben (Entwurf 1d): Farbkante je Questreihe */
.qchain { padding: 14px 16px; margin-bottom: 10px; border-left: 3px solid var(--qc, var(--border)); }
.qchain h5 { color: var(--qc, var(--gold)) !important; font-size: 14px !important; letter-spacing: .06em !important; }
.qchain h5::after { display: none; }
.qchain > b { display: block; font: 700 15px var(--font-title); color: var(--fg); margin: 2px 0; }
.qchain p { color: var(--fg); opacity: .85; font-size: 13px; }
.qchain li { font-size: 13px; align-items: center; }
.qchain li::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 9px; transform: rotate(45deg); border: 1px solid var(--fg); }
.qchain li.ok::before { border-color: var(--ok); }
.qchain li span { margin-left: auto; font: 600 12px var(--font-display); }
.q-main { --qc: var(--gold); } .q-builder { --qc: var(--accent); } .q-hunter, .q-boss { --qc: var(--danger); } .q-collector { --qc: var(--accent-3); }
.q-craft { --qc: var(--ok); } .q-kerker { --qc: var(--accent-2); } .q-bounty { --qc: var(--warn); }

/* ------------------------------------------------------------ Bauen (Entwurf 1e) */
#buildpanel { top: calc(96px + env(safe-area-inset-top, 0px)); bottom: 196px; right: calc(26px + env(safe-area-inset-right, 0px)); width: 450px; border-radius: 0; }
#buildpanel header { padding: 18px 18px 14px; border-bottom: 1px solid rgba(var(--gold-rgb), .25); }
#buildpanel h3 { font: 700 18px var(--font-title); letter-spacing: .14em; color: var(--gold); }
#buildpanel small { font-size: 12px; line-height: 1.5; margin-top: 6px; }
#buildlist { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.bcard { border: 0; border-radius: 0; padding: 11px 12px; gap: 5px; background: linear-gradient(180deg, rgba(11, 19, 34, .85), rgba(var(--ink-rgb), .85)); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--border); align-content: start; }
.bcard:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb), .08), rgba(var(--ink-rgb), .85)); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-dim); }
.bcard.sel { box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), .3); background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--ink-rgb), .85)); }
.bcard.sel b { color: var(--accent); }
.bcard b { font: 700 14px var(--font-title); letter-spacing: .04em; color: var(--fg); }
.bcard small { font-size: 11.5px; line-height: 1.4; }
.bcard .cost { margin-top: 4px; }
.bcard .cost i { font: 600 11px var(--font-body); padding: 1px 6px; border-radius: 0; background: rgba(var(--ink-rgb), .7); box-shadow: 0 0 0 1px var(--border); }
.bcard .cost i.miss { box-shadow: 0 0 0 1px rgba(var(--danger-rgb), .6); }

/* ------------------------------------------------------------ Talentbaum (Entwurf 2b) */
.ttitle { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 0 2px; }
.ttitle i { width: min(150px, 18%); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .8)); position: relative; }
.ttitle i:last-child { background: linear-gradient(90deg, rgba(var(--gold-rgb), .8), transparent); }
.ttitle i::after { content: ""; position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }
.ttitle i:last-child::after { right: auto; left: -4px; }
.ttitle h3 { margin: 0; font: 800 26px var(--font-title); letter-spacing: .2em; color: var(--gold); text-shadow: 0 2px 0 var(--ink), 0 0 24px rgba(var(--gold-rgb), .35); }
.tsub { margin: 0 0 6px; text-align: center; font: 600 11px var(--font-display); letter-spacing: .22em; color: var(--fg-dim); text-transform: uppercase; }
.tree { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
.tcanvas { position: relative; min-width: 0; background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(var(--accent-rgb), .06), transparent 70%); }
.tedges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tedges line { stroke: var(--border); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tedges line.on { stroke: var(--gold-mid); stroke-dasharray: 5 4; filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), .6)); }
.troot, .tnode { position: absolute; width: 0; height: 0; }
.troot > span { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-tint);
  background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .32), var(--ink) 72%); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold), 0 0 0 5px var(--ink), 0 0 0 6px var(--gold-dim), 0 0 20px rgba(var(--accent-rgb), .3); }
.troot svg { width: 34px; height: 34px; filter: drop-shadow(0 0 7px var(--accent)); }
.rays { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; opacity: .85; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 3deg, transparent 3deg 22.5deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 76%, #000 77%, #000 100%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 76%, #000 77%, #000 100%, transparent 100%); }
.troot label, .tnode label { position: absolute; left: -66px; width: 132px; top: 36px; display: grid; justify-items: center; gap: 1px; pointer-events: none; }
.troot label { top: 44px; }
.troot label b, .tnode label b { padding: 2px 7px 0; background: var(--bg); font: 700 12.5px var(--font-title); letter-spacing: .04em; color: var(--fg); white-space: nowrap; }
.troot label small { padding: 0 7px 2px; background: var(--bg); font: 600 9px var(--font-display); letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.tnode label small { padding: 0 7px 2px; background: var(--bg); font: 400 9px var(--font-body); letter-spacing: .25em; color: var(--accent); }
.tnode { border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--fg); }
.tnode > span { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; transform: rotate(45deg); display: grid; place-items: center;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .08), var(--ink) 75%); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold-dim), 0 0 0 4px var(--ink), 0 0 0 5px var(--border); transition: box-shadow .15s; }
.tnode > span b { transform: rotate(-45deg); font: 700 13px var(--font-display); }
.tnode.has > span { background: radial-gradient(circle, rgba(var(--accent-rgb), .3), var(--ink) 75%); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--accent), 0 0 0 4px var(--ink), 0 0 0 5px var(--border), 0 0 16px rgba(var(--accent-rgb), .45); }
.tnode.max > span { background: radial-gradient(circle, rgba(var(--gold-rgb), .35), var(--ink) 75%); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold), 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-deep), 0 0 18px rgba(var(--gold-rgb), .5); }
.tnode.max > span b, .tnode.max label b { color: var(--gold); }
.tnode.max label small { color: var(--gold); }
.tnode.open label small { color: var(--gold-mid); }
.tnode.lock { opacity: .38; }
.tnode.lock label small { color: var(--fg-dim); }
.tnode.sel > span { box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--fg), 0 0 0 4px var(--ink), 0 0 0 6px var(--gold-mid), 0 0 18px rgba(234, 242, 251, .35); }
.tnode:hover > span { filter: brightness(1.25); }
/* Schlusssteine (Stufen-Talente): rund mit Strahlenkranz */
.tnode.cap > span { left: -30px; top: -30px; width: 60px; height: 60px; transform: none; border-radius: 50%; display: grid; place-content: center; justify-items: center; }
.tnode.cap > span b { transform: none; font-size: 15px; }
.tnode.cap > span small { font: 600 7.5px var(--font-title); letter-spacing: .08em; color: var(--fg-dim); white-space: nowrap; }
.tnode.cap .rays { left: -42px; top: -42px; width: 84px; height: 84px; }
.tnode.cap label { top: 46px; }
/* Detailspalte */
.tdetail { position: sticky; top: 0; display: grid; background: var(--panel-bg); box-shadow: var(--frame), inset 0 0 40px rgba(0, 0, 0, .6); }
.tdhead { display: grid; justify-items: center; gap: 8px; padding: 22px 16px 16px; border-bottom: 1px solid rgba(var(--gold-rgb), .25); background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--accent-rgb), .1), transparent 70%); text-align: center; }
.tdgem { width: 50px; height: 50px; margin: 8px 0 4px; transform: rotate(45deg); display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--accent-rgb), .3), var(--ink) 72%);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--accent), 0 0 0 4px var(--ink), 0 0 0 6px var(--border), 0 0 22px rgba(var(--accent-rgb), .5); }
.tdgem.max { box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold), 0 0 0 4px var(--ink), 0 0 0 6px var(--gold-deep), 0 0 22px rgba(var(--gold-rgb), .5); }
.tdgem.lock { box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--border), 0 0 0 4px var(--ink); }
.tdgem b { transform: rotate(-45deg); font: 700 15px var(--font-display); }
.tdhead h4 { margin: 0; font: 700 21px var(--font-title); letter-spacing: .03em; }
.tdhead small { font: 600 10px var(--font-display); letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.tdbody { display: grid; gap: 6px; padding: 16px; }
.tdbody h6 { margin: 4px 0 0; font: 700 10.5px var(--font-title); letter-spacing: .16em; color: var(--fg-dim); text-transform: uppercase; }
.tdbody h6.nx { color: var(--gold); }
.tdbody p { margin: 0 0 4px; font: 400 14px/1.45 var(--font-body); }
.tdbody .cta { margin: 10px 4px 4px; }
.tdbody .cta:disabled { cursor: default; filter: saturate(.3) brightness(.8); }
.tdorn { display: flex; align-items: center; margin: 0 16px; }
.tdorn::before, .tdorn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5)); }
.tdorn::after { background: linear-gradient(90deg, rgba(var(--gold-rgb), .5), transparent); }
.tdorn i { width: 6px; height: 6px; margin: 0 8px; transform: rotate(45deg); background: var(--gold); }
.tdfree { display: flex; align-items: center; gap: 12px; padding: 16px; }
.tdfree .fp { width: 28px; height: 28px; transform: rotate(45deg); display: grid; place-items: center; background: var(--gold); box-shadow: 0 0 0 1px var(--ink), 0 0 14px rgba(var(--gold-rgb), .6); }
.tdfree .fp b { transform: rotate(-45deg); font: 700 14px var(--font-display); color: var(--ink); }
.tdfree em { flex: 1; font: 600 13px var(--font-title); font-style: normal; letter-spacing: .05em; }
.tlegend { list-style: none; margin: 0; padding: 0 16px 12px; display: grid; gap: 8px; font-size: 12.5px; }
.tlegend li { display: flex; align-items: center; gap: 12px; }
.tlegend li::before { content: ""; flex: none; width: 12px; height: 12px; transform: rotate(45deg); background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--c); }
.tlegend .max { --c: var(--gold); } .tlegend .has { --c: var(--accent); } .tlegend .open { --c: var(--gold-dim); } .tlegend .lock { --c: var(--border); }
.tnote { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.55; color: var(--fg-dim); }

/* Fenster mittig ueber der Szene (wie im Entwurf 1c), hoeher als Boss-Leiste und Karte */
#charpanel { left: 50%; right: auto; transform: translateX(-50%); width: min(880px, calc(100vw - 60px)); top: calc(70px + env(safe-area-inset-top, 0px)); bottom: 176px; z-index: 8; }
#chartabs button { padding: 15px 10px 13px; letter-spacing: .1em; font-size: 12px; }
#switchchar { font: 600 10.5px var(--font-title); letter-spacing: .06em; white-space: nowrap; }
#buildpanel { z-index: 8; top: calc(70px + env(safe-area-inset-top, 0px)); bottom: 176px; }
.tnode label b { white-space: normal; max-width: 120px; text-align: center; line-height: 1.15; font-size: 12px; }

/* ============================================================ Kleinere Bildschirme */
/* Schmale PCs/Tablets: Menue-Beschriftung weg, Leiste kompakter */
@media (max-width: 1180px) and (min-width: 761px) {
  .orbw { width: 164px; height: 164px; } .orbw::before { inset: 13px; } .globe, .orbw.hp .globe { width: 116px; height: 116px; }
  #center { padding: 30px 52px 10px; margin: 0 -36px; }
  .sk { width: 52px; height: 52px; } .sk svg { width: 28px; height: 28px; } #skills { gap: 10px; }
  #menu { gap: 6px; } #menu small { display: none; } #menu span { width: 34px; height: 34px; font-size: 13px; }
  .barrow { gap: 10px; }
  #potionbtn { width: 44px; height: 44px; }
}
/* Handy hochkant: Kugeln klein, Leiste ohne Menue (dafuer die Seitenknoepfe) */
@media (max-width: 760px) {
  #menu, .barrow .sep, #center .keystone { display: none; }
  #charbtn, #buildbtn { display: flex; }
  #center { margin: 0 -14px; padding: 16px 18px 8px; gap: 6px; }
  #center::before, #center::after { clip-path: polygon(0 100%, 0 22%, 4% 0, 96% 0, 100% 22%, 100% 100%); }
  .barrow { gap: 4px; }
  .orbw { width: 92px; height: 92px; margin-bottom: 10px; } .orbw::before { inset: 8px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-mid), 0 8px 18px rgba(0, 0, 0, .8); }
  .globe, .orbw.hp .globe { width: 66px; height: 66px; }
  .globe .val b { font-size: 13px; } .globe .val small { font-size: 8px; }
  .orbw .gem { width: 12px; height: 12px; top: 1px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold), 0 0 8px currentColor; }
  .orbw .plate { display: none; }
  #skills { gap: 4px; }
  .sk { width: min(42px, 10vw); height: min(42px, 10vw); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--gold-mid), inset 0 0 10px rgba(0, 0, 0, .9); }
  .sk svg { width: 22px; height: 22px; } .sk em, .sk kbd { display: none; }
  #potionbtn { position: absolute; left: -70px; bottom: calc(100% + 18px); width: 42px; height: 42px; }
  #xp > b { font-size: 9px; letter-spacing: .1em; } #xp em, #xp .dia { display: none; }
  #res { padding: 5px 20px 6px; } #res span { padding: 2px 5px; } #res em { display: none; }
  #res::before, #res::after { clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
  #mapwrap { transform: scale(.52); transform-origin: top right; top: calc(4px + env(safe-area-inset-top, 0px)); right: calc(4px + env(safe-area-inset-right, 0px)); }
  #quest { width: min(250px, 60vw); padding-left: 20px; } #quest h3 { font-size: 15px; } #quest p { font-size: 11.5px; } #quest li { font-size: 11.5px; }
  #bossbar { width: calc(100vw - 16px); left: 8px; transform: none; top: calc(46px + env(safe-area-inset-top, 0px)); }
  #bossbar b { font-size: 15px; letter-spacing: .12em; } #bossbar b small { font-size: 11px; }
  #bossbar .bb { left: 38px; right: 38px; top: 30px; height: 16px; } #bossbar #bosstier { top: 42px; width: 22px; height: 22px; font-size: 8px; }
  #bossbar .wing { top: 22px; width: 50px; height: 34px; }
  #charpanel { left: calc(6px + env(safe-area-inset-left, 0px)); right: calc(6px + env(safe-area-inset-right, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; transform: none; }
  #chartabs button { padding: 12px 8px 10px; font-size: 10.5px; letter-spacing: .06em; }
  #charbody { padding: 12px 10px; }
  .gear .bag { grid-template-columns: repeat(6, 44px); }
  .cell { width: 44px; height: 44px; } .cell svg { width: 26px; height: 26px; }
  .portrait { height: 76px; } .portrait svg { width: 46px; height: 46px; }
  .tree { grid-template-columns: minmax(0, 1fr); }
  .tdetail { position: static; }
  .troot > span { left: -24px; top: -24px; width: 48px; height: 48px; } .troot svg { width: 26px; height: 26px; }
  .rays { left: -34px; top: -34px; width: 68px; height: 68px; }
  .troot label, .tnode label { left: -44px; width: 88px; } .troot label b, .tnode label b { font-size: 10px; padding: 1px 3px 0; } .troot label small { font-size: 7.5px; letter-spacing: .06em; padding: 0 3px 1px; }
  .tnode > span { left: -18px; top: -18px; width: 36px; height: 36px; } .tnode > span b { font-size: 11px; }
  .tnode label { top: 30px; } .troot label { top: 34px; }
  .ttitle h3 { font-size: 19px; }
  #buildpanel { width: auto; top: auto; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  #intro h1 { font-size: clamp(34px, 12vw, 80px); letter-spacing: .04em; }
  #intro .kicker { font-size: 10.5px; letter-spacing: .22em; }
  #keys { display: none; }
  .toast { font-size: 12px; }
  #toasts { width: auto; }
  #mountbtn { bottom: calc(208px + env(safe-area-inset-bottom, 0px)); }
}
/* Handy quer */
@media (max-height: 500px) and (orientation: landscape) {
  #menu small, .orbw .plate, #center .keystone { display: none; }
  .orbw { width: 104px; height: 104px; margin-bottom: 6px; } .orbw::before { inset: 9px; } .globe, .orbw.hp .globe { width: 76px; height: 76px; }
  .orbw .gem { width: 13px; height: 13px; top: 1px; }
  #center { padding: 14px 30px 6px; margin: 0 -20px; gap: 5px; }
  #center::before, #center::after { clip-path: polygon(0 100%, 0 22%, 3% 0, 97% 0, 100% 22%, 100% 100%); }
  .sk { width: 44px; height: 44px; } .sk svg { width: 24px; height: 24px; } .sk em { display: none; }
  #skills { gap: 8px; } #menu { gap: 5px; } #menu span { width: 30px; height: 30px; font-size: 12px; }
  .barrow { gap: 8px; }
  #potionbtn { width: 40px; height: 40px; }
  #mapwrap { transform: scale(.5); transform-origin: top right; }
  #charbtn, #buildbtn { display: none; }
  #charpanel, #buildpanel { top: 8px; bottom: 8px; }
  #keys { display: none; }
}
/* Bossleiste auf dem Handy links neben der Karte, unter den Rohstoffen */
@media (max-width: 760px) {
  #bossbar { width: calc(100vw - 132px); top: calc(50px + env(safe-area-inset-top, 0px)); height: 80px; }
  #bossbar .bt { text-align: left; padding-left: 6px; }
  #bossbar b { font-size: 13px; letter-spacing: .1em; gap: 6px; flex-wrap: wrap; } #bossbar b small { font-size: 10px; }
  #bossbar .bb { left: 28px; right: 28px; top: 24px; height: 14px; } #bossbar #bosstier { top: 34px; }
  #bossbar .wing { top: 16px; width: 36px; height: 30px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.boss #quest { display: none; }
  #bossbar { width: min(520px, 60vw); top: calc(54px + env(safe-area-inset-top, 0px)); height: 84px; }
  #bossbar b { font-size: 16px; } #bossbar b small { font-size: 11px; }
  #bossbar .bb { left: 60px; right: 60px; top: 28px; height: 16px; } #bossbar #bosstier { top: 38px; width: 22px; height: 22px; font-size: 8px; }
  #bossbar .wing { top: 20px; width: 70px; height: 34px; }
}

/* ------------------------------------------------------------------
   Lagerfeuer-Auswahl (world/camp.js): die Szene ist der Hintergrund,
   Titel oben, Menue rechts, Namensschilder ueber den Helden.
   Nur Tokens - keine neuen Farben. */
#intro { display: block; background: radial-gradient(ellipse 60% 55% at 42% 60%, transparent, rgba(var(--ink-rgb), .55) 85%), linear-gradient(90deg, transparent 55%, rgba(var(--ink-rgb), .55)); }
#intro.overhero { cursor: pointer; }
/* Titel ueber dem freien Teil der Szene, nicht unter dem Menue */
#intro .card { position: absolute; top: calc(3vh + env(safe-area-inset-top, 0px)); left: 0; right: calc(min(400px, 92vw) + 3vw); max-width: none; margin: 0 auto; pointer-events: none; }
/* inline-block: der Kasten waechst mit dem Text. Vorher war er schmaler als
   der Schriftzug, und background-clip: text malt nur im Kasten - das "H"
   von LICHTBRUCH fehlte (Nutzer-Screenshot 2026-11-04, 1258 px breit). */
#intro h1 { display: inline-block; font-size: clamp(34px, 5.6vw, 84px); }
#intro .sub { margin-bottom: 0; text-shadow: 0 1px 6px var(--ink); }
.cspanel { position: absolute; right: 3vw; top: 52%; transform: translateY(-45%); width: min(400px, 92vw); max-height: 78vh; overflow-y: auto;
  overflow-x: hidden; padding: 18px 18px 14px; background: var(--panel-bg); box-shadow: var(--frame); text-align: left; }
.cspanel .csname { flex-wrap: wrap; } .cspanel .csname input { flex-basis: 160px; }
.cspanel #charsel { width: 100%; margin: 0; }
.cspanel .csclasses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cspanel .ctrlbox { margin-top: 12px; }
.cspanel .ctrlbox[open] .ctrl { padding: 12px 14px; font-size: 12px; }
.cspanel .note { text-align: center; }
.cshero { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.cshero .csico { width: 56px; height: 56px; } .cshero .csico svg { width: 44px; height: 44px; }
.cshero .csinfo b { font: 800 22px var(--font-title); letter-spacing: .04em; color: var(--gold); }
.cshero .csinfo em { display: block; font: italic 400 12px var(--font-body); color: var(--fg-dim); margin-top: 2px; }
.csacts { display: flex; gap: 8px; align-items: center; } .csacts .cta { flex: 1; }
.cspicks { display: flex; flex-wrap: wrap; gap: 6px; }
.cspick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; cursor: pointer; font: 600 12px var(--font-body); color: var(--fg-dim);
  background: rgba(var(--ink-rgb), .5); border: 0; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .25); }
.cspick svg { width: 18px; height: 18px; } .cspick.on { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cshint { display: block; text-align: center; font: italic 400 11px var(--font-body); color: var(--fg-dim); }
#camptags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.camptag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; padding: 3px 9px; cursor: pointer; pointer-events: auto; border: 0;
  background: rgba(var(--ink-rgb), .55); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .25); white-space: nowrap; transition: box-shadow .2s, opacity .2s; opacity: .8; }
.camptag b { font: 700 13px var(--font-title); letter-spacing: .05em; color: var(--fg); }
.camptag small { font: 500 9.5px var(--font-body); letter-spacing: .06em; color: var(--fg-dim); }
.camptag:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--gold); }
.camptag.sel { opacity: 1; box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(var(--gold-rgb), .35); } .camptag.sel b { color: var(--gold); }
@media (max-width: 760px) {
  #intro { background: linear-gradient(180deg, rgba(var(--ink-rgb), .5), transparent 30%, transparent 45%, rgba(var(--ink-rgb), .7) 70%); }
  #intro .sub { display: none; }
  #intro .card { right: 0; }
  .camptag { padding: 2px 6px; } .camptag b { font-size: 11px; } .camptag small { display: none; }
  .cspanel { left: 3vw; right: 3vw; width: auto; top: auto; bottom: calc(2vh + env(safe-area-inset-bottom, 0px)); transform: none; max-height: 48vh; padding: 12px; }
}