:root{--red:#d52b1e;--red2:#a31d13;--ink:#22263a;--soft:#f6f2ec;--card:#fff;--gold:#f5b700;--gold2:#c98f00;--ok:#1fa463;--mut:#6b6b78;--green:#4f9a3b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#7cc24f;color:var(--ink);font-family:"Segoe UI",Roboto,system-ui,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;overflow:hidden}
#app{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden}
.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:none}
.screen.on{display:block}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none;padding:0}
h3{margin:0 0 10px;font-size:21px}h4{margin:14px 0 6px;font-size:16px}
.mut{color:var(--mut)}.small{font-size:13px}.pad{padding:16px}
.gv{display:inline-block;width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c4,#f5b700 45%,#b07800);box-shadow:inset 0 0 0 1.5px #c98f00;vertical-align:-.15em}
/* ---------- Startbildschirm ---------- */
#s-home{background:linear-gradient(#7fc4f0,#d6eeff 55%,#7cc24f 55%);overflow:hidden}
.sky{position:absolute;inset:0}
.sun{position:absolute;right:12%;top:7%;width:70px;height:70px;border-radius:50%;background:radial-gradient(#fff7c2,#ffd54f);box-shadow:0 0 40px #ffe58a}
.cloud{position:absolute;height:26px;background:#fff;border-radius:20px;opacity:.9;animation:drift 40s linear infinite}
.cloud:before{content:"";position:absolute;left:18px;top:-14px;width:40px;height:34px;background:#fff;border-radius:50%}
.c1{width:110px;top:12%;left:-120px}.c2{width:80px;top:22%;left:-90px;animation-duration:60s;animation-delay:-25s}
@keyframes drift{to{transform:translateX(130vw)}}
.mtn{position:absolute;bottom:45%;background:#8aa3b8;clip-path:polygon(0 100%,50% 0,100% 100%)}
.mtn:after{content:"";position:absolute;left:35%;top:0;width:30%;height:28%;background:#fff;clip-path:polygon(0 100%,50% 0,100% 100%,70% 80%,50% 100%,30% 78%)}
.m1{left:-10%;width:60%;height:34%}.m2{left:30%;width:55%;height:42%;background:#7b93a8}.m3{right:-15%;width:50%;height:30%;background:#9cb3c6}
.meadow{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(#86c95a,#5c9a3e)}
.hm{position:absolute;font-size:44px;filter:drop-shadow(0 4px 2px #0003)}
.h7{left:58%;top:40%;font-size:38px}.h8{left:18%;top:46%;font-size:34px;animation:bob 3.6s ease-in-out infinite}.h9{left:84%;top:44%;font-size:28px}.h10{left:40%;top:52%;font-size:30px}
.cable{position:absolute;left:52%;right:-5%;bottom:58%;height:2px;background:#555;transform:rotate(-24deg);transform-origin:left}.cable span{position:absolute;left:38%;top:-6px;font-size:30px;animation:ride 14s ease-in-out infinite alternate}@keyframes ride{to{left:70%}}
.lh{font-size:.7em}
.h1{left:12%;top:12%}.h2{left:44%;top:4%;font-size:50px}.h3{left:70%;top:22%;font-size:40px;animation:bob 3s ease-in-out infinite}.h4{left:4%;top:-4%}.h5{right:4%;top:2%}.h6{left:30%;top:30%;font-size:30px}
@keyframes bob{50%{transform:translateY(-4px)}}
.title{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 13%);text-align:center}
.logo{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-weight:900;font-size:clamp(34px,10vw,52px);letter-spacing:-1px;padding:8px 22px 10px;border-radius:20px;box-shadow:0 6px 0 var(--red2),0 12px 30px #0003;transform:rotate(-2deg)}
.lc{display:inline-block;width:.62em;height:.62em;background:#fff;border-radius:.12em;position:relative;flex:none}
.lc:before,.lc:after{content:"";position:absolute;background:var(--red);left:50%;top:50%;transform:translate(-50%,-50%)}
.lc:before{width:62%;height:20%}.lc:after{width:20%;height:62%}
.sub{margin-top:14px;font-weight:900;font-size:clamp(20px,6vw,28px);color:#fff;text-shadow:0 2px 0 #0004,0 0 12px #0003}
.homebox{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);max-width:420px;margin:0 auto;background:#fffffff0;border-radius:24px;padding:16px;text-align:center;box-shadow:0 10px 30px #0003}
.vn{font-size:20px}.foot{margin:10px 0 0;font-size:12px;color:var(--mut)}
.btn{display:block;width:100%;background:var(--red);color:#fff;font-weight:800;font-size:17px;border-radius:16px;padding:13px 16px;box-shadow:0 4px 0 var(--red2);margin-top:10px;text-align:center}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red2)}
.btn.big{font-size:21px;padding:16px}
.btn.sec{background:#fff;color:var(--ink);box-shadow:0 4px 0 #d9d4cc;border:1px solid #e9e4dc}
.btn.gold{background:var(--gold);color:#3a2a00;box-shadow:0 4px 0 var(--gold2)}
.btn.ad{background:#22263a;color:#fff;box-shadow:0 4px 0 #0a0c16}
.sb.ad{width:auto;min-width:50px;padding:0 8px;font-size:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.sb.ad small{font-size:10.5px;font-weight:900;margin-top:2px;white-space:nowrap}
.btn.danger{background:#fff;color:var(--red);box-shadow:0 4px 0 #f0c9c5;border:1px solid #f0c9c5}
.row{display:flex;gap:8px;flex-wrap:wrap}.row .btn{flex:1;min-width:120px}
/* ---------- Spiel ---------- */
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#hud{position:absolute;left:8px;right:8px;top:calc(env(safe-area-inset-top,0px) + 8px);display:flex;gap:6px;align-items:center;pointer-events:none}
#hud>*{pointer-events:auto}
.lvlb{position:relative;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:18px;box-shadow:0 3px 0 var(--red2),0 4px 10px #0003;border:3px solid #fff;flex:none}
.lvlb i{position:absolute;left:4px;right:4px;bottom:-7px;height:6px;background:#0003;border-radius:4px;overflow:hidden}
.lvlb i b{display:block;height:100%;background:var(--gold);width:0}
.pill{display:flex;align-items:center;gap:5px;background:#fffffff2;border-radius:999px;padding:6px 10px 6px 6px;font-weight:800;font-size:15px;box-shadow:0 2px 6px #0002;min-width:0;flex:1 1 auto;justify-content:flex-start}
.pill b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill .fr{background:var(--red);color:#fff;border-radius:999px;font-size:10px;padding:3px 5px;font-weight:900}
.pill .gv{font-size:18px}.pill em{font-style:normal;background:var(--ok);color:#fff;border-radius:50%;width:18px;height:18px;line-height:18px;text-align:center;font-size:14px;margin-left:auto}
#h-ch{flex:0 1 auto}
#quests{position:absolute;left:8px;top:calc(env(safe-area-inset-top,0px) + 66px);display:flex;flex-direction:column;gap:8px}
.qi{position:relative;width:52px;height:52px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 8px #0004;background:#fff}
.qi img{width:100%;height:100%;display:block}
.qi i{position:absolute;left:0;right:0;bottom:0;background:#1fa46355;pointer-events:none}
.qi em{position:absolute;right:-1px;top:-1px;background:var(--red);color:#fff;font-style:normal;font-weight:900;width:20px;height:20px;border-radius:50%;font-size:14px;line-height:20px;text-align:center;border:2px solid #fff}
.qi.new{animation:pulse 1.4s ease-in-out infinite}.qi.ev{border-color:var(--gold)}
@keyframes pulse{50%{transform:scale(1.08)}}
#side{position:absolute;right:8px;top:calc(env(safe-area-inset-top,0px) + 66px);display:flex;flex-direction:column;gap:8px}
.sb{position:relative;width:50px;height:50px;border-radius:16px;background:#fff;box-shadow:0 3px 0 #0002,0 4px 10px #0002;font-size:26px}
.sb em{position:absolute;right:-5px;top:-5px;background:var(--red);color:#fff;font-style:normal;font-weight:900;min-width:20px;height:20px;border-radius:10px;font-size:12px;line-height:20px;padding:0 4px;border:2px solid #fff}
.sb.ev{background:linear-gradient(#fff,#ffe9e4);animation:pulse 2s ease-in-out infinite}
#bar{position:absolute;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);display:flex;gap:6px;max-width:520px;margin:0 auto}
#bar button{flex:1;background:#fffffff2;border-radius:18px;padding:6px 2px 7px;font-weight:800;font-size:13px;box-shadow:0 3px 0 #0002,0 4px 12px #0002;display:flex;flex-direction:column;align-items:center}
#bar button span{font-size:24px;line-height:1.2}
#b-build{background:var(--red)!important;color:#fff;box-shadow:0 3px 0 var(--red2),0 4px 12px #0003!important}
.mbar{position:absolute;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);max-width:520px;margin:0 auto;background:#fffffff5;border-radius:20px;padding:10px 12px;box-shadow:0 4px 16px #0003;text-align:center}
.mbar .pn{font-weight:800;margin-bottom:8px}
.mbar .row{justify-content:center}
.rb{width:64px;height:52px;border-radius:16px;font-size:26px;font-weight:900;background:#eef0f3;box-shadow:0 3px 0 #ccd}
.rb.ok{background:var(--ok);color:#fff;box-shadow:0 3px 0 #137a47}.rb.no{background:#fff;color:var(--red);border:2px solid #f0c9c5}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);transform:translate(-50%,-140px);z-index:120;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;transition:transform .3s;max-width:92%;text-align:center;box-shadow:0 6px 20px #0005;font-size:15px}
#toast.on{transform:translate(-50%,0)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:110}
.flt{position:absolute;transform:translate(-50%,0);font-weight:900;font-size:17px;color:#fff;text-shadow:0 2px 0 #0007,0 0 6px #0006;white-space:nowrap;animation:up 1.3s ease-out forwards}
@keyframes up{to{transform:translate(-50%,-60px);opacity:0}}
.coin{position:absolute;width:18px;height:18px;margin:-9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c4,#f5b700 50%,#b07800);box-shadow:0 1px 3px #0005;transition:transform .7s cubic-bezier(.5,-.3,.7,1),opacity .7s}
/* ---------- Fenster ---------- */
#sheet{position:fixed;inset:0;z-index:60;background:#0004;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
#sheet .sh{position:relative;background:var(--soft);width:100%;max-width:540px;max-height:78%;overflow:auto;border-radius:24px 24px 0 0;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 18px);animation:slide .25s ease}
#sheet.tall .sh{height:78%}
.x{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:#fff;font-size:16px;box-shadow:0 2px 4px #0002;z-index:2}
@keyframes slide{from{transform:translateY(40px);opacity:.4}}@keyframes fade{from{opacity:0}}
#modal{position:fixed;inset:0;z-index:80;background:#1b1e2ecc;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s}
#modal .md{background:#fff;border-radius:24px;max-width:460px;width:100%;padding:18px;max-height:100%;overflow:auto;box-shadow:0 12px 40px #0006;animation:pop .25s ease}
#modal.tallm .md{max-height:92%}
@keyframes pop{from{transform:scale(.92);opacity:0}}
#modal.rvm{align-items:flex-end;background:#1b1e2e33}#modal.rvm .md{max-width:480px}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:4px 0 6px;padding-bottom:4px}
.tb{background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 2px 0 #0001}
.tb.on{background:var(--red);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
.card{background:#fff;border-radius:16px;padding:6px 6px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 2px 0 #0001,0 3px 10px #0000000d;position:relative}
.card img{width:76px;height:76px}.card b{font-size:13px;line-height:1.15;min-height:30px;display:flex;align-items:center}
.card .pr{font-weight:900;font-size:13px;margin-top:2px}.card .mi{font-size:11px;color:var(--mut);margin-top:2px}
.card.no{opacity:.6}.card.lock img{filter:grayscale(1) brightness(.9)}.card.got{outline:2px solid var(--ok)}
.mini3{grid-template-columns:repeat(3,1fr)}
.bi,.ci,.qh{display:flex;gap:12px;align-items:center;padding-right:40px}.bi img{width:92px;height:92px;flex:none}
.ci img,.qh img{width:72px;height:72px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px #0003;flex:none}
.bi h3,.ci h3,.qh h3{margin:0}.bi p{margin:4px 0}.st{font-weight:800}
.tasks{display:flex;flex-direction:column;gap:6px}
.task{display:grid;grid-template-columns:1fr auto;gap:2px 8px;background:#fff;border-radius:14px;padding:10px 12px;text-align:left;box-shadow:0 2px 0 #0001}
.task .tn{font-weight:700}.task .td{color:var(--mut);font-size:13px;text-align:right}.task .tr{grid-column:span 2;font-size:13px;color:var(--ok);font-weight:800}.task .tl{grid-column:span 2;font-size:13px;color:var(--mut)}
.task.lock{opacity:.6}
.busy{background:#fff;border-radius:16px;padding:12px;margin-top:10px}.busy p{margin:6px 0 0}
.bar{height:10px;background:#eceae6;border-radius:6px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#5ed18f);border-radius:6px}
.dlg{display:flex;gap:12px;align-items:flex-start}.dlg>img{width:86px;height:86px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px #0003;flex:none}
.dlg .sp{position:relative;background:#f6f2ec;border-radius:18px;padding:10px 12px;flex:1}
.dlg .sp:before{content:"";position:absolute;left:-8px;top:24px;border:8px solid transparent;border-right-color:#f6f2ec;border-left:0}
.dlg .sp p{margin:6px 0 0;font-size:16px;line-height:1.4}
.rvb{width:86px;height:86px;border-radius:50%;background:#e8daef;display:flex;align-items:center;justify-content:center;font-size:44px;flex:none}
.goals{list-style:none;padding:0;margin:10px 0}.goals li{padding:8px 4px;border-bottom:1px solid #eee;display:flex;gap:6px}.goals li b{margin-left:auto}.goals li.ok{color:var(--ok)}
.rw{font-weight:800;color:#7a5a00;background:#fff4d6;border-radius:12px;padding:8px 10px}
.done{background:#e9fbf2;border-radius:14px;padding:10px 12px;margin:12px 0;text-align:center;font-size:16px}
.newc{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;font-weight:700}.newc img{width:44px;height:44px;border-radius:50%}
.lvup{text-align:center}.lvup .big{font-size:56px;font-weight:900;color:var(--red)}
.unl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}.unl div{width:84px;font-size:12px;font-weight:700}.unl img{width:64px;height:64px;display:block;margin:0 auto}
.streak{background:#ffe9e4;border-radius:14px;padding:10px 12px;font-size:16px}
.dgoals .dg{display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid #eee;font-size:15px}.dg span:first-child{flex:1}.dg .pg{color:var(--mut);font-size:13px}.dg.ok span:first-child{font-weight:700}
.rwd{color:var(--ok);font-weight:800;font-size:13px}
.mini{background:var(--gold);color:#3a2a00;font-weight:900;border-radius:10px;padding:6px 10px;box-shadow:0 2px 0 var(--gold2);font-size:13px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{position:relative;background:#f6f2ec;border-radius:10px;padding:6px 2px;text-align:center;font-size:11px;display:flex;flex-direction:column;gap:2px;min-height:62px;justify-content:center}
.day b{font-size:12px}.day small{font-size:10px;color:var(--mut)}.day.cur{background:#fff4d6;outline:2px solid var(--gold)}.day.got{opacity:.55}
.day em{position:absolute;right:2px;top:1px;font-style:normal;color:var(--ok);font-weight:900}
.day:last-child{background:#ffe9e4}
.wk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.wk span:first-child{flex:1 1 100%}.wk .bar{flex:1;margin:0}
.evh{display:flex;gap:12px;align-items:center;color:#fff;border-radius:18px;padding:12px}.evh .big{font-size:46px}.evh p{margin:4px 0}.evh small{opacity:.9}
.tok{font-size:16px}.evl{padding-left:18px}.evl li{margin:6px 0}
.cmp{display:flex;align-items:center;gap:8px;margin:12px 0}.cmp div{flex:1;background:#f6f2ec;border-radius:14px;padding:10px;text-align:center}.cmp div b{display:block;font-size:24px}.cmp .vs{flex:none;background:none;font-weight:900;color:var(--red)}
.menu{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.menu button{background:#fff;border-radius:16px;padding:10px 4px;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 2px 0 #0001}.menu span{font-size:28px}
.set{background:#f6f2ec;border-radius:16px;padding:10px;margin:8px 0}
.its{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:6px 0}.its span{background:#fff;border-radius:10px;text-align:center;font-size:22px;padding:4px 2px;opacity:.5}.its span.has{opacity:1}.its small{display:block;font-size:9px;line-height:1.1;color:var(--mut)}
.achs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ach{background:#f6f2ec;border-radius:12px;padding:8px;font-size:13px;display:flex;flex-direction:column;gap:2px}.ach.got{background:#fff4d6}.ach small{color:var(--mut)}
.stt{width:100%;border-collapse:collapse}.stt td{padding:7px 4px;border-bottom:1px solid #eee}.stt td:last-child{text-align:right;font-weight:800}
.sets{display:flex;flex-direction:column;gap:6px}
.sw{display:flex;gap:10px;align-items:flex-start;background:#f6f2ec;border-radius:14px;padding:12px;font-weight:700}.sw input{width:22px;height:22px;flex:none;accent-color:var(--red)}
.sw small{display:block;font-weight:400;color:var(--mut);font-size:12.5px;margin-top:2px}
.nm{font-weight:700;font-size:14px;color:var(--mut)}.nm input{display:block;width:100%;margin-top:4px;font:inherit;font-size:17px;padding:10px 12px;border:2px solid #e3ddd3;border-radius:12px;color:var(--ink);user-select:text;-webkit-user-select:text}
.help{padding-left:4px;list-style:none}.help li{margin:8px 0;line-height:1.35}
.away{list-style:none;padding:0}.away li{padding:8px 2px;border-bottom:1px solid #eee}
.offer{text-align:center}.offer .big{font-size:60px}.offer .price{font-size:22px;font-weight:900;color:var(--red)}
@media (min-width:700px){#quests,#side{top:76px}.qi{width:60px;height:60px}}