:root{
  --bg:#f2f4f7;--surface:#fff;--ink:#16202c;--muted:#6b7684;--line:rgba(16,24,40,.08);
  --accent:#2f6df6;--accent-ink:#fff;--ok:#16a34a;--no:#dc2626;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.08);
  --b:clamp(40px,10.5vw,56px);--pw:80px;--sw:90px
}
@media (prefers-color-scheme:dark){:root{--bg:#12161c;--surface:#1c222b;--ink:#eef2f7;--muted:#97a3b3;--line:rgba(255,255,255,.1);--shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:manipulation}
body{height:100dvh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.screen{position:fixed;inset:0;display:none;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen.active{display:flex}

.round,.big{display:grid;place-items:center;background:var(--surface);color:var(--ink);border-radius:50%;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .12s,background .15s}
.round{width:var(--b);height:var(--b);font-size:calc(var(--b)*.5)}
.big{width:76px;height:76px;font-size:36px}
.round:active,.big:active,.lv:active,.tile:active,#cats button:active{transform:scale(.94)}
.round.on,.big.pri{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.big.yes{background:var(--ok);color:#fff;border-color:transparent}.big.no{background:var(--no);color:#fff;border-color:transparent}
#btnMusic{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 12px);z-index:60}

.bar{display:flex;align-items:center;gap:10px;padding:10px calc(var(--b) + 26px) 6px 12px;min-height:calc(var(--b) + 20px)}
#cats{display:flex;gap:8px;flex:1;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
#cats::-webkit-scrollbar{display:none}
#cats button{width:var(--b);height:var(--b);flex:none;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:calc(var(--b)*.5);display:grid;place-items:center;transition:transform .12s}
#cats button.sel{background:var(--accent);color:#fff;border-color:transparent}

#grid{flex:1;overflow-y:auto;padding:8px 14px 48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-content:start}
.tile{position:relative;display:block;width:100%;height:0;padding-bottom:75%;border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);transition:transform .12s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tile .badge{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--accent);display:grid;place-items:center;font-size:20px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.empty{grid-column:1/-1;display:grid;place-items:center;font-size:96px;color:var(--muted);padding-top:14vh}
#credits{position:fixed;left:10px;bottom:8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font:600 13px/20px system-ui;text-align:center;text-decoration:none;opacity:.7}

#levels{align-items:center;justify-content:center;gap:4vh;padding:16px}
#levels .back{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:12px}
#lvPreview img{display:block;max-height:36vh;max-width:88vw;border-radius:18px;box-shadow:0 12px 36px rgba(16,24,40,.25)}
#lvButtons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1000px}
.lv{width:clamp(96px,28vw,150px);background:var(--surface);border-radius:16px;padding:6px 6px 10px;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .12s}
.lv canvas{width:100%;border-radius:11px;display:block}
.dots{display:flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);filter:contrast(2)}.dots i.on{background:var(--accent);filter:none}

#play{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;background:var(--bg)}
#world{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
#frame{position:absolute;border-radius:4px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(16,24,40,.12)}
#ghost{width:100%;height:100%;display:block;border-radius:4px;opacity:0;transition:opacity .3s}
#frame.faint #ghost{opacity:.14}
#frame.hi #ghost{opacity:.55}
#layer{position:absolute;inset:0;pointer-events:none}
.piece{position:absolute;left:0;top:0;pointer-events:none}
.piece.snapping{transition:transform .14s ease-out}
.piece.lifted{filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.piece.pop{animation:pop .4s}
@keyframes pop{50%{filter:brightness(1.18) drop-shadow(0 0 5px rgba(255,255,255,.8))}}
.hud{position:absolute;left:12px;top:12px;display:flex;gap:10px;pointer-events:none}
.hud button{pointer-events:auto}
#trayWrap{display:flex;align-items:stretch;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,24,40,.08);flex:none}
#tray{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain;padding:0 4px}
#tray::-webkit-scrollbar{display:none}
.arrow{width:36px;font-size:22px;flex:none;color:var(--muted);display:grid;place-items:center}
.slot{flex:none;position:relative;height:100%;width:var(--sw);touch-action:pan-x}
.slot canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--pw);height:var(--pw);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));touch-action:pan-x}
.slot canvas.away{visibility:hidden}

#gaGrid{flex:1;overflow-y:auto;padding:8px 20px 48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;align-content:start}
.gitem{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.gitem .gframe{width:100%}
.gitem .ctl{display:flex;gap:14px}
.gitem .ctl .round{--b:48px}
.gframe{position:relative;padding:15px;border-radius:5px;
  background:
    radial-gradient(circle at 0 0,#fff6bf 0 9px,transparent 10px),radial-gradient(circle at 100% 0,#fff6bf 0 9px,transparent 10px),
    radial-gradient(circle at 0 100%,#fff6bf 0 9px,transparent 10px),radial-gradient(circle at 100% 100%,#fff6bf 0 9px,transparent 10px),
    linear-gradient(135deg,#f8e08c 0%,#d9a93a 18%,#8f6410 34%,#f1cf64 50%,#b3841a 68%,#f6e08f 84%,#a5761a 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(255,248,200,.85),inset 0 0 0 4px rgba(110,70,0,.55),inset 0 0 0 6px rgba(255,230,140,.55),inset 0 0 0 8px rgba(90,55,0,.5)}
.gframe .mat{background:#f7f1e1;padding:6.5%;box-shadow:inset 0 0 0 2px #c9972b,inset 0 0 0 4px #f7f1e1,inset 0 0 0 5px rgba(150,105,20,.7),inset 0 3px 10px rgba(0,0,0,.25)}
.gframe img{display:block;width:100%;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.3)}
button.gframe{display:block}

#win{position:fixed;inset:0;z-index:40;background:rgba(10,14,20,.78);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;animation:fade .5s}
#win .wrap{width:min(80vw,calc(56vh*4/3));animation:hang 1.1s cubic-bezier(.2,1.3,.4,1);transform-origin:50% 0}
@keyframes hang{from{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.04) rotate(2deg)}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}}
.winBtns{display:flex;gap:22px}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.confirm{position:absolute;inset:0;background:rgba(10,14,20,.7);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;gap:20px;border-radius:4px}

#update{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:50%;margin-left:-32px;width:64px;height:64px;font-size:30px;z-index:80;animation:pulse 1.6s infinite}
#update.busy{animation:spin 1s linear infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,109,246,.5),var(--shadow)}50%{box-shadow:0 0 0 12px rgba(47,109,246,0),var(--shadow)}}
@keyframes spin{to{transform:rotate(360deg)}}

#clean{position:absolute;z-index:1000;opacity:0;border-radius:4px;transition:opacity 1.1s ease-in-out,filter 1.1s;pointer-events:none}
#clean.in{opacity:1;animation:shine 1.4s ease-in-out 1.1s}
@keyframes shine{50%{filter:brightness(1.12)}}

/* Leiste seitlich (Querformat / hohe Bilder) */
#game.side{flex-direction:row}
#game.side #trayWrap{order:-1;flex-direction:column;border-top:0;border-right:1px solid var(--line);box-shadow:6px 0 20px rgba(16,24,40,.08);padding-top:env(safe-area-inset-top)}
#game.side #tray{flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:4px 0}
#game.side .slot{width:100%;height:var(--sw);touch-action:pan-y}
#game.side .slot canvas{touch-action:pan-y}
#game.side .arrow{width:100%;height:34px}
#game.side .arrow svg{transform:rotate(90deg)}
#game.side .hud{flex-direction:column}

/* Hochformat-Bilder */
.tile.p::before{content:"";position:absolute;inset:-20px;background:var(--bg) center/cover;filter:blur(16px) brightness(.85)}
.tile.p img{object-fit:contain}
.gitem.p .gframe{width:64%}
#win.p .wrap{width:min(66vw,calc(54vh*3/4))}

.count{display:flex;align-items:center;gap:8px;margin-left:auto;padding:0 18px 0 14px;height:var(--b);border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:calc(var(--b)*.42);color:var(--ink)}
.count span{display:grid;font-size:1.15em}.count b{font-weight:700;font-variant-numeric:tabular-nums}
#cheer{position:fixed;left:50%;top:38%;z-index:70;font-size:clamp(90px,22vmin,170px);line-height:1;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
#cheer.go{animation:cheer 1.5s ease-out}
@keyframes cheer{0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.15) rotate(6deg);opacity:1}32%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1}100%{transform:translate(-50%,-62%) scale(1);opacity:0}}