/* Layout: eine Spalte, Kopfleiste wie ein genietetes Messingschild, darunter Reiter und Karten auf Ruß-Grund. Bewusst nur dunkles Thema. */
:root{
  --bg:#17130f; --panel:#221b15; --panel-2:#2b231b; --line:#4a3b2a;
  --fg:#eadfc8; --muted:#a8977c; --brass:#cf9f45; --copper:#b9693c;
  --verdigris:#62a894; --danger:#cf5a45;
  --c-krieger:#c69b6d; --c-magier:#69ccf0; --c-paladin:#f58cba; --c-druide:#ff7d0a;
  --r0:#a3a3a3; --r1:#4f8fe0; --r2:#b06ae8; --r3:#e8902e;
  --f-display:"IM Fell English SC", "Palatino Linotype", Palatino, Georgia, serif;
  --f-body:"Alegreya", Georgia, "Times New Roman", serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-body);font-size:17px;line-height:1.5;padding-inline:16px;padding-block:20px 48px;
  background-image:radial-gradient(ellipse at 50% -10%, rgba(207,159,69,.10), transparent 60%);background-attachment:fixed}
.app{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.02em}
h1{font-size:2.1rem;color:var(--brass)}
h2{font-size:1.5rem;color:var(--brass)}
h3{font-size:1.2rem}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border-radius:4px}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.btn{background:linear-gradient(180deg,#d9ab55,#a87a2c);color:#1c140b;border:1px solid #e5bf73;padding:.5rem 1rem;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #5c3f15}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{filter:grayscale(.9) brightness(.6);cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line);padding:.4rem .8rem}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{padding:.25rem .6rem;font-size:.85rem}

/* Messingschild mit Nieten */
.plate{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:6px;padding:16px 20px}
.plate::before,.plate::after{content:"";position:absolute;top:8px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f0d18e,#8a6424 70%);box-shadow:0 1px 1px #000}
.plate::before{left:8px}.plate::after{right:8px}

.hdr{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.hdr-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.hdr-name h1{font-size:1.7rem;line-height:1.1;overflow-wrap:anywhere}
.hdr-stats{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.stat{display:flex;flex-direction:column;gap:1px}
.stat b{font-family:var(--f-mono);font-size:1.05rem;font-variant-numeric:tabular-nums}
.xpbar{width:150px}

.bar{height:8px;background:#0e0b08;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--brass);transition:width .25s ease}
.bar.hp>i{background:var(--verdigris)}
.bar.boss>i{background:var(--danger)}
.bar.big{height:14px}

.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{background:transparent;border:1px solid transparent;border-bottom:none;border-radius:5px 5px 0 0;color:var(--muted);
  padding:.5rem 1rem;font-family:var(--f-display);font-size:1.1rem;margin-bottom:-1px}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--brass);background:var(--panel);border-color:var(--line)}
.tab .lock{font-family:var(--f-mono);font-size:.65rem;margin-left:6px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card.sel{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}

.classpick{text-align:left;color:var(--fg);background:var(--panel);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:6px}
.classpick:hover{border-color:var(--muted)}
.classpick[aria-pressed="true"]{border-color:var(--brass);background:var(--panel-2);box-shadow:0 0 0 1px var(--brass) inset}
.role{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid currentColor;width:max-content}
.role.tank{color:var(--copper)}.role.heal{color:var(--verdigris)}.role.dd{color:var(--danger)}

input[type=text]{font:inherit;background:#0f0c09;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:.55rem .75rem;width:100%;max-width:340px}

.kv{display:grid;grid-template-columns:1fr auto;gap:4px 16px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}

.slot{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.slot:first-of-type{border-top:none}
.item-name{font-weight:600;overflow-wrap:anywhere}
.rar0{color:var(--r0)}.rar1{color:var(--r1)}.rar2{color:var(--r2)}.rar3{color:var(--r3)}
.delta-up{color:var(--verdigris)}.delta-down{color:var(--danger)}
.inv{display:flex;flex-direction:column}
.inv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:9px 0;border-top:1px solid var(--line);align-items:center}
.inv-row:first-child{border-top:none}

.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{background:#0f0c09;color:var(--fg);border:1px solid var(--line);padding:.35rem .7rem;font-size:.9rem;display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.seg button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.seg small{font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}

.enc-list{margin:0;padding-left:1.1rem;color:var(--muted)}
.enc-list .boss{color:var(--danger)}
.party{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.85rem;border:1px solid var(--line);border-radius:3px;padding:2px 8px;background:#0f0c09}

.notice{border:1px dashed var(--line);border-radius:6px;padding:12px 14px;color:var(--muted)}

/* Kampf-Overlay */
.overlay{position:fixed;inset:0;background:rgba(8,6,4,.82);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.fight{width:100%;max-width:680px;max-height:100%;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.fight .plate{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
.fparty{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fmem{display:flex;flex-direction:column;gap:3px;font-size:.85rem;min-width:0}
.fmem.dead{opacity:.4}
.fmem span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log{font-family:var(--f-mono);font-size:.8rem;line-height:1.55;background:#0c0a07;border:1px solid var(--line);border-radius:4px;padding:10px 12px;overflow-y:auto;min-height:180px;flex:1}
.log div{padding:1px 0}
.log .head{color:var(--brass)}
.log .enc{color:var(--fg);font-weight:600;margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.log .round{color:var(--muted)}
.log .abil{color:var(--c-magier)}
.log .heal{color:var(--verdigris)}
.log .bad{color:var(--danger)}
.log .good{color:var(--brass);font-weight:600}
.result{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--brass);
  color:var(--fg);padding:.6rem 1rem;border-radius:5px;z-index:60;max-width:calc(100% - 32px);box-shadow:0 6px 20px rgba(0,0,0,.5)}

.cog{display:inline-block;width:1em;height:1em;vertical-align:-.12em;border-radius:50%;
  background:radial-gradient(circle,var(--bg) 22%,var(--brass) 24% 55%,transparent 57%),
  repeating-conic-gradient(var(--brass) 0 12deg,transparent 12deg 30deg)}
@media (prefers-reduced-motion:no-preference){ .spin{animation:spin 6s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} }
@media (max-width:520px){ body{font-size:16px} h1{font-size:1.7rem} .xpbar{width:110px} .tab{padding:.45rem .7rem;font-size:1rem} }

/* Anmeldung */
.auth{max-width:440px;width:100%;margin:0 auto}
.auth form{display:flex;flex-direction:column;gap:12px}
.auth label{display:flex;flex-direction:column;gap:4px}
.auth input{max-width:none}
.auth .switch{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.form-err{color:var(--danger);font-size:.92rem;min-height:1.2em}
input[type=password]{font:inherit;background:#0f0c09;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:.55rem .75rem;width:100%}
.hdr-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.players{width:100%;border-collapse:collapse;font-size:.95rem}
.players th{text-align:left;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:6px 10px;border-bottom:1px solid var(--line)}
.players td{padding:8px 10px;border-bottom:1px solid var(--line)}
.players td.num{text-align:right}
.players tr.me td{background:var(--panel-2)}
.table-wrap{overflow-x:auto}

/* ===== Erweiterung: Sprites, Inventar, Gruppen, Auktionshaus ===== */
.ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;background:#0f0c09;border:2px solid var(--r0);border-radius:5px;position:relative;image-rendering:pixelated}
.ico svg{width:32px;height:32px}
.ico.sm{width:30px;height:30px;border-width:1px}.ico.sm svg{width:22px;height:22px}
.ico.r1{border-color:var(--r1);box-shadow:0 0 6px rgba(79,143,224,.35)}
.ico.r2{border-color:var(--r2);box-shadow:0 0 8px rgba(176,106,232,.4)}
.ico.r3{border-color:var(--r3);box-shadow:0 0 10px rgba(232,144,46,.5)}
.ico.mat{border-color:var(--line)}
.ico .cnt{position:absolute;right:2px;bottom:0;font-family:var(--f-mono);font-size:.68rem;color:var(--fg);text-shadow:0 0 3px #000,0 0 3px #000}
.ico.broken{filter:grayscale(1) brightness(.6)}
.ico.empty{border-style:dashed;border-color:var(--line);color:var(--muted);font-size:.65rem}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{background:none;border:none;padding:0;cursor:pointer;border-radius:6px}
.tile[aria-pressed="true"] .ico{outline:2px solid var(--brass);outline-offset:2px}
.doll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dslot{display:flex;gap:10px;align-items:center;background:#0f0c09;border:1px solid var(--line);border-radius:6px;padding:8px;text-align:left;color:var(--fg);min-width:0}
.dslot[aria-pressed="true"]{border-color:var(--brass)}
.dslot .meta{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.dslot .meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.durbar{height:4px;background:#0e0b08;border-radius:2px;overflow:hidden}
.durbar>i{display:block;height:100%;background:var(--verdigris)}
.durbar.low>i{background:var(--danger)}
.detail{display:flex;flex-direction:column;gap:8px}
.detail .head{display:flex;gap:12px;align-items:center}
.tag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.tag.bound{color:var(--copper);border-color:var(--copper)}
.tag.trade{color:var(--verdigris);border-color:var(--verdigris)}
.setbox{border-left:2px solid var(--r2);padding-left:10px;font-size:.9rem}
.setbox .on{color:var(--verdigris)}.setbox .off{color:var(--muted)}
.hpbar{width:150px}
.bar.hp.low>i{background:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.evchip{font-size:.8rem;border:1px solid var(--brass);color:var(--brass);border-radius:999px;padding:1px 10px}
.buff{font-size:.85rem;border:1px solid var(--verdigris);color:var(--verdigris);border-radius:4px;padding:2px 8px}
.buff.debuff{border-color:var(--danger);color:var(--danger)}
.badge{display:inline-block;min-width:1.3em;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-family:var(--f-mono);font-size:.7rem;line-height:1.4;margin-left:4px;text-align:center}
.badge.info{background:var(--brass);color:#1c140b}
.list{display:flex;flex-direction:column}
.lrow{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.lrow:first-child{border-top:none}
.lrow .grow{flex:1;min-width:160px}
.talents{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tnode{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:#0f0c09}
.tnode.has{border-color:var(--brass)}
.tnode.locked{opacity:.5}
.tnode .rank{font-family:var(--f-mono);font-size:.8rem;color:var(--brass)}
.tlink{width:2px;height:10px;background:var(--line);margin-left:20px}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs button{background:#0f0c09;color:var(--muted);border:1px solid var(--line);padding:.35rem .8rem}
.subtabs button[aria-pressed="true"]{color:var(--brass);border-color:var(--brass)}
select,input[type=number]{font:inherit;background:#0f0c09;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:.4rem .6rem}
input[type=number]{width:8rem}
.need-ok{color:var(--verdigris)}.need-no{color:var(--danger)}
.recipe.locked{opacity:.55}
.mem{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line)}
.mem:first-child{border-top:none}
.ready{color:var(--verdigris);font-size:.85rem}.notready{color:var(--danger);font-size:.85rem}
details.loot summary{cursor:pointer;color:var(--brass);font-size:.9rem}
details.loot[open] summary{margin-bottom:6px}
.logbox{font-family:var(--f-mono);font-size:.8rem;line-height:1.55;background:#0c0a07;border:1px solid var(--line);border-radius:4px;padding:10px 12px;max-height:220px;overflow-y:auto}
.logbox .t{color:var(--muted);margin-right:8px}
.raidtag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--danger);border:1px solid var(--danger);border-radius:3px;padding:1px 6px}

/* ===== Szenen, Figuren und Animationen ===== */
.hero-fig{display:inline-block;image-rendering:pixelated;flex:0 0 auto}
.hero-fig svg{width:100%;height:100%;display:block}
.hdr-fig{width:64px;height:64px}
.big-fig{width:128px;height:128px;margin:0 auto}
.mini-fig{width:32px;height:32px}
.scene{position:relative;height:150px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#2b2118}
.scene .bg{position:absolute;inset:0;background-size:240px 100%;animation:pan 18s linear infinite}
.scene .ground{position:absolute;left:0;right:0;bottom:0;height:24px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 6px,transparent 6px 14px),#3a2a1c;border-top:2px solid rgba(0,0,0,.35)}
.scene .prop{position:absolute;bottom:20px;width:30px;height:30px;opacity:.9}
.scene .prop svg{width:100%;height:100%}
.scene .walker{position:absolute;bottom:20px;width:56px;height:56px;transition:left 1s linear;transform:translateX(-50%)}
.scene .walker svg{width:100%;height:100%;animation:bob .5s steps(2) infinite}
.scene .walker.rest svg{animation:none}
.scene .tag-stage{position:absolute;top:8px;left:10px;font-family:var(--f-mono);font-size:.7rem;color:#fff;background:rgba(0,0,0,.45);padding:2px 8px;border-radius:3px}
@keyframes pan{from{background-position:0 0}to{background-position:-240px 0}}
@keyframes bob{0%{transform:translateY(0)}100%{transform:translateY(-3px)}}
/* Themen: Expeditionen */
.th-minen .bg,.th-grotte .bg{background-image:radial-gradient(circle at 20% 30%,rgba(255,170,60,.35) 0 6px,transparent 7px),radial-gradient(circle at 70% 20%,rgba(255,170,60,.25) 0 5px,transparent 6px),linear-gradient(180deg,#1d1610,#3a2a1c)}
.th-dampfwerk .bg{background-image:repeating-linear-gradient(90deg,#4a3526 0 30px,#3a2a1e 30px 34px,transparent 34px 60px),linear-gradient(180deg,#6a5a4a,#3a2a1c)}
.th-nebelwald .bg{background-image:radial-gradient(ellipse at 15% 60%,#2f4a2a 0 22px,transparent 23px),radial-gradient(ellipse at 60% 55%,#2a4226 0 28px,transparent 29px),linear-gradient(180deg,#8a9a8a,#3a4a36)}
.th-schlucht .bg{background-image:radial-gradient(circle at 50% 100%,rgba(95,211,230,.45),transparent 60%),linear-gradient(180deg,#1a2230,#2a3a4a)}
.th-sternwarte .bg{background-image:radial-gradient(circle at 10% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 40% 10%,#fff 0 1px,transparent 2px),radial-gradient(circle at 75% 30%,#ffd 0 1px,transparent 2px),linear-gradient(180deg,#0a0f22,#2a2a4a)}
.th-tiefen .bg{background-image:radial-gradient(circle at 30% 40%,rgba(95,211,230,.25) 0 5px,transparent 6px),linear-gradient(180deg,#0c0a08,#24190f)}
.th-vulkanpfad .bg,.th-schmelze .bg{background-image:radial-gradient(ellipse at 50% 110%,rgba(255,110,30,.7),transparent 60%),linear-gradient(180deg,#2a1208,#5a2210)}
/* Themen: Dungeons */
.th-kanaele .bg{background-image:repeating-linear-gradient(180deg,transparent 0 18px,rgba(0,0,0,.25) 18px 20px),linear-gradient(180deg,#203a36,#16302a)}
.th-kanaele .ground{background:#1f4a4a}
.th-turm .bg{background-image:radial-gradient(circle at 80% 20%,#5fd3e6 0 2px,transparent 3px),repeating-linear-gradient(90deg,#3a2c18 0 40px,#4a3a20 40px 44px),linear-gradient(180deg,#2a2440,#4a3a20)}
.th-sanatorium .bg{background-image:repeating-linear-gradient(90deg,transparent 0 50px,rgba(0,0,0,.35) 50px 56px),linear-gradient(180deg,#9aa88a,#4a5a44)}
.th-giesserei .bg{background-image:radial-gradient(ellipse at 50% 120%,rgba(255,80,20,.85),transparent 65%),repeating-linear-gradient(90deg,#3a1a10 0 36px,#2a120a 36px 40px)}
.th-schmelze .ground,.th-vulkanpfad .ground,.th-giesserei .ground{background:#3a1a10}
/* Kampfszene */
.fight-scene{height:170px}
.fight-scene .party{position:absolute;left:12px;bottom:22px;display:flex;gap:4px;align-items:flex-end;flex-wrap:wrap;max-width:60%}
.fight-scene .pm{width:44px;height:44px;transition:transform .2s,filter .2s,opacity .3s}
.fight-scene .pm svg{width:100%;height:100%}
.fight-scene .boss{position:absolute;right:16px;bottom:18px;width:104px;height:104px}
.fight-scene .boss svg{width:100%;height:100%}
.hurt{animation:hurt .3s}
.healed{filter:drop-shadow(0 0 6px #62a894)}
.shake{animation:shake .25s}
.fight-scene .pm.dead{transform:rotate(90deg) translateX(10px);opacity:.45;filter:grayscale(1)}
.floatnum{position:absolute;font-family:var(--f-mono);font-weight:600;font-size:.9rem;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;animation:floatup .9s forwards;pointer-events:none}
.floatnum.heal{color:#8fe0c4}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes hurt{0%,100%{filter:none}50%{filter:brightness(1.8) sepia(1) hue-rotate(-40deg) saturate(4)}}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-34px);opacity:0}}
@media (prefers-reduced-motion:reduce){.scene .bg,.scene .walker svg,.shake,.hurt,.floatnum{animation:none!important}}
.fusebox{display:flex;gap:8px;flex-wrap:wrap}
.decision{border:1px solid var(--brass);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px;background:rgba(207,159,69,.06)}

/* ===== Neues Menü: Seitenleiste (breit) / untere Leiste (Handy) ===== */
.mainnav{display:none}
body.has-nav .mainnav{display:flex;position:fixed;z-index:40;background:linear-gradient(180deg,var(--panel-2),var(--panel));border-color:var(--line)}
.navbtn{position:relative;display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--muted);font-family:var(--f-display);font-size:1.05rem;padding:10px 14px;border-radius:6px;text-align:left}
.navbtn:hover{color:var(--fg);background:rgba(255,255,255,.03)}
.navbtn[aria-current="page"]{color:var(--brass);background:rgba(207,159,69,.10)}
.navico{width:28px;height:28px;flex:0 0 auto;image-rendering:pixelated}
.navico svg{width:100%;height:100%}
.navdot{position:absolute;top:8px;left:32px;width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--panel)}
.nav-brand{font-family:var(--f-display);color:var(--brass);font-size:1.15rem;padding:6px 14px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
@media (min-width:900px){
  body.has-nav .mainnav{flex-direction:column;top:0;bottom:0;left:0;width:210px;padding:calc(18px + env(safe-area-inset-top,0px)) 10px 18px;border-right:1px solid var(--line);gap:4px}
  body.has-nav .app{margin-left:max(210px,calc((100% - 940px) / 2));margin-right:auto}
}
@media (max-width:899px){
  body.has-nav{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.has-nav .mainnav{left:0;right:0;bottom:0;justify-content:space-around;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .nav-brand{display:none}
  .navbtn{flex-direction:column;gap:2px;font-family:var(--f-body);font-size:.72rem;padding:6px 4px;flex:1;align-items:center;text-align:center}
  .navdot{left:calc(50% + 8px);top:4px}
}
.subnav{display:flex;gap:6px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;background:#0f0c09;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.35rem .95rem;font-size:.95rem;display:inline-flex;align-items:center;gap:4px}
.pill:hover{color:var(--fg)}
.pill[aria-current="page"]{color:#1c140b;background:var(--brass);border-color:var(--brass)}
.pill[aria-current="page"] .badge.info{background:#1c140b;color:var(--brass)}

/* Vorschaubilder auf Karten */
.scene.thumb{height:96px;margin:-4px 0 4px}
.thumb-boss{position:absolute;right:10px;bottom:16px;width:70px;height:70px}
.thumb-mob{position:absolute;bottom:18px;width:40px;height:40px;opacity:.9}
.thumb-fig{position:absolute;left:16px;bottom:18px;width:52px;height:52px}
.thumb-boss svg,.thumb-mob svg,.thumb-fig svg{width:100%;height:100%}
.seg.danger button{min-width:64px}

/* Abenteuer-Lauf und Würfel */
.actors{display:flex;flex-wrap:wrap;gap:12px}
.actor{display:flex;align-items:center;gap:8px;background:#0f0c09;border:1px solid var(--line);border-radius:6px;padding:6px 10px;flex-wrap:wrap}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.optbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#0f0c09;color:var(--fg);border:1px solid var(--brass);border-radius:6px;padding:10px 12px}
.optbtn:hover{background:rgba(207,159,69,.12)}
.dicewrap{display:inline-flex;align-items:center;gap:8px}
.d20{display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;font-family:var(--f-mono);font-weight:600;font-size:1.05rem;color:#1c140b;
  background:linear-gradient(160deg,#f0d18e,#b98a34);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.d20.rolling{animation:diceroll .28s linear infinite}
.d20.ok{background:linear-gradient(160deg,#9fe0c8,#4f9a84)}
.d20.fail{background:linear-gradient(160deg,#f0a090,#b94a3a)}
.d20.crit{background:linear-gradient(160deg,#fff3b0,#e8902e);box-shadow:0 0 12px #e8902e}
.d20.fumble{background:linear-gradient(160deg,#888,#333);color:#eee}
@keyframes diceroll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.d20.rolling{animation:none}}

/* ===== Sockel, Ziehen & Ablegen, Risiko-Raster ===== */
.sockets{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.socket{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gem-pick{font-size:.85rem;max-width:100%}
.drop-ok{outline:2px dashed var(--verdigris);outline-offset:2px}
.drop-over{outline:2px solid var(--brass);background:rgba(207,159,69,.12)!important}
[draggable="true"]{cursor:grab}
.riskgrid{display:flex;flex-direction:column;gap:6px}
.riskrow{display:grid;grid-template-columns:72px repeat(3,minmax(0,1fr));gap:6px;align-items:center}
.risklbl{font-size:.85rem;color:var(--muted)}
.riskrow button{background:#0f0c09;color:var(--fg);border:1px solid var(--line);padding:.35rem .4rem;font-size:.78rem;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riskrow button.lv1[aria-pressed="true"]{border-color:var(--verdigris);color:var(--verdigris)}
.riskrow button.lv2[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}
.riskrow button.lv3[aria-pressed="true"]{border-color:var(--danger);color:var(--danger)}

/* ===== Lebendige Expeditions-Szene ===== */
.scene.big{height:200px}
.scene .strip{position:absolute;left:0;width:200%;height:100%;top:0;pointer-events:none;animation:stripmove 40s linear infinite}
.scene .strip.near{animation-duration:16s}
.scene .strip .sp{position:absolute;bottom:20px;transform:translateX(-50%)}
.scene .strip.far .sp{bottom:28px;opacity:.55;filter:brightness(.7)}
.scene .strip .sp svg{width:100%;height:100%}
.scene .paused{animation-play-state:paused!important}
@keyframes stripmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scene .fx{position:absolute;inset:0;pointer-events:none}
.pt{position:absolute;width:3px;height:3px;border-radius:50%;animation:ptfloat 5s ease-in-out infinite}
.pt.dust{background:rgba(220,190,140,.6);animation-name:ptfall}
.pt.steam{width:10px;height:10px;background:rgba(255,255,255,.18);filter:blur(2px);animation-name:ptrise}
.pt.firefly{background:#e8ff8a;box-shadow:0 0 6px #e8ff8a;animation-name:ptfloat}
.pt.mote{background:#9fe0ff;box-shadow:0 0 5px #5fd3e6;animation-name:ptfloat}
.pt.star{width:2px;height:2px;background:#fff;animation-name:twinkle}
.pt.spark{background:#ffb04a;box-shadow:0 0 4px #ff7d0a;animation-name:ptrise}
@keyframes ptfall{0%{transform:translateY(-20px);opacity:0}20%{opacity:1}100%{transform:translateY(120px);opacity:0}}
@keyframes ptrise{0%{transform:translateY(120px);opacity:0}30%{opacity:1}100%{transform:translateY(-30px) translateX(10px);opacity:0}}
@keyframes ptfloat{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(12px,-14px);opacity:1}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
.critter{position:absolute;right:-60px;bottom:20px;width:44px;height:44px;animation:critterwalk 14s linear infinite}
.critter.fly{bottom:auto;top:24px;width:34px;height:34px;animation-name:critterfly;animation-duration:11s}
.critter svg{width:100%;height:100%}
@keyframes critterwalk{0%{transform:translateX(0)}60%,100%{transform:translateX(-160vw)}}
@keyframes critterfly{0%{transform:translate(0,0)}25%{transform:translate(-30vw,14px)}50%{transform:translate(-60vw,-6px)}75%,100%{transform:translate(-120vw,10px)}}
.scene .walker{z-index:3}
.bubble{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;background:rgba(15,12,9,.9);color:var(--fg);border:1px solid var(--brass);
  border-radius:8px;padding:4px 8px;font-size:.72rem;line-height:1.3;width:max-content;max-width:220px;white-space:normal;text-align:center}
.bubble:empty{display:none}
.bubble.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:translateX(-50%) scale(.6);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.scene .strip,.pt,.critter,.bubble.pop{animation:none!important}}
.walker.l .bubble{left:0;transform:none}
.walker.r .bubble{left:auto;right:0;transform:none}
.walker.l .bubble.pop,.walker.r .bubble.pop{animation-name:popfade}
@keyframes popfade{from{opacity:0}to{opacity:1}}
.riskrow{grid-template-columns:62px repeat(3,minmax(0,1fr))}
.riskrow button{white-space:normal;font-size:.74rem;padding:.3rem .25rem;overflow:visible}

/* v1.0: Völker, Klassen, Tragbarkeit */
.classpick:disabled{opacity:.42;cursor:not-allowed}
.racepick .hero-fig{width:48px;height:48px;flex:none}
.traits{margin:4px 0 0;padding-left:18px;display:grid;gap:2px}
.ico.nowear{filter:grayscale(.7);opacity:.6}
.ico.nowear::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--danger)}

/* v1.1: neue Expeditionen */
.th-huegelland .bg{background-image:radial-gradient(ellipse at 20% 100%,#4f7a3a 0 60px,transparent 61px),radial-gradient(ellipse at 75% 105%,#5a8a42 0 70px,transparent 71px),linear-gradient(180deg,#9fc8e8,#d8e8c0)}
.th-huegelland .ground{background:#4a6a32}
.th-wrack .bg{background-image:repeating-linear-gradient(115deg,transparent 0 14px,rgba(200,210,230,.08) 14px 16px),linear-gradient(180deg,#3a4050,#6a7080)}
.th-totenmoor .bg{background-image:radial-gradient(circle at 25% 55%,rgba(159,232,255,.5) 0 3px,transparent 4px),radial-gradient(circle at 70% 45%,rgba(159,232,255,.4) 0 3px,transparent 4px),linear-gradient(180deg,#1a221c,#2a3a2a)}
.th-totenmoor .ground{background:#1f2a1f}
.th-kristallhoehlen .bg{background-image:radial-gradient(circle at 30% 70%,rgba(160,106,216,.45),transparent 40%),radial-gradient(circle at 75% 40%,rgba(95,211,230,.4),transparent 35%),linear-gradient(180deg,#120c22,#2a1f44)}
.th-kristallhoehlen .ground{background:#2a1f44}
.th-aschewall .bg{background-image:radial-gradient(circle at 70% 35%,#e0533a 0 4px,transparent 6px),repeating-linear-gradient(90deg,#2a2020 0 24px,#1f1818 24px 26px),linear-gradient(180deg,#3a1a14,#140c0a)}
.th-aschewall .ground{background:#1a1212}
.th-elarthiel .bg{background-image:radial-gradient(circle at 80% 20%,#fffbe8 0 10px,transparent 11px),repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.12) 40px 46px),linear-gradient(180deg,#8aa0c8,#e8e0d0)}
.th-elarthiel .ground{background:#a8a090}
.th-himmelsroute .bg{background-image:radial-gradient(ellipse at 20% 80%,#fff 0 30px,transparent 31px),radial-gradient(ellipse at 65% 85%,#eef 0 40px,transparent 41px),linear-gradient(180deg,#3a6aa8,#9ac0e8)}
.th-himmelsroute .ground{background:#cfd8e8}
.th-kristallherz .bg{background-image:radial-gradient(circle at 50% 60%,rgba(240,207,90,.6),transparent 30%),radial-gradient(circle at 50% 60%,rgba(160,106,216,.35),transparent 55%),linear-gradient(180deg,#0a0a1a,#2a1f3a)}
.th-kristallherz .ground{background:#2a1f3a}

/* Hinweis bei neuer Dungeon-Gruppe */
.grouppop{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:12px;align-items:flex-start;max-width:min(360px,calc(100vw - 32px));
  background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:6px;padding:12px 34px 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.grouppop.in{animation:gp-in .35s ease-out}
@keyframes gp-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.grouppop .gp-boss{width:48px;height:48px;flex:none;image-rendering:pixelated}
.grouppop .gp-boss svg{width:100%;height:100%}
.grouppop .gp-x{position:absolute;top:4px;right:6px;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:4px 6px}
@media (max-width:700px){.grouppop{bottom:76px}}
@media (prefers-reduced-motion:reduce){.grouppop.in{animation:none}}

/* Guide */
.guide-sec{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 16px}
.guide-sec>summary{cursor:pointer;list-style:none;padding:10px 0}
.guide-sec>summary::-webkit-details-marker{display:none}
.guide-sec>summary h3{display:inline}
.guide-sec>summary::before{content:'▸';color:var(--brass);margin-right:8px;display:inline-block;transition:transform .2s}
.guide-sec[open]>summary::before{transform:rotate(90deg)}
.guide-sec[open]{padding-bottom:14px}
.guide-sec p{max-width:75ch}
.guide-ol{margin:0;padding-left:20px;display:grid;gap:6px}
.gtable td{vertical-align:top}

/* Reiseberichte und Beute-Vorschau */
.scene.thumb.rep-thumb{width:96px;height:56px;flex:none;border-radius:4px;margin:0}
.matgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.matline{display:flex;align-items:center;gap:8px}
.big-gain{font-size:1.25rem;font-weight:600}
.rep details .logbox{max-height:240px;margin-top:6px}

/* Handwerk: Lernchance und Abklingzeit */
.sktag{font-family:var(--f-mono);font-size:.7rem;padding:1px 6px;border-radius:3px;border:1px solid currentColor}
.sk-orange{color:#ff8c2e}.sk-yellow{color:#e8cf3a}.sk-green{color:#5fc86a}.sk-grey{color:#8d8577}
.cdbadge{font-family:var(--f-mono);font-size:.75rem;color:var(--copper,#c8743a);border:1px solid currentColor;border-radius:999px;padding:2px 10px}

/* Talentbäume mit Reihen */
.talents{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tbranch{display:flex;flex-direction:column;gap:10px}
.tbranch.mine{border-color:var(--brass)}
.ttier{border-top:1px dashed var(--line);padding-top:8px;display:grid;gap:6px}
.ttier.closed{opacity:.55}
.ttier-h{display:flex;justify-content:space-between;align-items:baseline}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
button.tnode{text-align:left;color:var(--fg);background:#0f0c09;border:1px solid var(--line);border-radius:5px;padding:8px;display:flex;flex-direction:column;gap:3px;cursor:pointer;font:inherit}
button.tnode:not(:disabled):hover{border-color:var(--brass)}
button.tnode:disabled{cursor:default}
button.tnode.has{border-color:var(--verdigris)}
button.tnode.full{background:rgba(98,168,148,.12)}
button.tnode.cap{border-style:double;border-width:3px}
button.tnode .rank{font-family:var(--f-mono);font-size:.75rem;color:var(--brass)}

/* Ausrüstung vergleichen */
.tile{position:relative}
.cmpb{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);font-family:var(--f-mono);font-size:.62rem;line-height:1;padding:2px 4px;border-radius:3px;background:#0f0c09;border:1px solid currentColor;white-space:nowrap}
.cmpb.up{color:#5fc86a}.cmpb.down{color:var(--danger)}.cmpb.eq{color:var(--muted)}.cmpb.no{color:var(--danger);opacity:.8}
.tiles .tile{margin-bottom:6px}
.cmpbox{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.cmptable{width:100%;border-collapse:collapse;font-size:.85rem}
.cmptable th,.cmptable td{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.05);text-align:left}
.cmptable th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);font-weight:400}
.cmptable td.num{text-align:right}

/* Dungeon-Weg und Endboss im Abenteuer-Modus */
.bosscard{border-color:rgba(207,90,69,.5)}
.scene.thumb.boss-scene{width:180px;height:120px;flex:none;margin:0;border-radius:6px}
.boss-big{position:absolute;right:50%;transform:translateX(50%);bottom:10px;width:84px;height:84px;image-rendering:pixelated;animation:bossbob 2.4s ease-in-out infinite}
.boss-big svg{width:100%;height:100%}
@keyframes bossbob{50%{transform:translateX(50%) translateY(-4px)}}
.dpath{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.dpath-step{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:90px;max-width:130px;padding:6px;border:1px solid var(--line);border-radius:6px}
.dpath-step.done{opacity:.5}
.dpath-step.next{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.dpath-step.boss{border-color:var(--danger)}
.dpath-spr{position:relative;width:44px;height:44px;image-rendering:pixelated}
.dpath-step.boss .dpath-spr{width:56px;height:56px}
.dpath-spr svg{width:100%;height:100%}
.dpath-ok{position:absolute;right:-4px;bottom:-4px;color:#5fc86a;font-weight:700}
.dpath-arrow{color:var(--muted);font-size:1.4rem}
@media (max-width:600px){.scene.thumb.boss-scene{width:120px;height:90px}.boss-big{width:60px;height:60px}}
@media (prefers-reduced-motion:reduce){.boss-big{animation:none}}

/* Helden ansehen */
.chip.capchip{border-color:var(--brass);color:var(--brass)}

/* Gruppen-Chat */
.chatcard{margin-top:14px}
.chatlog{height:220px;overflow-y:auto;background:#0f0c09;border:1px solid var(--line);border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;margin:8px 0;overscroll-behavior:contain}
.cmsg{font-size:.92rem;line-height:1.35;word-break:break-word}
.cmsg .t{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);margin-right:6px}
.cmsg.me{background:rgba(207,159,69,.07);border-radius:4px;padding:1px 4px}
.cmsg.sys{font-size:.8rem;color:var(--muted);font-style:italic;text-align:center}
.chatform{display:flex;gap:8px}
.chatform input{flex:1;min-width:0}

/* Einstellungen */
.switchrow{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.lrow .switchrow{flex:1}
.switchrow input{position:absolute;opacity:0;width:1px;height:1px}
.switchrow .sw{flex:none;width:40px;height:22px;border-radius:999px;background:#3a3026;border:1px solid var(--line);position:relative;transition:background .2s}
.switchrow .sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switchrow input:checked+.sw{background:rgba(98,168,148,.35);border-color:var(--verdigris)}
.switchrow input:checked+.sw::after{transform:translateX(18px);background:var(--verdigris)}
.switchrow input:focus-visible+.sw{outline:2px solid var(--brass);outline-offset:2px}
input[type=range]{width:100%;accent-color:var(--brass)}
.list.dim{opacity:.5}