:root {
  --bg: #0b1020; --panel: #151c30; --panel2: #1e2844; --line: #2a3556;
  --ink: #eaf0ff; --dim: #8d9bbd; --amber: #ffb347; --green: #5eead4; --violet: #a78bfa; --red: #ff7b8a; --blue: #7cc4ff;
  --nav-h: 62px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overscroll-behavior: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); }

/* Kopfzeile */
#top { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--bg) 78%, #0b102000); padding: calc(8px + env(safe-area-inset-top)) 14px 10px; text-align: center; }
#bits { font-size: clamp(2rem, 10vw, 2.9rem); font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; line-height: 1.1; }
#cps { color: var(--dim); font-size: .92rem; }
#buffs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; min-height: 0; }
.chip { background: #ffb34726; color: var(--amber); border: 1px solid #ffb34766; border-radius: 99px; padding: 2px 10px; font-size: .78rem; font-weight: 600; }
.chip.click { background: #5eead426; color: var(--green); border-color: #5eead466; }

/* Tabs */
.tab { display: none; padding: 0 14px; animation: fade .18s ease; }
.tab.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #0f1630f2; backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
#nav .in { max-width: 560px; margin: 0 auto; display: flex; }
#nav button { flex: 1; background: none; border: 0; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--dim); font-size: .7rem; position: relative; cursor: pointer; }
#nav button .i { font-size: 1.45rem; line-height: 1; }
#nav button.on { color: var(--ink); }
#nav button.on::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--amber); }
#nav button.lock .i { filter: grayscale(1); opacity: .5; }
#nav .dot { position: absolute; top: 9px; right: calc(50% - 22px); width: 10px; height: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); display: none; }
#nav .dot.on { display: block; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.35); } }

/* Allgemein */
h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 20px 2px 8px; font-weight: 700; }
h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card { background: var(--panel); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.dim { color: var(--dim); } .small { font-size: .82rem; } .center { text-align: center; }
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 700; min-height: 46px; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(#ffc36b, #f59e2a); color: #2a1a05; border: 0; }
.btn.violet { background: linear-gradient(#b9a2ff, #8b6cf0); color: #1a0f3a; border: 0; }
.btn.danger { background: #3a1822; border-color: #6b2a3a; color: var(--red); }
.btn[disabled], .btn.off { opacity: .4; pointer-events: none; }
.btn.block { display: block; width: 100%; }
.seg { display: flex; gap: 4px; background: var(--panel); border-radius: 12px; padding: 4px; margin-bottom: 10px; }
.seg button { flex: 1; background: none; border: 0; border-radius: 9px; padding: 9px 4px; color: var(--dim); font-weight: 700; font-size: .84rem; cursor: pointer; min-height: 40px; }
.seg button.on { background: var(--panel2); color: var(--ink); }
.bar { height: 10px; background: #0b1020; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 99px; }
.bar.violet > i { background: linear-gradient(90deg, var(--violet), #e0aaff); }
.row2 { display: flex; gap: 8px; } .row2 > * { flex: 1; }

/* Klick-Bereich */
#stage { display: flex; justify-content: center; padding: 6px 0 14px; }
#btn { width: min(50vw, 200px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; position: relative; background: radial-gradient(circle at 35% 28%, #ffe0a8, var(--amber) 52%, #c9731d); box-shadow: 0 0 0 7px #ffb34722, 0 0 0 16px #ffb3470f, 0 14px 44px #ffb34744, inset 0 -12px 26px #0004; font-size: min(21vw, 84px); line-height: 1; transition: transform .06s; touch-action: manipulation; }
#btn:active, #btn.press { transform: scale(.94); }
#btn .ico { pointer-events: none; display: block; }
.float { position: fixed; pointer-events: none; font-weight: 800; color: var(--amber); text-shadow: 0 2px 6px #000b; animation: up .9s ease-out forwards; z-index: 40; font-size: 1.1rem; }
@keyframes up { to { transform: translateY(-72px); opacity: 0; } }
#stats { display: flex; gap: 8px; margin-bottom: 10px; }
.stat { background: var(--panel); border-radius: 12px; padding: 8px 6px; flex: 1; text-align: center; min-width: 0; }
.stat b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { font-size: .68rem; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
#klicks b { color: var(--green); }

/* Update-Balken */
#upd { cursor: pointer; }
#updMsg { font-size: .85rem; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
#updMsg b { color: var(--dim); font-variant-numeric: tabular-nums; }

/* Listen */
.item { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 2px solid transparent; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; width: 100%; text-align: left; cursor: pointer; }
.item.can { border-color: #5eead455; background: var(--panel2); }
.item.dim2 { opacity: .5; }
.item .ico { font-size: 1.8rem; width: 2.2rem; text-align: center; flex: none; }
.item .mid { flex: 1; min-width: 0; }
.item .mid b { display: block; font-size: .98rem; }
.item .mid small { color: var(--dim); font-size: .76rem; display: block; line-height: 1.3; }
.item .cost { font-weight: 700; color: var(--amber); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.item .own { font-size: 1.35rem; font-weight: 800; color: var(--dim); min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; }
.item.owned { background: #1a2a2b; border-color: #5eead433; cursor: default; }
.item.locked { opacity: .4; cursor: default; }
.item.tree { margin-left: 0; }

/* Kern */
.big { font-size: 1.9rem; font-weight: 800; }
.violet-t { color: var(--violet); } .green-t { color: var(--green); } .amber-t { color: var(--amber); } .red-t { color: var(--red); }
.tier { position: relative; }

/* Loch */
#holeWrap { display: flex; justify-content: center; margin: 4px 0 8px; }
#holeCv { width: min(88vw, 340px); aspect-ratio: 1; display: block; }

/* Casino */
.scratch { position: relative; margin: 10px 0; user-select: none; }
.cells { display: flex; gap: 8px; }
.cell { flex: 1; height: 96px; border-radius: 14px; background: #0b1020; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.cells.win .cell { border-color: var(--amber); box-shadow: 0 0 18px #ffb34744; animation: pulse2 .8s 2; }
@keyframes pulse2 { 50% { transform: scale(1.06); } }
#scratchCv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; touch-action: none; cursor: crosshair; }
.coinbox { display: flex; align-items: center; justify-content: center; height: 110px; perspective: 600px; }
.coin { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f0b429 60%, #b07a10); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; box-shadow: 0 6px 20px #0006; }
.coin.spin { animation: flip .8s ease-in-out; }
@keyframes flip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(900deg) translateY(-26px); } 100% { transform: rotateY(1800deg) translateY(0); } }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table td { padding: 3px 4px; }
.table td:last-child { text-align: right; color: var(--dim); }

/* Rangliste */
.lb { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--panel); margin-bottom: 6px; }
.lb.me { background: #2a2340; border: 1px solid var(--violet); }
.lb .rk { width: 2.2em; font-weight: 800; color: var(--dim); text-align: center; flex: none; }
.lb:nth-child(1) .rk { color: #ffd34e; } .lb:nth-child(2) .rk { color: #cfd6e6; } .lb:nth-child(3) .rk { color: #e0985a; }
.lb .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb .vl { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--amber); white-space: nowrap; }
.ach { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--panel); margin-bottom: 6px; }
.ach .t { font-size: 1.5rem; width: 2rem; text-align: center; }
.ach.lock { opacity: .45; }
.ach b { display: block; font-size: .92rem; } .ach small { color: var(--dim); }

/* Eingabe & Modal */
input[type=text], textarea { width: 100%; background: #0b1020; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; user-select: text; -webkit-user-select: text; }
textarea { min-height: 90px; font-family: ui-monospace, monospace; font-size: .75rem; }
#modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-end; justify-content: center; background: #000a; }
#modal.on { display: flex; }
#modal .sheet { background: var(--panel); width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; animation: slide .2s ease; }
@keyframes slide { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
#modal .sheet > * + * { margin-top: 10px; }
.code { font-family: ui-monospace, monospace; font-size: 1.15rem; letter-spacing: .06em; text-align: center; background: #0b1020; border: 1px dashed var(--violet); border-radius: 12px; padding: 14px 8px; user-select: text; -webkit-user-select: text; word-break: break-all; }
#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%) translateY(30px); opacity: 0; background: #000d; color: #fff; padding: 10px 16px; border-radius: 12px; transition: all .25s; z-index: 95; max-width: 92vw; text-align: center; font-size: .9rem; pointer-events: none; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Glitch */
#bug { position: fixed; z-index: 60; font-size: 2.6rem; cursor: pointer; filter: drop-shadow(0 0 10px #5eead4); animation: wob 1.1s ease-in-out infinite; padding: 10px; touch-action: manipulation; }
@keyframes wob { 50% { transform: rotate(14deg) scale(1.12); } }
.warn { color: var(--red); }