:root{--bg:#eaf6ff;--ink:#23301f;--muted:#5d6b5a;--card:#fffaf0;--line:#e3dccb;--green:#4ea548;--green2:#2f7d32;--red:#d52b1e;--red2:#9b1d14;--gold:#f5b81c;--sky:#9fd8ff;--salt:#7a8ca3;--tab:#3c6e47}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#cfe9f8;color:var(--ink);font-family:"Nunito","Segoe UI Rounded","SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{display:flex;justify-content:center}
#app{position:relative;width:100%;max-width:520px;height:100%;overflow:hidden;background:linear-gradient(#dff2ff,#f4fbf0 60%);box-shadow:0 0 40px #0002}
button{font:inherit;color:inherit;cursor:pointer}
.screen{position:absolute;inset:0;display:none;overflow-y:auto;overflow-x:hidden;padding:max(12px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
.screen.on{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px 16px;margin:10px 0 0;font-weight:900;font-size:18px;background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green2);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green2)}
.btn small{display:block;font-weight:700;font-size:13px;opacity:.9}
.btn.sec{background:#fff;color:var(--ink);box-shadow:0 4px 0 #cdd6c6;border:2px solid #e3e9de}
.btn.red{background:var(--red);box-shadow:0 4px 0 var(--red2)}
.btn.gold{background:var(--gold);color:#3a2a00;box-shadow:0 4px 0 #c08a00}
.btn.ad{background:#fff4e0;color:#7a4a00;box-shadow:0 4px 0 #f0cf96;border:2px dashed #f0b14a}
.btn[disabled]{opacity:.45;pointer-events:none}
.muted{color:var(--muted)}
.row{display:flex;gap:8px;align-items:center}
.top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.top h2{margin:0;font-size:22px;flex:1}
.back{width:42px;height:42px;border-radius:14px;border:0;background:#fff;box-shadow:0 2px 0 #cdd6c6;font-size:22px;font-weight:900;flex:none}

/* Startbildschirm */
.hero{position:relative;border-radius:26px;overflow:hidden;height:210px;margin-bottom:12px;box-shadow:0 6px 18px #2f7d3233}
.hero .bgs{position:absolute;inset:0}.hero .bgs svg{width:100%;height:100%;display:block}
.hero .hcow{position:absolute;left:50%;bottom:-4px;width:190px;transform:translateX(-50%)}
.hero .hcow svg{width:100%;display:block}
.hero .ttl{position:absolute;left:0;right:0;top:12px;text-align:center}
.hero .ttl b{display:block;font-size:44px;letter-spacing:.5px;color:#fff;text-shadow:0 3px 0 #c0392b,0 6px 14px #0004;font-weight:1000;line-height:1}
.hero .ttl span{display:inline-block;margin-top:6px;background:#fffd;border-radius:999px;padding:3px 12px;font-weight:800;font-size:14px;color:#2f5a2c}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:0;border-radius:20px;background:#fff;padding:12px;text-align:left;box-shadow:0 4px 0 #d3dccc;display:flex;flex-direction:column;gap:2px;min-height:92px}
.tile .ic{font-size:28px}.tile b{font-size:17px}.tile small{color:var(--muted);font-size:13px}
.tile.big{grid-column:1/3;flex-direction:row;align-items:center;gap:12px;background:linear-gradient(135deg,#4ea548,#2f8a5a);color:#fff;box-shadow:0 4px 0 #23663a;min-height:0}
.tile.big small{color:#e8ffe6}.tile.big .ic{font-size:40px}
.tile .pill{align-self:flex-start;background:#ffe9a8;color:#7a5200;font-size:12px;font-weight:900;border-radius:999px;padding:1px 8px;margin-top:2px}
.minis{display:flex;gap:8px;margin-top:12px}
.minis button{flex:1;border:0;border-radius:14px;background:#fff;padding:10px 4px;font-weight:800;font-size:13px;box-shadow:0 3px 0 #d3dccc}
.minis button span{display:block;font-size:22px}
.goals{background:#fff;border-radius:20px;padding:12px 14px;margin-top:12px;box-shadow:0 4px 0 #d3dccc}
.goals .gh{display:flex;align-items:center;gap:8px;margin-bottom:6px}.goals .gh b{flex:1;font-size:17px}
.gbadge{background:var(--red);color:#fff;border-radius:999px;font-size:12px;font-weight:900;padding:2px 8px}
.flame{font-weight:900;color:#c0392b}
.gl{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #eef1ea}
.gl.ok{opacity:.55}.gtx{flex:1;font-size:14px;font-weight:700}
.gp{height:6px;border-radius:9px;background:#eef1ea;margin-top:4px;overflow:hidden}.gp i{display:block;height:100%;background:var(--green)}
.gr{font-size:12px;text-align:right;color:var(--muted);font-weight:800}
.gc{border:0;border-radius:12px;background:var(--gold);font-weight:900;font-size:12px;padding:6px 8px;box-shadow:0 3px 0 #c08a00}
.gdone{color:var(--green2);font-weight:900;font-size:20px}
.gfoot{font-size:12px;color:var(--muted);margin-top:6px}

/* Karriere */
.alps{display:flex;flex-direction:column;gap:10px}
.alp{display:flex;gap:12px;align-items:center;border:0;background:#fff;border-radius:18px;padding:10px 12px;text-align:left;box-shadow:0 4px 0 #d3dccc}
.alp .no{width:42px;height:42px;border-radius:14px;background:linear-gradient(#7cbf5e,#4ea548);color:#fff;font-weight:1000;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}
.alp.lock{opacity:.6}.alp.lock .no{background:#b9c2b4}
.alp .tx{flex:1}.alp .tx b{display:block;font-size:17px}.alp .tx small{color:var(--muted)}
.alp .st{color:var(--gold);font-size:18px;letter-spacing:1px;white-space:nowrap}.alp .st i{font-style:normal;color:#d9dfd5}
.alpcard{background:#fff;border-radius:22px;padding:16px;box-shadow:0 4px 0 #d3dccc}
.alpcard h3{margin:0 0 4px;font-size:24px}
.opps-list{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.opp{background:#f2f7ee;border-radius:14px;padding:6px 10px;font-weight:800;font-size:14px}
.task{background:#fff6dd;border-radius:14px;padding:10px 12px;margin:8px 0;font-size:15px}
.seg{display:flex;gap:6px;margin:6px 0 12px;flex-wrap:wrap}
.seg button{flex:1;min-width:70px;border:2px solid #dfe6da;background:#fff;border-radius:14px;padding:10px 6px;font-weight:800}
.seg button.on{border-color:var(--green);background:#eaf7e6;color:var(--green2)}
label.lb{display:block;font-weight:900;margin-top:10px}
.names input{width:100%;font:inherit;font-size:17px;padding:10px 12px;border-radius:14px;border:2px solid #dfe6da;margin-top:6px;background:#fff}

/* Spielfeld */
#s-game{padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));display:none;flex-direction:column;gap:8px;overflow:hidden}
#s-game.on{display:flex}
.gtop{display:flex;align-items:center;gap:8px}
.gtop .wk{flex:1;font-weight:900;font-size:15px;line-height:1.15}.gtop .wk small{display:block;font-weight:700;color:var(--muted);font-size:12px}
.saltb{background:#fff;border-radius:999px;padding:6px 10px;font-weight:900;box-shadow:0 2px 0 #cdd6c6;white-space:nowrap}
.hbtn{width:38px;height:38px;border:0;border-radius:12px;background:#fff;box-shadow:0 2px 0 #cdd6c6;font-weight:900;font-size:18px;flex:none}
.chips{display:flex;gap:6px}
.chip{flex:1;min-width:0;border:2px solid transparent;background:#fff;border-radius:14px;padding:5px 6px;display:flex;align-items:center;gap:5px;box-shadow:0 2px 0 #d3dccc;transition:border-color .2s,transform .2s}
.chip.on{border-color:var(--red);transform:translateY(-2px)}
.chip .av{font-size:20px;flex:none}
.chip .nm{flex:1;min-width:0;text-align:left;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.chip .nm small{display:block;color:var(--muted);font-weight:700;font-size:11px}
.chip .sc{font-weight:1000;font-size:17px;color:var(--green2)}
.chip.bump .sc{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.5);color:var(--red)}}
.weide{position:relative;background:linear-gradient(#8fd06e,#5fae4b);border-radius:20px;padding:8px 6px 6px;box-shadow:inset 0 -4px 0 #0001,0 4px 10px #2f7d3233}
.weide .wh{display:flex;justify-content:space-between;color:#fff;font-weight:900;font-size:12px;padding:0 4px 6px;text-shadow:0 1px 2px #0005}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;min-height:118px}
.slotw{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.cost{font-size:11px;font-weight:900;color:#fff;background:#0003;border-radius:99px;padding:1px 6px;white-space:nowrap}
.cost.no{background:#c0392b}
.card{position:relative;width:100%;aspect-ratio:5/7;border-radius:12px;background:var(--card);border:2px solid #fff;box-shadow:0 3px 0 #0002,0 2px 8px #0002;display:flex;flex-direction:column;overflow:hidden;padding:0;text-align:center;transition:transform .18s,box-shadow .18s}
.card .band{height:6px;flex:none}
.card .pic{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:2px}
.card .pic svg{width:100%;height:100%;display:block}
.card .cn{font-size:9.5px;font-weight:900;line-height:1.05;padding:0 2px 4px;color:#3b3325;min-height:22px;display:flex;align-items:center;justify-content:center}
.card .pt{position:absolute;top:8px;left:4px;background:#fff;border-radius:99px;min-width:20px;height:20px;font-size:11px;font-weight:1000;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #0003}
.card.sel{transform:translateY(-8px) scale(1.04);box-shadow:0 0 0 3px var(--gold),0 10px 18px #0004}
.card.dim{filter:grayscale(.6) brightness(.9)}
.card.fresh{animation:pop .45s ease}
.card.gone{animation:gone .5s ease forwards}
@keyframes pop{from{transform:translateY(-30px) rotate(-6deg) scale(.6);opacity:0}}
@keyframes gone{to{transform:translateY(-60px) scale(.5);opacity:0}}
.salts{position:absolute;right:3px;top:6px;display:flex;flex-direction:column;gap:2px}
.salts i{width:13px;height:13px;border-radius:4px;background:#fff;border:1.5px solid #9aa9bc;box-shadow:0 1px 0 #0002;display:block}
.salts b{font-size:10px;background:#fff;border-radius:6px;padding:0 3px;border:1.5px solid #9aa9bc}
.c-cow .band{background:#8b5e3c}.c-bell .band{background:#e7b13f}.c-kranz .band{background:#e0325a}.c-goods .band{background:#f2b632}.c-crew .band{background:#2f5fb8}.c-action .band{background:#d52b1e}.c-event .band{background:#55606e}
.detail{background:#fff;border-radius:18px;padding:10px 12px;box-shadow:0 3px 0 #d3dccc;display:flex;gap:10px;align-items:center;min-height:86px}
.detail .dpic{width:62px;flex:none}.detail .dpic svg{width:100%;display:block}
.detail .dt{flex:1;font-size:13px;line-height:1.3}.detail .dt b{display:block;font-size:16px}
.detail .gain{color:var(--green2);font-weight:900}
.detail .take{border:0;border-radius:14px;background:var(--red);color:#fff;font-weight:900;padding:12px 12px;box-shadow:0 3px 0 var(--red2);flex:none;font-size:15px;line-height:1.1}
.detail .take small{display:block;font-size:11px;opacity:.9}
.detail.wait{justify-content:center;color:var(--muted);font-weight:800}
.herd{flex:1;min-height:0;background:#fff;border-radius:18px;padding:8px 10px;box-shadow:0 3px 0 #d3dccc;display:flex;flex-direction:column;overflow:hidden}
.herd .hh{display:flex;align-items:center;gap:8px}.herd .hh b{flex:1;font-size:15px}
.herd .hh button{border:0;background:#eef6ea;border-radius:12px;padding:6px 10px;font-weight:900;font-size:13px;color:var(--green2)}
.herdrow{display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px;overflow-y:auto;padding:4px 0;min-height:64px;scrollbar-width:none;flex:0 1 auto}
.herdrow::-webkit-scrollbar{display:none}
.hc{flex:none;width:80px;text-align:center;font-size:10px;font-weight:800;color:var(--muted)}
.hc svg{width:80px;height:64px;display:block}
@media (min-height:760px){.hc{width:92px}.hc svg{width:92px;height:74px}.slots{min-height:130px}}
.hc.new{animation:pop .5s}
.goodsrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.gd{background:#f4f6f1;border-radius:10px;padding:3px 7px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:3px}
.gd svg{width:20px;height:20px}
.gd.warn{background:#fff0e6;color:#a4471b}
.empty{color:var(--muted);font-size:13px;padding:14px 4px;text-align:center}
.ticker{font-size:12.5px;font-weight:700;color:#3d4a39;background:#ffffffb0;border-radius:12px;padding:6px 10px;min-height:30px;line-height:1.3}

/* Überlagerungen */
.ov{position:fixed;inset:0;z-index:60;background:#1b2a1bb3;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadein .2s}
.ov .box{background:#fff;border-radius:24px;max-width:460px;width:100%;max-height:100%;overflow:auto;padding:18px;box-shadow:0 10px 40px #0006}
.ov h2{margin:0 0 8px;font-size:24px;text-align:center}
.evc{display:flex;flex-direction:column;align-items:center;text-align:center}
.evc .eart{width:150px}.evc .eart svg{width:100%;display:block}
.evc .fx{margin-top:8px;display:flex;flex-direction:column;gap:4px;width:100%}
.evc .fx div{background:#f4f6f1;border-radius:10px;padding:5px 10px;font-weight:800;font-size:14px}
.stand{width:100%;border-collapse:collapse;margin:6px 0}
.stand td{padding:7px 4px;border-bottom:1px solid #eef1ea;font-weight:700}
.stand td:last-child{text-align:right;font-weight:1000;color:var(--green2);font-size:17px}
.stand tr.me td{background:#fff7da}
.bk{width:100%;border-collapse:collapse}
.bk td{padding:5px 2px;border-bottom:1px dashed #e5e9e1;font-size:14px}
.bk td:last-child{text-align:right;font-weight:900}
.bk tr.tot td{border-top:2px solid #333;border-bottom:0;font-size:17px;font-weight:1000}
.bigherd{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:6px 0}
.bigherd .hc{width:96px}.bigherd .hc svg{width:96px;height:77px}
.tabs{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}
.tabs button{border:0;border-radius:12px;background:#eef1ea;padding:6px 10px;font-weight:800;font-size:13px;white-space:nowrap}
.tabs button.on{background:var(--green);color:#fff}

/* Alpabzug-Umzug */
#s-parade{padding:0;overflow:hidden;background:#9fd8ff}
.pscene{position:absolute;inset:0}.pscene>svg{position:absolute;left:0;top:0;width:100%;height:62%}
.pground{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(#5aa548,#3f8a3a)}
.proad{position:absolute;left:-5%;right:-5%;bottom:13%;height:22%;background:#c9b48a;border-top:4px solid #b39a6a;border-bottom:4px solid #b39a6a;transform:perspective(400px) rotateX(20deg)}
.crowd{position:absolute;left:0;right:0;bottom:35%;height:56px;display:flex;justify-content:space-around;align-items:flex-end;font-size:30px;z-index:2}
.crowd span{animation:cheer 1.2s infinite ease-in-out}
.crowd span:nth-child(2n){animation-delay:.3s}.crowd span:nth-child(3n){animation-delay:.6s}
@keyframes cheer{50%{transform:translateY(-8px)}}
.flags{position:absolute;left:0;right:0;top:40%;height:20px;z-index:2;background:repeating-linear-gradient(90deg,#d52b1e 0 18px,#fff 18px 36px);clip-path:polygon(0 0,100% 0,100% 30%,97% 100%,94% 30%,91% 100%,88% 30%,85% 100%,82% 30%,79% 100%,76% 30%,73% 100%,70% 30%,67% 100%,64% 30%,61% 100%,58% 30%,55% 100%,52% 30%,49% 100%,46% 30%,43% 100%,40% 30%,37% 100%,34% 30%,31% 100%,28% 30%,25% 100%,22% 30%,19% 100%,16% 30%,13% 100%,10% 30%,7% 100%,4% 30%,1% 100%,0 30%)}
.lane{position:absolute;left:0;right:0;bottom:14%;height:26%;z-index:3}
.walker{position:absolute;bottom:0;width:150px;left:100%;animation:walk var(--d,7s) linear forwards}
.walker svg{width:100%;display:block;animation:bob .5s infinite ease-in-out}
.walker .wl{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:12px;font-weight:900;color:#fff;text-shadow:0 1px 3px #000a;white-space:nowrap}
.walker.small{width:86px}
@keyframes walk{from{left:100%}to{left:-40%}}
@keyframes bob{50%{transform:translateY(-4px) rotate(-1deg)}}
.lg{animation:leg .5s infinite ease-in-out;transform-box:fill-box;transform-origin:50% 0}
@keyframes leg{50%{transform:rotate(12deg)}}
.wag{animation:wag .4s infinite;transform-box:fill-box;transform-origin:100% 100%}
@keyframes wag{50%{transform:rotate(25deg)}}
.phead{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;z-index:5;display:flex;align-items:center;gap:8px}
.phead .pn{flex:1;background:#fffe;border-radius:16px;padding:8px 12px;font-weight:900;box-shadow:0 3px 0 #0002}
.phead .pn small{display:block;color:var(--muted);font-weight:700;font-size:12px}
.phead .ps{background:var(--red);color:#fff;font-weight:1000;font-size:26px;border-radius:16px;padding:6px 14px;min-width:70px;text-align:center;box-shadow:0 3px 0 var(--red2)}
.pfloat{position:absolute;z-index:6;font-weight:1000;font-size:24px;color:#fff;text-shadow:0 2px 0 #c0392b,0 3px 8px #0006;animation:fl 1.3s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes fl{from{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.1)}to{transform:translateY(-70px);opacity:0}}
.pstamp{position:absolute;left:50%;top:22%;z-index:7;transform:translateX(-50%);background:#fff;border-radius:18px;padding:10px 16px;font-weight:1000;font-size:18px;box-shadow:0 6px 20px #0004;animation:stamp .5s ease;white-space:nowrap}
@keyframes stamp{from{transform:translateX(-50%) scale(2);opacity:0}}
.pskip{position:absolute;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:8;border:0;border-radius:14px;background:#fffe;padding:10px 14px;font-weight:900;box-shadow:0 3px 0 #0003}
.queen{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#fff8d6ee,#f5b81cbb);animation:fadein .4s;text-align:center;padding:20px}
.queen .qc{width:min(80vw,320px);animation:qin 1s ease}.queen .qc svg{width:100%;display:block}
@keyframes qin{from{transform:scale(.3) rotate(-10deg);opacity:0}}
.queen h2{margin:4px 0;font-size:30px;color:#7a4a00}.queen p{margin:0;font-weight:800;font-size:17px}
.conf{position:fixed;top:-20px;width:10px;height:14px;z-index:120;pointer-events:none;animation:conf 2.6s linear forwards}
@keyframes conf{to{transform:translateY(110vh) rotate(720deg)}}

/* Resultat */
.podium{text-align:center;margin:6px 0 10px}
.podium .big{font-size:56px}
.podium h2{margin:4px 0;font-size:28px}
.stars{font-size:34px;color:var(--gold);letter-spacing:4px}.stars i{font-style:normal;color:#dde3d8}
.req{font-size:14px;text-align:left;margin:4px auto;max-width:360px}
.req div{padding:3px 0}
.help h3{margin:14px 0 4px;font-size:18px}.help p{margin:0 0 6px;line-height:1.45}
.help .ex{display:flex;gap:6px;align-items:center;margin:6px 0}.help .ex svg{width:60px;height:48px;flex:none}
.coll{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ci{border:2px solid #e3e9de;background:#fff;border-radius:16px;padding:8px 4px;font-weight:800;font-size:12px;text-align:center}
.ci.on{border-color:var(--green);background:#eaf7e6}.ci.lock{opacity:.55}
.ci svg{width:100%;height:56px;display:block}
.ci small{display:block;color:var(--muted);font-weight:700}
.info{background:#fff;border-radius:16px;padding:6px 12px}.info div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eef1ea}.info div:last-child{border:0}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:#23301f;color:#fff;border-radius:999px;padding:10px 18px;font-weight:800;z-index:130;transition:transform .3s;max-width:90%;text-align:center}
#toast.on{transform:translate(-50%,0)}
.coach{background:#fff7da;border:2px solid #f5d27a;border-radius:14px;padding:6px 10px;font-size:13px;font-weight:800;color:#6b4a00}
.shot .screen.on,.shot .ov,.shot .card.fresh,.shot .hc.new{animation:none}
@media (max-height:640px){.slots{min-height:100px}.detail{min-height:72px;padding:8px}.detail .dpic{width:48px}.hc svg{width:58px;height:46px}.hc{width:58px}}
@media (min-width:700px){#app{border-radius:0}}