:root{--bg:#1b1a1f;--seite:#25232a;--tief:#141318;--linie:#34313b;--linie2:#4a4753;--fg:#f3f1ec;--mut:#9a98a3;--leer:#6f6c7a;--akz:#ffb257;--akz-fg:#2a1700;
--sora:"Sora",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:14px/1.45 var(--sora);color-scheme:dark;
overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{position:fixed;inset:0}
input,button{font:inherit;color:inherit}
input{-webkit-user-select:text;user-select:text;font-size:16px}
button{background:none;border:0;padding:0;cursor:pointer}
img{-webkit-user-drag:none;pointer-events:none}
#app{height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 8px;flex:none}
.bar h1{margin:0;font:600 18px/1.2 var(--sora)}
.bar small{display:block;color:var(--mut);font:11px var(--mono);margin-top:2px}
.chip{background:#2a2830;border:1px solid #3a3742;border-radius:20px;padding:7px 13px;font:500 14px var(--mono);color:var(--akz);white-space:nowrap}
#inhalt{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.tabs{flex:none;display:flex;justify-content:space-around;background:var(--tief);border-top:1px solid #2a2830;padding:10px 4px calc(env(safe-area-inset-bottom,0px) + 4px);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tabs button{flex:1;padding:6px 0;color:var(--mut)}
.tabs button.on{color:var(--fg);font-weight:500}
.tabs button.on::after{content:"";display:block;width:18px;height:2px;background:var(--akz);margin:5px auto 0;border-radius:1px}
.tabs button:not(.on)::after{content:"";display:block;height:2px;margin-top:5px}

/* Album */
.sets{display:flex;gap:8px;padding:0 16px 8px;flex:none}
.sets button{border:1px solid var(--linie2);border-radius:16px;padding:5px 12px;font:12px var(--mono);color:var(--mut)}
.sets button.on{border-color:var(--akz);color:var(--akz)}
.blaettern{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
.blaettern::-webkit-scrollbar{display:none}
.seite{flex:none;width:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:4px 12px 0}
.raster{background:var(--seite);border:1px solid var(--linie);border-radius:8px;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.slot{position:relative;aspect-ratio:59/86;border-radius:4%}
.slot img{width:100%;height:100%;object-fit:cover;border-radius:4%;background:#2e2c35;display:block}
.slot.leer{border:1.5px dashed var(--linie2);display:flex;align-items:center;justify-content:center;font:11px var(--mono);color:var(--leer)}
.slot .n{position:absolute;right:-3px;top:-3px;background:var(--akz);color:var(--akz-fg);font:500 11px var(--mono);border-radius:10px;padding:1px 6px;pointer-events:none}
.slot .sel{position:absolute;left:3px;bottom:3px;background:rgba(20,19,24,.82);color:var(--akz);font:500 9px var(--mono);border-radius:3px;padding:1px 4px;pointer-events:none;letter-spacing:.04em}
.fuss{flex:none;padding:12px 16px 6px}
.fortschritt{height:5px;background:var(--linie);border-radius:3px;overflow:hidden}
.fortschritt i{display:block;height:100%;background:var(--akz);transition:width .3s}
.fuss .z{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--mut);margin-top:6px}
.fab{position:absolute;right:14px;bottom:50px;background:var(--akz);color:var(--akz-fg);font:600 13px var(--sora);padding:12px 18px;border-radius:26px;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.fab[disabled]{background:#3a3742;color:var(--mut)}

/* Regal */
.liste{overflow-y:auto;padding:4px 16px 20px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
.packzeile{display:flex;gap:16px;align-items:center;background:var(--seite);border:1px solid var(--linie);border-radius:10px;padding:14px}
.pack{flex:none;width:76px;aspect-ratio:3/5;border-radius:3px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 12px rgba(0,0,0,.45)}
.pack b{font:600 20px var(--sora)}
.pack .rid{position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 2px,rgba(0,0,0,.25) 2px 4px)}
.pack .rid.t{top:0}.pack .rid.u{bottom:0}
.pack.lob{background:linear-gradient(160deg,#2f63c9,#16306b);color:#fff}
.pack.base1{background:linear-gradient(160deg,#f0a93a,#b4571b);color:#2a1204}
.packzeile .t{flex:1;min-width:0}
.packzeile h2{margin:0;font:600 15px/1.25 var(--sora)}
.packzeile p{margin:3px 0 10px;color:var(--mut);font:12px var(--mono)}
.kauf{background:var(--akz);color:var(--akz-fg);font:600 13px var(--sora);padding:10px 14px;border-radius:20px}
.kauf[disabled]{background:#3a3742;color:var(--mut)}

/* Sparen */
.formular{padding:4px 16px 8px;display:flex;flex-direction:column;gap:12px;flex:none}
.betrag{display:flex;align-items:baseline;gap:8px;border-bottom:1.5px solid var(--linie2);padding-bottom:6px}
.betrag input{flex:1;min-width:0;background:none;border:0;outline:0;font:500 34px var(--mono);color:var(--fg);padding:0}
.betrag span{font:500 20px var(--mono);color:var(--mut)}
.betrag:focus-within{border-color:var(--akz)}
.ziele{display:flex;gap:8px}
.ziele button{flex:1;border:1px solid var(--linie2);border-radius:8px;padding:10px 0;font:13px var(--sora);color:var(--mut)}
.ziele button.on{border-color:var(--akz);color:var(--akz);background:#2a2326}
.datumzeile{display:flex;align-items:center;justify-content:space-between;font:12px var(--mono);color:var(--mut)}
.datumzeile input{background:#2a2830;border:1px solid #3a3742;border-radius:6px;padding:6px 8px;color:var(--fg);font:14px var(--mono)}
.vorschau{font:12px var(--mono);color:var(--mut);min-height:18px}
.vorschau b{color:var(--akz);font-weight:500}
.speichern{background:var(--akz);color:var(--akz-fg);font:600 15px var(--sora);padding:14px;border-radius:10px;text-align:center}
.speichern[disabled]{background:#3a3742;color:var(--mut)}
.kopf2{padding:10px 16px 6px;font:11px var(--mono);color:var(--mut);letter-spacing:.08em;text-transform:uppercase;flex:none}
.verlauf{flex:1;min-height:0;overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
.zeile{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:13px}
.zeile .g{flex:1;min-width:0}.zeile .g i{display:block;font:normal 11px var(--mono);color:var(--mut)}
.zeile .r{font:500 13px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.zeile .plus{color:var(--akz)}
.zeile .weg{font:12px var(--mono);color:var(--mut);padding:6px 8px;border:1px solid var(--linie2);border-radius:6px}
.zeile .weg.sicher{color:var(--akz-fg);background:var(--akz);border-color:var(--akz)}
.leerhinweis{color:var(--mut);font:12px var(--mono);padding:20px 0;text-align:center}

.gross{position:fixed;inset:0;z-index:30;background:rgba(20,19,24,.94);display:flex;align-items:center;justify-content:center;padding:24px}
.gross img{max-width:100%;max-height:100%;border-radius:4%;box-shadow:0 12px 40px rgba(0,0,0,.7)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:40;background:#2a2830;border:1px solid var(--akz);color:var(--fg);font:13px var(--mono);padding:10px 16px;border-radius:20px;max-width:88vw;text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.packbild{flex:none;width:84px;border-radius:3px;box-shadow:0 8px 14px rgba(0,0,0,.5);background:#222}
[hidden]{display:none!important}
.sets{overflow-x:auto;scrollbar-width:none}.sets::-webkit-scrollbar{display:none}.sets button{white-space:nowrap}
.sortieren{display:flex;gap:6px;padding:0 16px 8px;flex:none;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.sortieren::-webkit-scrollbar{display:none}
.sortieren button{flex:none;white-space:nowrap;border-radius:14px;padding:4px 11px;font:11px var(--mono);color:var(--mut);background:#25232a;border:1px solid transparent}
.sortieren button.on{color:var(--akz-fg);background:var(--akz)}
.sets .nur{margin-left:auto;font-size:11px;padding:5px 10px}
.sets .nur.on{border-color:var(--akz);color:var(--akz)}
.sets button{padding:5px 10px}
.quoten{margin-left:10px;font:12px var(--mono);color:var(--mut);text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
/* 232 Sets: Auswahl, Suche, Geschenke */
.sets select{flex:1;min-width:0;background:#25232a;color:var(--tx,#eee);border:1px solid var(--linie2);border-radius:10px;padding:7px 10px;font:12px var(--mono)}
.suche{width:100%;box-sizing:border-box;background:#25232a;color:inherit;border:1px solid var(--linie2);border-radius:10px;padding:9px 12px;font:13px var(--mono);margin-bottom:8px}
.geschenk{display:flex;align-items:center;gap:12px;margin:0 16px 8px;padding:10px 12px;border:1px solid var(--akz);border-radius:10px;background:rgba(255,180,60,.08)}
.liste .geschenk{margin:0 0 8px}
.geschenk div{flex:1;min-width:0}.geschenk b{display:block;font:600 13px var(--sora)}.geschenk small{display:block;color:var(--mut);font:11px var(--mono);margin-top:2px}
.geschenk button{flex:none;background:var(--akz);color:var(--akz-fg);border-radius:16px;padding:7px 14px;font:600 12px var(--sora)}

/* Anmeldung und Profil */
.login{padding:24px 16px;display:flex;flex-direction:column;gap:12px}
.login p{margin:0;font:13px var(--mono);color:var(--mut)}
.login input{background:#25232a;color:inherit;border:1px solid var(--linie2);border-radius:10px;padding:13px;font:15px var(--mono)}
.login .los{padding:13px;border-radius:14px;background:var(--akz);color:var(--akz-fg);font:600 14px var(--sora)}
.login .fehler{min-height:18px;font:12px var(--mono);color:#ff8a7a}
.profil{padding:0 16px 24px}
.profil .zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.profil .zahlen div{background:var(--seite);border:1px solid var(--linie);border-radius:10px;padding:10px 4px;text-align:center}
.profil .zahlen b{display:block;font:600 17px var(--sora)}.profil .zahlen small{font:10px var(--mono);color:var(--mut)}
.profil .abmelden{margin-top:18px;width:100%;padding:12px;border-radius:12px;background:#2d2b35;color:#cfcddb;font:13px var(--sora)}

/* Online-Lobby */
.mpzeile{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--linie,#33313a)}
.mpzeile:first-child{border-top:0}
.mpzeile div{flex:1;min-width:0}.mpzeile b{display:block;font:600 13px var(--sora)}.mpzeile small{display:block;font:11px var(--mono);color:var(--mut)}
.mpzeile button{flex:none;background:var(--akz);color:var(--akz-fg);border-radius:14px;padding:7px 12px;font:600 12px var(--sora)}
.mpzeile button.neutral{background:#2d2b35;color:#cfcddb}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:#555;margin-right:7px}.punkt.an{background:#7bd88f}

/* Starter-Decks */
.startdecks{padding:0 16px 24px;display:flex;flex-direction:column;gap:10px}
.sd{display:flex;gap:12px;align-items:center;background:var(--seite);border:1px solid var(--linie);border-radius:12px;padding:10px}
.sd img{width:64px;border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,.5);flex:none}
.sd .t{flex:1;min-width:0}.sd h2{margin:0;font:600 15px var(--sora)}.sd p{margin:3px 0;font:11px/1.4 var(--mono);color:var(--mut)}.sd .hl{color:var(--akz)}
.sd button{flex:none;background:var(--akz);color:var(--akz-fg);border-radius:14px;padding:8px 14px;font:600 12px var(--sora)}
.startdecks .zurueck{padding:11px;border-radius:12px;background:#2d2b35;color:#cfcddb;font:13px var(--sora)}

/* Marktplatz */
.markt{padding:0 16px 24px}
.markt .los{width:100%;padding:12px;border-radius:14px;background:var(--akz);color:var(--akz-fg);font:600 13px var(--sora);margin-bottom:10px}
.markt .karte{background:var(--seite);border:1px solid var(--linie);border-radius:12px;padding:12px;margin-bottom:12px}
.markt .karte h2{margin:0 0 8px;font:600 14px var(--sora)}
.markt .suche{width:100%;box-sizing:border-box;background:#25232a;color:inherit;border:1px solid var(--linie2);border-radius:10px;padding:10px 12px;font:13px var(--mono);margin-bottom:8px}
.angebot{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linie)}
.angebot img{width:48px;border-radius:3px;flex:none}.angebot .t{flex:1;min-width:0}.angebot b{display:block;font:600 13px var(--sora)}
.angebot small{display:block;font:11px/1.35 var(--mono);color:var(--mut)}.angebot .wunsch b{display:inline;color:var(--akz);font:600 11px var(--mono)}
.angebot button{flex:none;background:var(--akz);color:var(--akz-fg);border-radius:14px;padding:8px 12px;font:600 12px var(--sora)}
.angebot button:disabled{opacity:.4}.angebot button.neutral{background:#2d2b35;color:#cfcddb}.angebot .preis{font:11px var(--mono);color:var(--mut)}
.mtreffer{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;max-height:230px;overflow:auto}
.mt{position:relative;text-align:center;border:1px solid transparent;border-radius:6px;padding:2px}.mt img{width:100%;border-radius:3px;display:block}
.mt small{display:block;font:9px/1.2 var(--mono);margin-top:2px;max-height:22px;overflow:hidden}.mt i{position:absolute;top:2px;right:3px;background:#000a;border-radius:6px;padding:0 4px;font:10px var(--mono);font-style:normal}
.mt.gross{width:84px;margin:6px 0}
/* Seiten, die laenger sind als der Bildschirm, scrollen in sich (sonst liegen sie ueber der Tabs-Leiste) */
.duellstart,.markt,.profil,.startdecks,.login{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Decks */
.decks{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.deckzeile{display:flex;align-items:center;gap:8px;border:1px solid var(--linie2);border-radius:10px;padding:10px;color:var(--mut)}
.deckzeile.on{border-color:var(--akz);background:rgba(255,180,60,.08)}
.deckzeile div{flex:1;min-width:0}.deckzeile b{display:block;font:600 13px var(--sora);color:#eee}.deckzeile small{display:block;font:11px/1.35 var(--mono)}
.deckzeile button{flex:none;border-radius:12px;padding:6px 10px;font:600 11px var(--sora)}
button.neutral{background:#2d2b35;color:#cfcddb}button.neutral.breit{padding:10px;border-radius:10px;font:600 12px var(--sora)}button.gefahr{color:#ff9a8a}
.editor{display:flex;flex-direction:column;padding:0 12px;flex:1;min-height:0}
.editor .suche{width:100%;box-sizing:border-box;background:#25232a;color:inherit;border:1px solid var(--linie2);border-radius:10px;padding:9px 12px;font:13px var(--mono);margin-bottom:6px}
.zaehler{display:flex;gap:8px;align-items:center;margin-bottom:6px;font:600 12px var(--mono)}
.zaehler span{padding:3px 9px;border-radius:10px;background:#25232a}.zaehler .ok{color:#7bd88f}.zaehler .schlecht{color:#ff9a8a}
.zaehler button{margin-left:auto;border-radius:12px;padding:5px 12px;background:#25232a;color:var(--mut);font:600 11px var(--sora)}.zaehler button+button{margin-left:0}.zaehler button.on{background:var(--akz);color:var(--akz-fg)}
.meldung{font:11px var(--mono);color:#ffd48a;margin-bottom:6px}
.edinhalt{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.dkgitter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.dk{position:relative;text-align:center;border-radius:6px;padding:2px}.dk img{width:100%;border-radius:3px;display:block}
.dk .zahl{position:absolute;top:3px;right:4px;background:#000c;border-radius:7px;padding:0 5px;font:700 10px var(--mono)}
.dk i{position:absolute;left:3px;right:3px;bottom:20px;background:#000b;border-radius:5px;font:9px var(--mono);font-style:normal;color:#ffd48a}
.dk small{display:block;font:9px/1.2 var(--mono);margin-top:2px;max-height:22px;overflow:hidden;color:var(--mut)}.dk.gesperrt img{opacity:.38}
.edleiste{display:flex;gap:8px;padding:8px 0}.edleiste .los{flex:1;padding:12px;border-radius:14px;background:var(--akz);color:var(--akz-fg);font:600 13px var(--sora)}.edleiste .neutral{padding:12px 14px;border-radius:14px;font:600 12px var(--sora)}

/* Ladeanzeigen und Startbild (rein CSS, auch vor der Anmeldung) */
#boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(120% 80% at 50% 40%,#20304d,#0b101b 70%);transition:opacity .5s}
#boot.weg{opacity:0;pointer-events:none}
.bootkarte{position:relative;width:104px;height:152px;border-radius:9px;background:radial-gradient(circle at 50% 50%,#e9a24a 0 8%,#7a3b12 9% 26%,#2a1409 27% 60%,#12090a 61%);box-shadow:0 0 0 3px #c9a24a,0 0 40px 6px rgba(255,180,60,.45);display:flex;align-items:center;justify-content:center;animation:bootdreh 2.2s ease-in-out infinite;transform-style:preserve-3d}
.bootkarte b{font:800 15px/1.1 var(--sora,sans-serif);letter-spacing:.14em;color:#ffd990;text-align:center;text-shadow:0 0 10px rgba(255,180,60,.9)}
.bootkarte .ring{position:absolute;inset:-14px;border:2px solid rgba(255,214,120,.5);border-radius:50%;animation:ringpuls 2.2s ease-out infinite}.bootkarte .ring.r2{animation-delay:1.1s}
.bootbalken{width:160px;height:5px;border-radius:3px;background:#1b2437;overflow:hidden}.bootbalken i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,#ffb43c,transparent);animation:balken 1.1s linear infinite}
#boot p{margin:0;font:12px var(--mono,monospace);color:#9fb4d8;letter-spacing:.08em}
@keyframes bootdreh{0%{transform:rotateY(0)}45%{transform:rotateY(180deg) scale(1.06)}55%{transform:rotateY(180deg) scale(1.06)}100%{transform:rotateY(360deg)}}
@keyframes ringpuls{from{transform:scale(.8);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes balken{from{transform:translateX(-120%)}to{transform:translateX(300%)}}
.lade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:46px 16px;flex:1}
.lade.klein{padding:14px 0}.lade p{margin:0;font:12px var(--mono);color:var(--mut);letter-spacing:.05em}
.lade .buehne{position:relative;width:96px;height:96px}.lade.klein .buehne{transform:scale(.6);height:60px;margin:-12px 0}
.lade .k1,.lade .k2,.lade .k3{position:absolute;left:30px;top:6px;width:38px;height:56px;border-radius:5px;background:radial-gradient(circle,#e9a24a 0 10%,#7a3b12 11% 30%,#2a1409 31% 62%,#12090a 63%);box-shadow:0 0 0 2px #c9a24a,0 4px 10px #0008}
.lade .k1{animation:misch1 1.3s ease-in-out infinite}.lade .k2{animation:misch2 1.3s ease-in-out infinite}.lade .k3{animation:misch3 1.3s ease-in-out infinite}
@keyframes misch1{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-26px) rotate(-14deg)}}
@keyframes misch2{0%,100%{transform:translateX(0) rotate(0);z-index:2}50%{transform:translateX(26px) rotate(14deg);z-index:0}}
@keyframes misch3{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lade .muenze{position:absolute;left:24px;top:14px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b0,#e9a93a 55%,#8a5a10);box-shadow:0 0 18px rgba(255,190,60,.6);animation:muenzedreh 1.1s linear infinite;display:flex;align-items:center;justify-content:center}
.lade .muenze b{font:800 14px var(--sora);color:#7a4a08}
@keyframes muenzedreh{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.lade .booster{position:absolute;left:26px;top:2px;width:44px;height:78px;border-radius:4px;background:linear-gradient(160deg,#2f63c9,#16306b);box-shadow:0 0 0 2px #c9a24a;overflow:hidden;animation:boosterwackel 1.4s ease-in-out infinite}
.lade .booster::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);animation:glanz 1.4s linear infinite}
@keyframes glanz{to{transform:translateX(120%)}}@keyframes boosterwackel{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.lade .d1,.lade .d2{position:absolute;top:14px;width:36px;height:54px;border-radius:5px;box-shadow:0 0 0 2px #c9a24a}
.lade .d1{left:2px;background:linear-gradient(160deg,#3d8f5a,#16402a);animation:prall1 1.2s ease-in infinite}.lade .d2{right:2px;background:linear-gradient(160deg,#a33a3a,#451616);animation:prall2 1.2s ease-in infinite}
.lade .blitz{position:absolute;left:38px;top:26px;width:20px;height:30px;background:#fff;clip-path:polygon(50% 0,65% 38%,100% 40%,68% 60%,80% 100%,45% 72%,10% 90%,30% 55%,0 35%,38% 36%);opacity:0;animation:blitz 1.2s ease-in infinite;filter:drop-shadow(0 0 8px #ffd990)}
@keyframes prall1{0%{transform:translateX(0) rotate(-10deg)}45%,55%{transform:translateX(24px) rotate(0)}100%{transform:translateX(0) rotate(-10deg)}}
@keyframes prall2{0%{transform:translateX(0) rotate(10deg)}45%,55%{transform:translateX(-24px) rotate(0)}100%{transform:translateX(0) rotate(10deg)}}
@keyframes blitz{0%,40%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.6)}70%,100%{opacity:0;transform:scale(2)}}
#duellgo.mischt{animation:mischtbtn 1s ease-in-out infinite}@keyframes mischtbtn{50%{filter:brightness(1.3)}}
@media (prefers-reduced-motion:reduce){#boot *,.lade *{animation-duration:6s!important}}

.sd .gehoert{flex:none;font:600 11px var(--mono);color:#7bd88f}.sd.hat{opacity:.75}.sd button:disabled{opacity:.4}
.sdhinweis{display:flex;align-items:center;gap:10px;border:1px solid var(--akz);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:rgba(255,180,60,.07)}
.sdhinweis div{flex:1}.sdhinweis b{display:block;font:600 13px var(--sora)}.sdhinweis small{font:11px var(--mono);color:var(--mut)}
.sdhinweis button{background:var(--akz);color:var(--akz-fg);border-radius:14px;padding:7px 14px;font:600 12px var(--sora)}

/* Quests */
.quests{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.quest{display:flex;align-items:center;gap:10px;background:var(--seite);border:1px solid var(--linie);border-radius:10px;padding:8px}
.quest img{width:44px;border-radius:3px;flex:none;filter:grayscale(.85) brightness(.8)}.quest.bereit img,.quest.fertig img{filter:none}
.quest.bereit{border-color:var(--akz);box-shadow:0 0 12px rgba(255,180,60,.25)}.quest.fertig{opacity:.65}
.quest .t{flex:1;min-width:0}.quest b{display:block;font:600 13px var(--sora)}.quest small{display:block;font:11px/1.35 var(--mono);color:var(--mut)}.quest .qk{color:var(--akz)}
.quest .balken{height:5px;background:#25232a;border-radius:3px;margin:5px 0 3px;overflow:hidden}.quest .balken i{display:block;height:100%;background:linear-gradient(90deg,#c9a24a,#ffd990)}
.quest button{flex:none;background:var(--akz);color:var(--akz-fg);border-radius:14px;padding:8px 12px;font:600 12px var(--sora)}.quest .gehoert{flex:none;color:#7bd88f;font:700 16px var(--mono)}
#tabs button.punkt::before{content:"";position:absolute;margin:-2px 0 0 18px;width:7px;height:7px;border-radius:50%;background:#ff6b5a}
#tabs button{position:relative}

/* Figuren-Baukasten */
.figbau{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:12px}
.figbau .vorschau{width:120px;height:120px;border:3px solid #c9a24a;border-radius:50%;background:radial-gradient(#2a3a5c,#0b1220);overflow:hidden}
.figbau .vorschau .figur{width:100%;height:100%;display:block}
.figbau .reihen{width:100%;display:flex;flex-direction:column;gap:6px}
.figbau .reihe{display:flex;align-items:center;gap:6px}
.figbau .reihe>b{flex:none;width:84px;font-size:12px;color:var(--grau,#9aa)}
.figbau .reihe>div{display:flex;flex-wrap:wrap;gap:5px}
.figbau .reihe button{min-width:34px;height:30px;border-radius:8px;border:1px solid var(--linie);background:var(--seite);color:inherit;font-size:12px;padding:0 8px}
.figbau .reihe button.on{border-color:#c9a24a;box-shadow:0 0 0 1px #c9a24a;background:rgba(201,162,74,.18)}
.figbau .reihe button.farbe{width:30px;min-width:30px;padding:0}
.figbau .tasten{display:flex;gap:8px;width:100%}.figbau .tasten button{flex:1}
.ichfigur{display:flex;align-items:center;gap:10px;margin-bottom:12px}.ichfigur .figur{width:56px;height:56px;border:2px solid #c9a24a;border-radius:50%;background:#0b1220}
.figbau .tasten button{height:42px;border-radius:10px;border:1px solid var(--linie);background:var(--seite);color:inherit;font-weight:700}
.figbau .tasten button.primaer{background:#c9a24a;color:#1b1b22;border-color:#c9a24a}
.ichfigur button{height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--linie);background:var(--seite);color:inherit}

.angebot.heiss{border:1px solid #c9a24a;border-radius:10px;padding:8px;margin-bottom:6px;background:rgba(201,162,74,.08)}
.angebot .von{display:flex;align-items:center;gap:5px}.angebot .von .figur{border-radius:50%;background:#0b1220}
.angebot u.neu{text-decoration:none;color:var(--akz)}
.kopf2.gold{color:#c9a24a}
.mfilter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.mfilter button{height:30px;padding:0 10px;border-radius:15px;border:1px solid var(--linie);background:var(--seite);color:inherit;font-size:12px}
.mfilter button.on{border-color:#c9a24a;background:rgba(201,162,74,.18)}
.mfilter select{height:30px;border-radius:15px;border:1px solid var(--linie);background:var(--seite);color:inherit;font-size:12px;padding:0 8px;margin-left:auto}

.regeltafel{background:var(--seite);border:1px solid var(--linie);border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:12px}
.regeltafel summary{font-weight:700;color:#c9a24a;cursor:pointer}.regeltafel p{margin:6px 0;line-height:1.4;color:var(--mut)}.regeltafel b{display:block;margin-top:6px}