/* Gemeinsames Aussehen aller Seiten: Farben, Waage, Material, Bedienelemente */
:root{
  --bg:#f4f6fb; --panel:#ffffff; --fg:#1d2233; --muted:#5b6278;
  --steel:#b3b7c2; --steel-dark:#8d92a0;
  --one:#c8186b; --xfill:#ffffff; --xline:#2b2f3a; --box:#2f6e8f; --box-dark:#1f4f69; --band:#f3e6c9; --choc:#5e3520; --choc-hi:#86513a; --pa:#9b4a96; --pb:#d4a63a; --pen:#62666e;
  --accent:#0f7f73; --accent-soft:rgba(15,127,115,.14); --one-soft:rgba(200,24,107,.1);
  --ui:"Atkinson Hyperlegible",system-ui,sans-serif;
  --math:"Noto Serif","Cambria Math",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#13161f; --panel:#1c2030; --fg:#e8eaf2; --muted:#a3a9bb;
  --steel:#5d6377; --steel-dark:#7a8195;
  --one:#e2468f; --xfill:#262b3b; --xline:#d9dce6; --box:#3f8db3; --box-dark:#2a6788; --band:#efe0bf; --choc:#7a4a30; --choc-hi:#a26a4c; --pa:#b866b2; --pb:#e0b54c; --pen:#a9adb6;
  --accent:#3cc0b0; --accent-soft:rgba(60,192,176,.18); --one-soft:rgba(226,70,143,.16); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#13161f; --panel:#1c2030; --fg:#e8eaf2; --muted:#a3a9bb;
  --steel:#5d6377; --steel-dark:#7a8195;
  --one:#e2468f; --xfill:#262b3b; --xline:#d9dce6; --box:#3f8db3; --box-dark:#2a6788; --band:#efe0bf; --choc:#7a4a30; --choc-hi:#a26a4c; --pa:#b866b2; --pb:#e0b54c; --pen:#a9adb6;
  --accent:#3cc0b0; --accent-soft:rgba(60,192,176,.18); --one-soft:rgba(226,70,143,.16); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:16px;margin:0}
.wrap{max-width:780px;margin:0 auto;padding-inline:16px;padding-block:20px 32px;display:grid;gap:16px}
h1{font-size:1.35rem;margin:0;text-wrap:balance}
.hint{color:var(--muted);margin:0;font-size:.9rem}

/* Bühne */
.stage{--item:clamp(24px,5.2vw,36px);position:relative;height:330px;background:var(--panel);border-radius:14px;overflow:hidden;user-select:none;-webkit-user-select:none}
.beam{position:absolute;left:calc(22% - 4px);width:calc(56% + 8px);bottom:84px;height:8px;border-radius:4px;background:var(--steel);
  transform:rotate(var(--rot,0deg));transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.pan{position:absolute;bottom:88px;width:36%;display:flex;flex-direction:column;align-items:center;
  transform:translateY(var(--dy,0px));transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.pan.left{left:4%} .pan.right{right:4%}
.tray{position:relative;width:100%;min-height:var(--item)}
.tray .item{position:absolute}
.plate{width:100%;height:10px;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--steel)}
.post{width:6px;height:22px;background:var(--steel-dark)}
.pan.over .plate{background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)}
.stand{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.stand .pillar{width:10px;height:50px;background:var(--steel-dark)}
.stand .foot{width:84px;height:38px;border-radius:12px 12px 0 0;background:var(--steel-dark);color:var(--panel);
  font:700 1.6rem/38px var(--ui);text-align:center}
.pivot{position:absolute;left:50%;bottom:80px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--steel-dark)}

/* Objekte */
.item{width:var(--item);height:var(--item);flex:none;touch-action:none;cursor:grab}
.one{border-radius:50%;background:var(--one)}
.x{border:2.5px solid var(--xline);border-radius:6px;background:var(--xfill);color:var(--xline);
  display:flex;align-items:center;justify-content:center;font:italic 500 calc(var(--item)*.62)/1 var(--math)}
.stage.adding{cursor:copy}
select{font:inherit;padding:4px 6px;border-radius:8px;border:1px solid var(--steel);background:var(--bg);color:var(--fg)}
/* Schokoladen-Variante: Packung = x, Stückchen = 1 */
body.schoko .x{border:none;border-radius:3px;font-size:0;
  background:linear-gradient(var(--choc),var(--choc)) center/46% 11% no-repeat,
    linear-gradient(transparent 36%,var(--band) 36% 64%,transparent 64%),
    linear-gradient(var(--box-dark) 0 9%,var(--box) 9%);
  box-shadow:inset -3px 0 0 rgba(0,0,0,.14)}
body.schoko .one{border-radius:3px;
  background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(0,0,0,.32) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(var(--choc-hi),var(--choc));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
body.schoko .source .x{width:38px;height:68px}
body.schoko .source .one{width:44px;height:19px}
body.schoko .ghost.x{width:40px;height:72px}
body.schoko .ghost.one{width:40px;height:17px}
/* Stifte: Packung a (lila), Packung b (gelb), einzelne Stifte */
.pa,.pb{border-radius:2px;box-shadow:inset -3px 0 0 rgba(0,0,0,.12)}
.pa{background:var(--pa)} .pb{background:var(--pb)}
body.stifte .one{border-radius:3px;background:var(--pen)}
.source .pa{width:44px;height:56px} .source .pb{width:26px;height:56px}
body.stifte .source .one{width:7px;height:56px}
.ghost.pa{width:44px;height:56px} .ghost.pb{width:26px;height:56px}
body.stifte .ghost.one{width:7px;height:52px}
.vals{display:flex;gap:12px;flex-wrap:wrap}
.vals>div{display:grid;gap:6px}
.grow{flex:1 1 280px}
input[type=text]{flex:1;min-width:0;font:1.1rem var(--ui);padding:6px 10px;border-radius:8px;border:1px solid var(--steel);background:var(--bg);color:var(--fg)}
/* Meldungen: zart getönt, grün für Hinweise und Erfolg, pink für Probleme */
.msg{margin:0;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--fg)}
.msg.err{background:var(--one-soft)}
.msg button{margin-left:8px;padding:4px 10px}
.ghost{position:fixed;z-index:10;pointer-events:none;transform:translate(-50%,-50%) scale(1.12);opacity:.92;--item:36px}

/* Ablage und Einstellungen */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;background:var(--panel);border-radius:14px;padding:10px 14px}
.group{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--steel);border-radius:10px;overflow:hidden;width:fit-content;max-width:100%}
.seg button{border:none;border-radius:0;padding:7px 12px;background:var(--bg);color:var(--fg)}
.seg button+button{border-left:1px solid var(--steel)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--accent);color:var(--panel)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:700px){.row{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--panel);border-radius:14px;padding:14px 16px;display:grid;gap:12px;min-width:0}
.panel h2{font-size:1.05rem;margin:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.tile{display:grid;justify-items:center;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--steel);cursor:pointer}
.tile.sel{outline:3px solid var(--accent);border-color:transparent;background:var(--accent-soft)}
.source{min-height:72px;display:flex;align-items:flex-end;justify-content:center}
.source .item{--item:42px}
.tname{font-size:.85rem;color:var(--muted);text-align:center}
.pane{display:grid;gap:10px;margin:0}
.phead{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
#modeSel,#taskSel{font:inherit;font-weight:700;padding:6px 8px}
[hidden]{display:none!important}
.tabs,#modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.tabs button,#modes button{padding:7px 6px;font-size:.9rem;line-height:1.2}
.tabs button+button,#modes button+button{border-left:1px solid var(--steel)}
.line{display:flex;gap:8px;flex-wrap:wrap}
.label{font-size:.85rem;color:var(--muted);font-weight:700}
.valrow{display:flex;gap:6px;align-items:center;font:italic 500 1.1rem var(--math);color:var(--fg)}
.valrow span{font-style:normal}
.valrow select{font:1rem var(--ui);padding:2px 4px;width:auto}
.tile{padding:10px 8px}
input[type=number]{width:4.2em;font:inherit;padding:4px 6px;border-radius:8px;border:1px solid var(--steel);background:var(--bg);color:var(--fg)}
label.chk{display:flex;gap:6px;align-items:center;font-size:.92rem;cursor:pointer}
button{font:inherit;font-weight:700;padding:8px 14px;border-radius:10px;border:1px solid var(--steel);background:var(--bg);color:var(--fg);cursor:pointer}
button:hover{border-color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.eq{text-align:center;font:500 1.6rem/1.3 var(--math);font-style:normal;min-height:2.1rem}
.eq i{font-style:italic}
.eq .rel{font-family:var(--ui);padding:0 .3em;color:var(--accent)}
@media (max-width:480px){.stage{height:300px}.eq{font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){.beam,.pan{transition:none}}
button:disabled{opacity:.4;cursor:default}
button:disabled:hover{border-color:var(--steel)}
/* Gewichtsstücke aus Messing mit Griff, Zahl unten */
:root{--brass:#d8b25c;--brass-dark:#9c7426;--brass-ink:#3b2a07}
.wt{border-radius:30% 30% 10% 10%/35% 35% 10% 10%;color:var(--brass-ink);
  background:linear-gradient(90deg,var(--brass-dark),var(--brass) 35%,#f0d58f 50%,var(--brass) 65%,var(--brass-dark));
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6%;font:700 calc(var(--item)*.48)/1 var(--ui)}
.wt::before{content:"";position:absolute;left:50%;top:-20%;width:36%;height:24%;transform:translateX(-50%);
  border-radius:50% 50% 15% 15%;background:var(--brass-dark)}
.source .wt{position:relative}
.ghost.wt{--item:40px}
.tile.off{opacity:.35;cursor:default}
/* Wachsende Kisten mit Wert als Aufschrift; Platzhalter, solange keine Kiste gewählt ist */
.item.val{display:flex;align-items:center;justify-content:center;font:700 calc(var(--item)*.5)/1 var(--ui)}
body.schoko .x.val{font-size:calc(var(--item)*.5);color:var(--choc);
  background:linear-gradient(transparent 36%,var(--band) 36% 64%,transparent 64%),linear-gradient(var(--box-dark) 0 9%,var(--box) 9%)}
.pa.val,.pb.val{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.item.ph{display:flex;align-items:center;justify-content:center;background:none!important;box-shadow:none!important;
  border:2px dashed var(--muted)!important;color:var(--muted);font:700 calc(var(--item)*.45)/1 var(--ui)}
/* Stifte mit nur einer Packungsart: x sieht aus wie die gelbe Packung */
body.stift1 .x{border:none;border-radius:2px;background:var(--pb);font-size:0;box-shadow:inset -3px 0 0 rgba(0,0,0,.12)}
body.stift1 .x.val{font-size:calc(var(--item)*.5);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
body.stift1 .source .x{width:26px;height:56px}
body.stift1 .ghost.x{width:26px;height:56px}
/* Päckchen nach dem Aufteilen: Packpapier-Rahmen, der Inhalt darin lässt sich nicht einzeln anfassen */
:root{--bag:rgba(181,155,107,.16);--bagline:#b59b6b}
.pack{border:2px solid var(--bagline);border-radius:10px;background:var(--bag);cursor:pointer}
.pack .item{pointer-events:none}
.ghost.pack{width:56px;height:44px}
/* Hervorgehobene Hauptaktion, z. B. "Neue Aufgabe" nach dem Erfolg */
button.primary{background:var(--accent);border-color:var(--accent);color:var(--panel)}
button.primary:hover{filter:brightness(1.08)}