/* Drachen & Höhlen. Gestaltung: Gewölbe aus dunklem Leder, Eisen und Blattgold; Heldenbögen als Pergament; Drachenrot als Siegellack.
   Bewusst eine dunkle Welt (Kerzenlicht), daher nur ein Farbschema. */
@font-face { font-family: "Cinzel"; src: url(/fonts/cinzel-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(/fonts/cinzel-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url(/fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(/fonts/alegreya-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(/fonts/alegreya-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(/fonts/alegreya-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url(/fonts/spline-sans-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url(/fonts/spline-sans-mono-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farbe */
  --void: #0d0a09; --leather: #1a1411; --leather-2: #241b16; --leather-3: #30251e; --seam: #3e3027;
  --bone: #efe4cc; --ash: #a89a86; --gold: #c9a24a; --gold-hi: #f3d58a; --gold-lo: #7d5a1f;
  --ember: #a3201c; --ember-hi: #d23a2a; --ember-lo: #5a0d0b; --verdigris: #5fb8a8; --ok: #6fbf5a; --warn: #e0a23a; --bad: #d23a2a;
  --parch: #e7d6b0; --parch-2: #d9c393; --ink: #2a1d12; --ink-2: #5b4530; --rubric: #8e1b17;
  /* Schrift */
  --f-deco: "Cinzel Decorative", "Cinzel", "Trajan Pro", Georgia, serif;
  --f-cap: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-book: "Alegreya", "Palatino Linotype", Georgia, serif;
  --f-ui: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-num: "Spline Sans Mono", ui-monospace, Menlo, monospace;
  --r: 4px; --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; background: var(--void); color: var(--bone); }
body { font: 16px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-cap); font-weight: 700; margin: 0; letter-spacing: .03em; text-wrap: balance; }
h2 { font-size: 1.15rem; color: var(--gold-hi); }
h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.mono { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.fine { font-size: .82rem; color: var(--ash); font-weight: 400; letter-spacing: 0; text-transform: none; }
.lbl { font-family: var(--f-cap); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.wrap { padding-left: var(--gutter); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sp { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; } .row.nowrap input { flex: 1; min-width: 0; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.empty { color: var(--ash); font-style: italic; list-style: none; padding: 10px 0; }
.empty.big { padding: 40px 20px; text-align: center; border: 1px dashed var(--seam); border-radius: 8px; grid-column: 1 / -1; }
.boot { min-height: 100%; display: grid; place-items: center; font-family: var(--f-cap); color: var(--gold); letter-spacing: .1em; padding: 24px; text-align: center; }
.boot a { color: var(--gold-hi); }

/* Formularfelder */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
  background: var(--void); border: 1px solid var(--seam); border-radius: var(--r); padding: .45em .6em; width: 100%; min-width: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; }
textarea { resize: vertical; line-height: 1.4; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--ash); }
label.chk { flex-direction: row; align-items: center; gap: 6px; color: var(--bone); cursor: pointer; }
label.mini { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
label.mini input { width: 5em !important; }
label.range { gap: 2px; } label.range.grow { flex: 1; }
input[type=range] { accent-color: var(--gold); width: 100%; }
input[type=checkbox], input[type=radio] { accent-color: var(--ember-hi); width: 16px; height: 16px; }
input[type=color] { width: 100%; height: 34px; border: 1px solid var(--seam); background: var(--void); border-radius: var(--r); padding: 2px; }
.mini-in { width: 5.5em !important; flex: none; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .5em 1em; border-radius: var(--r);
  border: 1px solid var(--seam); background: linear-gradient(180deg, var(--leather-3), var(--leather-2)); color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5); font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--gold-lo); color: var(--gold-hi); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sm { padding: .32em .7em; font-size: .88rem; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger, .btn.ghost.danger { color: #f08a7a; }
.btn.seal, .btn.danger-seal { position: relative; border: 1px solid #2a0605; font-family: var(--f-cap); font-weight: 700; letter-spacing: .05em; color: var(--gold-hi);
  background: radial-gradient(120% 140% at 30% 20%, var(--ember-hi), var(--ember) 45%, var(--ember-lo));
  box-shadow: inset 0 0 0 1px rgba(243,213,138,.35), inset 0 -3px 6px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.btn.seal:hover { filter: brightness(1.12); color: #fff3cc; }
.btn.danger-seal { background: radial-gradient(120% 140% at 30% 20%, #5a1a12, #3a0a08); }
.icon-btn { background: transparent; border: 1px solid transparent; border-radius: 50%; width: 36px; height: 36px; display: inline-grid; place-items: center; color: var(--ash); flex: none; }
.icon-btn:hover { color: var(--gold-hi); border-color: var(--seam); }
.chipbtn { border: 1px solid var(--seam); background: var(--leather-2); border-radius: 999px; padding: .28em .85em; font-size: .88rem; }
.chipbtn:hover { border-color: var(--gold-lo); }
.chipbtn.on { border-color: var(--gold); color: var(--gold-hi); background: linear-gradient(180deg, #3a2b14, #2a1f10); box-shadow: inset 0 0 0 1px rgba(201,162,74,.25); }
.wrapchips { gap: 6px; }
.tag { font-family: var(--f-cap); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: .15em .6em; border-radius: 3px; border: 1px solid; }
.tag.gold { color: var(--gold-hi); border-color: var(--gold-lo); background: rgba(201,162,74,.12); }
.tag.red { color: #ff9a8a; border-color: var(--ember); background: rgba(163,32,28,.18); }
.upl { cursor: pointer; }

/* Halle (Anmeldung, Übersicht) */
.page-hall { background: var(--void); }
.hall { min-height: 100%; position: relative; overflow-x: hidden; display: flex; flex-direction: column;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(163,32,28,.22), transparent 60%), radial-gradient(900px 600px at 50% 120%, rgba(201,162,74,.08), transparent 60%), var(--void); }
.hall::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hall-glow { position: absolute; left: 50%; top: 90px; width: 520px; height: 520px; max-width: 100%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,140,60,.12), transparent 65%); animation: flicker 5s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity: .8; } 45% { opacity: 1; } 55% { opacity: .7; } }
.title-deco, .brand, .sh-name, .banner div, .t-title h2, .rf-tag, .portrait span, .scene-card .narr::first-letter, .t-title p::first-letter { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0; }
.title-deco { font-family: var(--f-cap); font-weight: 700; letter-spacing: .04em; font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.02; color: var(--gold-hi); text-align: center;
  background: linear-gradient(180deg, #fff2c4 10%, var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(201,162,74,.25)); }
.title-deco span { font-family: var(--f-cap); font-size: .7em; }
.title-deco.sm { font-size: clamp(1.6rem, 3.5vw, 2.4rem); text-align: left; }
.gate { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; width: min(1100px, 100%); margin: 0 auto; padding-block: 56px; padding-inline: var(--gutter); position: relative; }
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; } }
.gate-crest { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lede { font-family: var(--f-book); font-size: 1.15rem; color: #d8ccb4; max-width: 44ch; margin: 0; }
.tome { position: relative; background: linear-gradient(180deg, var(--leather-2), var(--leather)); border: 1px solid var(--seam); border-radius: 6px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 6px var(--leather), inset 0 0 0 7px rgba(201,162,74,.35); }
.tome::before, .tome::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold); transform: rotate(45deg); background: var(--leather-2); }
.tome::before { top: -11px; left: calc(50% - 11px); } .tome::after { bottom: -11px; left: calc(50% - 11px); }
.tome-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--seam); }
.tome-tabs button { background: none; border: 0; padding: .6em 1em; font-family: var(--f-cap); letter-spacing: .06em; color: var(--ash); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tome-tabs button.on { color: var(--gold-hi); border-bottom-color: var(--ember-hi); }
.err { color: #ff9a8a; margin: 0; font-size: .9rem; }
.srd { margin-top: auto; padding: 18px var(--gutter); font-size: .72rem; color: #6f6455; text-align: center; max-width: 900px; align-self: center; position: relative; }
.hall-top { display: flex; align-items: center; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--seam); background: rgba(13,10,9,.6); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); }
.brand { font-family: var(--f-cap); font-weight: 700; letter-spacing: .04em; color: var(--gold-hi); font-size: 1.2rem; }
.lobby { width: min(1180px, 100%); margin: 0 auto; padding-block: 32px; display: flex; flex-direction: column; gap: 22px; position: relative; }
.tomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tome-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 16px 30px; min-height: 190px; text-decoration: none; color: var(--bone); border-radius: 3px 8px 8px 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0 10px, transparent 10px 14px, rgba(255,255,255,.03) 14px), linear-gradient(160deg, #3a1512, #22100d 60%, #180c0a);
  border: 1px solid #4a201a; box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(201,162,74,.15); transition: transform .2s ease, box-shadow .2s ease; }
.tome-card.player { background: linear-gradient(90deg, rgba(0,0,0,.45) 0 10px, transparent 10px 14px, rgba(255,255,255,.03) 14px), linear-gradient(160deg, #1d2b2a, #121b1b 60%, #0d1414); border-color: #24403c; }
.tome-card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 16px 36px rgba(0,0,0,.65), inset 0 0 0 1px rgba(201,162,74,.4); }
.tome-card h3 { font-family: var(--f-cap); font-size: 1.3rem; color: var(--gold-hi); text-transform: none; letter-spacing: .02em; }
.tc-role { font-family: var(--f-cap); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tc-scene { margin: 0; font-family: var(--f-book); font-style: italic; color: #c9bba3; }
.tc-heroes { display: flex; gap: 4px; margin-top: auto; }
.tc-heroes span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #1a120a; font-weight: 700; font-family: var(--f-cap); border: 2px solid rgba(243,213,138,.6); }
.tc-heroes em { color: var(--ash); font-size: .85rem; }
.tc-meta { font-size: .78rem; color: var(--ash); }
.lobby-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .lobby-actions { grid-template-columns: 1fr; } }
.plaque { background: linear-gradient(180deg, var(--leather-2), var(--leather)); border: 1px solid var(--seam); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.plaque h2 { display: flex; gap: 8px; align-items: center; }
.plaque p { margin: 0; color: var(--ash); font-size: .92rem; }
.plaque .row input { flex: 1; min-width: 0; }
.code-in { font-family: var(--f-num); letter-spacing: .3em; text-transform: uppercase; }

/* Leisten in der Spielansicht */
.bar { display: flex; align-items: center; gap: 10px; padding: 8px var(--gutter); padding-top: calc(8px + env(safe-area-inset-top, 0px)); flex-wrap: wrap;
  background: linear-gradient(180deg, #1f1713, #150f0c); border-bottom: 1px solid var(--seam); box-shadow: 0 1px 0 rgba(201,162,74,.15); position: relative; z-index: 10; }
.bar h1 { font-family: var(--f-cap); font-size: 1.12rem; color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 32vw; }
.bar-home { display: flex; }
.scene-pick { flex-direction: row; align-items: center; gap: 6px; color: var(--gold); }
.scene-pick select { width: auto; max-width: 240px; padding: .3em .5em; }
.conn { font-size: .75rem; padding: .15em .6em; border-radius: 999px; border: 1px solid var(--seam); color: var(--ash); white-space: nowrap; }
.conn.online { color: var(--ok); border-color: #2c4a26; } .conn.online::before { content: "● "; }
.conn.offline, .conn.connecting { color: var(--warn); } .conn.denied { color: var(--bad); }

/* Spielleitung */
.page-gm, .page-player { overflow: hidden; }
.gm-shell, .pl-shell { height: 100%; display: flex; flex-direction: column; }
.gm-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(340px, 410px); }
@media (max-width: 1000px) { .page-gm { overflow: auto; } .gm-shell { height: auto; } .gm-main { grid-template-columns: 52px minmax(0, 1fr); } .gm-main .stage { height: 62vh; } .dock { grid-column: 1 / -1; max-height: none; } }
.rail { background: linear-gradient(90deg, #150f0c, #1b1410); border-right: 1px solid var(--seam); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; overflow-y: auto; }
.rail-sub { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--seam); width: 100%; }
.rail-sub.end { margin-top: auto; }
.tool { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--ash); font-family: var(--f-num); font-size: .8rem; }
.tool.sm { width: 34px; height: 34px; }
.tool:hover:not(:disabled) { color: var(--gold-hi); border-color: var(--seam); }
.tool.on { color: var(--gold-hi); background: radial-gradient(circle at 50% 30%, rgba(201,162,74,.28), rgba(201,162,74,.06)); border-color: var(--gold-lo); }
.tool:disabled { opacity: .3; cursor: not-allowed; }
.sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.5); padding: 0; }
.sw.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--void), 0 0 0 3px var(--gold); }
.stage { position: relative; min-width: 0; min-height: 0; background: #050406; }
.map-host { position: absolute; inset: 0; }
.mapview { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mapview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mv-fx { pointer-events: none; }
.mv-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(20,12,8,.92); border: 1px solid var(--gold); color: var(--gold-hi); padding: .4em .9em; border-radius: 999px; font-size: .9rem; pointer-events: none; max-width: calc(100% - 24px); text-align: center; }
.init-ribbon { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; max-width: calc(100% - 24px); overflow-x: auto; background: rgba(13,10,9,.88); border: 1px solid var(--seam); border-radius: 999px; padding: 5px 8px; z-index: 3; }
.init-ribbon.in { top: 8px; bottom: auto; }
.init-ribbon span, .t-init span { white-space: nowrap; padding: .2em .7em; border-radius: 999px; font-size: .85rem; }
.init-ribbon .rd, .t-init .rd { color: var(--gold); font-family: var(--f-cap); font-size: .72rem; letter-spacing: .1em; align-self: center; }
.init-ribbon span.cur, .t-init span.cur { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1208; font-weight: 700; }
.init-ribbon span.mine:not(.cur) { box-shadow: inset 0 0 0 1px var(--verdigris); }
.dock { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #19120f, #120d0b); border-left: 1px solid var(--seam); }
.dock-tabs { display: flex; border-bottom: 1px solid var(--seam); overflow-x: auto; flex: none; }
.dock-tabs button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ash); font-size: .64rem; min-width: 0; }
.dock-tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-tabs button.on { color: var(--gold-hi); border-bottom-color: var(--ember-hi); background: linear-gradient(180deg, transparent, rgba(163,32,28,.12)); }
.dock-body { flex: 1; overflow-y: auto; padding: 0 14px 20px; }
.pane { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(62,48,39,.6); }
.pane:last-child { border-bottom: 0; }
.secret-notes { background: #160b0a !important; border-color: #4a1a14 !important; font-family: var(--f-book); }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.palette.small { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.pal { padding: 0; border: 1px solid var(--seam); background: var(--void); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.pal i { display: block; aspect-ratio: 1; background-size: cover; background-position: center; max-width: 100%; }
.pal i.none { display: grid; place-items: center; color: var(--ash); }
.pal span { font-size: .68rem; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ash); }
.pal.on { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold); } .pal.on span { color: var(--gold-hi); }
.palette .upl { aspect-ratio: auto; min-height: 64px; flex-direction: column; white-space: normal; font-size: .72rem; text-align: center; }
.monsters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mon { text-align: left; border: 1px solid var(--seam); background: linear-gradient(90deg, color-mix(in oklab, var(--c) 30%, var(--leather-2)) 0 6px, var(--leather-2) 6px); border-radius: 4px; padding: 6px 8px 6px 14px; display: flex; flex-direction: column; }
.mon b { font-family: var(--f-cap); font-size: .86rem; } .mon span { font-size: .74rem; color: var(--ash); font-family: var(--f-num); }
.mon:hover { border-color: var(--gold-lo); }
.toklist, .members, .assets, .initlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tokrow { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; background: var(--void); border: 1px solid var(--seam); border-radius: 4px; text-align: left; }
.tokrow.on { border-color: var(--gold); }
.tokrow i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid #e3c06a; } .tokrow i.npc { border-color: var(--ember); border-radius: 30%; } .tokrow i.obj { border-radius: 2px; border-color: var(--gold-lo); }
.tokrow span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-pane { background: linear-gradient(180deg, rgba(201,162,74,.08), transparent); margin: 10px -14px 0; padding: 14px; border: 1px solid var(--gold-lo); border-radius: 6px; }
.conds { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cond { font-size: .74rem; padding: .18em .55em; border-radius: 3px; border: 1px solid var(--seam); background: var(--void); color: var(--ash); }
.cond.on { color: #fff0e0; background: var(--ember); border-color: var(--ember-hi); }
.members li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.assets li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.assets li i { width: 40px; height: 40px; background: var(--void) center/cover; border: 1px solid var(--seam); border-radius: 3px; display: grid; place-items: center; color: var(--gold); }
.initlist li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 8px; background: var(--void); border: 1px solid var(--seam); border-radius: 4px; }
.initlist li.cur { border-color: var(--gold); background: linear-gradient(90deg, rgba(201,162,74,.18), transparent); }
.initlist input { padding: .2em .3em !important; text-align: center; font-family: var(--f-num); }
.soundboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sfx { padding: 10px 6px; border-radius: 6px; border: 1px solid var(--seam); background: radial-gradient(circle at 50% 0, var(--leather-3), var(--leather)); font-size: .82rem; }
.sfx:hover { border-color: var(--gold); color: var(--gold-hi); } .sfx:active { transform: scale(.97); }
.sfx.own { border-style: dashed; }
.party { display: flex; flex-direction: column; gap: 8px; }
.pcard { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--seam); border-radius: 6px; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 18%, transparent), transparent 40%); }
.pc-port { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); border: 2px solid #e3c06a; padding: 0; font-family: var(--f-cap); font-weight: 700; font-size: 1.3rem; color: #1a120a; }
.pc-port img { width: 100%; height: 100%; object-fit: cover; }
.pc-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .pc-info b { font-family: var(--f-cap); } .pc-info span { font-size: .8rem; color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-act { display: flex; gap: 4px; }
.minibar, .load { height: 6px; background: rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; }
.minibar i, .load i { display: block; height: 100%; } .ok { background: var(--ok); } .warn { background: var(--warn); } .bad { background: var(--bad); }
.permalink { word-break: break-all; padding: 10px; background: var(--void); border: 1px solid var(--gold-lo); border-radius: 4px; color: var(--gold-hi); }
.bigcode { font-size: 2.2rem; letter-spacing: .3em; text-align: center; color: var(--gold-hi); margin: 8px 0; }

/* Chronik, Würfel, Gespräch */
.chronik { height: 100%; }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.lg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 7px 10px; background: var(--void); border-left: 3px solid var(--seam); border-radius: 0 4px 4px 0; }
.lg time { font-size: .7rem; color: #6f6455; font-family: var(--f-num); }
.lg .who { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; } .lg .who em { font-weight: 400; color: var(--ash); font-style: normal; }
.lg.sys { border-left-color: transparent; background: none; font-family: var(--f-book); font-style: italic; color: var(--ash); text-align: center; grid-template-columns: 1fr auto; }
.lg.chat p { grid-column: 1 / -1; margin: 2px 0 0; font-family: var(--f-book); }
.lg.chat.whisper { border-left-color: #7a5aa0; background: #130f18; }
.lg.roll { border-left-color: var(--who); }
.lg.roll .tot { grid-row: span 2; grid-column: 2; font-family: var(--f-num); font-size: 1.6rem; font-weight: 600; align-self: center; text-align: right; }
.lg.roll time { grid-column: 2; grid-row: 1; display: none; }
.lg.roll .ex { font-family: var(--f-num); font-size: .76rem; color: var(--ash); }
.lg .ex b { font-weight: 600; color: var(--bone); } .lg .ex b.drop { color: #5a5046; text-decoration: line-through; } .lg .ex b.nat20 { color: var(--gold-hi); } .lg .ex b.nat1 { color: #ff8a7a; }
.lg.krit { background: linear-gradient(90deg, rgba(201,162,74,.14), var(--void)); } .lg.krit .tot { color: var(--gold-hi); }
.lg.patzer { background: linear-gradient(90deg, rgba(163,32,28,.18), var(--void)); } .lg.patzer .tot { color: #ff8a7a; }
.lg.secret { border-left-style: dashed; opacity: .8; }
.chatform { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .chatform input[type=text] { flex: 1; }
.tray { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; border: 1px solid var(--seam);
  background: radial-gradient(120% 100% at 50% 0, #2c1a12, #140d0a); box-shadow: inset 0 2px 12px rgba(0,0,0,.6); }
.tray-dice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.die-btn { font-family: var(--f-num); font-weight: 600; padding: 10px 0; border-radius: 6px; border: 1px solid #4a3527; background: linear-gradient(180deg, #3a271c, #20150f); color: var(--bone); }
.die-btn.d20 { grid-column: span 2; color: var(--gold-hi); border-color: var(--gold-lo); background: radial-gradient(circle at 50% 30%, #5a1a14, #2a0a08); font-size: 1.1rem; }
.die-btn:hover { border-color: var(--gold); } .die-btn:active { transform: translateY(1px) rotate(-3deg); }
.tray-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tray-free { display: flex; gap: 6px; } .tray-free input { flex: 1; font-family: var(--f-num); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--seam); background: var(--leather-2); line-height: 1; }
.stepper span { min-width: 4.6em; text-align: center; font-size: .86rem; }

/* Große Würfelanzeige */
.fxhost { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.rollfx { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.9); z-index: 80; pointer-events: none; opacity: 0; animation: rfIn .25s ease forwards; }
.rollfx.out { animation: rfOut .5s ease forwards; }
@keyframes rfIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes rfOut { to { opacity: 0; transform: translate(-50%, -60%) scale(.96); } }
.rf-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 26px; border-radius: 10px; background: rgba(13,10,9,.9); border: 1px solid var(--gold-lo); box-shadow: 0 20px 60px rgba(0,0,0,.7); min-width: 190px; }
.rf-die { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.rf-die svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: url(#none); fill: #6b1512; stroke: var(--gold); stroke-width: 2.5; animation: spin .9s cubic-bezier(.2,.8,.3,1); }
.rf-die svg .facet { fill: none; stroke-width: 1.2; opacity: .6; }
@keyframes spin { from { transform: rotate(-540deg) scale(.6); } to { transform: rotate(0) scale(1); } }
.rf-num { position: relative; font-family: var(--f-num); font-weight: 600; font-size: 2.3rem; color: var(--gold-hi); text-shadow: 0 2px 4px #000; }
.rf-who { font-family: var(--f-cap); color: var(--bone); } .rf-ex { font-family: var(--f-num); font-size: .8rem; color: var(--ash); }
.rf-tag { font-family: var(--f-cap); font-weight: 700; color: var(--gold-hi); letter-spacing: .06em; }
.rollfx.krit .rf-card { border-color: var(--gold-hi); box-shadow: 0 0 60px rgba(243,213,138,.45), 0 20px 60px rgba(0,0,0,.7); }
.rollfx.patzer .rf-card { border-color: var(--ember-hi); } .rollfx.patzer .rf-num, .rollfx.patzer .rf-tag { color: #ff8a7a; } .rollfx.patzer svg { fill: #2a0a08; }
.rollfx.done .rf-num { animation: pop .35s ease; } @keyframes pop { 50% { transform: scale(1.35); } }
.rollfx.big { top: 50%; } .rollfx.big .rf-card { padding: 26px 56px; } .rollfx.big .rf-die { width: 190px; height: 190px; } .rollfx.big .rf-num { font-size: 4.8rem; } .rollfx.big .rf-who { font-size: 1.6rem; } .rollfx.big .rf-ex { font-size: 1.1rem; } .rollfx.big .rf-tag { font-size: 2rem; }

/* Fenster */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,4,3,.72); backdrop-filter: blur(3px); padding: 16px; }
.modal-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, var(--leather-2), var(--leather)); border: 1px solid var(--gold-lo); border-radius: 8px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 4px var(--leather), inset 0 0 0 5px rgba(201,162,74,.25); }
.modal-card.wide { width: min(1080px, 100%); }
.modal-card h2 { margin-bottom: 12px; }
.modal-body p { margin: 0 0 10px; }
.modal-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.sheet-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.sheet-card .close { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(42,29,18,.85); color: var(--parch); }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 120; background: #20160f; border: 1px solid var(--gold-lo); color: var(--bone); padding: .6em 1.1em; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.6); max-width: calc(100% - 32px); }
.toast.bad { border-color: var(--ember-hi); color: #ffc0b4; }

/* Heldenbogen: Pergament */
.sheet { position: relative; color: var(--ink); font-family: var(--f-book); border-radius: 6px; padding: 20px 22px 26px;
  background: radial-gradient(120% 80% at 10% 0, rgba(255,255,255,.35), transparent 50%), radial-gradient(80% 60% at 90% 100%, rgba(120,80,30,.25), transparent 60%), radial-gradient(40% 30% at 70% 30%, rgba(140,100,50,.12), transparent 70%), var(--parch);
  box-shadow: inset 0 0 60px rgba(90,60,20,.45), inset 0 0 0 1px rgba(90,60,20,.4), 0 10px 40px rgba(0,0,0,.5); }
.sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(142,27,23,.35); border-radius: 3px; pointer-events: none; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(142,27,23,.18); }
.sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; border-radius: 6px; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.25 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sheet > * { position: relative; z-index: 1; }
.sheet h3 { color: var(--rubric); font-size: .78rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid rgba(142,27,23,.35); padding-bottom: 4px; margin-bottom: 6px; }
.sheet .fine { color: var(--ink-2); }
.sheet input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .sheet select, .sheet textarea { background: rgba(255,250,235,.5); border: 0; border-bottom: 1px solid rgba(90,60,20,.45); border-radius: 0; box-shadow: none; color: var(--ink); font-family: var(--f-book); padding: .25em .3em; }
.sheet input:not([type=checkbox]):focus, .sheet select:focus, .sheet textarea:focus { background: rgba(255,250,235,.85); border-bottom-color: var(--rubric); }
.sheet textarea { border: 1px solid rgba(90,60,20,.3); border-radius: 3px; }
.sheet label { color: var(--ink-2); font-family: var(--f-cap); font-size: .68rem; letter-spacing: .08em; }
.sheet label.chk { font-family: var(--f-book); font-size: .86rem; letter-spacing: 0; color: var(--ink); }
.sheet .btn { background: linear-gradient(180deg, #f4e8c9, #dcc699); color: var(--ink); border-color: rgba(90,60,20,.45); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(60,40,10,.3); }
.sheet .btn:hover { color: var(--rubric); border-color: var(--rubric); }
.sheet .btn.ghost { background: transparent; box-shadow: none; }
.sheet .btn.danger { color: var(--rubric); }
.sheet .btn.seal { color: #ffe9b0; background: radial-gradient(120% 140% at 30% 20%, var(--ember-hi), var(--ember) 45%, var(--ember-lo)); border-color: #2a0605; }
.sheet .icon-btn { color: var(--ink-2); } .sheet .empty { color: var(--ink-2); }
.sheet.ro input, .sheet.ro select, .sheet.ro textarea { background: transparent; border-bottom-color: transparent; }
.sh-head { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; }
.sh-vitals { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .sh-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sh-head { grid-template-columns: 64px minmax(0, 1fr); } }
.portrait { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); border: 3px solid var(--gold-lo); box-shadow: 0 0 0 2px var(--parch), 0 0 0 4px rgba(142,27,23,.5); cursor: pointer; }
@media (max-width: 560px) { .portrait { width: 64px; height: 64px; } }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait span { font-family: var(--f-deco); font-size: 2.4rem; color: rgba(26,18,10,.8); }
.sh-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sh-name { font-family: var(--f-cap) !important; font-weight: 700 !important; font-size: 1.5rem !important; color: var(--rubric) !important; background: transparent !important; padding: 0 !important; }
.sh-line { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.sh-line.small { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.sh-line label { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
.sh-line label input { width: 3.6em; } .sh-line .xp input { width: 5.5em; }
.swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.vit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 6px 4px; min-height: 64px; border: 1px solid rgba(90,60,20,.45); border-radius: 6px; background: rgba(255,250,235,.45); color: var(--ink); font-family: var(--f-book); }
button.vit:hover { border-color: var(--rubric); color: var(--rubric); }
.vit span { font-family: var(--f-cap); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.vit b { font-family: var(--f-num); font-size: 1.35rem; font-weight: 600; line-height: 1.1; } .vit small { font-size: .7rem; color: var(--ink-2); }
.vit.shield { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); background: linear-gradient(180deg, #8e1b17, #5a0d0b); border: 0; padding-bottom: 14px; }
.vit.shield span, .vit.shield b { color: #f3d58a; }
.vit.insp.on { background: radial-gradient(circle, #f3d58a, #c9a24a); } .vit.insp b { color: var(--rubric); }
.hpbar { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 10px 16px; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(255,250,235,.35); border: 1px solid rgba(90,60,20,.35); }
@media (max-width: 760px) { .hpbar { grid-template-columns: 1fr; } }
.hp-meter { position: relative; height: 14px; border-radius: 7px; background: rgba(60,30,10,.35); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.hp-meter i { position: absolute; left: 0; top: 0; bottom: 0; } .hp-meter i.tmp { background: repeating-linear-gradient(45deg, #5fb8a8 0 6px, #3f8a7e 6px 12px); opacity: .8; left: auto; right: 0; }
.hp-num { font-family: var(--f-num); margin-top: 4px; } .hp-num b { font-size: 1.6rem; } .hp-num input { width: 4em !important; display: inline-block; }
.tmpn { color: #2f6f64; font-size: .85rem; }
.hp-ctl { display: flex; gap: 6px; align-items: center; } .hp-ctl input { width: 4.5em !important; font-family: var(--f-num) !important; }
.hp-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.sheet .lbl { color: var(--ink-2); }
.death, .conds.sheetc { grid-column: 1 / -1; }
.death { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px; border: 1px dashed var(--rubric); border-radius: 4px; }
.pips { display: inline-flex; gap: 5px; }
.pips button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-2); background: transparent; padding: 0; }
.pips.ok button.on { background: #3f7a38; border-color: #2a5226; } .pips.bad button.on { background: var(--rubric); border-color: #5a0d0b; }
.sheet .conds { grid-column: 1 / -1; }
.sheet .cond { background: rgba(255,250,235,.5); border-color: rgba(90,60,20,.35); color: var(--ink-2); font-family: var(--f-book); }
.sheet .cond.on { background: var(--rubric); color: #fff0d0; border-color: #5a0d0b; }
.exh { flex-direction: row !important; align-items: center; gap: 4px; } .exh select { width: auto; }
.sh-tabs { display: flex; gap: 2px; margin: 16px 0 10px; border-bottom: 2px solid rgba(142,27,23,.4); overflow-x: auto; }
.sh-tabs button { background: none; border: 0; padding: .5em 1em; font-family: var(--f-cap); letter-spacing: .06em; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.sh-tabs button.on { color: var(--rubric); border-bottom-color: var(--rubric); font-weight: 700; }
.grid-werte { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .grid-werte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .grid-werte .abils { grid-column: 1 / -1; } }
.abils { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .abils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.abil { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; text-align: center; border-radius: 10px 10px 40% 40% / 10px 10px 22% 22%; border: 1px solid rgba(90,60,20,.5); background: linear-gradient(180deg, rgba(255,250,235,.7), rgba(217,195,147,.5)); box-shadow: inset 0 0 0 3px rgba(255,250,235,.5), inset 0 0 0 4px rgba(142,27,23,.25); }
.ab-name { font-family: var(--f-cap); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ab-mod { font-family: var(--f-num); font-weight: 600; font-size: 1.7rem; line-height: 1; background: none; border: 0; color: var(--ink); padding: 4px 6px; border-radius: 4px; }
.ab-mod:hover { color: var(--rubric); background: rgba(142,27,23,.08); }
.ab-score { font-family: var(--f-num); font-size: .9rem; padding: 1px 10px; border: 1px solid rgba(90,60,20,.45); border-radius: 999px; background: var(--parch); }
.abil input { width: 3.4em !important; text-align: center; font-family: var(--f-num) !important; font-size: .8rem !important; margin-top: 2px; }
.ab-bonus { font-size: .66rem; color: #2f6f64; font-family: var(--f-ui); }
.abil-tools { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.srow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 2px 0; border-bottom: 1px dotted rgba(90,60,20,.3); }
.srow.cls .sk-name::after { content: " •"; color: var(--gold-lo); }
.saves .srow { grid-template-columns: 18px minmax(0, 1fr) auto; }
.sk-name { background: none; border: 0; text-align: left; color: var(--ink); padding: 2px 0; font-family: var(--f-book); }
.sk-name:hover { color: var(--rubric); text-decoration: underline; }
.sk-ab { font-family: var(--f-cap); font-size: .62rem; color: var(--ink-2); }
.sk-b { font-family: var(--f-num); font-weight: 600; min-width: 2.4em; text-align: right; }
.pip { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink-2); background: transparent; padding: 0; }
.pip.on, .pip.lv1 { background: var(--ink); } .pip.lv2 { background: var(--rubric); border-color: var(--rubric); box-shadow: 0 0 0 2px var(--parch), 0 0 0 3px var(--rubric); }
.pip:disabled { cursor: default; }
.block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.block.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .block.two { grid-template-columns: 1fr; } }
.atk { display: grid; grid-template-columns: minmax(0, 1.4fr) 5em 5.5em minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px dotted rgba(90,60,20,.35); }
.atk-act { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .atk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.res-list, .item-list, .spell-list, .atk-list { display: flex; flex-direction: column; gap: 4px; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 8px; align-items: center; }
@media (max-width: 640px) { .res { grid-template-columns: minmax(0, 1fr) auto; } }
.sheet .stepper button { background: rgba(255,250,235,.7); border-color: rgba(90,60,20,.45); color: var(--ink); }
.spellhead { flex-direction: row; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slots { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.slot { display: flex; flex-direction: column; gap: 4px; }
.slot .pips button { border-color: var(--rubric); } .slot .pips button.used { background: var(--rubric); }
.spell { display: grid; grid-template-columns: 7.5em minmax(0, 1.4fr) minmax(0, .8fr) auto auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px dotted rgba(90,60,20,.35); }
.spell.prep input[data-k=name] { font-weight: 700; }
.spell textarea { grid-column: 1 / -1; font-size: .86rem !important; min-height: 2.2em; }
@media (max-width: 640px) { .spell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.coins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.coin { align-items: center; padding: 6px; border-radius: 50%; aspect-ratio: 1; justify-content: center; max-width: 100%; border: 2px solid rgba(90,60,20,.5); }
.coin span { font-size: .58rem !important; } .coin input { text-align: center; font-family: var(--f-num) !important; width: 4em !important; background: transparent !important; }
.coin.kp { background: radial-gradient(circle at 35% 30%, #e0a070, #9a5a30); } .coin.sp { background: radial-gradient(circle at 35% 30%, #f4f4f4, #a8a8a8); } .coin.ep { background: radial-gradient(circle at 35% 30%, #f0e8b0, #a8a070); } .coin.gm { background: radial-gradient(circle at 35% 30%, #ffe8a0, #c9a24a); } .coin.pm { background: radial-gradient(circle at 35% 30%, #ffffff, #c8d0d8); }
.item { display: grid; grid-template-columns: 4em minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.load { background: rgba(60,30,10,.25); }

/* Spieleransicht */
.pl-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pl-sheet { overflow-y: auto; padding: 16px; padding-left: var(--gutter); background: radial-gradient(800px 500px at 30% 0, rgba(163,32,28,.12), transparent 70%), var(--void); }
.pl-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--seam); background: #0b0908; }
.pl-pane { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
#pChronik, #pGruppe { padding: 12px max(16px, env(safe-area-inset-right, 0px)) 20px 14px; }
#pChronik .log { max-height: 40vh; }
@media (max-width: 1000px) { .page-player { overflow: auto; } .pl-shell { height: auto; } .pl-main { grid-template-columns: 1fr; } .pl-side { border-left: 0; border-top: 1px solid var(--seam); } #pKarte { height: 70vh; flex: none; } }
.seg { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--seam); flex: none; overflow-x: auto; }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .45em .6em; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--ash); white-space: nowrap; }
.seg button.on { color: var(--gold-hi); border-color: var(--gold-lo); background: rgba(201,162,74,.08); }
.mini-tools { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(13,10,9,.85); border: 1px solid var(--seam); border-radius: 10px; z-index: 4; }
.welcome { max-width: 460px; margin: 10vh auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.welcome p { font-family: var(--f-book); font-size: 1.1rem; color: #d8ccb4; margin: 0; }
.scene-card { border-left: 3px solid var(--ember); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.scene-card .narr { font-family: var(--f-book); font-size: 1.05rem; margin: 6px 0 0; color: #d8ccb4; max-width: 62ch; }
.scene-card .narr::first-letter { font-family: var(--f-deco); font-size: 2.4em; float: left; line-height: .9; margin: 4px 6px 0 0; color: var(--gold-hi); }

/* Tisch-Bildschirm */
.page-table { overflow: hidden; background: #050406; }
.tbl { position: fixed; inset: 0; }
.t-hud { position: absolute; inset: 0; pointer-events: none; padding: calc(12px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
.tbl.rot .t-hud { transform: rotate(180deg); }
.t-hud > * { pointer-events: auto; }
.t-title { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); max-width: min(620px, 55vw); padding: 14px 20px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(26,20,17,.92), rgba(13,10,9,.88)); border: 1px solid var(--gold-lo); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 3px rgba(13,10,9,.9), inset 0 0 0 4px rgba(201,162,74,.3); }
.t-title h2 { font-family: var(--f-cap); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2.4rem); color: var(--gold-hi); }
.t-title p { margin: .4em 0 0; font-family: var(--f-book); font-size: clamp(1rem, 1.35vw, 1.3rem); color: #e2d6bd; white-space: pre-wrap; }
.t-title p::first-letter { font-family: var(--f-deco); font-size: 2.2em; float: left; line-height: .85; margin: 4px 8px 0 0; color: var(--ember-hi); }
.t-ctrl { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(13,10,9,.8); border: 1px solid var(--seam); transition: opacity .6s; }
.t-ctrl .icon-btn { width: 46px; height: 46px; }
.tbl.idle .t-ctrl { opacity: .15; }
.t-rolls { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); top: calc(80px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 6px; width: min(280px, 32vw); }
.tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 12px; background: rgba(13,10,9,.85); border-left: 4px solid var(--who); border-radius: 0 6px 6px 0; }
.tr b { font-family: var(--f-num); font-size: 1.8rem; } .tr span { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr.krit b { color: var(--gold-hi); } .tr.patzer b { color: #ff8a7a; }
.tr:not(:first-child) { opacity: .7; }
.t-init { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100% - 28px); overflow-x: auto; padding: 8px 14px; border-radius: 999px; background: rgba(13,10,9,.88); border: 1px solid var(--gold-lo); }
.t-init span { font-size: clamp(.95rem, 1.3vw, 1.2rem); } .t-init span.pc:not(.cur) { color: var(--gold-hi); }
.banner { position: fixed; inset: 0; display: grid; place-items: center; z-index: 60; pointer-events: none; background: radial-gradient(circle, rgba(0,0,0,.55), transparent 70%); animation: bn 7s ease forwards; }
.banner div { font-family: var(--f-cap); font-weight: 700; font-size: clamp(2.2rem, 6vw, 5.5rem); text-align: center; padding: 0 6vw; text-wrap: balance; color: var(--gold-hi); text-shadow: 0 4px 30px #000, 0 0 2px #000, 0 0 40px rgba(201,162,74,.4); }
.banner.scene div { font-size: clamp(1.8rem, 4.5vw, 4rem); }
.tbl.rot .banner div, .tbl.rot .handout, .tbl.rot .rollfx .rf-card { transform: rotate(180deg); }
@keyframes bn { 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; } }
.handout { position: fixed; inset: 0; display: grid; place-items: center; z-index: 55; pointer-events: none; padding: 5vh 5vw; }
.ho-card { max-width: min(900px, 90vw); max-height: 86vh; display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 18px; background: var(--parch); color: var(--ink); border-radius: 4px; box-shadow: 0 30px 90px rgba(0,0,0,.8), inset 0 0 60px rgba(90,60,20,.45); animation: rfIn .5s ease; transform: rotate(-1deg); }
.ho-card img { max-height: 66vh; object-fit: contain; border: 1px solid rgba(90,60,20,.4); }
.ho-card p { font-family: var(--f-book); font-size: clamp(1.1rem, 1.8vw, 1.6rem); margin: 0; white-space: pre-wrap; max-width: 60ch; }
.unlock { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(5,4,3,.82); border: 0; color: var(--bone); font-family: var(--f-cap); }
.unlock b { font-size: 1.5rem; color: var(--gold-hi); } .unlock span { font-family: var(--f-ui); color: var(--ash); }
.t-offline { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95; padding: 18px 26px; background: rgba(13,10,9,.95); border: 1px solid var(--ember-hi); border-radius: 8px; font-size: 1.2rem; text-align: center; max-width: calc(100% - 32px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- Spielerzugang, Übersicht ---------- */
.tome-lede { margin: 0; }
.motd { margin: 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(201,162,74,.08); font-family: var(--f-book); color: #e2d6bd; max-width: 60ch; }
.gate-crest .motd { text-align: left; }
.notice { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--gold-lo); border-radius: 8px; background: linear-gradient(90deg, rgba(201,162,74,.12), transparent); color: var(--gold-hi); }
.notice span { flex: 1; min-width: 220px; color: var(--bone); }
.tc-sess { font-size: .78rem; color: var(--ash); } .tc-sess.live { color: var(--ok); } .tc-sess.live::before { content: "● "; }
.tome-card.arch { filter: saturate(.4) brightness(.8); }
.archive summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--f-cap); color: var(--gold); letter-spacing: .06em; padding: 8px 0; }
.archive .tomes { margin-top: 10px; }

/* ---------- Verwaltung ---------- */
.adm { width: min(1240px, 100%); margin: 0 auto; padding-block: 24px 40px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.adm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--seam); overflow-x: auto; }
.adm-tabs button { display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; border-bottom: 2px solid transparent; padding: .7em 1em; color: var(--ash); font-family: var(--f-cap); letter-spacing: .05em; white-space: nowrap; }
.adm-tabs button.on { color: var(--gold-hi); border-bottom-color: var(--ember-hi); }
.adm-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.adm-body .row input[type=search] { width: min(320px, 100%); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--seam); border-radius: 8px; background: linear-gradient(180deg, var(--leather-2), var(--leather)); }
.stat b { font-family: var(--f-num); font-size: 2rem; font-weight: 600; color: var(--gold-hi); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--seam); border-radius: 8px; }
.tbl-a { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl-a th { text-align: left; font-family: var(--f-cap); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding: 10px 12px; background: var(--leather-2); border-bottom: 1px solid var(--seam); white-space: nowrap; }
.tbl-a td { padding: 9px 12px; border-bottom: 1px solid rgba(62,48,39,.6); vertical-align: top; }
.tbl-a tr:last-child td { border-bottom: 0; }
.tbl-a tr.off td { opacity: .55; }
.tbl-a td.acts { white-space: nowrap; text-align: right; } .tbl-a td.acts > * + * { margin-left: 4px; }
.tbl-a .tag + .tag { margin-left: 4px; }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); vertical-align: middle; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; } .kv dt { color: var(--ash); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.adm .plaque p { color: var(--bone); }

/* ---------- Sitzung und Spielstände (Spielleitung) ---------- */
.sess-chip { font-size: .78rem; padding: .25em .8em; border-radius: 999px; border: 1px solid var(--seam); background: transparent; color: var(--ash); white-space: nowrap; }
.sess-chip.live { color: var(--ok); border-color: #2c4a26; } .sess-chip.live::before { content: "● "; }
.sess-chip.pause { color: var(--warn); border-color: #5a4320; } .sess-chip.arch { color: var(--ash); }
.saves, .sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.saves li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--void); border: 1px solid var(--seam); border-radius: 4px; flex-wrap: wrap; }
.saves li > div:first-child { display: flex; flex-direction: column; min-width: 0; } .saves li b { overflow: hidden; text-overflow: ellipsis; }
.saves li.auto { border-style: dashed; } .saves li.auto b { font-weight: 500; color: var(--ash); }
.sessions li { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-left: 3px solid var(--ember); background: var(--void); border-radius: 0 4px 4px 0; }
.sessions textarea { font-family: var(--f-book); }
.bigcode-inline { font-size: 1.4rem; letter-spacing: .25em; color: var(--gold-hi); }

/* ---------- Heldenerschaffung ---------- */
.wz-card { display: flex; flex-direction: column; gap: 14px; }
.wz-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.wz-steps span { font-family: var(--f-cap); font-size: .72rem; letter-spacing: .08em; padding: .25em .7em; border-radius: 999px; border: 1px solid var(--seam); color: var(--ash); }
.wz-steps span.on { color: #1a1208; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: var(--gold); } .wz-steps span.done { color: var(--gold); border-color: var(--gold-lo); }
.wz-body { display: flex; flex-direction: column; gap: 12px; }
.wz-card .modal-act { align-items: center; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.choice { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--seam); border-radius: 6px; background: linear-gradient(180deg, var(--leather-3), var(--leather-2)); }
.choice b { font-family: var(--f-cap); color: var(--bone); } .choice span { font-size: .8rem; color: var(--gold); font-family: var(--f-num); } .choice small { font-size: .8rem; color: var(--ash); }
.choice:hover { border-color: var(--gold-lo); }
.choice.on { border-color: var(--gold-hi); background: linear-gradient(180deg, #3d2a14, #261a0e); box-shadow: inset 0 0 0 1px var(--gold); } .choice.on b { color: var(--gold-hi); }
.skillpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.wz-abils { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .wz-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wz-abils div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border: 1px solid var(--gold-lo); border-radius: 10px 10px 40% 40% / 10px 10px 22% 22%; background: var(--leather-2); }
.wz-abils b { font-family: var(--f-num); font-size: 1.6rem; color: var(--gold-hi); }
.wz-sum { font-family: var(--f-book); font-size: 1.1rem; margin: 0; }
.wz-port { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); }

/* ---------- Sitzungsende ---------- */
.sess-note { display: flex; gap: 10px; align-items: center; padding: 8px var(--gutter); background: linear-gradient(90deg, rgba(90,67,32,.35), transparent); border-bottom: 1px solid var(--seam); color: var(--gold-hi); font-size: .92rem; }
.sess-note span { color: var(--bone); } .sess-note em { color: #d8ccb4; font-family: var(--f-book); }
.ended { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 5vh 5vw; background: radial-gradient(circle at 50% 40%, rgba(40,20,14,.82), rgba(5,4,3,.96)); }
.tbl.rot .ended-card { transform: rotate(180deg); }
.ended-card { max-width: min(820px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ended-card h2 { font-family: var(--f-cap); font-weight: 700; font-size: clamp(2rem, 5vw, 4rem); color: var(--gold-hi); font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0; }
.ended-card p { margin: 0; font-family: var(--f-book); font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: #e2d6bd; white-space: pre-wrap; }
.ended-card .fine { font-family: var(--f-num); font-size: 1rem; }
.ended-foot { font-family: var(--f-cap) !important; color: var(--gold) !important; letter-spacing: .1em; }

/* Einladungen (Übersicht) */
.invites { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.invites li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-top: 1px solid rgba(201, 162, 74, .18); }
.invites li.empty { border: 0; opacity: .7; }
.invites li .mono { font-size: 1.05rem; letter-spacing: .12em; color: var(--gold-hi); }
.invites li .fine { flex: 1; min-width: 160px; }
.invites li.used .mono { opacity: .55; text-decoration: line-through; }
.fine.inv-ok { color: #9fd38a; }
.fine.inv-bad { color: #ff9a8a; }