/* Fall 0000 – Die Flaschenpost · Stil (Basis: Fall 0003, Akzent Teich-Türkis) */
@font-face{font-family:'Luckiest Guy';src:url(fonts/luckiest-guy-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-800.woff2) format('woff2');font-weight:800;font-display:swap}

html,body{margin:0;background:#0a141a;color:#f4efe6;font-family:'Poppins',sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
#frame{position:relative;width:100%;max-width:560px;margin:0 auto;overflow:hidden}
#app{width:390px;transform-origin:0 0;min-height:100vh}
#ton{display:none;position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;font:700 12px Poppins,sans-serif;border:2px solid #111;border-radius:999px;background:#42d4d4;color:#111;padding:0 14px;min-height:44px;min-width:44px;box-shadow:2px 2px 0 #111;cursor:pointer}
#ton[aria-pressed="false"]{background:#ddd}
button{font-family:inherit}

.fa{--acc:#42d4d4;--gold:#f5b83d;position:relative;box-sizing:border-box;width:390px;min-height:100vh;overflow:hidden;color:#f4efe6;font-size:16px;line-height:1.45;background:linear-gradient(170deg,#0c1820 0%,#0f2a36 50%,#123a46 100%);padding-bottom:70px}
.fa *{box-sizing:border-box}
.fa:before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,rgba(0,0,0,0) 1.4px);background-size:8px 8px;pointer-events:none}
.fa-top{position:relative;z-index:2;display:flex;align-items:center;gap:10px;height:58px;padding:0 12px;background:rgba(0,0,0,.55);border-bottom:3px solid var(--acc)}
.fa-top img{width:42px;height:39px;object-fit:contain}
.fa-top .lbl{font-family:'Courier New',monospace;font-weight:700;font-size:13px;letter-spacing:2px;color:var(--acc)}
.fa-top .sp{flex:1}
.f0-start{min-height:44px;border:2px solid var(--acc);background:transparent;color:var(--acc);font:700 13px Poppins,sans-serif;border-radius:22px;padding:0 14px;cursor:pointer}
.fa-pad{position:relative;padding:0 12px}

.f0-title{margin:12px 0 8px;font:400 23px/1.15 'Luckiest Guy',cursive;color:#fff;text-shadow:2px 2px 0 #111;display:flex;align-items:center;gap:8px}
.f0-title svg{width:30px;height:30px;flex-shrink:0}

/* Knöpfe */
.f0-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border:3px solid #111;border-radius:16px;box-shadow:4px 5px 0 #000;background:var(--acc);color:#111;font:400 22px 'Luckiest Guy',cursive;letter-spacing:.5px;cursor:pointer;padding:0 16px;text-decoration:none;margin-top:12px}
.f0-btn.gold{background:var(--gold)}
.f0-btn.ghost{background:transparent;color:#f4efe6;border-color:rgba(244,239,230,.55);box-shadow:none;font:800 15px Poppins,sans-serif;min-height:48px}
.f0-btn svg{width:32px;height:32px}
.f0-next{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:10px 16px;min-height:62px;border-radius:18px;border:3px solid #111;background:var(--acc);color:#111;box-shadow:4px 5px 0 #000;cursor:pointer;animation:f0glow 1.6s ease-in-out infinite;text-align:left}
.f0-next svg{width:36px;height:36px;flex-shrink:0}
.f0-next b{flex:1;font:400 23px 'Luckiest Guy',cursive}
.f0-next .ar{width:22px;height:22px}
@keyframes f0glow{50%{box-shadow:4px 5px 0 #000,0 0 22px rgba(66,212,212,.9)}}
.f0-done{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:84px;margin-top:14px;border:4px solid #111;border-radius:22px;background:#3fbf7f;color:#08251a;box-shadow:4px 6px 0 #000;font:400 30px 'Luckiest Guy',cursive;cursor:pointer;animation:f0glowg 1.6s ease-in-out infinite}
.f0-done .ph,.f0-done img{width:56px;height:56px;min-height:0;font-size:9px;padding:2px}
@keyframes f0glowg{50%{box-shadow:4px 6px 0 #000,0 0 24px rgba(63,191,127,.9)}}

/* Luca */
.f0-luca{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.f0-luca .lb{position:relative;width:70px;height:104px;flex-shrink:0;border:none;background:radial-gradient(circle at 50% 70%,#fff3a0,#f5b83d 70%);border-radius:18px;border:3px solid #111;box-shadow:3px 4px 0 #000;padding:0;cursor:pointer;overflow:visible}
.f0-luca .lb img{position:absolute;left:3px;right:3px;bottom:0;width:58px;height:auto;max-height:98px;object-fit:contain;object-position:bottom}
.f0-luca .lb .q{position:absolute;right:-8px;top:-10px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #111;display:flex;align-items:center;justify-content:center;z-index:2}
.f0-luca .lb .q svg{width:18px;height:18px}
.f0-luca .lb.used .q{background:#fff3a0}
.f0-luca .bub{position:relative;flex:1;min-height:56px;padding:9px 12px 9px 40px;border-radius:16px 16px 16px 4px;background:#fff;color:#1b1712;border:3px solid #111;font:700 15px/1.35 Poppins,sans-serif;cursor:pointer;text-align:left}
.f0-luca .bub svg{position:absolute;left:10px;top:50%;margin-top:-11px;width:22px;height:22px;opacity:.55}
.f0-luca .bub.on svg{opacity:1;animation:f0pulse .8s ease-in-out infinite}
.f0-luca.nope .lb{animation:f0nope .5s}
@keyframes f0nope{20%{transform:translateX(-6px) rotate(-3deg)}50%{transform:translateX(6px) rotate(3deg)}80%{transform:translateX(-3px)}}
@keyframes f0pulse{50%{transform:scale(1.18)}}

/* Lichtring */
.f0-ring{position:absolute;border-radius:50%;border:4px solid #fff3a0;box-shadow:0 0 18px #fff3a0,inset 0 0 12px rgba(255,243,160,.6);pointer-events:none;animation:f0ring 1.1s ease-in-out infinite;z-index:30}
@keyframes f0ring{50%{transform:scale(1.15);opacity:.6}}
.f0-ringbox{position:relative}

/* Plan */
.f0-plan{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.f0-p{position:relative;height:64px;border-radius:14px;border:2px dashed rgba(244,239,230,.22);background:transparent;cursor:default;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(244,239,230,.45)}
.f0-p svg{width:34px;height:34px;opacity:.35;filter:grayscale(1)}
.f0-p b{font:700 10px/12px Poppins,sans-serif}
.f0-p.open{border:2px solid var(--acc);background:rgba(66,212,212,.12);cursor:pointer;color:#fff}
.f0-p.open svg,.f0-p.done svg{opacity:1;filter:none}
.f0-p.done{border:2px solid #3fbf7f;background:rgba(63,191,127,.14);color:#fff}
.f0-p.done:after{content:'✓';position:absolute;right:-6px;top:-7px;width:20px;height:20px;border-radius:50%;background:#3fbf7f;color:#08251a;font:800 12px/20px Poppins,sans-serif;text-align:center}
.f0-p.now{box-shadow:0 0 0 3px rgba(66,212,212,.5),0 0 16px rgba(66,212,212,.6)}

/* Pinnwand */
.f0-board{position:relative;height:300px;margin-top:12px;border-radius:10px;border:3px solid #111;background:#b98a58 url(img/kork.jpg) center/cover;box-shadow:5px 6px 0 #000;overflow:hidden}
.f0-board svg.th{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.f0-board .book{position:absolute;left:141px;top:84px;width:84px;height:84px;border-radius:50%;background:#f4efe6;border:3px solid #111;box-shadow:3px 4px 0 rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.f0-board .book svg{width:64px;height:64px}
.f0-sil{position:absolute;top:8px;width:72px;height:84px;background:#f4efe6;border:2px solid #111;padding:4px 4px 0;box-shadow:2px 3px 0 rgba(0,0,0,.45);transform:rotate(-3deg)}
.f0-sil.b{transform:rotate(3deg)}
.f0-sil svg{width:100%;height:100%}
.f0-sil.new{animation:f0pin .6s cubic-bezier(.3,1.5,.5,1)}
.f0-pin{position:absolute;width:64px;height:64px;background:#f4efe6;border:2px solid #111;box-shadow:2px 3px 0 rgba(0,0,0,.45);padding:3px;display:flex;align-items:center;justify-content:center}
.f0-pin svg,.f0-pin img{width:100%;height:100%;object-fit:contain}
.f0-pin:before,.f0-sil:before{content:'';position:absolute;left:50%;top:-6px;margin-left:-7px;width:14px;height:14px;border-radius:50%;background:#e0303a;border:2px solid #111;z-index:2}
.f0-pin.new{animation:f0pin .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes f0pin{from{opacity:0;transform:translateY(-60px) rotate(-14deg) scale(1.3)}}
.f0-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px;padding:10px;border-radius:16px;border:2px dashed var(--acc);background:rgba(66,212,212,.1)}
.f0-tray .f0-pin{position:relative;cursor:grab;touch-action:none;animation:f0wig 1.4s ease-in-out infinite}
@keyframes f0wig{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

/* Ziehen */
[data-drag]{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.dragging{z-index:100 !important;cursor:grabbing;animation:none !important;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.back{transition:transform .25s ease-out}
.f0-drop-hot{box-shadow:0 0 0 4px #fff3a0,0 0 18px #fff3a0 !important}

/* Platzhalter */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;min-height:60px;border:2px dashed #4aa8b0;border-radius:10px;background:repeating-linear-gradient(135deg,#e6f7f7 0 10px,#d3efef 10px 20px);color:#134555;text-align:center;padding:4px;font:600 11px/1.2 Poppins,sans-serif}
.ph b{font:800 13px Poppins,sans-serif;color:#1f6f86}
.ph-tag{position:absolute;right:6px;top:6px;z-index:5;background:rgba(255,255,255,.85);color:#134555;border:1px dashed #1f6f86;border-radius:6px;padding:1px 6px;font:700 10px Poppins,sans-serif;pointer-events:none}

/* Szenen */
.f0-scene{position:relative;width:366px;border-radius:12px;border:3px solid #111;overflow:hidden;box-shadow:4px 5px 0 #000;background:#3a2a20;touch-action:manipulation}
.f0-scene>svg.sch,.f0-scene>img.real{position:absolute;left:0;top:0;width:100%;height:100%}
.f0-scene>img.real{object-fit:cover}
.f0-mark{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#3fbf7f;border:2px solid #111;color:#08251a;font:800 14px/22px Poppins,sans-serif;text-align:center;pointer-events:none;z-index:6}
.f0-puff{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle,rgba(230,220,200,.9),rgba(230,220,200,0) 70%);pointer-events:none;animation:f0puff .6s ease-out forwards;z-index:7}
@keyframes f0puff{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}

/* Beutel */
.f0-bag{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;padding:10px;border-radius:16px;background:#5a3b25;border:3px solid #111;position:relative}
.f0-bag.hot{box-shadow:0 0 0 4px #fff3a0,0 0 18px #fff3a0}
.f0-slot{position:relative;height:64px;border-radius:12px;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:4px}
.f0-slot svg{width:52px;height:52px}
.f0-slot.sil svg{filter:brightness(0) invert(1);opacity:.3}
.f0-slot.q{font:400 26px 'Luckiest Guy',cursive;color:rgba(244,239,230,.4)}
.f0-slot.got{background:#f4efe6;border:2px solid #111;animation:f0pop .45s ease-out}
@keyframes f0pop{0%{transform:scale(1.6)}100%{transform:scale(1)}}

/* Nahansicht */
.f0-close{position:relative;margin-top:10px;padding:12px;border-radius:18px;background:#f4efe6;color:#1b1712;border:3px solid #111;box-shadow:4px 5px 0 #000;min-height:210px}
.f0-close .it{position:absolute;width:110px;height:110px;left:128px;top:50px;z-index:20}
.f0-close .it svg{width:100%;height:100%}

/* Aufgabe (echte Welt) */
.f0-task{margin-top:12px;text-align:center}
.f0-task .card{width:220px;height:220px;margin:6px auto 0;border-radius:22px;border:4px solid #111;background:#fff8e6;box-shadow:5px 6px 0 #000;padding:8px;display:flex;align-items:center;justify-content:center;animation:f0float 3s ease-in-out infinite}
.f0-task .card img{width:100%;height:100%;object-fit:contain}
.f0-task .card .ph{border-radius:14px}
@keyframes f0float{50%{transform:translateY(-6px) rotate(1deg)}}
.f0-ans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.f0-ans.three{grid-template-columns:1fr 1fr 1fr}
.f0-ab{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:120px;padding:10px 6px;border-radius:18px;border:3px solid #111;background:#fff8e6;color:#1b1712;box-shadow:4px 5px 0 #000;cursor:pointer;font:800 14px Poppins,sans-serif}
.f0-ab svg,.f0-ab img,.f0-ab .ph{width:76px;height:76px;min-height:0;object-fit:contain}
.f0-ab.ok{background:#c9f2db;border-color:#1f7a4d}
.f0-ab.no{animation:f0shake .35s}
.f0-ab.pulse{animation:f0pulse2 1.3s ease-in-out infinite}
@keyframes f0pulse2{50%{box-shadow:4px 5px 0 #000,0 0 0 6px rgba(255,243,160,.7)}}
.shake{animation:f0shake .35s}
@keyframes f0shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Code */
.f0-boxes{display:flex;gap:10px;justify-content:center;margin:14px 0 6px}
.f0-boxes span{width:58px;height:70px;border-radius:12px;border:3px solid #111;background:#fff8e6;color:#1b1712;font:400 40px/68px 'Luckiest Guy',cursive;text-align:center;box-shadow:3px 4px 0 #000}
.f0-boxes.no{animation:f0shake .35s}
.f0-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.f0-keys button{min-height:62px;border-radius:14px;border:3px solid #111;background:#f4efe6;color:#111;font:400 30px 'Luckiest Guy',cursive;box-shadow:3px 4px 0 #000;cursor:pointer}
.f0-keys button.fn{background:#c8f2f2}
.f0-folder{position:relative;margin:14px auto 0;width:300px;height:150px;border-radius:6px 14px 14px 14px;background:#c99a5b;border:3px solid #111;box-shadow:5px 6px 0 #000;display:flex;align-items:center;justify-content:center;flex-direction:column}
.f0-folder:before{content:'';position:absolute;left:-3px;top:-24px;width:120px;height:24px;border-radius:8px 8px 0 0;background:#c99a5b;border:3px solid #111;border-bottom:none}
.f0-folder b{font:400 30px 'Luckiest Guy',cursive;color:#1b1712}
.f0-folder small{font:700 13px 'Courier New',monospace;letter-spacing:3px;color:#5a3b25}
.f0-folder .st{position:absolute;right:14px;top:16px;transform:rotate(10deg);border:3px solid #1b8a9a;color:#1b8a9a;font:400 16px 'Luckiest Guy',cursive;padding:2px 8px;border-radius:4px}

/* Funkspruch */
.f0-funk{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px;border-radius:16px;background:#071318;border:3px solid var(--acc);box-shadow:0 0 18px rgba(66,212,212,.35)}
.f0-funk .av{width:52px;height:64px;flex-shrink:0;border-radius:10px;background:#12303f;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.f0-funk .av img{width:46px;height:auto}
.f0-funk .t{flex:1;min-width:0}
.f0-funk small{display:block;font:700 10px 'Courier New',monospace;letter-spacing:2px;color:var(--acc)}
.f0-funk b{display:block;font:400 19px/1.1 'Luckiest Guy',cursive}
.f0-funk .wv{display:flex;gap:3px;height:16px;align-items:center;margin-top:4px}
.f0-funk .wv i{width:4px;height:6px;border-radius:2px;background:var(--acc)}
.f0-funk.on .wv i{animation:f0wave .7s ease-in-out infinite}
.f0-funk.on .wv i:nth-child(2){animation-delay:.1s}.f0-funk.on .wv i:nth-child(3){animation-delay:.2s}.f0-funk.on .wv i:nth-child(4){animation-delay:.3s}.f0-funk.on .wv i:nth-child(5){animation-delay:.15s}
@keyframes f0wave{50%{height:16px}}
.f0-play{width:56px;height:56px;flex-shrink:0;border-radius:50%;border:3px solid #111;background:var(--acc);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:2px 3px 0 #000}
.f0-play svg{width:26px;height:26px}

/* Deckname */
.f0-tag{position:relative;margin-top:14px;padding:50px 14px 18px;border-radius:18px;background:#fff;border:3px solid #111;box-shadow:0 0 0 2px var(--acc),5px 6px 0 #000;text-align:center}
.f0-tag .hd{position:absolute;left:0;right:0;top:0;height:38px;border-radius:15px 15px 0 0;background:#1f6f86;color:#fff;font:800 15px/38px Poppins,sans-serif;letter-spacing:1px}
.f0-tag .nm{font:400 38px/1.05 'Luckiest Guy',cursive;color:#1b1712}
.f0-row{display:flex;gap:10px;margin-top:14px;align-items:center}
.f0-round{width:64px;height:64px;flex-shrink:0;border-radius:50%;border:3px solid #111;background:#fff;cursor:pointer;box-shadow:3px 4px 0 #000;display:flex;align-items:center;justify-content:center}
.f0-round svg{width:38px;height:38px}
.f0-row .f0-btn{margin-top:0;flex:1}
.f0-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.f0-m{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:16px;border:3px solid rgba(244,239,230,.3);background:rgba(0,0,0,.35);color:#f4efe6;cursor:pointer;overflow:hidden}
.f0-m img{height:112px;margin:2px 0 4px;filter:saturate(.85) brightness(.92)}
.f0-m b{font:400 22px 'Luckiest Guy',cursive}
.f0-m small{font:700 13px Poppins,sans-serif;opacity:.85}
.f0-m.on{border-color:var(--acc);background:var(--acc);color:#111;box-shadow:4px 5px 0 #000}
.f0-m.pro{background:#0b0b10;border-color:#3a3a46}
.f0-m.pro b{color:#42d4d4;text-shadow:0 0 10px rgba(66,212,212,.7),2px 2px 0 #000}
.f0-m.pro.on{background:#07070b;border-color:var(--gold);box-shadow:0 0 0 2px #000,0 0 22px rgba(245,184,61,.55),4px 5px 0 #000;color:#fff}
.f0-m.pro.on b{color:var(--gold)}
.f0-m.on img{filter:drop-shadow(0 0 8px rgba(255,190,80,.8));animation:f0tilt 2.4s ease-in-out infinite}
@keyframes f0tilt{50%{transform:rotate(-3deg)}}

/* Buchseite */
.f0-page{position:relative;width:366px;height:262px;border-radius:6px 14px 14px 6px;background:#f7efdc;border:3px solid #111;box-shadow:inset 18px 0 22px -14px rgba(90,60,20,.45),4px 5px 0 #000;overflow:hidden;touch-action:none}
.f0-page svg.txt{position:absolute;inset:0;width:100%;height:100%}
.f0-page canvas{position:absolute;left:0;top:0;width:366px;height:262px;touch-action:none;cursor:crosshair}
.f0-word{position:absolute;z-index:5;min-height:44px;padding:0 10px;border-radius:10px;border:3px solid #111;background:#fff8e6;color:#134555;font:400 22px/38px 'Luckiest Guy',cursive;letter-spacing:1px;cursor:pointer;box-shadow:2px 3px 0 #000;animation:f0pop .4s ease-out,f0glow2 1.4s ease-in-out .4s infinite;transform:translate(-50%,-50%);white-space:nowrap}
.f0-word.cipher{background:#12303f;color:#c8f2f2;border-color:#42d4d4}
@keyframes f0glow2{50%{box-shadow:2px 3px 0 #000,0 0 16px #fff3a0}}
.f0-pencil{position:absolute;width:46px;height:46px;margin:-44px 0 0 -4px;pointer-events:none;z-index:6}
.f0-arrows{position:absolute;left:6px;top:96px;width:20px;display:flex;flex-direction:column;gap:3px;z-index:4;pointer-events:none}
.f0-arrows svg{width:18px;height:12px}
.f0-arrows.blink{animation:f0blink .5s steps(2) infinite}
@keyframes f0blink{50%{opacity:.15}}
.f0-note{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;padding:10px;border-radius:12px;background:#fff8c8;border:3px solid #111;box-shadow:3px 4px 0 #000;transform:rotate(-1deg)}
.f0-note span{height:52px;border-radius:8px;border:2px dashed #b9a24a;display:flex;align-items:center;justify-content:center;font:400 15px 'Luckiest Guy',cursive;color:#134555;text-align:center;line-height:1}
.f0-note span.got{border:2px solid #111;background:#fff;animation:f0pop .4s ease-out}
.f0-letter{margin-top:12px;padding:14px;border-radius:6px;background:#fffdf4;color:#2b2b6b;border:2px solid #111;box-shadow:3px 4px 0 #000;font:400 24px/1.3 'Luckiest Guy',cursive;text-align:center;transform:rotate(1deg)}

/* Drehscheibe */
.f0-dial{margin-top:10px;padding:12px;border-radius:18px;background:#0d2129;border:3px solid var(--acc);text-align:center}
.f0-cw{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.f0-cw span{width:34px;height:42px;border-radius:8px;border:2px solid #42d4d4;background:#12303f;color:#c8f2f2;font:400 22px/40px 'Luckiest Guy',cursive}
.f0-cw span.cur{background:#42d4d4;color:#111;box-shadow:0 0 12px #42d4d4}
.f0-cw.plain span{border-color:#3fbf7f;background:#fff8e6;color:#1b1712}
.f0-wheelrow{display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.f0-wheel{width:190px;height:190px;position:relative}
.f0-wheel svg{width:190px;height:190px;transition:transform .25s ease-out}
.f0-wheel .win{position:absolute;left:50%;top:-4px;margin-left:-22px;width:44px;height:44px;border-radius:10px;border:4px solid var(--gold);box-shadow:0 0 14px var(--gold);pointer-events:none}
.f0-rot{width:58px;height:58px;border-radius:50%;border:3px solid #111;background:#f4efe6;font:800 28px/1 Poppins,sans-serif;cursor:pointer;box-shadow:3px 4px 0 #000;color:#111}
.f0-numw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.f0-numw button{min-height:56px;border-radius:12px;border:3px solid #111;background:#fff8e6;color:#1b1712;font:400 21px 'Luckiest Guy',cursive;cursor:pointer;box-shadow:3px 4px 0 #000}

/* Zwischenstopp */
.f0-pose{display:flex;gap:12px;align-items:flex-end;justify-content:center;margin-top:12px}
.f0-lucabig{position:relative;width:170px;height:250px;border-radius:20px;border:4px solid #111;background:radial-gradient(circle at 50% 75%,#fff3a0,#42d4d4 75%);box-shadow:4px 5px 0 #000;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f0-lucabig img{width:150px;height:auto}
.f0-lucabig.tremble{animation:f0trem .18s linear infinite}
.f0-lucabig.tremble2{animation:f0trem2 .12s linear infinite}
@keyframes f0trem{25%{transform:translate(-2px,1px) rotate(-1deg)}75%{transform:translate(2px,-1px) rotate(1deg)}}
@keyframes f0trem2{25%{transform:translate(-5px,2px) rotate(-2.5deg)}75%{transform:translate(5px,-2px) rotate(2.5deg)}}
.f0-posecard{width:150px;height:150px;border-radius:18px;border:3px solid #111;background:#fff8e6;padding:6px;box-shadow:4px 5px 0 #000}
.f0-posecard img{width:100%;height:100%;object-fit:contain}
.f0-timer{position:relative;width:150px;height:150px;margin:14px auto 0}
.f0-timer svg{width:150px;height:150px;transform:rotate(-90deg)}
.f0-timer circle.run{animation:f0fill linear forwards}
@keyframes f0fill{from{stroke-dashoffset:440}to{stroke-dashoffset:0}}
.f0-timer .in{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle,#fff3a0,#42d4d4);display:flex;align-items:center;justify-content:center}
.f0-timer .in svg{transform:none;width:70px;height:70px}

/* Karten */
.f0-felt{position:relative;padding:10px;border-radius:16px;border:3px solid #111;background:radial-gradient(ellipse at center,#2f7a52 0%,#1d5438 70%,#143d29 100%);box-shadow:4px 5px 0 #000;overflow:hidden}
.f0-felt>img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.f0-fan{position:relative;height:130px}
.f0-card{position:absolute;width:56px;height:80px;border-radius:7px;border:2px solid #111;background:#fffdf6;box-shadow:1px 2px 0 rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
.f0-card svg{width:100%;height:100%}
.f0-card .num{font:400 34px 'Luckiest Guy',cursive;color:#1f6f86}
.f0-card.backside{background:#154050}
.f0-card.backside>*{display:none}
.f0-card.backside:after{content:'';position:absolute;inset:3px;border-radius:4px;border:2px solid #f5b83d;background:repeating-linear-gradient(45deg,#1f6f86 0 6px,#154050 6px 12px)}
.f0-card.backside.realback:after{display:none}
.f0-card.backside>img.bk{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:5px;object-fit:cover}
.f0-card.flip{animation:f0flip .6s ease-in-out}
@keyframes f0flip{50%{transform:rotateY(90deg)}}
.f0-rows{display:grid;grid-template-columns:repeat(5,60px);gap:8px;justify-content:center;margin-top:8px}
.f0-cs{position:relative;width:60px;height:84px;border-radius:8px;border:2px dashed rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font:400 22px 'Luckiest Guy',cursive;color:rgba(255,255,255,.35)}
.f0-cs .f0-card{position:relative;left:auto;top:auto}
.f0-cs.gap{border:3px solid #fff3a0;box-shadow:0 0 16px #fff3a0;animation:f0ring 1.1s ease-in-out infinite}
.f0-stack{position:absolute;left:150px;top:22px;width:80px;height:100px;z-index:10;touch-action:none;cursor:ew-resize}
.f0-bookcard{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px 12px;border-radius:14px;background:rgba(0,0,0,.3)}
.f0-bookcard .f0-card{position:relative}

/* Theke */
.f0-door{position:absolute;left:70px;top:14px;width:226px;height:164px;z-index:12;border:3px solid #111;border-radius:6px;background:repeating-linear-gradient(90deg,#8a5a2b 0 28px,#7a4e24 28px 30px);box-shadow:inset 0 0 0 8px #6b4423;transform-origin:0 50%;touch-action:none;cursor:grab;transition:transform .35s ease-out}
.f0-door:after{content:'';position:absolute;right:16px;top:70px;width:12px;height:22px;border-radius:6px;background:#f5b83d;border:2px solid #111}
.f0-door.wig{animation:f0wig 0.8s ease-in-out 3}
.f0-door.dragging{pointer-events:auto;transition:none}
.f0-hook{position:absolute;width:44px;height:96px;margin-left:-22px;z-index:8;background:none;border:none;cursor:pointer;padding:0}
.f0-hook.sw svg.k{animation:f0swing .8s ease-in-out}
@keyframes f0swing{25%{transform:rotate(14deg)}75%{transform:rotate(-10deg)}}
.f0-dustbox{position:absolute;z-index:9;touch-action:none}
.f0-dustbox canvas{width:100%;height:100%;display:block}

/* Kombinieren */
.f0-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.f0-sila{position:relative;min-height:170px;border-radius:16px;border:3px solid #111;background:#f4efe6;padding:8px;display:flex;flex-direction:column;align-items:center}
.f0-sila>svg{width:80px;height:90px}
.f0-sila .got{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px}
.f0-sila .got svg{width:40px;height:40px}
.f0-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.f0-chip{width:64px;height:64px;border-radius:14px;border:3px solid #111;background:#fff8e6;padding:4px;box-shadow:3px 4px 0 #000;position:relative}
.f0-chip svg{width:100%;height:100%}

/* Nachtwache */
.f0-night{position:relative;width:366px;height:440px;border-radius:14px;border:3px solid #111;overflow:hidden;box-shadow:4px 5px 0 #000;background:linear-gradient(180deg,#0e1430 0%,#1a2048 55%,#2a2a40 100%);touch-action:none}
.f0-night>svg.sch,.f0-night>img.real{position:absolute;inset:0;width:100%;height:100%}
.f0-night>img.real{object-fit:cover}
.f0-night.realimg{height:460px;background:repeating-linear-gradient(90deg,#26394f 0 57px,#16202d 57px 60px)}
.f0-night.realimg>svg.sch{display:none}
.f0-night.realimg>img.real{inset:auto;left:0;top:0;width:100%;height:250px}
.f0-night.realimg:after{content:"";position:absolute;left:0;right:0;top:228px;height:26px;background:linear-gradient(180deg,rgba(38,57,79,0),#26394f);pointer-events:none;z-index:1}
.f0-night.realimg .f0-mobile{left:160px}
.f0-night.pro .f0-plank{height:24px;margin-top:-12px}
.f0-plank{position:absolute;width:104px;height:30px;margin:-15px 0 0 -52px;border-radius:5px;border:2px solid #1a1208;background:linear-gradient(180deg,#8a6236,#6b4a28);box-shadow:inset 0 2px 0 rgba(255,255,255,.18);z-index:3}
.f0-plank svg{position:absolute;inset:0;width:100%;height:100%}
.f0-plank.on{background:linear-gradient(180deg,#42d4d4,#2a8a9a)}
.f0-plank.creak{animation:f0shake .35s;background:linear-gradient(180deg,#c8502a,#8a3418)}
.f0-tok{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;z-index:8;border-radius:50%;background:radial-gradient(circle,#fff3a0,#f5b83d);border:3px solid #111;box-shadow:0 0 14px #fff3a0;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;transition:left .18s,top .18s}
.f0-tok svg{width:32px;height:32px}
.f0-mobile{position:absolute;left:183px;top:0;width:2px;z-index:6;transform-origin:50% 0;transition:transform 1.1s ease-in-out;pointer-events:none}
.f0-mobile .str{position:absolute;left:0;top:0;width:2px;background:#cfd6ff}
.f0-mobile svg{position:absolute;left:-60px;width:120px;height:60px}
.f0-clock{position:absolute;right:12px;top:10px;width:70px;height:70px;z-index:4}
.f0-hide{position:relative;width:366px;height:300px;border-radius:14px;border:3px solid #111;overflow:hidden;box-shadow:4px 5px 0 #000;background:linear-gradient(180deg,#0b1026,#1c1f3e)}
.f0-hide>svg.sch,.f0-hide>img.real{position:absolute;inset:0;width:100%;height:100%}
.f0-hide>img.real{object-fit:cover}
.f0-duel{position:relative;text-align:center}
.f0-duel .bigluca{position:relative;width:300px;height:450px;margin:8px auto 0;border-radius:22px;border:4px solid #111;background:radial-gradient(circle at 50% 40%,#fff3a0,#42d4d4 70%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f0-duel .bigluca img{width:290px;height:auto;max-height:440px;object-fit:contain;object-position:bottom}
.f0-duel .bigclock{width:150px;height:150px;margin:10px auto 0}
.f0-portraits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.f0-por{position:relative;height:230px;border-radius:16px;border:3px solid #111;background:radial-gradient(circle at 50% 30%,#1c4452,#0d2129);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;overflow:hidden}
.f0-por img{max-height:200px;max-width:120px;object-fit:contain;transition:filter .8s}
.f0-por.dark img{filter:brightness(0) drop-shadow(0 0 8px rgba(255,255,255,.55))}
.f0-por .q{position:absolute;top:10px;left:0;right:0;text-align:center;font:400 40px 'Luckiest Guy',cursive;color:#fff3a0;text-shadow:2px 2px 0 #111}
.f0-por.act{box-shadow:0 0 0 3px #fff3a0,0 0 20px #fff3a0}
.f0-por b{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);font:800 12px/22px Poppins,sans-serif;text-align:center}
.f0-uv{position:relative;width:366px;height:220px;margin-top:12px;border-radius:12px;border:3px solid #111;overflow:hidden;background:#120a22;touch-action:none}
.f0-uv .msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 34px/1.15 'Luckiest Guy',cursive;color:#d9b8ff;text-shadow:0 0 12px #42d4d4,0 0 26px #8a5cff;text-align:center}
.f0-uv canvas{position:absolute;inset:0;width:366px;height:220px;touch-action:none}
.f0-uv .beam{position:absolute;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,rgba(66,212,212,.35),rgba(66,212,212,0) 70%);pointer-events:none;z-index:3}

/* Schlüsselbund */
.f0-safe{position:relative;height:250px;margin-top:10px;border-radius:18px;border:3px solid #111;background:linear-gradient(160deg,#5b636e,#2f353d);box-shadow:inset 0 0 0 8px #444b55,inset 0 0 0 10px #111,5px 6px 0 #000;overflow:hidden}
.f0-safe .lbl{position:absolute;left:0;right:0;top:20px;text-align:center;font:700 12px 'Courier New',monospace;letter-spacing:3px;color:#d8dde3}
.f0-holes{position:absolute;left:12px;right:12px;top:130px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.f0-hole{position:relative;height:96px;border-radius:12px;border:2px solid #111;background:#22272e;display:flex;align-items:center;justify-content:center;overflow:hidden}
.f0-hole img,.f0-hole svg{height:84px;width:auto;filter:brightness(0) invert(1) opacity(.13)}
.f0-hole.has img,.f0-hole.has svg{filter:drop-shadow(0 0 6px rgba(245,184,61,.6))}
.f0-hole.target{box-shadow:0 0 0 3px #f5b83d,0 0 18px #f5b83d;animation:f0ring 1.2s ease-in-out infinite}
.f0-hole.in{background:#3a2f12;box-shadow:0 0 0 3px #f5b83d,0 0 26px #f5b83d}
.f0-hole.in img{animation:f0ins 1s ease-out}
@keyframes f0ins{from{transform:translateY(-60px) scale(1.4);opacity:.5}}
.f0-dkey{position:absolute;left:160px;top:6px;height:110px;width:auto;z-index:20;filter:drop-shadow(0 0 14px rgba(245,184,61,.85));animation:f0swing 2.4s ease-in-out infinite}
.f0-secret{margin-top:12px;padding:14px;border-radius:16px;background:#12303f;border:3px solid var(--gold);text-align:center;font:400 22px 'Luckiest Guy',cursive;color:var(--gold)}
.f0-coll{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px;border-radius:16px;background:#fff8e6;color:#1b1712;border:3px solid #111;box-shadow:4px 5px 0 #000}
.f0-coll .spot{width:96px;height:96px;flex-shrink:0;border-radius:50%;border:3px dashed #b9a24a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.f0-coll .spot.got{border:3px solid #111;animation:f0pop .5s ease-out}
.f0-coll .spot .ph,.f0-coll .spot img{width:90px;height:90px;min-height:0;border-radius:50%;object-fit:contain}
.f0-coll b{font:400 22px 'Luckiest Guy',cursive}
.f0-badge{width:110px;height:110px;margin:10px auto 0;border-radius:50%;cursor:grab;animation:f0float 2.4s ease-in-out infinite}
.f0-badge .ph,.f0-badge img{width:110px;height:110px;min-height:0;border-radius:50%;object-fit:contain}

/* Urkunde */
.f0-cert{margin:14px 0 6px;animation:f0pop .4s ease-out}
.f0-cert .pap{position:relative;background:#f4efe6;color:#111;border-radius:6px;padding:18px 18px 16px;box-shadow:0 0 0 6px #0f2a36,0 0 0 9px var(--acc);text-align:center}
.f0-cert .z{font:700 11px 'Courier New',monospace;letter-spacing:3px;color:#1f6f86}
.f0-cert .h{font:400 30px 'Luckiest Guy',cursive;margin-top:4px}
.f0-cert .s{font:600 13px/1.4 Poppins,sans-serif}
.f0-cert .lv{height:110px;margin:10px 0 6px}
.f0-cert .r{display:flex;align-items:baseline;gap:8px;text-align:left;margin-top:8px;font:600 13px Poppins,sans-serif}
.f0-cert .r span{color:#555;min-width:92px}
.f0-cert .r b{font:400 20px 'Luckiest Guy',cursive}
.f0-cert .r i{flex:1;border-bottom:2px solid #111;height:18px}
.f0-cert .sig{display:flex;justify-content:space-between;margin-top:18px;text-align:left}
.f0-cert .sig em{display:block;font:24px 'Brush Script MT',cursive;color:#1f3f8f;line-height:1}
.f0-cert .sig em.d{font:600 14px Poppins,sans-serif;color:#111}
.f0-cert .sig small{display:block;border-top:2px solid #111;font:11px Poppins,sans-serif;padding-top:3px;margin-top:4px;min-width:110px}
.f0-cert .st{position:absolute;right:14px;top:150px;transform:rotate(12deg);border:3px solid #1b8a9a;color:#1b8a9a;font:400 16px 'Luckiest Guy',cursive;padding:2px 8px;border-radius:4px}

/* Einladung */
.f0-invite{margin-top:14px;padding:16px;border-radius:18px;background:#fff8e6;color:#1b1712;border:3px solid #111;box-shadow:0 0 0 3px var(--acc),5px 6px 0 #000;text-align:center}
.f0-invite .k{font:700 11px 'Courier New',monospace;letter-spacing:3px;color:#1f6f86}
.f0-invite b{display:block;font:400 26px/1.1 'Luckiest Guy',cursive;margin:4px 0}
.f0-invite .qr{width:200px;height:200px;margin:10px auto 6px;background:#fff;padding:8px;border:2px solid #111;border-radius:8px}
.f0-invite .qr svg{width:100%;height:100%;display:block}
.f0-invite .row{display:flex;align-items:center;justify-content:center;gap:10px}
.f0-invite .row img{height:70px}
.f0-parent{display:block;margin:14px auto 0;min-height:44px;background:none;border:none;color:#cfc6b8;font:600 13px Poppins,sans-serif;text-decoration:underline;cursor:pointer}
.f0-gate{margin-top:10px;padding:12px;border-radius:12px;background:#fff8e6;color:#1b1712;font:500 14px/1.4 Poppins,sans-serif}
.f0-gate p{margin:6px 0 10px}
.f0-gate a{color:#1f6f86;font-weight:800}
.f0-ans3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.f0-ans3 button{min-height:48px;border-radius:10px;border:2px solid #111;background:#fff;font:800 18px Poppins,sans-serif;cursor:pointer;color:#111}
.f0-ans3 button.no{background:#f3c1c1}
.f0-back{display:block;margin:14px auto 0;min-height:44px;background:none;border:2px solid rgba(244,239,230,.4);border-radius:999px;padding:0 18px;color:#f4efe6;font:700 14px Poppins,sans-serif;cursor:pointer}
.f0-role{margin-top:12px;padding:16px;border-radius:18px;background:#071318;border:3px dashed var(--gold);text-align:center}
.f0-role .k{font:700 12px 'Courier New',monospace;letter-spacing:3px;color:var(--gold)}
.f0-role b{display:block;font:400 30px 'Luckiest Guy',cursive;margin:6px 0 10px}
.f0-role .pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.f0-role .pics span{height:96px;border-radius:12px;background:#f4efe6;border:2px solid #111;padding:6px}
.f0-role .pics svg{width:100%;height:100%}
.f0-hand{display:flex;justify-content:center;margin-top:8px}
.f0-hand svg{width:120px;height:120px}

@media print{
  body *{visibility:hidden !important}
  #ton{display:none}
  .f0-cert,.f0-cert *{visibility:visible !important}
  .f0-cert{position:fixed;left:0;top:0;width:100%}
  #app{transform:none !important}
}
@media (prefers-reduced-motion: reduce){.fa *{animation-duration:.01s !important;animation-iteration-count:1 !important}}

.f0-ton{width:44px;height:44px;border-radius:50%;border:2px solid var(--acc);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.f0-ton svg{width:24px;height:24px;filter:invert(1)}
.f0-ton[aria-pressed="false"]{border-color:#777}
.f0-relief{position:absolute;z-index:4;transform:translate(-50%,-50%);font:800 15px Poppins,sans-serif;letter-spacing:1px;color:#f7efdc;text-shadow:0 1px 0 rgba(0,0,0,.35);border-bottom:2px solid rgba(247,239,220,.8);pointer-events:none}
.f0-note span{font-size:13px}

/* Version (05.10.2026) */
.snc-ver-fix{position:fixed;left:8px;bottom:calc(6px + env(safe-area-inset-bottom));z-index:5;font:600 11px/1 Poppins,sans-serif;color:rgba(255,255,255,.45);pointer-events:none}
.snc-ver-fix.is-neu{color:#f3c64b}
.snc-ver{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:28px auto 10px;color:inherit}
.snc-ver-btn{min-height:44px;padding:8px 14px;border-radius:12px;border:2px solid currentColor;background:transparent;color:inherit;opacity:.7;font:700 14px Poppins,sans-serif;cursor:pointer}
.snc-ver-neu{color:#f3c64b;font:700 13px Poppins,sans-serif}
@media print{.snc-ver-fix,.snc-ver{display:none!important}}
.fa-pad > .snc-ver{color:#fff;padding-bottom:30px}

/* ===== Fall 0000 – Ergänzungen ===== */
.fa{background:linear-gradient(170deg,#0b1820 0%,#0f2a36 50%,#123a46 100%)}
.f0-plan{grid-template-columns:repeat(5,1fr);gap:6px}
.f0-p{height:66px}
.f0-p b{font:700 9.5px/11px Poppins,sans-serif;text-align:center;hyphens:manual}
.f0-p svg{width:32px;height:32px}
.f0-ring.in{left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px}
.f0-done .ck{display:flex;width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid #111;align-items:center;justify-content:center}
.f0-done .ck svg{width:36px;height:36px}
.f0-ans.four{grid-template-columns:1fr 1fr}
.f0-ab img{width:76px;height:76px;object-fit:contain}
.f0-ab{position:relative}
.f0-bag.one{grid-template-columns:1fr;justify-items:center}
.f0-bag.one .f0-slot{width:90px;height:84px}
.f0-bag.five{grid-template-columns:repeat(5,1fr)}
.f0-picor{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.f0-picor svg{width:100%;height:100%}
.f0-picor .tag{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font:700 8px/1 Poppins,sans-serif;font-style:normal;background:rgba(255,255,255,.85);color:#134555;border:1px dashed #1f6f86;border-radius:4px;padding:1px 3px;white-space:nowrap;pointer-events:none}

/* Teich + Fischen */
.f0-pond{position:relative;width:366px;height:300px;border-radius:14px;border:3px solid #111;overflow:hidden;box-shadow:4px 5px 0 #000;background:radial-gradient(ellipse at 50% 40%,#5fc0d6 0%,#2a8aa4 55%,#1f6f86 100%);touch-action:none}
.f0-pond:before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 40% 50%,rgba(255,255,255,.12) 0 2px,rgba(255,255,255,0) 2px 26px);pointer-events:none}
.f0-pond>img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f0-pond .layer{position:absolute;inset:0;transition:transform 1.4s ease-in-out}
.f0-pond.wind .layer{transform:translateX(34px)}
.f0-fz{position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;animation:f0drift 11s ease-in-out infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35));z-index:3}
.f0-fz svg,.f0-fz img{width:100%;height:100%;object-fit:contain}
.f0-fz.tg{width:50px;height:50px;margin:-25px 0 0 -25px}
.f0-fz.dump{animation:f0dump .8s ease-out,f0drift 9s ease-in-out .8s infinite}
@keyframes f0drift{0%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(46px,14px) rotate(6deg)}50%{transform:translate(70px,-8px) rotate(-4deg)}75%{transform:translate(24px,-18px) rotate(8deg)}100%{transform:translate(0,0) rotate(-8deg)}}
@keyframes f0dump{0%{transform:translateY(-50px) scale(.6);opacity:.4}100%{transform:none;opacity:1}}
.f0-kescher{position:absolute;left:150px;top:150px;width:66px;height:132px;z-index:20;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45));animation:f0float 1.6s ease-in-out infinite}
.f0-kescher.big{left:142px;top:136px;width:82px;height:164px}
.f0-kescher svg{width:100%;height:100%}

/* Geheimschrift */
.f0-cork{position:relative;padding:12px 8px;border-radius:12px;border:3px solid #111;background:#b98a58 url(img/kork.jpg) center/cover;box-shadow:4px 5px 0 #000}
.f0-noteslots{display:flex;justify-content:center;margin:0 auto;width:304px;height:164px;border:2px dashed rgba(255,255,255,.75);border-radius:6px;background:rgba(255,246,220,.25)}
.f0-noteslots.pro{border-color:rgba(255,255,255,.35);background:rgba(255,246,220,.12)}
.f0-noteslots.full{border-color:transparent;background:none}
.f0-noteslots .sl{position:relative;width:60px;height:160px;border-right:2px dashed rgba(255,255,255,.55)}
.f0-noteslots.pro .sl,.f0-noteslots.full .sl{border-right-color:transparent}
.f0-noteslots .sl:last-child{border-right:none}
.f0-noteslots .sl svg{width:60px;height:160px;display:block}
.f0-pieces{display:flex;justify-content:center;gap:10px;margin-top:14px;min-height:168px}
.f0-pieces .gap{width:60px}
.f0-piece{width:60px;height:160px;filter:drop-shadow(2px 4px 2px rgba(0,0,0,.45));cursor:grab;transition:transform .3s}
.f0-piece svg{width:60px;height:160px;display:block}
.f0-piece.wig{animation:f0wig .8s ease-in-out infinite}
.f0-cipher{margin:10px -10px 0;padding:10px 2px;border-radius:12px;background:#fff6dc;border:3px solid #111;box-shadow:4px 5px 0 #000}
.f0-cipher .ln{display:flex;justify-content:center;gap:3px}
.f0-cipher .ln+.ln{margin-top:6px}
.f0-cl{position:relative;width:44px;height:58px;padding:0;border-radius:8px;border:2px solid #2b4a9a;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.f0-cl.gap{margin-left:0}
.f0-cl small{font:400 17px/24px 'Luckiest Guy',cursive;color:#2b4a9a}
.f0-cl b{display:block;width:100%;height:28px;border-top:2px dashed #9ab;font:400 19px/28px 'Luckiest Guy',cursive;color:#1f7a4d}
.f0-cl.ok{border-color:#1f7a4d;background:#e4f7ec}
.f0-cl.ok b{border-top:2px solid #1f7a4d;animation:f0pop .4s ease-out}
.f0-cl.cur{box-shadow:0 0 0 3px #f5b83d,0 0 12px #f5b83d}
.f0-cl .f0-ring.in{width:54px;height:54px;margin:-27px 0 0 -27px}
.f0-dial{position:relative;margin-top:10px;padding:12px;border-radius:18px;background:#0d2129;border:3px solid var(--acc);text-align:center}
.f0-wheelrow{position:relative;display:flex;align-items:center;justify-content:center;gap:10px}
.f0-wheel{position:relative;width:200px;height:200px}
.f0-wheel svg{position:absolute;transition:transform .5s ease-out}
.f0-wheel svg.o{left:0;top:0;width:200px;height:200px}
.f0-wheel svg.n{left:30px;top:30px;width:140px;height:140px}
.f0-wheel .win{position:absolute;left:50%;top:-4px;margin-left:-20px;width:40px;height:70px;border-radius:10px;border:4px solid var(--gold);box-shadow:0 0 14px var(--gold);pointer-events:none}
.f0-hearts{position:absolute;left:10px;top:8px;width:96px;height:22px;padding:2px;border-radius:6px;background:#fff6dc;border:2px solid #111;z-index:2}
.f0-hearts svg{width:100%;height:100%;display:block}
.f0-hearts.blink{animation:f0blink .5s steps(2) infinite;box-shadow:0 0 0 3px #fff3a0,0 0 14px #fff3a0}
.f0-decoded{margin-top:12px;padding:16px 12px 10px;border-radius:4px;background:#fff6dc;color:#2b4a9a;border:2px solid #111;box-shadow:3px 4px 0 #000;text-align:center;transform:rotate(-1deg);clip-path:polygon(0 0,100% 0,100% 88%,95% 95%,90% 88%,84% 96%,78% 89%,72% 96%,66% 88%,60% 95%,54% 88%,48% 96%,42% 89%,36% 96%,30% 88%,24% 95%,18% 88%,12% 96%,6% 89%,0 95%)}
.f0-decoded b{display:block;font:400 34px/1.1 'Luckiest Guy',cursive;color:#1f7a4d}
.f0-decoded .rest{display:block;margin-top:6px;font:400 20px 'Luckiest Guy',cursive;opacity:.6;transform:translateY(8px)}

/* Das Glas */
.f0-scene.table{background:#6b4423}
.f0-wood{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#6b4423 0 68px,#4a2e16 68px 70px)}
.f0-scene.table .hint{position:absolute;left:133px;top:90px;width:100px;height:130px;border:3px dashed rgba(255,255,255,.5);border-radius:20px;display:flex;align-items:center;justify-content:center}
.f0-scene.table .hint svg{width:80px;height:80px;filter:brightness(0) invert(1);opacity:.3}
.f0-jarbag{width:72px;height:72px;touch-action:none;animation:f0wig 1.4s ease-in-out infinite}
.f0-jarbag svg{width:100%;height:100%}
.f0-kork{position:absolute;width:60px;height:44px;z-index:12}
.f0-kork svg{width:100%;height:100%}
.wob{animation:f0wob 1.6s ease-in-out infinite}
@keyframes f0wob{0%,70%,100%{transform:none}78%{transform:rotate(-5deg)}86%{transform:rotate(5deg)}94%{transform:rotate(-3deg)}}
.f0-jarswipe{position:absolute;left:126px;top:72px;width:114px;height:198px;z-index:8;touch-action:none;cursor:ew-resize;border-radius:30px}
.f0-roll{position:absolute;width:46px;height:110px;z-index:11}
.f0-roll svg{width:100%;height:100%}
.f0-gnote{position:absolute;left:236px;top:96px;width:124px;height:150px;z-index:12;padding:0;border:none;background:none;cursor:pointer;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.5))}
.f0-gnote svg{width:100%;height:100%}
.f0-gnote.folded{left:268px;width:60px}
.f0-zoom{position:relative;margin-top:-210px;margin-bottom:60px;z-index:40;padding:8px;border-radius:12px;background:#fff6dc;border:3px solid #111;box-shadow:0 0 0 4px #fff3a0,0 0 30px rgba(255,243,160,.8);cursor:pointer;animation:f0pop .35s ease-out}
.f0-zoom svg{width:100%;height:auto;display:block}
.f0-zoom path[fill="#e5394b"]{animation:f0glowh 1s ease-in-out 3}
@keyframes f0glowh{50%{fill:#fff3a0}}

/* Dorfplatz */
.f0-polas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.f0-pola{position:relative;padding:6px 6px 22px;background:#f4efe6;border:2px solid #111;box-shadow:3px 4px 0 #000;transform:rotate(-2deg)}
.f0-pola:nth-child(2){transform:rotate(2deg)}
.f0-pola .fig{position:relative;height:196px;background:linear-gradient(180deg,#cfe8ee,#e9dcc0);display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.f0-pola .fig img{max-width:100%;max-height:196px;object-fit:contain;display:block}
.f0-pola .fig.frieda img{height:190px}
.f0-pola .got{position:absolute;left:4px;right:4px;bottom:2px;display:flex;justify-content:center;gap:2px}
.f0-pola .got svg{width:24px;height:24px}
.f0-pola.hit{box-shadow:0 0 0 4px #c8302a,0 0 18px #c8302a}
.f0-pola:before{content:'';position:absolute;left:50%;top:-7px;margin-left:-7px;width:14px;height:14px;border-radius:50%;background:#e0303a;border:2px solid #111;z-index:2}
.f0-chips{display:flex;gap:16px;justify-content:center;margin-top:14px}
.f0-chip{width:76px;height:76px;border-radius:16px;border:3px solid #111;background:#fff8e6;padding:6px;box-shadow:3px 4px 0 #000;position:relative;animation:f0wig 1.4s ease-in-out infinite}
.f0-chip svg{width:100%;height:100%}
.f0-role .who{display:flex;align-items:center;justify-content:center;gap:12px}
.f0-role .who img{height:110px;width:auto}
.f0-role .who b{margin:0;font:400 28px 'Luckiest Guy',cursive}
.f0-role .pics span{position:relative;height:auto;display:flex;flex-direction:column;align-items:center;padding:6px 4px}
.f0-role .pics span>svg{width:64px;height:64px}
.f0-role .pics .mk{position:absolute;right:4px;top:4px;width:28px;height:28px;background:#fff;border-radius:50%;border:2px solid #111;display:flex;align-items:center;justify-content:center}
.f0-role .pics .mk svg{width:22px;height:22px}
.f0-role .pics small{font:700 11px/1.2 Poppins,sans-serif;color:#1b1712;margin-top:2px}

/* Handschriften */
.f0-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.f0-list{position:relative;min-height:170px;padding:12px 6px 10px;background:#fffdf4;color:#1b1712;border:2px solid #111;box-shadow:3px 4px 0 #000;background-image:repeating-linear-gradient(180deg,transparent 0 33px,#b8d4e8 33px 34px)}
.f0-list div{height:34px;line-height:34px;white-space:nowrap;overflow:visible}
.f0-list.druck{font:700 13px 'Courier New',monospace;letter-spacing:1px}
.f0-list.normal{font:500 15px 'Comic Sans MS','Chalkboard SE',Poppins,sans-serif}
.f0-list.schnoerkel{font:400 22px 'Snell Roundhand','Brush Script MT','Segoe Script',cursive;color:#2b4a9a}
.f0-list .sig{position:absolute;right:8px;bottom:6px;width:28px;height:28px}
.f0-list .sig svg{width:100%;height:100%}
.f0-list.hit{box-shadow:0 0 0 4px #c8302a,0 0 18px #c8302a}
.hi{position:relative;display:inline-block}
.hi:before{content:'';position:absolute;left:50%;top:-1px;width:10px;height:9px;margin-left:-5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17C3 12 1 9 1 6c0-3 2-5 4.5-5C7.6 1 9 2.2 10 4c1-1.8 2.4-3 4.5-3C17 1 19 3 19 6c0 3-2 6-9 11z' fill='%23e5394b' stroke='%23111' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat}
.f0-fpz{position:relative;width:200px;height:108px;margin:16px auto 0;background:#fff6dc;border:2px solid #111;box-shadow:3px 4px 0 #000;padding:2px;transform:rotate(-2deg);animation:f0float 2.4s ease-in-out infinite}
.f0-fpz svg{width:100%;height:100%;display:block}

/* Friedas Haus */
.f0-scene.door{background:#f0d9b0}
.f0-opening{position:absolute;left:122px;top:42px;width:122px;height:226px;background:linear-gradient(180deg,#1a1008,#3a2414);z-index:2;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f0-door{position:absolute;left:122px;top:42px;width:122px;height:226px;z-index:4;transform-origin:0 50%;transition:transform 1s ease-in-out}
.f0-door.open{transform:perspective(600px) rotateY(-100deg)}
.f0-door svg{width:100%;height:100%;display:block}
.f0-knocker{position:absolute;left:161px;top:90px;width:44px;height:44px;z-index:6;padding:0;border:none;background:none;cursor:pointer}
.f0-knocker svg{width:100%;height:100%}
.f0-frieda img{height:100%;width:auto;display:block}
.f0-frieda.in{height:212px;animation:f0in .8s ease-out}
@keyframes f0in{from{transform:translateY(30px);opacity:0}}
.f0-pose .f0-frieda{height:260px;padding:6px;border-radius:20px;border:4px solid #111;background:radial-gradient(circle at 50% 70%,#fff3a0,#42d4d4 80%);box-shadow:4px 5px 0 #000}
.f0-pose.small .f0-frieda{height:170px}
.f0-frieda.sad img{filter:grayscale(.75) brightness(.92);transition:filter 1s}
.f0-frieda.happy img{filter:none;animation:f0tilt 2.4s ease-in-out infinite}
.f0-duel{text-align:center}
.f0-duel .bigluca{position:relative;width:250px;height:420px;margin:8px auto 0;border-radius:22px;border:4px solid #111;background:radial-gradient(circle at 50% 40%,#fff3a0,#42d4d4 70%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f0-duel .bigluca img{height:400px;width:auto;max-width:240px;object-fit:contain;object-position:bottom}
.f0-duel .bigluca.tremble{animation:f0trem .18s linear infinite}
.f0-duel .bigluca.tremble2{animation:f0trem2 .12s linear infinite}
.f0-duel .bigluca.laugh{animation:f0laugh .3s ease-in-out 6}
@keyframes f0laugh{50%{transform:translateY(-10px) rotate(-3deg) scale(1.03)}}

/* Schlüsselbund + Anhänger */
.f0-ringk{position:absolute;left:143px;top:36px;width:80px;height:80px;border-radius:50%;border:7px solid #c9a227;box-shadow:inset 0 0 0 2px #111,0 0 0 2px #111;z-index:3}
.f0-ringk.target{animation:f0ring 1.2s ease-in-out infinite;box-shadow:inset 0 0 0 2px #111,0 0 0 2px #111,0 0 20px #f5b83d}
.f0-ringk .f0-charm{position:absolute;left:50%;top:44px;margin-left:-30px;width:60px;height:76px;animation:f0swing 2.4s ease-in-out infinite;transform-origin:50% 0}
.f0-charm img,.f0-charm .f0-picor{width:100%;height:100%;object-fit:contain}
.f0-charm.big{width:96px;height:120px;margin:12px auto 0;cursor:grab;animation:f0float 2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(245,184,61,.8))}
.f0-safe .f0-holes{top:140px}
.f0-hole{height:92px}

/* Abschluss */
.f0-cert .lvrow{display:flex;align-items:center;justify-content:center;gap:12px}
.f0-cert .lvrow .ch{width:60px;height:76px;display:block}
.f0-throw{position:relative;height:220px;margin-top:14px;border-radius:16px;border:3px solid #111;overflow:hidden;background:linear-gradient(180deg,#f6c98a 0 45%,#4fb0c8 45%,#1f6f86)}
.f0-throw .jar{position:absolute;left:30px;top:150px;width:60px;height:60px;animation:f0throw 2.2s ease-in-out forwards}
.f0-throw .jar svg{width:100%;height:100%}
@keyframes f0throw{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(150px,-130px) rotate(400deg)}70%{transform:translate(240px,-20px) rotate(700deg) scale(.7)}100%{transform:translate(150px,10px) rotate(720deg) scale(.9)}}
.f0-invite{animation:f0unroll .8s ease-out;transform-origin:50% 0}
@keyframes f0unroll{from{transform:scaleY(.08);opacity:.5}}
.f0-invite .tx{font:700 14px/1.3 Poppins,sans-serif;text-align:left}
.f0-invite .code{font:800 17px Poppins,sans-serif}
.f0-invite .url{font:600 11px Poppins,sans-serif;color:#555;margin-top:4px}

/* Pinnwand */
.f0-board{background:#b98a58 url(img/kork.jpg) center/cover}
.f0-pin.empty{background:rgba(255,255,255,.15);border:2px dashed rgba(255,255,255,.7);box-shadow:none}
.f0-pin.empty:before{display:none}
.f0-bnote{position:absolute;left:123px;top:86px;width:120px;height:80px;border:2px dashed rgba(255,255,255,.8);border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center}
.f0-bnote.got{background:#fff6dc;border:2px solid #111;box-shadow:2px 3px 0 rgba(0,0,0,.45);transform:rotate(-2deg)}
.f0-bnote.got span{font:400 17px/1.05 'Luckiest Guy',cursive;color:#2b4a9a;padding:0 6px}
.f0-bnote.got:before{content:'';position:absolute;left:50%;top:-7px;margin-left:-7px;width:14px;height:14px;border-radius:50%;background:#e0303a;border:2px solid #111}
.f0-bnote .torn{position:absolute;left:0;right:0;bottom:-6px;height:8px;background:linear-gradient(135deg,#fff6dc 33%,transparent 33%) 0 0/10px 8px,linear-gradient(225deg,#fff6dc 33%,transparent 33%) 0 0/10px 8px}
.f0-bnote.new{animation:f0pin .6s cubic-bezier(.3,1.5,.5,1)}
.f0-bpol{position:absolute;width:54px;height:72px;padding:3px 3px 10px;background:rgba(255,255,255,.18);border:2px dashed rgba(255,255,255,.7)}
.f0-bpol svg{width:100%;height:100%;opacity:.7}
.f0-bpol.got{background:#f4efe6;border:2px solid #111;box-shadow:2px 3px 0 rgba(0,0,0,.45)}
.f0-bpol.got img{width:100%;height:100%;object-fit:contain}
@keyframes f0wig{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.f0-next.gold{background:var(--gold)}
.f0-label{position:absolute;left:0;top:0;width:100%;height:100%;z-index:12;pointer-events:none}
.f0-pola{padding-bottom:30px}
.f0-pola .got{bottom:3px}
.f0-pola .got svg{width:22px;height:22px}
.f0-safe{height:300px}
.f0-safe .f0-holes{top:196px}
.f0-ringk{top:30px}
.f0-wheel svg.n{left:40px;top:40px;width:120px;height:120px}
.f0-wheel .win{height:66px}
.f0-ringk{top:44px}
/* f0-v2: Fetzen-Fischen als Mini-Spiel (Canvas) */
.f0-pond.game{background:#5fc0d6}
.f0-pond.game:before{display:none}
.f0-fish{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* f0-v4: Leos Recraft-Bilder (Teich, Glas vorn/hinten, Haustür) – unsichtbare Tippflächen über den gemalten Dingen */
.f0-kork.hit,.f0-roll.hit{background:none;border-radius:18px}
.f0-knocker.hit{left:152px;top:105px;width:48px;height:48px;border-radius:50%}
.f0-scene.door.real .f0-opening{left:129px;top:84px;width:94px;height:160px;border-radius:2px}
.f0-scene.door.real .f0-door{left:129px;top:84px;width:94px;height:160px;border:none;box-shadow:none;border-radius:0;background:url(img/f00-B4.jpg) -206.25px -84px/514.5px 294px no-repeat}
.f0-scene.door.real .f0-door:after{display:none}
.f0-scene.door.real .f0-frieda.in{height:150px}