/* Skin-Shop, Inventar, Konto-Code: gemeinsam für das 2D- und das 3D-Spiel. Erwartet die Farbvariablen --panel, --line, --ink, --muted, --gold, --gold-ink, --red. */
/* ---------- Skin-Shop ---------- */
.coin{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;flex:none;vertical-align:-0.15em;
  background:radial-gradient(circle at 35% 30%,#fff6c0 0,#f5c84a 45%,#b8841c 100%);box-shadow:inset 0 0 0 1.5px #8a5f10,0 0 6px rgba(255,200,60,.45)}
.goldchip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:999px;padding:5px 12px 5px 9px;cursor:pointer;white-space:nowrap}
.goldchip b{font-variant-numeric:tabular-nums;color:var(--gold)} .goldchip span{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.goldchip:hover{border-color:var(--gold)}
.shop{z-index:30;background:rgba(8,18,12,.86);align-items:start;padding:12px}
.shopwin{width:min(1120px,100%);margin:0 auto;max-height:calc(100dvh - 24px);overflow:auto;background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.shopwin>*{min-width:0}
.shophead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.shophead h2{font-family:"Bangers","Impact",sans-serif;font-weight:400;font-size:30px;letter-spacing:.03em;margin:0;flex:1 1 auto}
.shophead .gold{display:inline-flex;align-items:center;gap:8px;font-size:16px}
.shophead .gold b{color:var(--gold);font-size:22px;font-variant-numeric:tabular-nums} .shophead .gold span{color:var(--muted);font-size:13px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{font:inherit;font-weight:700;padding:8px 18px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.tabs button.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.badge{font-size:12px;margin-left:4px;opacity:.8}
.hint2{margin:0;color:var(--muted);font-size:14px}
/* Kisten (seit 15.10.2026): die vier Themenkisten nebeneinander, Chancen und Knopf unten bündig */
.crates{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:10px}
.crate{background:#152a1c;border:2px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;min-width:0}
.crate .odds{margin-top:auto}
.crate h3{margin:0;font-family:"Bangers","Impact",sans-serif;font-weight:400;font-size:clamp(19px,1.7vw,24px);letter-spacing:.03em;overflow-wrap:anywhere}
.crateart{width:min(100%,300px);height:auto;aspect-ratio:4/3}
/* Saisonkiste (seit 15.10.2026): oben als breite Karte, Bild links, Text und Chancen in der Mitte, Knopf rechts */
.crate.saison{border-color:#d9711e;background:linear-gradient(135deg,rgba(70,28,8,.95),rgba(28,14,30,.95));box-shadow:0 0 28px rgba(255,140,40,.14) inset}
.saisonpill{display:inline-block;padding:3px 12px;border-radius:999px;background:#d9711e;color:#1a0d04;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
@media (min-width:760px){
  .crate.saison{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr;column-gap:26px;row-gap:6px;align-items:center;justify-items:start;text-align:left}
  .crate.saison .crateart{grid-row:1/5}
  .crate.saison .saisonpill,.crate.saison h3,.crate.saison .blurb,.crate.saison .odds{grid-column:2}
  .crate.saison .saisonpill{align-self:end}
  .crate.saison .odds{margin-top:4px;align-self:start}
  .crate.saison>.btn{grid-column:3;grid-row:1/5}
}
.blurb{margin:0;color:var(--muted);font-size:13px;font-style:italic}
.odds{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:13px;width:100%;max-width:240px;text-align:left}
.odds li{display:flex;align-items:center;gap:8px} .odds b{margin-left:auto;font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.btn.off,.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.sell{border-color:#7a4b2a;color:#ffd7a8}
.btn.sell.armed{background:#8a2a1a;color:#fff;border-color:#c0452d}
.invwrap{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:16px}
@media (max-width:720px){.invwrap{grid-template-columns:1fr}}
.invleft{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start}
#prevCanvas,.prevBig{width:100%;max-width:300px;aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:#0e1c12}
.slots{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px}
.slots li{display:flex;align-items:center;gap:8px;background:#152a1c;border:1px solid var(--line);border-radius:10px;padding:5px 8px}
.slotname{color:var(--muted);min-width:96px;font-size:12px} .slots em{color:var(--muted)} .slots .btn{margin-left:auto;padding:3px 10px;font-size:12px}
.detail{border:2px solid var(--rc);border-radius:12px;padding:10px;display:grid;gap:6px;background:#152a1c}
.detail p{margin:0;font-size:13px;color:var(--muted)} .dname{display:grid;gap:1px} .dname b{font-size:17px;color:var(--rc)} .rar{font-size:12px;color:var(--rc);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.row2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Kiste aufgedeckt (seit 18.10.2026): links Ausrüsten · Verkaufen, rechts unten Noch eine · Zurück – jeder Knopf an festem Platz */
.rknoepfe{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;align-items:center;margin-top:6px}
.rknoepfe>.btn{white-space:nowrap}.rknoepfe>.btn:nth-child(-n+2){min-width:9.5em;justify-content:center;text-align:center}
@media (max-width:640px){.rknoepfe{grid-template-columns:1fr 1fr}.rknoepfe .luecke{display:none}.rknoepfe>.btn{justify-content:center;text-align:center}} .note2{font-size:12px;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chipf{font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.chipf.on{background:var(--ink);color:#15231a;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.card{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 6px 8px;border-radius:12px;border:2px solid var(--line);border-bottom:4px solid var(--rc);background:linear-gradient(180deg,#152a1c,#10201a);color:var(--ink);font:inherit;cursor:pointer}
.card:hover{border-color:var(--rc);transform:translateY(-1px)} .card.sel{border-color:var(--rc);box-shadow:0 0 0 2px var(--rc),0 0 16px -2px var(--rc)}
.cn{font-size:13px;line-height:1.2;text-align:center;min-height:2.4em;display:grid;place-items:center}
.eqd{position:absolute;top:4px;left:4px;font-style:normal;font-size:10px;font-weight:800;background:var(--gold);color:var(--gold-ink);border-radius:6px;padding:0 5px;text-transform:uppercase}
.cnt{position:absolute;top:4px;right:6px;font-style:normal;font-size:12px;font-weight:800;color:var(--gold)}
.card.absurd,.result.absurd .rinfo{background-image:linear-gradient(#152a1c,#10201a),conic-gradient(from var(--ang,0deg),#ff4fd8,#ffe45c,#4fe0ff,#7dff9a,#ff4fd8);background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent;animation:spinb 4s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spinb{to{--ang:360deg}}
/* Roulette */
.spintitle{margin:0;text-align:center;font-family:"Bangers","Impact",sans-serif;font-weight:400;font-size:28px;letter-spacing:.04em}
.view{position:relative;overflow:hidden;min-width:0;max-width:100%;height:150px;border-radius:14px;border:2px solid var(--line);background:#0e1c12}
.view::before,.view::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.view::before{left:0;background:linear-gradient(90deg,#0e1c12,transparent)} .view::after{right:0;background:linear-gradient(270deg,#0e1c12,transparent)}
.strip{display:flex;height:100%;will-change:transform}
.cell{flex:none;width:100px;margin:10px 4px;display:grid;justify-items:center;align-content:center;gap:4px;border-radius:10px;border-bottom:5px solid var(--rc);background:linear-gradient(180deg,#1a2f22,#122218);padding:6px 4px;font-size:11px;text-align:center;line-height:1.15;overflow:hidden}
.view.done .cell:not(.win){opacity:.35;transition:opacity .5s} .view.done .cell.win{box-shadow:0 0 0 2px var(--rc),0 0 24px var(--rc)}
.marker{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--gold);box-shadow:0 0 12px var(--gold);z-index:3}
.marker::before,.marker::after{content:"";position:absolute;left:-6px;border:7px solid transparent}
.marker::before{top:0;border-top-color:var(--gold)} .marker::after{bottom:0;border-bottom-color:var(--gold)}
.result{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:16px;margin-top:14px;align-items:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@media (max-width:640px){.result{grid-template-columns:1fr;justify-items:center}}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.rinfo{display:grid;gap:8px;border:2px solid var(--rc);border-radius:14px;padding:14px;background:#152a1c}
.rinfo h3{margin:0;font-family:"Bangers","Impact",sans-serif;font-weight:400;font-size:30px;color:var(--rc);letter-spacing:.03em} .rinfo p{margin:0;color:var(--muted)}
/* Fliegen im Shop: eigene Ebene im <body>, fest über dem ganzen Fenster. Sie schneidet alles ab, was über den Rand ragt, und lässt sich nicht rollen –
   so kann eine Fliege, die aus dem Bild fliegt, nie einen Rollbalken auslösen. Klicks gehen durch die Ebene hindurch, nur die Fliege selbst fängt sie. */
.flylayer{position:fixed;inset:0;z-index:50;overflow:hidden;overflow:clip;contain:strict;pointer-events:none}
.fly{position:absolute;left:0;top:0;width:60px;height:60px;padding:0;border:0;background:transparent;cursor:crosshair;will-change:transform;touch-action:manipulation;pointer-events:auto}
.fly canvas{display:block;pointer-events:none}
.fly:focus-visible{outline:2px dashed var(--gold);outline-offset:2px;border-radius:50%}
.plusfly{position:absolute;z-index:1;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:6px;font-weight:800;font-size:22px;color:var(--gold);text-shadow:0 2px 6px rgba(0,0,0,.7);animation:plusup 1.1s ease-out forwards}
@keyframes plusup{from{opacity:1;transform:translate(-50%,-50%) scale(.7)}25%{transform:translate(-50%,-90%) scale(1.15)}to{opacity:0;transform:translate(-50%,-220%) scale(1)}}
/* Meldung für Drachengold */
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:60;display:flex;align-items:center;gap:8px;
  background:#152a1c;border:2px solid var(--gold);border-radius:999px;padding:8px 16px;font-weight:700;transition:transform .3s,opacity .3s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#toast.show{transform:translate(-50%,0);opacity:1} #toast.lose{border-color:var(--line)} #toast.sell{border-color:#c98a3a}
@media (prefers-reduced-motion:reduce){.card.absurd,.result.absurd .rinfo{animation:none}.result{animation:none}}
/* Konto-Code */
.acct{display:grid;gap:14px;max-width:560px;margin-inline:auto}
.acctbox{display:grid;gap:8px;padding:14px;border-radius:14px;border:2px solid var(--line);background:rgba(0,0,0,.18)}
.acctcode{font-size:clamp(22px,6vw,32px);letter-spacing:.12em;color:var(--gold);user-select:all;-webkit-user-select:all;font-variant-numeric:tabular-nums}
.acctbox p{margin:0}
/* Körper & Gesicht (Aussehen-Regler) */
.lookbtn{width:100%;margin-top:8px}
.lookbtn.on{outline:2px solid var(--gold)}
.lookpanel{display:grid;gap:12px;padding:6px 2px}
.lookrow{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 52px;gap:10px;align-items:center}
.lookname{display:grid;font-weight:700}
.lookname small{font-weight:400;font-size:12px;color:var(--muted)}
.lookrow input[type=range]{width:100%;accent-color:var(--gold)}
.lookval{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:520px){.lookrow{grid-template-columns:1fr 52px}.lookrow input[type=range]{grid-column:1 / -1;grid-row:2}}
/* Fenster „Körper & Gesicht“ (seit 10.10.2026): großer Hobbit links, Regler rechts; schmal: Hobbit oben, Regler darunter */
.lookdlg{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(6,4,2,.78)}
.lookdlg[hidden]{display:none}
.lookbox{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:16px;width:min(1180px,100%);height:min(880px,calc(100dvh - 24px));background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:14px;box-sizing:border-box}
.lookview{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:14px;background:radial-gradient(ellipse at 50% 38%,rgba(120,96,58,.35),rgba(0,0,0,.25) 70%)}
.lookview #lookCanvas{flex:1;width:100%;min-height:0;display:block;touch-action:none;cursor:grab}
.lookhint{position:absolute;left:0;right:0;bottom:6px;text-align:center;pointer-events:none;opacity:.7}
.lookside{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding-right:4px}
.lookhead{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;background:var(--panel);z-index:1;padding-bottom:4px}
.lookhead h3{margin:0}
.lookgrp{margin:6px 0 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
@media (max-width:760px){.lookbox{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,46%) minmax(0,1fr);height:calc(100dvh - 16px);padding:10px}.lookdlg{padding:8px}}
.pwform{display:grid;gap:6px;margin-top:6px} .pwform input{flex:1 1 160px;min-width:0}
.err2{margin:0;color:#ffb3a6;font-weight:600}
.err2:empty{display:none}

.spinhint{margin:0;text-align:center;font-size:13px;color:var(--muted);font-style:italic}
/* Kisten: Doppelte automatisch verkaufen */
.autosell{display:flex;align-items:center;justify-content:flex-start;align-self:flex-start;justify-self:start;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;user-select:none;margin:2px 0}
.autosell input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}
.dupnote{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--gold)}

/* ---------- Ankleide-Puppe im Inventar ---------- */
/* Die Vorschau ist 4:5 (im 3D-Spiel durchsichtig: nur Hobbit und Schatten), steht unten in der Bühne und reicht bis knapp unter die Kopf-Plätze;
   shop.js gibt ihr genau so viele Pixel, wie sie am Bildschirm einnimmt.
   Plätze und ihre Symbole wachsen mit der Bühne: am Rechner bis 86 px breit mit 56-px-Symbol, am Handy rund 62 px.
   --dollw: Breite der linken Spalte. Sie richtet sich auch nach der Fensterhöhe, damit Puppe, Attacken, Tänze und die zwei Knöpfe
   auf einem 800 px hohen Bildschirm noch ohne Rollen ins Fenster passen (ab ca. 920 px Höhe: volle 440 px). */
.invwrap.doll{--dollw:clamp(300px,calc(96dvh - 440px),440px);grid-template-columns:minmax(300px,min(var(--dollw),46%)) minmax(0,1fr)}
.invwrap.doll .invleft{width:100%;max-width:var(--dollw);margin-inline:auto}
.dollstage{position:relative;width:100%;aspect-ratio:1/1.04;margin:0 auto}
.dollstage #prevCanvas{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56%;height:auto;max-width:none;aspect-ratio:4/5;border:0;border-radius:14px}   /* 2D-Spiel: Bild mit Himmel, bleibt zwischen den Plätzen; das 3D-Spiel (epic.css) macht es breiter, dort ist es durchsichtig */
@media (max-width:720px){.invwrap.doll{--dollw:440px;grid-template-columns:minmax(0,1fr)}.dollstage{aspect-ratio:1/1.15}}
/* Die Puppe bleibt stehen, während man rechts durch viele Teile rollt (nur wenn die linke Spalte sicher ins Fenster passt) */
@media (min-width:721px) and (min-height:640px){.invwrap.doll .invleft{position:sticky;top:0;align-self:start}}
.pslot{position:absolute;width:clamp(62px,21%,86px);display:grid;justify-items:center;gap:2px;padding:5px 3px 4px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.38);color:var(--ink);cursor:pointer;font:inherit;font-size:12px;line-height:1.1}
.pslot canvas,.pslot img{width:min(56px,100%);height:auto;aspect-ratio:1;border-radius:8px;object-fit:cover}
.pslot span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pslot.full{touch-action:none}.pslot.dragging{opacity:.4}   /* Teil herausziehen = ablegen (shop.js slotDrag) */
.slotghost{position:fixed;left:0;top:0;z-index:9999;width:58px;height:58px;pointer-events:none;transition:opacity .12s,filter .12s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.slotghost canvas,.slotghost img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.slotghost.weg{opacity:.8;filter:grayscale(.7) drop-shadow(0 0 8px #ff4a3a)}
.pslot.full{border-color:var(--rc)}
.pslot.on{box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(240,190,90,.45)}
.pslot:hover{border-color:var(--gold)}
.pempty{width:min(56px,100%);aspect-ratio:1;display:grid;place-items:center;font-style:normal;font-size:26px;color:var(--muted);border:1px dashed var(--line);border-radius:8px}
.p-hair{left:6%;top:0}.p-hat{left:50%;top:0;transform:translateX(-50%)}.p-glasses{right:6%;top:0}
.p-shirt{left:0;top:35%}.p-body{right:0;top:35%}.p-pants{left:0;top:62%}.p-dress{right:0;top:62%}.p-fx{right:0;top:84%}   /* Kopf-Plätze oben, Kleidung links, Weste, Kleid und Effekt rechts – die Mitte gehört dem Hobbit */
.pslot.gesperrt{opacity:.4;filter:grayscale(.6)}
.atkhead{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.atkrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%}
.atkrow.dancerow{grid-template-columns:repeat(6,minmax(0,1fr))}
.atkrow .pslot{position:static;width:auto;min-width:0;font-size:10px}
.atkrow .pslot canvas,.atkrow .pslot img,.atkrow .pempty{width:min(48px,100%)}
.slothead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slothead h3{margin:0;flex:1 1 auto;font-size:20px}

/* ---------- Hobbit-Pass: Stufen, Belohnungen, Auszeichnungen ---------- */
.badge.lvl{background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:0 7px;opacity:1;font-weight:800}
.lvlchip{font-weight:800;color:var(--gold)}
.pass{display:grid;gap:12px}
.passhead{display:flex;gap:18px;align-items:center;background:linear-gradient(180deg,#152a1c,#10201a);border:2px solid var(--line);border-radius:16px;padding:14px 16px}
.lvlring{--p:0;flex:none;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*360deg),rgba(255,255,255,.08) 0)}
.lvlring b{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#10201a;font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums}
.passinfo{flex:1;min-width:0} .passinfo h3{margin:0 0 6px}
.xpbar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--line)}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#c99a2e,var(--gold));border-radius:999px}
.rwtrack{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.rw{position:relative;flex:none;width:104px;display:grid;justify-items:center;gap:3px;padding:18px 6px 8px;border-radius:12px;border:2px solid var(--line);border-bottom:4px solid var(--rc);background:#10201a;color:var(--muted);font:inherit;font-size:12px;cursor:default;scroll-snap-align:start;opacity:.55}
.rw.got{opacity:1;color:var(--ink);cursor:pointer} .rw.next{opacity:.9;border-color:var(--gold)}
.rw span{text-align:center;line-height:1.15}
.rwl{position:absolute;top:3px;left:6px;font-style:normal;font-weight:800;color:var(--gold);font-size:12px}
.lock{position:absolute;top:2px;right:5px;font-style:normal;font-size:12px}
.awgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.aw{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:12px;border:2px solid var(--line);background:#10201a;opacity:.42;filter:grayscale(1)}
.aw.got{opacity:1;filter:none;border-color:var(--gold)}
.aw .aico{grid-row:1/3;font-style:normal;font-size:24px} .aw b{font-size:13px} .aw span{font-size:11px;color:var(--muted)}
.stats{line-height:1.6}
/* Statistik in Spalten (seit 15.10.2026, User): je Wert eine Zeile, Bezeichnung links, Zahl groß und weiß rechts */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 18px;margin-top:4px}
.statgrid .stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 10px;border-bottom:1px solid rgba(160,130,70,.28)}
.statgrid .stat span{font-size:17px;color:var(--muted)}
.statgrid .stat b{font-size:24px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
#awardToast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translate(-50%,-30px);opacity:0;pointer-events:none;z-index:61;display:flex;gap:12px;align-items:center;background:#152a1c;border:2px solid var(--gold);border-radius:16px;padding:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .35s,opacity .35s;max-width:min(420px,calc(100vw - 32px))}
#awardToast.show{transform:translate(-50%,0);opacity:1}
#awardToast .aico{font-style:normal;font-size:32px} #awardToast div{display:grid} #awardToast small{color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:11px} #awardToast span{font-size:12px;color:var(--muted)}
#lvlUp{position:fixed;inset:0;z-index:62;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle at 50% 45%,rgba(255,200,80,.18),rgba(0,0,0,.55) 70%)}
#lvlUp.show{opacity:1}
.lvlbox{--rc:var(--gold);display:grid;justify-items:center;gap:6px;padding:20px 26px;border-radius:20px;background:#10201a;border:3px solid var(--gold);box-shadow:0 0 60px rgba(255,200,80,.35);transform:scale(.8);transition:transform .45s cubic-bezier(.2,1.6,.4,1);max-width:min(520px,calc(100vw - 32px))}
#lvlUp.show .lvlbox{transform:scale(1)}
.lvlbox small{color:var(--gold);text-transform:uppercase;letter-spacing:.14em}
.lvlnum{font-size:64px;font-weight:900;line-height:1;color:var(--gold);text-shadow:0 0 24px rgba(255,200,80,.6)}
.lvltitle{font-size:18px}
.lvlrew{display:flex;gap:12px;align-items:center;border-top:2px solid var(--line);padding-top:10px;margin-top:4px}
.lvlrew .rar{color:var(--rc);font-size:12px;font-weight:800;text-transform:uppercase} .lvlrew h3{margin:2px 0} .lvlrew p{margin:0;font-size:13px;color:var(--muted)}
.lvlprev{width:110px;height:110px;flex:none}
.lvlgold{display:flex;align-items:center;gap:6px;color:var(--gold);font-weight:800;margin:4px 0 0}
@media (max-width:560px){.passhead{flex-direction:column;text-align:center}.lvlrew{flex-direction:column;text-align:center}}

/* ---------- Tauschhandel ---------- */
.trade{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.trwin{pointer-events:auto;width:min(1100px,100%);max-height:62vh;overflow:auto;background:rgba(16,32,26,.94);border:2px solid var(--gold);border-radius:18px;padding:12px 14px;box-shadow:0 -10px 40px rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.trhead{display:flex;align-items:center;gap:12px;margin-bottom:8px} .trhead h2{margin:0;font-size:20px} .trwith{flex:1;color:var(--muted)}
.trcols{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:12px}
.trinv h3,.troffer h3{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:6px} .troffer h3 small{color:var(--muted);font-weight:400}
.trgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:30vh;overflow:auto;padding:2px}
.trgrid.slots{max-height:none;grid-template-columns:repeat(6,1fr)}
.trcell{position:relative;display:grid;justify-items:center;gap:2px;padding:5px 3px;border-radius:10px;border:2px solid var(--line);border-bottom:3px solid var(--rc,var(--line));background:#10201a;color:var(--ink);font:inherit;font-size:10px;line-height:1.1;min-height:64px;text-align:center}
button.trcell{cursor:pointer} button.trcell:hover{border-color:var(--gold)}
.trcell.empty{border-style:dashed;opacity:.35} .trcell.used{opacity:.35;filter:grayscale(.7)}
.trcell span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trmid{display:grid;gap:8px;align-content:start;background:rgba(0,0,0,.18);border-radius:14px;padding:8px}
.trswap{text-align:center;color:var(--gold);font-size:20px;line-height:1}
.trgold{display:flex;align-items:center;gap:6px;margin:6px 0 0;color:var(--gold);font-weight:700}
.trgoldin{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted)} .trgoldin input{width:110px;font:inherit;padding:4px 8px;border-radius:8px;border:2px solid var(--line);background:#0b1611;color:var(--ink)}
.trbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .trnote{margin:0;font-size:12px;color:var(--muted);text-align:center}
.lamp{display:inline-block;width:11px;height:11px;border-radius:50%;background:#4a4a44;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)} .lamp.ready{background:#e8b93a;box-shadow:0 0 8px #e8b93a} .lamp.conf{background:#5fd068;box-shadow:0 0 10px #5fd068}
.trask{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:31;background:#152a1c;border:2px solid var(--gold);border-radius:16px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:min(440px,calc(100vw - 32px));text-align:center}
.trask p{margin:0 0 8px}
.trbtn{position:absolute;right:12px;top:58px;z-index:6}
@media (max-width:820px){.trcols{grid-template-columns:1fr}.trwin{max-height:70vh}.trgrid.slots{grid-template-columns:repeat(4,1fr)}}
/* ---------- schmale Fenster (Handy hochkant) ---------- */
@media (max-width:560px){
  .shophead{gap:6px 12px}.shophead h2{font-size:22px}
  .tabs{gap:6px}.tabs button{padding:7px 10px}
}

/* Vorschau drehen (seit 06.10.2026): Ziehen dreht den Hobbit */
canvas.rotatable { cursor: grab; touch-action: none; }
canvas.rotatable:active { cursor: grabbing; }
/* Basar-Bild lädt noch (vorgerechnetes 3D-Bild oder Live-Rendering): leise pulsierender Schimmer statt der alten 2D-Zeichnung */
canvas.icwait{background:radial-gradient(circle at 50% 45%,rgba(255,226,160,.16),rgba(255,226,160,0) 62%);animation:icwait 1.3s ease-in-out infinite}
@keyframes icwait{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){canvas.icwait{animation:none}}