:root {
  --bg: #fbe0b4; --ink: #5a3818; --accent: #3fae3a; --accent-d: #2c8a2a; --card: #fffaf0; --line: #ecd9b8;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#app { position: fixed; inset: 0; display: flex; flex-direction: column; background: linear-gradient(#fbe0b4, #f6b97f); }
#top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l));
}
.brand h1 {
  margin: 0; font-size: 26px; line-height: 1; letter-spacing: .5px; color: #ffb02e;
  -webkit-text-stroke: 5px #2b5fc7; paint-order: stroke fill; text-shadow: 0 3px 0 #1d3f8f;
}
#lvl { font-size: 14px; font-weight: 800; margin-top: 2px; opacity: .85; }
.btns { display: flex; gap: 5px; align-items: center; }
button {
  font: inherit; font-weight: 800; color: var(--ink); background: #fff3dc; border: 2px solid var(--line);
  border-bottom-width: 4px; border-radius: 12px; min-width: 44px; height: 44px; padding: 0 6px; font-size: 22px; cursor: pointer;
}
button:active { transform: translateY(2px); border-bottom-width: 2px; }
button.speed { background: var(--accent); border-color: var(--accent-d); }
button.speed.off { background: #fff3dc; border-color: var(--line); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent-d); }
button:disabled { opacity: .4; }
#progress { flex: none; height: 6px; margin: 0 calc(12px + var(--safe-l)); background: rgba(255,255,255,.45); border-radius: 3px; overflow: hidden; }
#progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
#stage { flex: 1; position: relative; min-height: 0; padding-bottom: var(--safe-b); }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(60,35,10,.5); z-index: 10; padding: 16px; }
.overlay.hidden { display: none; }
.card { background: var(--card); border-radius: 22px; padding: 20px; text-align: center; max-width: 360px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.35); border: 3px solid var(--line); }
.card.wide { max-width: 420px; }
.card h2 { margin: 0 0 10px; font-size: 26px; }
.card p { margin: 8px 0; line-height: 1.4; }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
#preview { display: block; margin: 6px auto; image-rendering: pixelated; border-radius: 8px; background: #f7ecd8; padding: 8px; }
#levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
#levels button { height: 62px; font-size: 24px; }
#levels button.cur { background: var(--accent); color: #fff; border-color: var(--accent-d); }
.filebtn { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; background: #fff3dc; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; font-weight: 800; cursor: pointer; }
.msg { font-size: 13px; min-height: 1.2em; color: #a03a2a; }

@media (min-width: 700px) { .brand h1 { font-size: 32px; } }

button.huge { min-width: 84px; height: 84px; font-size: 40px; border-radius: 22px; }
button.on { outline: 3px solid var(--accent); }
.big { font-size: 72px; line-height: 1.1; }
.wobble { display: inline-block; animation: wob 1.6s ease-in-out infinite; position: relative; }
.zzz { font-size: 34px; position: absolute; top: -6px; right: -34px; animation: zz 2s ease-in-out infinite; }
@keyframes wob { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-8px); } }
@keyframes zz { 0%,100% { opacity: .2; transform: translateY(6px); } 50% { opacity: 1; transform: translateY(-6px); } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
#coll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#coll button { height: 100px; padding: 4px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #fff3dc; }
#coll button.locked { opacity: .45; }
#coll canvas { max-width: 100%; max-height: 100%; }
#view { display: block; margin: 6px auto; max-width: 100%; border-radius: 8px; background: #f7ecd8; padding: 8px; }
#view.hidden, #coll.hidden { display: none; }
.card.left { text-align: left; }
.line { margin: 14px 0; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.line input[type=checkbox] { width: 24px; height: 24px; }
select { font: inherit; font-size: 16px; padding: 8px; border-radius: 10px; border: 2px solid var(--line); background: #fff; }
.small { font-size: 12px; opacity: .7; }
@media (max-width: 480px) { .brand h1 { display: none; } #lvl { font-size: 22px; opacity: 1; } .btns { gap: 4px; } button { min-width: 42px; } }
.card { max-height: 92vh; overflow: auto; }

/* Zahnrad: beim Halten füllt sich der Knopf grün */
#btn-gear { background-image: linear-gradient(#7fd36a, #7fd36a); background-repeat: no-repeat; background-size: 0% 100%; }
#btn-gear.holding { background-size: 100% 100%; transition: background-size var(--hold, 900ms) linear; }

/* Level-Übersicht mit Vorschaubildern */
#ov-menu .card { max-width: min(96vw, 680px); padding: 12px; }
#levels { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
#levels button.thumb { position: relative; height: auto; aspect-ratio: 1; padding: 3px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f7ecd8; }
#levels button.thumb canvas { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; image-rendering: pixelated; }
#levels button.thumb.cur { background: #cdeec3; border-color: var(--accent-d); }
#levels button.thumb.locked { opacity: .55; }
#levels button.thumb span { position: absolute; right: 1px; bottom: -1px; font-size: 15px; line-height: 1; }
#ov-menu .row { position: sticky; bottom: -12px; background: var(--card); padding-bottom: 4px; }