/* base.css - gemeinsames Layout des Sortier-Kerns (v0.9.0, 2026-11-09). Themes/Look setzen die Variablen und Tube-Optik in style.css. */
:root{--bg:#111;--panel:#222;--panel2:#2c2c2c;--text:#eee;--dim:#a0a0a0;--primary:#4c8;--primary-fg:#000;--accent:#fc4;--danger:#e55;--ok:#6d8;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-head:var(--font);--btn-r:12px;--field-w:min(100%,560px)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;display:flex;flex-direction:column;overscroll-behavior:contain;font-size:16px;line-height:1.35}
#app{flex:1;display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;position:relative}
[hidden]{display:none!important}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--font-head);margin:.4em 0}
.muted{color:var(--dim)}.small{font-size:.85rem}
#top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 4px}
#top .logo{flex:1;display:flex;justify-content:center;min-width:0}
#top .logo svg{height:34px;width:auto;max-width:100%}
.icon-btn{min-width:48px;min-height:48px;border-radius:var(--btn-r);border:2px solid var(--primary);background:transparent;cursor:pointer;font-size:1.2rem;touch-action:manipulation}
.icon-btn[hidden]{visibility:hidden;display:block!important}
main{flex:1;display:flex;flex-direction:column}
.screen{flex:1;padding:6px 14px 14px}
.btn{min-height:48px;padding:10px 18px;border-radius:var(--btn-r);border:2px solid var(--primary);background:transparent;color:var(--text);cursor:pointer;font-family:var(--font-head);font-size:1.05rem;touch-action:manipulation}
.btn.primary{background:var(--primary);color:var(--primary-fg)}
.btn.danger{border-color:var(--danger)}
.btn:disabled{opacity:.4;cursor:default}
.btn:active:not(:disabled){transform:scale(.97)}
.badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;background:var(--panel2);font-size:.8rem;color:var(--dim)}
.badge.ok{color:var(--ok)}
/* Menue */
#scr-menu{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
#menu-art{width:100%;max-width:360px}
#menu-art svg{width:100%;height:auto;display:block}
.menu{display:flex;flex-direction:column;gap:10px;width:100%;max-width:380px}
#tagline{margin:0}
/* Karte */
.grp{margin:14px 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.tile{position:relative;min-height:64px;border-radius:var(--btn-r);border:2px solid var(--primary);background:var(--panel);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation}
.tile .tn{font-family:var(--font-head);font-size:1.15rem;font-weight:700}
.tile .stars{width:52px;height:17px}
.tile.locked{opacity:.45;cursor:default;border-style:dashed}
.tile.next{box-shadow:0 0 0 3px var(--accent)}
.stars .st{fill:transparent;stroke:var(--dim);stroke-width:.12}
.stars .st.on{fill:var(--accent);stroke:var(--accent)}
/* Spiel */
#scr-game{display:flex;flex-direction:column;gap:8px;padding-bottom:0}
.gbar{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.g-moves{font-variant-numeric:tabular-nums}
.hintbox{min-height:2.6em;padding:8px 12px;border-radius:var(--btn-r);background:var(--panel);border-left:5px solid var(--primary)}
.hintbox.warn{border-left-color:var(--danger)}.hintbox.hint{border-left-color:var(--accent)}.hintbox.dead{border-left-color:var(--dim)}
.field{width:var(--field-w);margin:0 auto;display:flex;flex-direction:column;gap:12px;touch-action:none;user-select:none;-webkit-user-select:none;padding:6px 0}
.frow{display:flex;justify-content:center;align-items:flex-end;gap:6px}
.tube{position:relative;padding:0;border:0;background:transparent;cursor:pointer;touch-action:none;transition:transform .15s ease}
.tube svg{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.tube.sel{transform:translateY(-10px)}
.lay-ch .tube.sel{transform:translateX(8px)}
.tube.dragging{opacity:.75;transform:scale(1.04)}
.tube.sealed{cursor:default}
.tube.hint-from,.tube.hint-to{filter:drop-shadow(0 0 6px var(--accent))}
.tube.hint-to{animation:wbpulse .8s ease-in-out 3}
.tube.shake{animation:wbshake .35s}
.lay-bt .tube{flex:1 1 0;max-width:78px;min-width:34px}
.lay-ch .field{gap:6px}
.lay-ch .frow{justify-content:flex-start}
.lay-ch .tube{width:calc(var(--cap) / 6 * 100% + 0px);min-width:calc(var(--cap) * 34px);max-width:100%;height:48px}
.lay-ch .tube svg{height:100%;width:100%}
.tools{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 12px;background:linear-gradient(transparent,var(--bg) 24%);margin-top:auto}
.tool{flex:1;min-height:56px;border-radius:var(--btn-r);border:2px solid var(--primary);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.75rem;cursor:pointer;touch-action:manipulation}
.tool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool:disabled{opacity:.35;cursor:default}
.tool:active:not(:disabled){transform:scale(.96)}
.sy{fill:rgba(0,0,0,.55);stroke:rgba(255,255,255,.85);stroke-width:.2}
.sy.ln{fill:none;stroke:rgba(255,255,255,.9);stroke-width:.4}
/* Dialog */
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.dlg-box{background:var(--panel);color:var(--text);border-radius:calc(var(--btn-r) + 6px);padding:18px;width:100%;max-width:420px;max-height:90dvh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.dlg-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
.dlg-btns .btn{flex:1 1 auto}
.win-stars{display:flex;justify-content:center}.win-stars .stars{width:150px;height:50px}
.win-sum,.story{text-align:center}
.zen-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.share{font-family:var(--font);background:var(--panel2);padding:8px;border-radius:8px;user-select:all}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--panel2);color:var(--text);padding:10px 16px;border-radius:99px;z-index:60;max-width:90vw;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Einstellungen / Statistik */
.set{display:flex;flex-direction:column;gap:6px}
.set label,.set .row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:4px 2px;border-bottom:1px solid var(--panel2);flex-wrap:wrap}
.set input[type=checkbox]{width:26px;height:26px;accent-color:var(--primary)}
.set select{min-height:44px;background:var(--panel);border:2px solid var(--primary);border-radius:8px;padding:4px 8px}
.stat-list{display:grid;grid-template-columns:1fr auto;gap:6px 12px}.stat-list dt{color:var(--dim)}.stat-list dd{margin:0;font-weight:700}
.statchart{width:100%;max-width:320px}.statchart .bar{fill:var(--primary)}.statchart .bt{fill:var(--dim);font-size:9px}
/* Animationen */
@keyframes wbshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes wbpulse{50%{transform:scale(1.06)}}
@keyframes wbfill{from{transform:scaleY(0);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes wbfillx{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
@keyframes wbpuff{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes wbcork{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}
.fresh{transform-box:fill-box;transform-origin:bottom center;animation:wbfill .32s ease-out}
.lay-ch .fresh{transform-origin:left center;animation:wbfillx .28s ease-out}
.reveal{transform-box:fill-box;transform-origin:center;animation:wbpuff .45s ease-out}
.cork-in{animation:wbcork .35s ease-out}
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.hc{--dim:#d8d8d8}
.hc .tube{outline:2px solid var(--text);outline-offset:-1px}
.hc .btn,.hc .tool,.hc .tile{border-width:3px}