:root{--bg:#14171c;--panel:#1d2229;--line:#2b323c;--text:#e6e9ee;--dim:#8a93a0;--gold:#e8b84a;
--r1:#5e98d9;--r2:#8847ff;--r3:#d32ce6;--r4:#eb4b4b;--r5:#e4ae39}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 "Bahnschrift","Segoe UI",Arial,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line)}
h1{font-size:22px;margin:0;font-weight:600}
.bal{font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
main{max-width:1000px;margin:0 auto;padding:24px}
.stage{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:6px;height:170px}
.stage::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--gold);z-index:2}
.strip{display:flex;gap:8px;padding:12px 0;position:absolute;left:0;top:0;will-change:transform}
.card{flex:0 0 140px;height:146px;background:#262d37;border-bottom:4px solid var(--c);padding:10px;display:flex;flex-direction:column;justify-content:flex-end;font-size:13px;line-height:1.3}
.card b{display:block;color:var(--c);font-size:12px;font-weight:600}
.r1{--c:var(--r1)}.r2{--c:var(--r2)}.r3{--c:var(--r3)}.r4{--c:var(--r4)}.r5{--c:var(--r5)}
.idle{display:grid;place-items:center;height:100%;color:var(--dim)}
.actions{display:flex;gap:16px;align-items:center;margin:16px 0 8px}
button{font:inherit;cursor:pointer;border:0;border-radius:4px;padding:10px 20px;background:var(--gold);color:#1a1405;font-weight:600}
button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line);padding:4px 10px;font-weight:400;font-size:13px}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#msg{min-height:1.5em;color:var(--dim)}
h2{font-size:17px;margin:32px 0 12px;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.item{background:var(--panel);border-bottom:4px solid var(--c);padding:10px;font-size:13px}
.item .p{color:var(--dim);margin:4px 0 8px}
.odds{color:var(--dim);font-size:14px}
.odds span{margin-right:16px}
@media (prefers-reduced-motion:reduce){.strip{transition:none!important}}
header h1 a,nav a{color:var(--text);text-decoration:none}
nav a:hover{color:var(--gold)}
nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
header{flex-wrap:wrap;gap:8px}
.btn{display:inline-block;background:var(--gold);color:#1a1405;font-weight:600;padding:10px 20px;border-radius:4px;text-decoration:none}
nav a.btn{color:#1a1405}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--line)}
form.box{max-width:380px;display:grid;gap:12px}
label{display:grid;gap:4px;font-size:14px;color:var(--dim)}
input,textarea{font:inherit;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:10px}
input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.err{color:#ff7b7b;margin:0}.ok{color:#7bd88f}
.hero p{max-width:55ch;color:var(--dim)}
.news article{border-top:1px solid var(--line);padding:16px 0}
.news time{color:var(--dim);font-size:13px}
.news p{max-width:70ch;margin:8px 0 0}
.role{font-size:11px;padding:1px 7px;border-radius:3px;font-weight:600;vertical-align:middle;color:#10141a;background:#5b6573}
.role-premium{background:var(--gold)}.role-support{background:var(--r1)}
.role-mod{background:var(--r3)}.role-admin{background:var(--r4)}
.board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.board th,.board td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.board th{color:var(--dim);font-weight:400;font-size:14px}
.board tr.me td{background:#252c36}
.daily{margin-bottom:16px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{background:var(--panel);border:1px solid var(--line);padding:8px 4px;text-align:center;font-size:13px;color:var(--dim)}
.day b{display:block;color:var(--text);font-weight:600}
.day.done{border-color:#6b5a28;color:var(--gold)}
.day.next{background:#2a2412;border-color:var(--gold);color:var(--gold)}
.dailyrow{display:flex;gap:16px;align-items:center;margin-top:10px;flex-wrap:wrap}

/* ===== Pixel-Look ===== */
@font-face{font-family:"Pixel";src:url(assets/fonts/pixel.woff2) format("woff2");font-display:swap}
body{font-family:"Pixel","Courier New",monospace;font-weight:bold;background-size:cover;background-attachment:fixed;image-rendering:pixelated}
*{border-radius:0!important}
main{background:rgba(20,23,28,.85);min-height:calc(100vh - 70px)}
.stage,.item,.day,input,textarea,select{border:3px solid #000}
button{border:0;box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.3),0 0 0 3px #000}
button:active:not(:disabled){transform:translateY(3px)}
button.ghost{box-shadow:0 0 0 2px var(--line)}
[hidden]{display:none!important}
.stage{height:200px;background-size:cover}
.card{flex:0 0 140px;height:176px;justify-content:flex-start;gap:2px;border:3px solid #000;border-bottom:6px solid var(--c)}
.pic{height:80px;width:100%;background:color-mix(in srgb,var(--c) 20%,#161b21);display:grid;place-items:center;margin-bottom:6px}
.pic{position:relative;overflow:hidden}
.pic img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;image-rendering:pixelated}
.casebtn .pic{height:96px;background:none!important}
.pic:empty::after{content:"?";color:var(--c);font-size:30px}
.reveal{animation:fade .2s ease-out;position:fixed;inset:0;background:rgba(0,0,0,.82);display:grid;place-items:center;z-index:10;padding:16px}
.reveal .inner{text-align:center}
.card.big{width:260px;height:auto;padding:16px;font-size:16px;margin:0 auto 16px;border-bottom-width:8px;animation:pop .35s cubic-bezier(.34,1.56,.64,1) both}
.card.big .pic{height:160px}
.card.big .p{color:var(--gold);margin-top:6px}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:20}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:15}
#flash.go{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:.7}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.reveal,#flash.go,.card.big{animation:none}}

.collect{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--panel);border:3px solid #000;padding:12px;margin-bottom:16px}
.collect .bar{flex:1;min-width:120px;height:14px;background:#0d1014;border:3px solid #000}
.collect .bar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:8px}
.casebtn{--c:var(--gold);background:var(--panel);color:var(--text);border:3px solid #000;box-shadow:none;padding:8px;text-align:center;display:grid;gap:4px}
.casebtn span{color:var(--gold);font-size:13px}
.casebtn.sel{border-color:var(--gold)}
details{margin:8px 0}summary{cursor:pointer;color:var(--dim)}
details .grid{margin-top:8px}

.player{display:flex;gap:10px;align-items:center}
.coins{display:flex;align-items:center;gap:6px}
.coin{display:inline-block;width:20px;height:20px;border-radius:50%;background:#e8b52a}
.coinimg{width:26px;height:26px;object-fit:contain}
.avatar,.ico{display:none}
.bal::after{content:" Münzen"}

/* Download-Seite für Handys */
body.gate{display:grid;place-items:center;min-height:100vh;padding:16px}
.gatebox{max-width:420px;width:100%;text-align:center;display:grid;gap:14px;padding:24px;background:var(--panel);border:3px solid var(--line)}
.gatebox a:not(.btn){color:var(--gold)}
.btn.big{padding:16px 20px;font-size:18px}

/* Spielen: Kistenliste, Optionen, Ergebnisse */
.cases.big{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.cases.big .casebtn{padding:12px}
.cases.big .casebtn .pic{height:140px}
.controls{display:grid;gap:14px;margin:12px 0;padding:14px;background:var(--panel);border:3px solid var(--line)}
.ctl{display:grid;gap:6px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label.inline{display:flex;align-items:center;gap:8px;color:var(--text)}
label.inline input[type=number]{width:110px;padding:8px}
label.inline input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold)}
.pill{background:var(--panel);color:var(--text);padding:8px 14px}
.pill.on{background:var(--gold);color:#1a1405}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:8px 0}
.results .card{flex:none;width:auto}
.sold{display:block;font-style:normal;color:var(--gold);font-size:12px;margin-top:2px}
.pop{animation:popin .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popin{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}
nav a.ready::after{content:"●";color:#7bd88f;margin-left:6px}

/* Dreh-Fenster: Pop-up in der Mitte, Hintergrund unscharf */
.spinmodal{position:fixed;inset:0;z-index:12;display:grid;place-items:center;padding:16px;
  background:rgba(3,10,16,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade .2s ease-out}
.spinbox{width:min(960px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;gap:12px;padding:16px;
  background:var(--panel);border:3px solid var(--line);animation:pop .3s cubic-bezier(.34,1.56,.64,1) both}
.spinhead{display:flex;justify-content:space-between;align-items:center;font-size:20px;color:var(--gold)}
.spinres{min-height:70px;display:grid;align-content:center;gap:6px}
.resrow{display:flex;gap:14px;align-items:center}
.resrow .pic{width:80px;flex:none;margin:0}
.resrow .p{color:var(--gold)}
.spinbar{justify-content:center}
@media (prefers-reduced-motion:reduce){.spinmodal,.spinbox{animation:none}}

/* Event-Leiste */
.evbar{display:flex;justify-content:center;text-align:center;padding:10px 14px;margin-bottom:14px;border:3px solid var(--line);background:var(--panel);color:var(--dim);font-weight:700}
.evbar.on{border-color:var(--gold);color:#fff;background:linear-gradient(#7a5a12,#54400a);animation:evpulse 1.4s ease-in-out infinite alternate}
@keyframes evpulse{from{box-shadow:0 0 0 0 rgba(245,197,66,0)}to{box-shadow:0 0 18px 2px rgba(245,197,66,.55)}}
@media (prefers-reduced-motion:reduce){.evbar.on{animation:none}}
.evtag{display:inline-block;font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;margin-left:6px;background:var(--gold);color:#1a1405}
.casebtn s{color:var(--dim)}

/* Handelshalle */
.hall{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.chatbox{display:grid;gap:8px;padding:12px;background:var(--panel);border:3px solid var(--line);position:sticky;top:12px}
.chat{height:420px;overflow-y:auto;display:grid;align-content:start;gap:4px;padding:6px;background:rgba(0,0,0,.25);font-size:14px;word-break:break-word}
.msg .mini{padding:0 6px;min-height:0;margin-left:6px;font-size:11px}
.nm-admin{color:#eb4b4b}.nm-mod{color:#d32ce6}.nm-support{color:#5e98d9}.nm-premium{color:var(--gold)}
@media (max-width:900px){.hall{grid-template-columns:1fr}.chatbox{position:static}.chat{height:300px}}

/* ---- Belohnungen-Leiste rechts (aufklappbar) ---- */
.rw{position:fixed;right:0;top:110px;z-index:8;display:flex;align-items:flex-start;transform:translateX(300px);transition:transform .25s ease}
.rw.open{transform:none}
.rwtab{writing-mode:vertical-rl;padding:14px 8px;font-size:15px;letter-spacing:.5px;position:relative}
.rwdot{position:absolute;top:6px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:#7bd88f;box-shadow:0 0 8px #7bd88f}
.rwpanel{width:300px;max-height:calc(100vh - 130px);overflow-y:auto;display:grid;gap:10px;padding:10px;background:var(--panel);border:3px solid var(--line)}
.rwpanel .collect{flex-direction:column;align-items:stretch;gap:6px;margin:0}
.rwpanel .daily{display:grid;gap:8px;margin:0}
.rwpanel .days{grid-template-columns:repeat(4,1fr);gap:4px}
.rwpanel .day{padding:5px 2px;font-size:11px}
@media (prefers-reduced-motion:reduce){.rw{transition:none}}
@media (max-width:500px){.rw{top:90px;transform:translateX(min(300px,85vw))}.rwpanel{width:min(300px,85vw)}}

/* ---- Inventar: Verkaufsleiste, Sperren ---- */
.sellbar{margin:10px 0}
.confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;border:3px solid var(--gold)}
.result{padding:10px;border:3px solid #7bd88f;color:#fff}
.item.locked{opacity:.8}.item.dim{opacity:.55}
.item .row{gap:6px}

/* ---- Handelshalle ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pickgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:340px;overflow-y:auto;padding:4px}
.pickitem{cursor:pointer}
.pickitem.sel{outline:4px solid var(--gold);outline-offset:-2px}
.pickitem.locked{cursor:not-allowed}
.diff.good,.odds.good{color:#7bd88f}.diff.warn{color:#ff9d6b}
#l_want{width:100%}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;padding:10px 18px;background:var(--panel);border:3px solid var(--gold);color:#fff;font-weight:700;max-width:90vw}
.toast.err{border-color:#eb4b4b}

/* Banner auf Event-Items */
.card,.item{position:relative}
.evribbon{position:absolute;top:6px;left:0;z-index:2;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.5px;line-height:1;
  padding:3px 8px 3px 6px;background:var(--gold);color:#1a1405;box-shadow:0 2px 0 rgba(0,0,0,.45)}

/* ---- Level und Aufträge ---- */
.lvl{display:flex;align-items:center;gap:8px;margin:2px 0}
.lvl span{font-size:13px;font-weight:800;color:var(--gold)}
.xp{flex:1;height:8px;background:#0d1014;border:2px solid #000;overflow:hidden;min-width:60px}
.xp i{display:block;height:100%;background:linear-gradient(#7be0ff,#2a86ae);transform-origin:left;transition:transform .5s ease}
.lvlpanel{margin:12px 0}
.lvlbig{font-size:54px;line-height:1;font-weight:900;color:var(--gold);min-width:78px;text-align:center;text-shadow:0 3px 0 #000}
.bar{height:14px;background:#0d1014;border:3px solid #000;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(#ffe27a,#e8931a);transform-origin:left;transition:transform .4s ease}
.xpbig{height:20px}.xpbig i{background:linear-gradient(#7be0ff,#2a86ae)}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mcard{display:grid;gap:8px;align-content:start;padding:12px;background:var(--panel);border:3px solid var(--line)}
.mcard.active{border-color:var(--gold);margin-bottom:10px}
.mcard.done{border-color:#7bd88f}
.mhead{display:flex;justify-content:space-between;gap:8px;align-items:center}
.chip{display:inline-block;padding:2px 8px;font-size:12px;font-weight:800;background:#134868;color:#cfeaff}
.chip.gold{background:#7a5a12;color:#ffe9a8}
.tier{font-size:11px;font-weight:800;padding:2px 8px;background:#2a6585;color:#fff}
.tier.t1{background:#8847ff}.tier.t2{background:#c0392b}
.unlocks{display:grid;gap:6px;margin-bottom:20px}
.unl{padding:8px 12px;border:2px solid var(--line);color:var(--dim)}.unl.ok{border-color:#7bd88f;color:var(--text)}
.mission{display:grid;gap:6px}
.rwpanel .mission .bar{height:10px}
.lockov{position:absolute;top:8px;left:8px;right:8px;z-index:2;font-style:normal;font-size:12px;font-weight:800;text-align:center;padding:4px;background:rgba(0,0,0,.75);color:#fff}
.casebtn{position:relative}.casebtn.lockedcase .pic{opacity:.45}
.ntf{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:40;padding:12px 22px;background:var(--panel);border:3px solid var(--gold);color:#fff;font-weight:800;max-width:92vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ntf.show{animation:ntfin .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes ntfin{from{transform:translate(-50%,-30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.ntf.show{animation:none}.xp i,.bar i{transition:none}}

/* Held, Ausrüstung, Monsterkämpfe */
.ntf{pointer-events:none}
.herobox{margin:12px 0;display:grid;gap:10px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.slot{display:grid;gap:4px;justify-items:center;text-align:center;padding:8px;background:#0d1014;border:3px solid var(--line)}
.slot.lock{opacity:.6}
.slot.r1{border-color:#5b9bd5}.slot.r2{border-color:#4b69ff}.slot.r3{border-color:#8847ff}.slot.r4{border-color:#d32ce6}.slot.r5{border-color:#eb4b4b}
.slotbox{width:100%;max-width:110px;aspect-ratio:1;display:grid;place-items:center;font-size:28px;color:var(--dim)}
.slotbox .pic{width:100%;margin:0}
.slotbox.empty{border:2px dashed var(--line);font-size:14px}
.slotn{font-size:12px;font-weight:800}
.pw{color:var(--gold);font-weight:800}
.mrow{display:flex;gap:12px;align-items:center}
.mcol{display:grid;gap:6px;min-width:0;justify-items:start}
.mpic{width:84px;height:84px;flex:none;display:grid;place-items:center;font-size:52px;background:#0d1014;border:3px solid var(--line);overflow:hidden}
.mpic img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.chance{font-size:13px;font-weight:700}
.chance.cg b{color:#7bd88f}.chance.cy b{color:#ffd24a}.chance.cr b{color:#ff6b5e}
.rwmon{display:flex;align-items:center;gap:8px;font-weight:800}
.rwmon .mpic{width:40px;height:40px;font-size:24px;border-width:2px}
.fightbox{width:min(720px,100%)}
.arena{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.fighter{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;will-change:transform}
.fighter .mpic{width:120px;height:120px;font-size:72px}
.vs{font-size:26px;font-weight:900;color:var(--gold);text-shadow:0 3px 0 #000}
.hpbar{width:100%;height:16px}
.hpbar i{background:linear-gradient(#7bd88f,#2f9e57);transition:transform .45s ease}
.hpbar.mon i{background:linear-gradient(#ff8a7a,#c0392b)}
.dmg{position:absolute;top:30%;left:50%;font-style:normal;font-weight:900;font-size:28px;color:#ff5a4d;text-shadow:0 2px 0 #000;pointer-events:none;animation:dmgup .9s ease-out forwards}
.dmg.mon{color:#ff5a4d}.dmg.hero{color:#ffd24a}
@keyframes dmgup{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-60px);opacity:0}}
.fightlog{text-align:center;min-height:20px}
.fres{display:grid;gap:10px;justify-items:center;text-align:center;padding:12px}
.fres.win h3{color:#7bd88f}.fres.lose h3{color:#ff6b5e}
@media (max-width:560px){.fighter .mpic{width:84px;height:84px;font-size:48px}.arena{gap:6px}}
@media (prefers-reduced-motion:reduce){.dmg{animation:none}.hpbar i{transition:none}}
.pemoji{font-size:44px;display:grid;place-items:center;height:100%}.chip.el{background:#2b3a55}

/* Inventar im Shakes-&-Fidget-Stil: links Held, rechts Rucksack */
.invwrap{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:14px;align-items:start}
@media (max-width:900px){.invwrap{grid-template-columns:1fr}}
.charpanel,.backpack{display:grid;gap:10px;padding:12px;background:var(--panel);border:3px solid var(--line)}
.chartop{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:18px;color:var(--gold)}
.doll{display:grid;grid-template-columns:1fr 1.3fr 1fr;grid-template-areas:"w h r" "p h .";gap:8px;align-items:start}
#s1{grid-area:w}#s3{grid-area:r}#s2{grid-area:p}.dhero{grid-area:h}
.dhero{position:relative;align-self:center}
.dhero .mpic{width:100%;height:auto;aspect-ratio:1;font-size:84px}
.helem{position:absolute;right:4px;bottom:4px;font-size:24px}
.dslot{display:grid;gap:3px;justify-items:center;text-align:center;padding:6px;background:#0d1014;border:3px solid var(--line);transition:border-color .15s,transform .15s}
.dslot .dl{font-size:11px;color:var(--dim);font-weight:800}
.dslot .dbox{width:100%;aspect-ratio:1;display:grid;place-items:center;font-size:26px;color:var(--dim);border:2px dashed var(--line);cursor:default}
.dslot[class*=" r"] .dbox{border:none;cursor:grab}
.dslot .dbox .pic{height:100%;margin:0}
.dslot.lock{opacity:.6}
.dslot.over{border-color:var(--gold);transform:scale(1.04)}
.dslot .slotn{font-size:11px;font-weight:800;line-height:1.2}
.dslot.r1{border-color:#5b9bd5}.dslot.r2{border-color:#4b69ff}.dslot.r3{border-color:#8847ff}.dslot.r4{border-color:#d32ce6}.dslot.r5{border-color:#eb4b4b}
.bpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:420px;overflow-y:auto;padding:4px;background:#0d1014;border:3px solid var(--line);min-height:120px;align-content:start}
.bpgrid.over{border-color:var(--gold)}
.cell{position:relative;aspect-ratio:1;padding:0;background:#161b21;border:3px solid var(--c);box-shadow:none;cursor:pointer;display:block}
.cell .pic{height:100%;margin:0}
.cell.sel{outline:3px solid var(--gold);outline-offset:1px}
.cell.eq{box-shadow:inset 0 0 0 2px var(--gold)}
.cell .tag{position:absolute;left:2px;top:2px;font-style:normal;font-size:12px;background:rgba(0,0,0,.7);padding:0 3px;border-radius:3px}
.cell .tag.lk{left:auto;right:2px}
.detail{display:grid;gap:10px;padding:10px;background:#0d1014;border:3px solid var(--line);min-height:90px}
.drow{display:flex;gap:12px;align-items:center}
.dpic{width:96px;flex:none}.dpic .pic{height:96px;margin:0}
.dtext{display:grid;gap:3px}
.rname{color:var(--c)}
.sellbar summary{cursor:pointer;font-weight:800;color:var(--gold);margin-bottom:6px}
.sellbar{display:block}
@media (prefers-reduced-motion:reduce){.dslot{transition:none}}

/* Profilbilder, Profil, Gilde, Arena */
.av{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border:2px solid var(--gold);border-radius:6px;background:#0d1014 center/cover no-repeat;color:var(--gold);font-weight:900;font-size:14px;vertical-align:middle;image-rendering:auto}
.av.big{width:112px;height:112px;font-size:44px;border-width:3px;border-radius:10px}
.av.sm{width:24px;height:24px;font-size:11px;border-width:1px}
.plink{color:inherit;text-decoration:none;font-weight:800}.plink:hover{color:var(--gold)}
.profhead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px;background:var(--panel);border:3px solid var(--line);margin-bottom:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.stat{padding:10px;background:#0d1014;border:2px solid var(--line);text-align:center}
.stat b{display:block;font-size:20px;color:var(--gold)}
.modbox{border:3px solid #c0392b;padding:12px;background:#2a1313;display:grid;gap:8px;margin:12px 0}
.modbox input,.modbox select{font:inherit;padding:8px;background:var(--panel);color:var(--text);border:2px solid var(--line)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.tabs button.on{background:var(--gold);color:#3b1a05}
.gcard{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;background:var(--panel);border:3px solid var(--line);margin:6px 0}
.tag4{display:inline-block;padding:1px 6px;margin-right:6px;background:#2a6585;color:#fff;font-weight:900;font-size:12px;border-radius:4px}
.mlist{display:grid;gap:6px}
.mrow2{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px;background:#0d1014;border:2px solid var(--line)}
.gchat{height:260px;overflow-y:auto;padding:8px;background:#0d1014;border:3px solid var(--line);display:grid;gap:4px;align-content:start}
.gchat p{margin:0;font-size:14px;word-break:break-word}.gchat .t{color:var(--dim);font-size:11px;margin-right:6px}
.opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.opp{display:grid;gap:8px;justify-items:center;text-align:center;padding:14px;background:var(--panel);border:3px solid var(--line)}
.opp .av.big{width:96px;height:96px}
.oppnpc .av.big{font-size:56px}
.logrow{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-left:4px solid var(--line);background:#0d1014;margin:4px 0;font-size:14px}
.logrow.win{border-color:#7bd88f}.logrow.lose{border-color:#ff6b5e}
.ptsup{color:#7bd88f;font-weight:800}.ptsdn{color:#ff6b5e;font-weight:800}

.ondot{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:#7bd88f;box-shadow:0 0 6px #7bd88f}

.arena{position:relative}
.thrown{position:absolute;left:0;top:0;width:64px;height:64px;z-index:4;pointer-events:none;display:grid;place-items:center;font-size:44px;will-change:transform}
.thrown img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.6))}
.avimg{image-rendering:auto!important}

/* Rang-Schilder (eckig) */
span.role{text-shadow:none!important;color:#fff;letter-spacing:.5px;text-transform:uppercase;font-weight:800;border-radius:0!important;padding:2px 8px;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.role-premium{color:#3b1a05}
/* Seltenheits-Schilder auf Items */
.rtag{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;font-style:normal;font-weight:900;font-size:9px;letter-spacing:.6px;line-height:1;padding:3px 2px;background:var(--c);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 100%,0 100%);white-space:nowrap;overflow:hidden}
.r5 .rtag{color:#3b1a05;text-shadow:none}
.cell .rtag{font-size:7px;padding:2px 0}
.dpic .rtag,.slotbox .rtag,.dbox .rtag{font-size:8px}

/* größerer Kampf-Bildschirm */
.fightbox{width:min(1100px,100%)!important;padding:22px!important;gap:16px!important}
.fightbox .arena{gap:24px;padding:10px 0}
.fighter .mpic{width:240px!important;height:240px!important;font-size:130px!important}
.fighter b{font-size:22px}
.hpbar{height:24px!important}
.hptxt{font-weight:800;font-size:15px}
.vs{font-size:48px!important}
.dmg{font-size:44px!important}
.thrown{width:96px!important;height:96px!important;font-size:64px!important}
.fres h3{font-size:34px}
@media (max-width:820px){.fighter .mpic{width:130px!important;height:130px!important;font-size:70px!important}.vs{font-size:30px!important}}
@media (max-width:480px){.fighter .mpic{width:92px!important;height:92px!important;font-size:50px!important}}
/* Training im Inventar */
.statbox{display:grid;gap:8px;margin-top:10px;padding:10px;background:#0d1014;border:3px solid var(--line)}
.strow{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.strow:first-child{border-top:0}
.sti{font-size:26px}.stx{flex:1}
.strow button .odds{color:#3b1a05;font-weight:800}

/* Kistenansicht: aufgeräumt */
.oddrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.oddchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:#0d1014;border:2px solid var(--c);font-size:13px;font-weight:700;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.oddchip i{width:9px;height:9px;background:var(--c);display:inline-block;transform:rotate(45deg)}
.oddchip b{color:var(--c)}
.openpanel{display:grid;gap:10px;padding:16px;margin:12px 0;background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame,#b98b2f);border-radius:12px}
.opmain{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.seg{display:flex}
.seg button{border-radius:0!important;min-width:64px;font-size:18px;box-shadow:none;margin:0 -2px 0 0;background:linear-gradient(#17506d,#0e3550);color:var(--text);border:3px solid var(--ink,#06131c)}
.seg button:first-child{border-radius:8px 0 0 8px!important}.seg button:last-child{border-radius:0 8px 8px 0!important}
.seg button.on{background:linear-gradient(#ffcf4a,#e8931a);color:#3b1a05}
.bigopen{flex:1;min-width:220px;font-size:20px;padding:14px 20px}
.opmsg{display:flex;gap:12px;flex-wrap:wrap;min-height:0}
.opmsg:empty,.opmsg:not(:has(*)){display:none}
.opopts summary{cursor:pointer;font-weight:800;color:var(--gold)}
.optgrid{display:grid;gap:12px;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fchip{padding:6px 12px;font-size:13px;background:#0d1014;color:var(--c);border:2px solid var(--c);box-shadow:none;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);border-radius:0!important}
.fchip.on{background:var(--c);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.fchip.r5.on{color:#3b1a05;text-shadow:none}
.opmsg{gap:0 12px}.opmsg span:empty{display:none}.opmsg:not(:has(span:not(:empty))){display:none}
.optgrid #mute{justify-self:start}
.dmg.crit{font-size:60px!important;color:#ffb21a;text-shadow:0 0 12px #ff6a00,0 3px 0 #000;white-space:nowrap}

/* Event-Kalender */
.calnav{display:flex;align-items:center;gap:12px;margin:10px 0}
.calmonth{font-size:20px;min-width:170px;text-align:center;color:var(--gold)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calhead{text-align:center;font-weight:800;color:var(--dim);padding:4px 0}
.calcell{position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:2px;min-height:92px;padding:6px 4px;background:#0d1014;border:3px solid var(--line);border-radius:8px;color:var(--text);cursor:pointer;box-shadow:none;text-shadow:none;transition:transform .15s,border-color .15s,background .15s}
.calcell.empty{visibility:hidden;border:0;background:none}
.calcell:hover{transform:translateY(-3px);border-color:var(--gold)}
.calcell .cn{justify-self:start;font-weight:900;font-size:13px;color:var(--dim)}
.calcell .ci{font-size:28px}
.calcell .ct{font-size:11px;line-height:1.15;text-align:center;font-weight:700}
.calcell.k-sale{background:#0e2a3a}.calcell.k-boom{background:#2a2a0e}.calcell.k-special{background:#2a0e3a}.calcell.k-mega{background:linear-gradient(135deg,#3a2a0e,#3a0e2a)}
.calcell.past{opacity:.55}
.calcell.sel{outline:3px solid var(--gold);outline-offset:1px}
.calcell.today{border-color:var(--gold)}
.caldetail{margin-top:14px;padding:16px;background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame,#b98b2f);border-radius:12px;display:grid;gap:10px}
.dhead{display:flex;gap:14px;align-items:center}.dic{font-size:44px}
.evgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.item.evlive{outline:3px solid var(--gold);outline-offset:-3px}
.evbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;text-decoration:none;color:inherit}
.evbar .evic{font-size:22px}.evbar .evleft{font-weight:800;color:var(--gold)}.evbar .evnext{margin-left:auto;font-size:12px;opacity:.8}
@media (max-width:640px){.calcell{min-height:64px}.calcell .ct{display:none}.calcell .ci{font-size:22px}}

/* Schnellverkauf */
.quicksell{display:grid;gap:10px;margin-top:14px;padding:14px;background:#0d1014;border:3px solid var(--line);border-radius:10px}
.qshead{display:grid;gap:2px}
.qsrows{display:grid;gap:6px}
.qsrow{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;text-align:left;padding:8px 12px;background:#161b21;color:var(--text);border:3px solid color-mix(in srgb,var(--c) 55%,#161b21);border-radius:8px;box-shadow:none;text-shadow:none;transition:transform .12s,background .15s,border-color .15s}
.qsrow b{color:var(--c)}
.qsrow:hover:not(:disabled){transform:translateX(4px);border-color:var(--c)}
.qsrow:disabled{opacity:.4;cursor:not-allowed}
.qsrow.on{background:color-mix(in srgb,var(--c) 22%,#161b21);border-color:var(--c)}
.qschk{width:24px;height:24px;display:grid;place-items:center;border:2px solid var(--c);border-radius:6px;font-weight:900;color:#fff;background:#0d1014}
.qsrow.on .qschk{background:var(--c)}
.qsn{font-size:13px;color:var(--dim)}.qsv{font-weight:800;color:var(--gold);min-width:84px;text-align:right}
.qssum{font-size:15px}.gold{color:var(--gold)}
.qsact button#sellall{width:100%;font-size:17px;padding:12px}
.qsconfirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;background:#2a1010;border:2px solid #c0392b;border-radius:8px}
.qsconfirm span{flex:1 1 100%}
.result.pop{animation:popin .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes popin{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== Animationen (nur wenn der Nutzer keine reduzierten Bewegungen wünscht) ===== */
@media (prefers-reduced-motion:no-preference){
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes popIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
  @keyframes glowGold{0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,0)}50%{box-shadow:0 0 14px 2px rgba(245,197,66,.55)}}
  @keyframes glowRed{0%,100%{box-shadow:0 0 0 0 rgba(235,75,75,0)}50%{box-shadow:0 0 14px 2px rgba(235,75,75,.55)}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  @keyframes sheen{from{background-position:-200% 0}to{background-position:200% 0}}
  @keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(245,197,66,.6)}100%{box-shadow:0 0 0 12px rgba(245,197,66,0)}}
  @keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
  @keyframes coinSpin{0%,80%,100%{transform:rotateY(0)}90%{transform:rotateY(180deg)}}

  /* Seiten und Karten erscheinen nacheinander */
  main>*{animation:fadeUp .45s ease both}
  main>*:nth-child(2){animation-delay:.05s}main>*:nth-child(3){animation-delay:.1s}main>*:nth-child(4){animation-delay:.15s}
  main>*:nth-child(5){animation-delay:.2s}main>*:nth-child(n+6){animation-delay:.25s}
  .grid>*,.cases>*,.bpgrid>*,.opps>*,.mgrid>*,.calgrid>*,.stats>*,.slots>*{animation:popIn .4s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(var(--i,0)*28ms)}
  .grid>*:nth-child(1),.cases>*:nth-child(1){--i:0}.grid>*:nth-child(2),.cases>*:nth-child(2){--i:1}.grid>*:nth-child(3),.cases>*:nth-child(3){--i:2}
  .grid>*:nth-child(4),.cases>*:nth-child(4){--i:3}.grid>*:nth-child(5),.cases>*:nth-child(5){--i:4}.grid>*:nth-child(6),.cases>*:nth-child(6){--i:5}
  .grid>*:nth-child(n+7),.cases>*:nth-child(n+7){--i:6}
  .stats>*:nth-child(2){--i:2}.stats>*:nth-child(3){--i:4}.stats>*:nth-child(4){--i:6}.stats>*:nth-child(5){--i:8}
  .bpgrid>*:nth-child(-n+30){animation-delay:calc(var(--i,0)*18ms)}
  /* Rucksack-Zellen erscheinen nicht jedes Mal neu beim Auswählen */
  .bpgrid.static>*{animation:none}

  /* Menü, Knöpfe, Karten reagieren */
  nav a{transition:transform .15s,filter .15s}
  nav a:hover{transform:translateX(4px);filter:brightness(1.15)}
  nav a.on{animation:pulseRing 2.4s ease-out infinite}
  button:not(:disabled),.btn{transition:transform .12s,filter .15s}
  button:not(:disabled):hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
  button:not(:disabled):active,.btn:active{transform:translateY(1px) scale(.97)}
  .card,.item,.mcard,.opp,.casebtn,.cell,.gcard{transition:transform .18s,box-shadow .18s}
  .item:hover,.card:hover,.mcard:hover,.opp:hover,.casebtn:hover,.cell:hover,.gcard:hover{transform:translateY(-4px)}
  .casebtn img,.casebtn .pic{transition:transform .25s}
  .casebtn:hover img,.casebtn:hover .pic{transform:scale(1.06) rotate(-1.5deg)}

  /* Seltenes leuchtet */
  .item.r4,.cell.r4,.card.r4{animation-name:popIn,glowRed;animation-duration:.4s,2.6s;animation-iteration-count:1,infinite;animation-delay:calc(var(--i,0)*28ms),.6s}
  .item.r5,.cell.r5,.card.r5{animation-name:popIn,glowGold;animation-duration:.4s,2.2s;animation-iteration-count:1,infinite;animation-delay:calc(var(--i,0)*28ms),.6s}
  .r5 .rtag{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);background-size:200% 100%;animation:sheen 2.4s linear infinite}
  .dslot.r4,.dslot.r5,.slot.r4,.slot.r5{animation:glowRed 2.6s ease-in-out infinite}.dslot.r5,.slot.r5{animation-name:glowGold}

  /* Lebendige Details */
  .bar i{position:relative;overflow:hidden}
  .bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 70%);background-size:200% 100%;animation:sheen 2.8s linear infinite;pointer-events:none}
  .bar i,.hpbar i{transition:transform .5s ease}
  .dhero .mpic{animation:bob 3.2s ease-in-out infinite}
  .fighter .mpic{animation:breathe 2.4s ease-in-out infinite}
  .calcell.today{animation:pulseRing 2s ease-out infinite}
  .calcell.k-mega .ci,.calcell.k-special .ci{animation:bob 2.4s ease-in-out infinite}
  .coin,.coinimg{animation:coinSpin 5s ease-in-out infinite}
  .evbar.on{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);background-size:200% 100%;animation:sheen 5s linear infinite}
  .evbar .evic{animation:bob 2s ease-in-out infinite}
  .chance,.chip{animation:fadeUp .35s ease both}
  .strow{animation:slideIn .4s ease both}.strow:nth-child(2){animation-delay:.07s}.strow:nth-child(3){animation-delay:.14s}
  .logrow,.mrow2{animation:slideIn .35s ease both}
  .ptsup{animation:bob 1.6s ease-in-out infinite}
  h2,h3{animation:slideIn .4s ease both}
  .spinbox{animation:popIn .3s cubic-bezier(.2,1.3,.4,1) both}
  .qsrow.on .qschk{animation:popIn .25s ease both}
  .quicksell .qssum b.gold{display:inline-block;animation:popIn .3s ease both}
}
@media (prefers-reduced-motion:no-preference){
  .bpgrid.static>.cell.r4{animation:glowRed 2.6s ease-in-out infinite}
  .bpgrid.static>.cell.r5{animation:glowGold 2.2s ease-in-out infinite}
}
.odds a,.evnote a{color:var(--gold);font-weight:700}

/* ---- Gilden-Chat rechts (neben Belohnungen) ---- */
.gc{position:fixed;right:0;top:270px;z-index:9;display:flex;align-items:flex-start;transform:translateX(300px);transition:transform .25s ease,right .25s ease}
.gc.open{transform:none}
.gcpanel{width:300px;display:grid;gap:8px;grid-template-rows:auto auto 1fr auto auto;height:min(520px,calc(100vh - 300px))}
.gcpanel .gchat{overflow-y:auto;min-height:0;background:#0d1014;border:2px solid var(--line);padding:6px;display:grid;gap:3px;align-content:start}
.gcpanel .gchat p{margin:0;font-size:13px;word-break:break-word}
.gcpanel .gchat .t{color:var(--dim);font-size:11px;margin-right:6px}
.gcpanel .gchat .mine b{color:var(--gold)}
.gcpanel .gchat a{color:var(--gold)}
.gctab{background:linear-gradient(#2a86ae,#145276)}
@media (prefers-reduced-motion:reduce){.gc{transition:none}}
@media (max-width:500px){.gc{top:230px;transform:translateX(min(300px,85vw))}.gcpanel{width:min(300px,85vw)}}

/* ---- Verwaltung ---- */
.adminstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0}
.adminstats .stat{padding:8px}
.cmdbar{display:flex;gap:8px;align-items:center;margin:10px 0;padding:8px 10px;background:#0d1014;border:3px solid var(--gold);border-radius:10px}
.cmdbar input{flex:1;min-width:0;border:0;background:transparent;font-family:ui-monospace,Consolas,monospace}
.cmdslash{color:var(--gold);font-weight:900;font-size:20px}
.cmdhelp{display:grid;gap:4px;padding:10px 14px;background:#0d1014;border:2px solid var(--line);border-radius:8px;font-size:13px;margin-bottom:8px}
.cmdhelp code{color:var(--gold);margin-right:8px}
.toastline{min-height:24px;margin:4px 0}
.toastline.pop{animation:popin .35s ease}
.admtabs button{padding:10px 16px}
.admtabs button.on{background:var(--gold);color:#3b1a05}
.admgrid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:14px;align-items:start}
.admlist,.admdetail{display:grid;gap:10px;padding:12px;background:#0d1014;border:3px solid var(--line);border-radius:10px}
.admdetail label{display:grid;gap:4px}
.plist{display:grid;gap:4px;max-height:520px;overflow-y:auto}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-align:left;padding:6px 8px;background:#161b21;color:var(--text);border:2px solid var(--line);border-radius:8px;box-shadow:none;text-shadow:none}
.prow:hover{border-color:var(--gold)}.prow.sel{border-color:var(--gold);background:#1d2a1d}
.prow .pn{font-weight:700}
.phead{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}.phead>div{flex:1;min-width:220px}
.acard{display:grid;gap:8px;padding:10px;background:#161b21;border:2px solid var(--line);border-radius:8px}
.acard select,.acard input{min-width:0}
.evdays{display:grid;gap:6px}
.evrow{display:flex;gap:12px;align-items:center;text-align:left;padding:8px 12px;background:#161b21;color:var(--text);border:2px solid var(--line);border-radius:8px;box-shadow:none;text-shadow:none}
.evrow:hover{border-color:var(--gold)}.evrow .ci{font-size:26px}
.evrow.k-mega{background:linear-gradient(135deg,#3a2a0e,#3a0e2a)}.evrow.k-special{background:#2a0e3a}.evrow.k-sale{background:#0e2a3a}.evrow.k-boom{background:#2a2a0e}
.newsrow{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:4px 0}
.admchat{max-height:560px;overflow-y:auto;background:#0d1014;border:2px solid var(--line);padding:8px;display:grid;gap:4px;align-content:start}
.admchat p{margin:0;font-size:14px}.admchat .t{color:var(--dim);font-size:11px;margin-right:6px}
.xdel{padding:0 8px;font-size:12px;margin-left:6px}
.logbox{display:grid;gap:4px}.logbox .logrow{display:grid;grid-template-columns:110px 1fr;gap:10px}
@media (max-width:820px){.admgrid{grid-template-columns:1fr}}
.admlist .fchip,.chips .fchip:not(.r1):not(.r2):not(.r3):not(.r4):not(.r5){--c:var(--gold)}

/* ---- Klassen ---- */
.classgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:14px}
.classcard{background:linear-gradient(#3a2a18,#2a1d10);border:3px solid #8a5a22;border-radius:14px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s}
.classcard:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.classcard[data-k=krieger]{border-color:#c0392b}.classcard[data-k=bogen]{border-color:#2f9e57}.classcard[data-k=magier]{border-color:#7a4fd0}
.classpic{height:130px;display:flex;align-items:center;justify-content:center}
.classpic span{font-size:84px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.classpic img{max-height:130px;max-width:100%}
.classcard h3{margin:0}
.cbonus{font-weight:700;color:#ffe27a;font-size:.95em}
.cskill{background:rgba(0,0,0,.3);border-radius:8px;padding:8px;font-size:.9em;text-align:left}
.cskill b{display:block;color:#ffe27a;margin-bottom:2px}
.classcard button{margin-top:auto}
body[data-noclass] header nav,body[data-noclass] aside,body[data-noclass] .evbar,body[data-noclass] .evbanner,body[data-noclass] #instapp{display:none!important}
/* Fähigkeiten im Kampf */
.dmg.fx{font-size:22px!important;white-space:nowrap;left:50%;transform:translateX(-50%);top:-6px;animation:fxrise 1.5s ease-out forwards;z-index:5}
.dmg.fx.ev-heal{color:#7bd88f}.dmg.fx.ev-crit{color:#ffd24a}.dmg.fx.ev-fire{color:#ff7a3a}
.dmg.dodge{color:#9fd3ff;font-size:30px!important}
@keyframes fxrise{0%{opacity:0;margin-top:14px}15%{opacity:1}80%{opacity:1}100%{opacity:0;margin-top:-34px}}
.hpbar i.boost{box-shadow:0 0 14px 4px #7bd88f;transition:box-shadow .4s}
.fighter.buffed{filter:drop-shadow(0 0 10px #ffd24a)}

/* ---- Verzauberungen ---- */
.enchs{display:flex;flex-direction:column;gap:3px;margin:8px 0}
.ench{font-size:13px;font-weight:700;color:var(--c,#fff)}
.ench .etag{display:inline-block;font-size:9px;letter-spacing:.06em;padding:1px 5px;background:var(--c);color:#111;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));margin-right:4px;vertical-align:1px}
.ench.r1{--c:#b8c2cc}.ench.r2{--c:#4fc3f7}.ench.r3{--c:#b967ff}.ench.r4{--c:#ffb340}.ench.r5{--c:#ff5a6e}
.cell .tag.en{right:auto;left:2px;bottom:2px;top:auto;color:#ffe27a}
.enchbox{margin-top:4px;text-align:left}

/* ---- Kampf: Werte unter den Kämpfern + Belohnungs-Ende ---- */
.fstats{display:grid;gap:4px;width:100%;max-width:340px;margin:8px auto 0;padding:8px 10px;background:rgba(0,0,0,.28);border:2px solid var(--line)}
.fstats div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.fstats span{color:var(--dim)}.fstats b{color:#fff}
.fres{gap:12px}
.rewhead{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.rewards{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rtile{min-width:130px;max-width:210px;padding:12px 14px;display:grid;gap:2px;justify-items:center;background:linear-gradient(#17506d,#0e3550);border:3px solid var(--line);border-radius:12px;opacity:0;transform:scale(.6) translateY(14px);animation:rtin .5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d,0ms)}
.rtile .ri{font-style:normal;font-size:34px;line-height:1.1}
.rtile .ri img{width:64px;height:64px;object-fit:contain}
.rtile b{font-size:24px;color:#fff}
.rtile span{font-size:12px;color:var(--dim)}
.rtile.gold{border-color:#d9a21b}.rtile.gold b{color:#ffe27a}
.rtile.xpt{border-color:#3fa8d6}.rtile.xpt b{color:#9fdcff}
.rtile.honor{border-color:#7bd88f}.rtile.honor b{color:#7bd88f}
.rtile.loss{border-color:#c0392b}.rtile.loss b{color:#ff8a7a;font-size:16px}
.rtile.lvl{border-color:#b967ff}
.rtile.crate{border-color:#ffb340;box-shadow:0 0 22px rgba(255,179,64,.55);min-width:190px}
.rtile.crate .ri img{width:96px;height:96px}
.rtile.crate b{font-size:20px;color:#ffd58a}
@keyframes rtin{to{opacity:1;transform:none}}
.fres button:disabled{opacity:.4}

/* ---- Aufträge ---- */
.qhero{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px;margin:10px 0 4px;background:linear-gradient(#17506d,#0e3550);border:3px solid var(--line);border-radius:12px}
.qhp .mpic{width:72px;height:72px;font-size:42px}
.qhi{flex:1;min-width:200px}
.qhs{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--dim);margin-top:4px}.qhs b{color:#fff}
.qsub{margin:18px 0 8px}
.qboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.qcard{position:relative;display:grid;gap:8px;justify-items:center;text-align:center;padding:30px 14px 14px;background:linear-gradient(#17506d,#0e3550);border:3px solid var(--line);border-radius:14px;transition:transform .2s,box-shadow .2s}
.qcard:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(0,0,0,.45)}
.qcard.t0{border-color:#3fae6a}.qcard.t1{border-color:#8847ff}.qcard.t2{border-color:#c0392b}
.qribbon{position:absolute;top:-3px;left:50%;transform:translateX(-50%);padding:3px 16px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff;background:#2a6585;border-radius:0 0 10px 10px}
.qcard.t0 .qribbon{background:#2f9e57}.qcard.t1 .qribbon{background:#8847ff}.qcard.t2 .qribbon{background:#c0392b}
.qport .mpic{width:120px;height:120px;font-size:70px}
.qname{font-size:18px}
.qrew{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip.crt{background:#6b4a14;color:#ffd58a}
.meter{position:relative;width:100%;height:22px;background:#0d1014;border:2px solid var(--line);overflow:hidden;border-radius:6px}
.meter i{position:absolute;inset:0 auto 0 0;display:block}
.meter.cg i{background:linear-gradient(#7bd88f,#2f9e57)}.meter.cy i{background:linear-gradient(#ffe27a,#e8931a)}.meter.cr i{background:linear-gradient(#ff8a7a,#c0392b)}
.meter b{position:relative;display:block;font-size:12px;line-height:18px;color:#fff;text-shadow:0 1px 2px #000}
.qcard button{width:100%}
.qactive{display:grid;gap:10px;padding:16px;margin-bottom:10px;background:linear-gradient(#1b5a7c,#0e3550);border:3px solid var(--gold);border-radius:14px}
.qactive.done{border-color:#7bd88f;box-shadow:0 0 24px rgba(123,216,143,.45)}
.qmain{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qmain .mpic{width:130px;height:130px;font-size:76px}
.qinfo{flex:1;min-width:220px;display:grid;gap:8px;justify-items:start}
.qtrack{position:relative;height:34px;margin:8px 22px 0 10px}
.qfill{position:absolute;left:0;right:0;top:13px;height:10px;background:#0d1014;border:2px solid var(--line);border-radius:6px;overflow:hidden}
.qfill i{display:block;height:100%;width:0;background:linear-gradient(#ffe27a,#e8931a);transition:width .3s linear}
.qh{position:absolute;top:0;font-size:26px;transform:translateX(-50%);transition:left .3s linear}
.qgoal{position:absolute;right:-22px;top:2px;font-size:24px}
.qtime{font-weight:800;font-size:18px}
.bigfight{font-size:22px;padding:12px 28px}
@media (prefers-reduced-motion:no-preference){
  .qactive.done .bigfight{animation:pulse 1s ease-in-out infinite}
}
@keyframes pulse{50%{transform:scale(1.07)}}
.qhelp{margin-top:6px}.qhelp summary{cursor:pointer;color:var(--gold);font-weight:700}
.fstats div{align-items:center}
.fightmodal.ended .fighter .mpic{width:110px!important;height:110px!important;font-size:60px!important}
.fightmodal.ended .arena{gap:16px;padding:0}
.fightmodal.ended .fstats{max-width:300px;padding:6px 8px}
.fightmodal.ended .fstats div{font-size:12px}.fightmodal.ended .fstats b{font-size:12px}
.fightmodal.ended .fres h3{margin:0}.fightmodal.ended .fres p{margin:0}