:root{--grass:#4f8c3f;--grass2:#3a6e2f;--grass3:#2d5a25;--wood:#a06a37;--wood2:#7a4c25;--wood3:#5c3719;--cream:#fff8ec;--paper:#fffdf6;--ink:#2b2a22;--mut:#6f6a5c;--no:#c8553d;--no2:#9c3e2b;--yes:#4f9d3a;--yes2:#3a7a2a;--gold:#f2b134}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--grass2);color:var(--ink);font-family:"Segoe UI",Roboto,system-ui,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#6aa653 0%,var(--grass) 45%,var(--grass2) 100%)}
#app:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M8 30c2-6 4-9 5-14M13 30c0-5 1-8 3-11M30 14c1-4 3-7 5-9M34 14c0-3 0-5 1-7' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-size:44px 44px}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);color:#fff}
.screen.on{display:flex;animation:in .25s ease}
.screen>*{flex-shrink:0}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2,h3{margin:0}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}
button:disabled{opacity:.55;cursor:default}
label{font-weight:800;font-size:14px;color:#e6f2dc;display:block;margin:6px 0 8px}
.muted{color:#e2efd8;font-size:14px;line-height:1.45}
.muted.small{font-size:12.5px;margin-top:16px}
.top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.top h2{flex:1;font-size:22px;text-shadow:0 2px 0 #0002}
.back{width:44px;height:44px;border-radius:14px;background:var(--cream);color:var(--wood2);box-shadow:0 3px 0 var(--wood3);font-size:22px;font-weight:900;flex:none}
.back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wood3)}
/* Holzbretter */
.wood{background:linear-gradient(180deg,#b27840,#9a6434)}
.sign,.gbar,.btn{background-color:var(--wood);background-image:repeating-linear-gradient(176deg,#ffffff10 0 2px,transparent 2px 9px),linear-gradient(180deg,#b37a42,#93602f)}
/* Startseite */
.hero{background:var(--cream);color:var(--ink);border-radius:24px;padding:0 0 16px;overflow:hidden;box-shadow:0 10px 28px #0004;position:relative}
.vil{display:block;width:100%;height:auto;background:linear-gradient(180deg,#bfe3f5,#e8f5fb)}
.sign{margin:-26px auto 0;position:relative;width:max-content;max-width:92%;color:#fff8e6;font-weight:900;font-size:27px;letter-spacing:-.3px;padding:9px 18px;border-radius:12px;box-shadow:0 4px 0 var(--wood3),0 8px 16px #0003;text-shadow:0 2px 0 #0004;text-align:center;line-height:1.1}
.sign:before,.sign:after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#e6c79a;box-shadow:inset 0 1px 1px #0005;transform:translateY(-50%)}
.sign:before{left:7px}.sign:after{right:7px}
.lead{margin:12px 16px 0;font-size:15.5px;line-height:1.45}
.stats{display:flex;gap:6px;margin:12px 14px 0;flex-wrap:wrap}
.pill{background:#eef5e6;color:var(--grass3);border-radius:999px;padding:6px 11px;font-weight:800;font-size:13px;white-space:nowrap}
.btn{display:block;color:#fff;font-weight:900;font-size:18px;border-radius:16px;padding:15px 18px;box-shadow:0 4px 0 var(--wood3),0 6px 14px #0002;width:100%;margin-top:12px;text-shadow:0 1px 0 #0004}
.btn small{display:block;font-size:13px;font-weight:700;opacity:.92;margin-top:2px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood3)}
.btn.sec{background:#ffffff22;color:#fff;box-shadow:0 4px 0 #0002;text-shadow:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tile{background:var(--cream);color:var(--ink);border-radius:20px;padding:14px;text-align:left;box-shadow:0 4px 0 #0000001f;display:flex;flex-direction:column;gap:4px;min-height:108px;transition:transform .1s}
.tile:active{transform:scale(.97)}
.tile .ic{width:44px;height:44px;border-radius:13px;background:#e6f0dc;display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:2px}
.tile b{font-size:16px}
.tile small{color:var(--mut);font-size:12.5px;line-height:1.3}
/* Spiel */
#s-game{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
.gbar{display:flex;align-items:center;gap:6px;border-radius:20px;padding:10px 8px 8px;box-shadow:0 4px 0 var(--wood3),0 8px 18px #0003}
.back.mini{width:36px;height:36px;border-radius:11px;font-size:18px;align-self:center}
.meters{flex:1;display:flex;justify-content:space-around}
.meter{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;width:62px}
.meter small{font-size:11.5px;font-weight:800;color:#fff4e0;text-shadow:0 1px 0 #0005}
.dot{display:block;height:12px;width:12px;display:flex;align-items:center;justify-content:center}
.dot:after{content:"";width:0;height:0;border-radius:50%;background:#fff8e6;box-shadow:0 0 0 2px #0002;transition:width .15s,height .15s}
.dot.on.small:after{width:6px;height:6px}
.dot.on.big:after{width:12px;height:12px}
.mbox{width:50px;height:50px;border-radius:14px;background:#4a2c13;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0007;display:flex;align-items:center;justify-content:center}
.mbox .fl{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(180deg,#ffe08a,var(--gold));transition:height .6s cubic-bezier(.3,1.4,.5,1)}
.mbox span{position:relative;font-size:24px;opacity:.95;filter:drop-shadow(0 1px 1px #0006)}
.meter.warn .fl{background:linear-gradient(180deg,#ff9b85,#e0503a)}
.meter.warn .mbox{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:inset 0 2px 4px #0007,0 0 0 3px #ffb4a5}}
.meter.up .mbox{animation:flashu .8s}
.meter.down .mbox{animation:flashd .8s}
@keyframes flashu{30%{box-shadow:inset 0 2px 4px #0007,0 0 0 4px #b8f59a;transform:scale(1.08)}}
@keyframes flashd{30%{box-shadow:inset 0 2px 4px #0007,0 0 0 4px #ff8f7a;transform:scale(.92)}}
.date{text-align:center;font-size:13.5px;font-weight:700;color:#eaf5df;margin:10px 0 8px;text-shadow:0 1px 0 #0003}
.date b{color:#fff}
.ask{background:var(--paper);color:var(--ink);border-radius:18px;padding:12px 14px 13px;box-shadow:0 4px 0 #0000002a;position:relative;min-height:96px}
.ask:after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:var(--paper);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.who{font-size:12.5px;color:var(--mut);margin-bottom:4px}
.who b{color:var(--wood2);font-size:13.5px}
.q{font-size:17px;font-weight:650;line-height:1.38}
.deck{flex:1 1 auto;min-height:220px;position:relative;display:flex;align-items:center;justify-content:center;margin:14px 0 10px}
.card,.under{position:absolute;width:min(76vw,330px);height:min(100%,430px);border-radius:24px}
.under{background:var(--cream);box-shadow:0 4px 10px #0002}
.under.u1{transform:translateY(7px) scale(.96);opacity:.75}
.under.u2{transform:translateY(14px) scale(.92);opacity:.45}
.card{background:var(--c,#777);background-image:radial-gradient(circle at 50% 38%,#ffffff38 0,transparent 55%),linear-gradient(180deg,transparent 60%,#0000002e);box-shadow:0 0 0 5px var(--cream),0 12px 28px #0004;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;cursor:grab;will-change:transform;transition:transform .35s cubic-bezier(.3,1.4,.5,1);z-index:2;overflow:hidden;color:#fff}
.card.drag{transition:none;cursor:grabbing}
.card.fly{transition:transform .32s ease-in,opacity .32s ease-in}
.card.enter{animation:enter .35s cubic-bezier(.3,1.3,.5,1)}
@keyframes enter{from{transform:translateY(30px) scale(.9);opacity:.3}to{transform:none;opacity:1}}
.card.wiggle{animation:wig .45s}
@keyframes wig{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.emo{font-size:min(28vw,118px);line-height:1;filter:drop-shadow(0 6px 8px #0004);pointer-events:none}
.tt{margin-top:14px;font-weight:900;font-size:19px;text-align:center;padding:0 16px;text-shadow:0 2px 0 #0003;pointer-events:none}
.fn{font-size:13px;font-weight:700;opacity:.9;margin-top:3px;pointer-events:none}
.lbl{position:absolute;top:0;left:0;right:0;padding:16px 16px 26px;font-weight:900;font-size:17px;line-height:1.2;background:linear-gradient(180deg,#000b,#0000);opacity:0;pointer-events:none;transition:opacity .1s}
.lbl.l{text-align:right}
.lbl.r{text-align:left}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ch{border-radius:16px;padding:9px 10px 11px;font-size:14.5px;font-weight:800;color:#fff;line-height:1.2;min-height:62px;text-shadow:0 1px 0 #0003}
.ch small{display:block;font-size:11.5px;font-weight:800;opacity:.85;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.ch.no{background:var(--no);box-shadow:0 4px 0 var(--no2)}
.ch.yes{background:var(--yes);box-shadow:0 4px 0 var(--yes2)}
.ch:active{transform:translateY(3px);box-shadow:none}
/* Ende */
.endcard{background:var(--paper);color:var(--ink);border-radius:24px;padding:22px 18px 18px;text-align:center;box-shadow:0 10px 28px #0004;margin-top:6px}
.eic{font-size:78px;line-height:1;filter:drop-shadow(0 6px 8px #0003)}
.ekick{margin-top:10px;font-size:12.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--no)}
.endcard h2{font-size:24px;margin-top:4px;line-height:1.2}
.endcard p{font-size:15.5px;line-height:1.45;margin:10px 0 0}
.info{background:var(--cream);color:var(--ink);border-radius:18px;padding:6px 14px;margin-top:12px}
.info>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #ece3d0;font-size:15px}
.info>div:last-child{border:0}
.info>div span:last-child{font-weight:800;text-align:right}
.info.txt{padding:4px 16px;font-size:15px;line-height:1.5}
.info.txt p{margin:10px 0}
.info.txt>.legend{display:block;border:0;padding:2px 0}
.legend>div{display:flex!important;gap:10px;align-items:center;justify-content:flex-start!important;border:0!important;padding:5px 0!important}
.legend .ic{font-size:24px;width:36px;height:36px;border-radius:10px;background:#4a2c13;display:flex;align-items:center;justify-content:center;flex:none}
.legend span:last-child{font-weight:400!important;text-align:left!important}
.new{font-style:normal;background:var(--gold);color:#3a2a00;border-radius:7px;padding:1px 6px;font-size:12px;margin-left:4px}
.sub{font-size:16px;margin:16px 0 8px;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--cream);color:var(--ink);border-radius:999px;padding:8px 13px;font-weight:800;font-size:14px;box-shadow:0 2px 0 #0002}
.chip.on{background:var(--gold);color:#3a2a00}
/* Protokoll */
.paper{background:var(--paper);color:var(--ink);border-radius:6px 6px 18px 18px;padding:24px 16px;box-shadow:0 10px 24px #0004;background-image:repeating-linear-gradient(180deg,transparent 0 23px,#e9e1cc 23px 24px);border-top:8px solid var(--wood)}
.paper pre{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:"Courier New",ui-monospace,monospace;font-size:13.5px;line-height:24px;user-select:text;-webkit-user-select:text}
/* Titel */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.tgrid .tt{margin:0;background:var(--cream);color:var(--ink);border-radius:16px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;text-shadow:none;font-size:inherit;font-weight:inherit;box-shadow:0 3px 0 #0002}
.tgrid .tt .ic{font-size:30px}
.tgrid .tt b{font-size:14px;line-height:1.2}
.tgrid .tt small{font-size:11.5px;color:var(--mut);line-height:1.25}
.tgrid .tt.lock{background:#ffffff26;color:#fff;box-shadow:none}
.tgrid .tt.lock small{color:#e2efd8}
.elist .it{background:var(--cream);color:var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:7px;display:flex;gap:10px;align-items:center;font-size:15px}
.elist .it .t{flex:1;font-weight:700}
.elist .it .cnt{font-weight:900;color:var(--wood2)}
.elist .it.lock{background:#ffffff22;color:#e8f3df}
.tile.wide{grid-column:1/-1;min-height:0}
.elist button.it{width:100%;text-align:left}
.elist .it .t small{display:block;font-weight:600;font-size:12.5px;color:var(--mut)}
.elist .it.arc .cnt{font-size:12.5px;font-weight:700}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:14px;font-weight:700;font-size:15px;display:none;z-index:20;max-width:90%;text-align:center;box-shadow:0 6px 18px #0005}
#fx{position:fixed;inset:0;pointer-events:none;z-index:15}
.conf{position:absolute;width:9px;height:13px;border-radius:2px}
@media (min-height:820px){.q{font-size:18px}.ask{min-height:110px}}
@media (max-height:640px){.emo{font-size:72px}.deck{min-height:170px}.q{font-size:15.5px}.ask{min-height:80px}}