/* Fall 0003 – Der Bibliotheksspuk · Stil (Basis: Fall 0001 neu, Akzent Violett) */
@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:#140c1f;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:#b38cff;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:#b38cff;--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,#17121f 0%,#21143a 50%,#2c1240 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}
.f3-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}

.f3-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}
.f3-title svg{width:30px;height:30px;flex-shrink:0}

/* Knöpfe */
.f3-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}
.f3-btn.gold{background:var(--gold)}
.f3-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}
.f3-btn svg{width:32px;height:32px}
.f3-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:f3glow 1.6s ease-in-out infinite;text-align:left}
.f3-next svg{width:36px;height:36px;flex-shrink:0}
.f3-next b{flex:1;font:400 23px 'Luckiest Guy',cursive}
.f3-next .ar{width:22px;height:22px}
@keyframes f3glow{50%{box-shadow:4px 5px 0 #000,0 0 22px rgba(179,140,255,.9)}}
.f3-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:f3glowg 1.6s ease-in-out infinite}
.f3-done .ph,.f3-done img{width:56px;height:56px;min-height:0;font-size:9px;padding:2px}
@keyframes f3glowg{50%{box-shadow:4px 6px 0 #000,0 0 24px rgba(63,191,127,.9)}}

/* Luca */
.f3-luca{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.f3-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}
.f3-luca .lb img{position:absolute;left:3px;right:3px;bottom:0;width:58px;height:auto;max-height:98px;object-fit:contain;object-position:bottom}
.f3-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}
.f3-luca .lb .q svg{width:18px;height:18px}
.f3-luca .lb.used .q{background:#fff3a0}
.f3-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}
.f3-luca .bub svg{position:absolute;left:10px;top:50%;margin-top:-11px;width:22px;height:22px;opacity:.55}
.f3-luca .bub.on svg{opacity:1;animation:f3pulse .8s ease-in-out infinite}
.f3-luca.nope .lb{animation:f3nope .5s}
@keyframes f3nope{20%{transform:translateX(-6px) rotate(-3deg)}50%{transform:translateX(6px) rotate(3deg)}80%{transform:translateX(-3px)}}
@keyframes f3pulse{50%{transform:scale(1.18)}}

/* Lichtring */
.f3-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:f3ring 1.1s ease-in-out infinite;z-index:30}
@keyframes f3ring{50%{transform:scale(1.15);opacity:.6}}
.f3-ringbox{position:relative}

/* Plan */
.f3-plan{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.f3-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)}
.f3-p svg{width:34px;height:34px;opacity:.35;filter:grayscale(1)}
.f3-p b{font:700 10px/12px Poppins,sans-serif}
.f3-p.open{border:2px solid var(--acc);background:rgba(179,140,255,.12);cursor:pointer;color:#fff}
.f3-p.open svg,.f3-p.done svg{opacity:1;filter:none}
.f3-p.done{border:2px solid #3fbf7f;background:rgba(63,191,127,.14);color:#fff}
.f3-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}
.f3-p.now{box-shadow:0 0 0 3px rgba(179,140,255,.5),0 0 16px rgba(179,140,255,.6)}

/* Pinnwand */
.f3-board{position:relative;height:310px;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}
.f3-board svg.th{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.f3-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}
.f3-board .book svg{width:64px;height:64px}
.f3-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)}
.f3-sil.b{transform:rotate(3deg)}
.f3-sil svg{width:100%;height:100%}
.f3-sil.new{animation:f3pin .6s cubic-bezier(.3,1.5,.5,1)}
.f3-pin{position:absolute;width:72px;height:84px;background:#f4efe6;border:2px solid #111;box-shadow:2px 3px 0 rgba(0,0,0,.45);padding:4px 4px 14px;display:flex;align-items:flex-start;justify-content:center;transform:rotate(var(--r,0deg))}
.f3-pin svg,.f3-pin img{width:100%;height:100%;object-fit:contain}
.f3-pin:before,.f3-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}
.f3-pin.new{animation:f3pin .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes f3pin{from{opacity:0;transform:translateY(-60px) rotate(-14deg) scale(1.3)}}
.f3-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(179,140,255,.1)}
.f3-tray .f3-pin{position:relative;cursor:grab;touch-action:none;animation:f3wig 1.4s ease-in-out infinite}
.f3-tray .f3-pin *{pointer-events:none}
@keyframes f3wig{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;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
[data-drag],[data-drag] *{-webkit-touch-callout:none}
[data-drag] img,[data-drag] svg{pointer-events:none}
/* f3-v8: Antippen statt Ziehen – aufgehobenes Ding leuchtet, Ziele pulsieren */
.f3-picked{z-index:60 !important;animation:f3picked 1s ease-in-out infinite !important;filter:drop-shadow(0 0 10px #fff3a0) drop-shadow(0 6px 8px rgba(0,0,0,.5))}
@keyframes f3picked{50%{filter:drop-shadow(0 0 18px #fff3a0) drop-shadow(0 6px 8px rgba(0,0,0,.5))}}
.f3-cand{animation:f3cand 1s ease-in-out infinite}
@keyframes f3cand{50%{box-shadow:0 0 0 4px #fff3a0,0 0 20px #fff3a0}}
.f3-shake{animation:f3nope .5s !important}
/* Zeig-Geist (f3-v9: ohne gezeichnete Hand) */
.f3-ghost{position:absolute;left:0;top:0;z-index:9999;pointer-events:none;opacity:0}
.f3-ghost .gl{position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;border:4px solid #fff3a0;box-sizing:border-box;background:rgba(255,243,160,.28);box-shadow:0 0 18px #fff3a0,inset 0 0 10px rgba(255,243,160,.7);animation:f3ring 1.1s ease-in-out infinite}
.f3-gziel{position:absolute;z-index:9998;opacity:.85}
.f3-ghost .gi{position:absolute;opacity:.55;margin:0 !important;transform:none !important;animation:none !important}
.f3-ghost .gi svg,.f3-ghost .gi img{width:100%;height:100%}
/* echte Bildausschnitte */
.f3-crop{display:block;flex-shrink:0;background-repeat:no-repeat;background-color:#3a2a20;border:1.5px solid #111;border-radius:2px}
.f3-ebrief{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex-shrink:0;background:repeating-linear-gradient(-55deg,#5a5662 0 2px,#77737f 2px 4px);border:1.5px solid #111;border-radius:2px}
.f3-ebrief b{font:400 9.5px/1 'Luckiest Guy',cursive;color:#fffdf6;letter-spacing:.3px;text-shadow:0 0 2px #000}
.f3-ereihe{position:relative;display:block;flex-shrink:0;background:#2f6b4a;border:1.5px solid #111;border-radius:2px;overflow:hidden}
.f3-ereihe img{position:absolute;width:30px;height:46px;border-radius:3px;border:1px solid #111;object-fit:cover}
.f3-ereihe .b1{left:4px;top:8px;transform:rotate(-8deg)}
.f3-ereihe .b2{left:28px;top:6px;transform:rotate(6deg)}
.f3-ereihe .c7{position:absolute;left:17px;top:12px;width:30px;height:44px;border-radius:3px;border:1.5px solid #111;background:#fffdf6;color:#5b3fa0;font:400 24px/46px 'Luckiest Guy',cursive;text-align:center;transform:rotate(-2deg)}
.f3-tatort{position:absolute;left:110px;top:64px;width:146px;padding:5px 5px 4px;background:#f4efe6;border:2px solid #111;box-shadow:3px 4px 0 rgba(0,0,0,.5);transform:rotate(-1.5deg);text-align:center}
.f3-tatort img{display:block;width:134px;height:84px;object-fit:cover;border:1.5px solid #111}
.f3-tatort b{display:block;font:400 13px/18px 'Luckiest Guy',cursive;color:#5b3fa0;letter-spacing:1px}
.f3-tatort: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}
.f3-sil.solved{background:#f4efe6;display:flex;flex-direction:column;align-items:center}
.f3-sil.solved img.fig{width:100%;height:62px;object-fit:contain;object-position:bottom}
.f3-sil.solved b{font:700 8.5px/13px Poppins,sans-serif;color:#1b1712;white-space:nowrap}
.back{transition:transform .25s ease-out}
.f3-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 #8a6fc0;border-radius:10px;background:repeating-linear-gradient(135deg,#efe7ff 0 10px,#e3d6ff 10px 20px);color:#3b2a66;text-align:center;padding:4px;font:600 11px/1.2 Poppins,sans-serif}
.ph b{font:800 13px Poppins,sans-serif;color:#5b3fa0}
.ph-tag{position:absolute;right:6px;top:6px;z-index:5;background:rgba(255,255,255,.85);color:#3b2a66;border:1px dashed #5b3fa0;border-radius:6px;padding:1px 6px;font:700 10px Poppins,sans-serif;pointer-events:none}

/* Szenen */
.f3-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}
.f3-scene>svg.sch,.f3-scene>img.real{position:absolute;left:0;top:0;width:100%;height:100%}
.f3-scene>img.real{object-fit:cover}
.f3-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}
.f3-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:f3puff .6s ease-out forwards;z-index:7}
@keyframes f3puff{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}

/* Beutel */
.f3-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}
.f3-bag.hot{box-shadow:0 0 0 4px #fff3a0,0 0 18px #fff3a0}
.f3-slot{position:relative;height:64px;border-radius:12px;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:4px}
.f3-slot svg{width:52px;height:52px}
.f3-slot.sil svg{filter:brightness(0) invert(1);opacity:.3}
.f3-slot.q{font:400 26px 'Luckiest Guy',cursive;color:rgba(244,239,230,.4)}
.f3-slot.got{background:#f4efe6;border:2px solid #111;animation:f3pop .45s ease-out}
@keyframes f3pop{0%{transform:scale(1.6)}100%{transform:scale(1)}}

/* Nahansicht */
.f3-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}
.f3-close .it{position:absolute;width:110px;height:110px;left:128px;top:50px;z-index:20}
.f3-close .it svg{width:100%;height:100%}
.f3-close .it{animation:f3bob 1.5s ease-in-out infinite}
.f3-close .it.out{filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
@keyframes f3bob{50%{transform:translateY(-5px) rotate(-2deg)}}
.f3-close .it.pol{background:#f4efe6;border:2px solid #111;box-shadow:3px 4px 0 rgba(0,0,0,.4);padding:6px 6px 22px;display:flex;justify-content:center}
.f3-close .it.pol .f3-crop{pointer-events:none}

/* Aufgabe (echte Welt) */
.f3-task{margin-top:12px;text-align:center}
.f3-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:f3float 3s ease-in-out infinite}
.f3-task .card img{width:100%;height:100%;object-fit:contain}
.f3-task .card .ph{border-radius:14px}
@keyframes f3float{50%{transform:translateY(-6px) rotate(1deg)}}
.f3-ans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.f3-ans.three{grid-template-columns:1fr 1fr 1fr}
.f3-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}
.f3-ab svg,.f3-ab img,.f3-ab .ph{width:76px;height:76px;min-height:0;object-fit:contain}
.f3-ab.ok{background:#c9f2db;border-color:#1f7a4d}
.f3-ab.no{animation:f3shake .35s}
.f3-ab.pulse{animation:f3pulse2 1.3s ease-in-out infinite}
@keyframes f3pulse2{50%{box-shadow:4px 5px 0 #000,0 0 0 6px rgba(255,243,160,.7)}}
.shake{animation:f3shake .35s}
@keyframes f3shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Code */
.f3-boxes{display:flex;gap:10px;justify-content:center;margin:14px 0 6px}
.f3-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}
.f3-boxes.no{animation:f3shake .35s}
.f3-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.f3-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}
.f3-keys button.fn{background:#d9cdf5}
.f3-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}
.f3-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}
.f3-folder b{font:400 30px 'Luckiest Guy',cursive;color:#1b1712}
.f3-folder small{font:700 13px 'Courier New',monospace;letter-spacing:3px;color:#5a3b25}
.f3-folder .st{position:absolute;right:14px;top:16px;transform:rotate(10deg);border:3px solid #7a2bd6;color:#7a2bd6;font:400 16px 'Luckiest Guy',cursive;padding:2px 8px;border-radius:4px}

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

/* Deckname */
.f3-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}
.f3-tag .hd{position:absolute;left:0;right:0;top:0;height:38px;border-radius:15px 15px 0 0;background:#5b3fa0;color:#fff;font:800 15px/38px Poppins,sans-serif;letter-spacing:1px}
.f3-tag .nm{font:400 38px/1.05 'Luckiest Guy',cursive;color:#1b1712}
.f3-row{display:flex;gap:10px;margin-top:14px;align-items:center}
.f3-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}
.f3-round svg{width:38px;height:38px}
.f3-row .f3-btn{margin-top:0;flex:1}
.f3-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.f3-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}
.f3-m img{height:112px;margin:2px 0 4px;filter:saturate(.85) brightness(.92)}
.f3-m b{font:400 22px 'Luckiest Guy',cursive}
.f3-m small{font:700 13px Poppins,sans-serif;opacity:.85}
.f3-m.on{border-color:var(--acc);background:var(--acc);color:#111;box-shadow:4px 5px 0 #000}
.f3-m.pro{background:#0b0b10;border-color:#3a3a46}
.f3-m.pro b{color:#b38cff;text-shadow:0 0 10px rgba(179,140,255,.7),2px 2px 0 #000}
.f3-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}
.f3-m.pro.on b{color:var(--gold)}
.f3-m.on img{filter:drop-shadow(0 0 8px rgba(255,190,80,.8));animation:f3tilt 2.4s ease-in-out infinite}
@keyframes f3tilt{50%{transform:rotate(-3deg)}}

/* Buchseite */
.f3-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}
.f3-page svg.txt{position:absolute;inset:0;width:100%;height:100%}
.f3-page canvas{position:absolute;left:0;top:0;width:366px;height:262px;touch-action:none;cursor:crosshair}
.f3-word{position:absolute;z-index:5;min-height:44px;padding:0 10px;border-radius:10px;border:3px solid #111;background:#fff8e6;color:#3b2a66;font:400 22px/38px 'Luckiest Guy',cursive;letter-spacing:1px;cursor:pointer;box-shadow:2px 3px 0 #000;animation:f3pop .4s ease-out,f3glow2 1.4s ease-in-out .4s infinite;transform:translate(-50%,-50%);white-space:nowrap}
.f3-word.cipher{background:#2a1d40;color:#d9cdf5;border-color:#b38cff}
@keyframes f3glow2{50%{box-shadow:2px 3px 0 #000,0 0 16px #fff3a0}}
.f3-pencil{position:absolute;width:46px;height:46px;margin:-44px 0 0 -4px;pointer-events:none;z-index:6}
.f3-arrows{position:absolute;left:6px;top:96px;width:20px;display:flex;flex-direction:column;gap:3px;z-index:4;pointer-events:none}
.f3-arrows svg{width:18px;height:12px}
.f3-arrows.blink{animation:f3blink .5s steps(2) infinite}
@keyframes f3blink{50%{opacity:.15}}
.f3-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)}
.f3-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:#3b2a66;text-align:center;line-height:1}
.f3-note span.got{border:2px solid #111;background:#fff;animation:f3pop .4s ease-out}
.f3-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 */
.f3-dial{margin-top:10px;padding:12px;border-radius:18px;background:#1a1228;border:3px solid var(--acc);text-align:center}
.f3-cw{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.f3-cw span{width:34px;height:42px;border-radius:8px;border:2px solid #b38cff;background:#2a1d40;color:#d9cdf5;font:400 22px/40px 'Luckiest Guy',cursive}
.f3-cw span.cur{background:#b38cff;color:#111;box-shadow:0 0 12px #b38cff}
.f3-cw.plain span{border-color:#3fbf7f;background:#fff8e6;color:#1b1712}
.f3-wheelrow{display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.f3-wheel{width:190px;height:190px;position:relative}
.f3-wheel svg{width:190px;height:190px;transition:transform .25s ease-out}
.f3-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}
.f3-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}
.f3-numw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.f3-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 */
.f3-pose{display:flex;gap:12px;align-items:flex-end;justify-content:center;margin-top:12px}
.f3-lucabig{position:relative;width:170px;height:250px;border-radius:20px;border:4px solid #111;background:radial-gradient(circle at 50% 75%,#fff3a0,#b38cff 75%);box-shadow:4px 5px 0 #000;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f3-lucabig img{width:150px;height:auto}
.f3-lucabig.tremble{animation:f3trem .18s linear infinite}
.f3-lucabig.tremble2{animation:f3trem2 .12s linear infinite}
@keyframes f3trem{25%{transform:translate(-2px,1px) rotate(-1deg)}75%{transform:translate(2px,-1px) rotate(1deg)}}
@keyframes f3trem2{25%{transform:translate(-5px,2px) rotate(-2.5deg)}75%{transform:translate(5px,-2px) rotate(2.5deg)}}
.f3-posecard{width:150px;height:150px;border-radius:18px;border:3px solid #111;background:#fff8e6;padding:6px;box-shadow:4px 5px 0 #000}
.f3-posecard img{width:100%;height:100%;object-fit:contain}
.f3-timer{position:relative;width:150px;height:150px;margin:14px auto 0}
.f3-timer svg{width:150px;height:150px;transform:rotate(-90deg)}
.f3-timer circle.run{animation:f3fill linear forwards}
@keyframes f3fill{from{stroke-dashoffset:440}to{stroke-dashoffset:0}}
.f3-timer .in{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle,#fff3a0,#b38cff);display:flex;align-items:center;justify-content:center}
.f3-timer .in svg{transform:none;width:70px;height:70px}

/* Karten */
.f3-felt{position:relative;padding:10px;border-radius:16px;border:3px solid #111;box-shadow:4px 5px 0 #000,inset 0 0 38px 10px rgba(0,0,0,.55);overflow:hidden;background:radial-gradient(ellipse 34% 22% at 24% 70%,rgba(140,205,150,.22),transparent 70%),radial-gradient(ellipse 26% 18% at 74% 30%,rgba(140,205,150,.18),transparent 70%),radial-gradient(ellipse 20% 14% at 58% 82%,rgba(120,190,130,.14),transparent 70%),repeating-linear-gradient(37deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(-53deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 45%,#1f8a4c 0%,#16703c 55%,#0f5a2f 85%,#0b4524 100%)}
.f3-felt>img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.f3-fan{position:relative;height:130px}
.f3-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}
.f3-card svg{width:100%;height:100%}
.f3-card .num{font:400 34px 'Luckiest Guy',cursive;color:#5b3fa0}
.f3-card.backside{background:#3b1f66}
.f3-card.backside>*{display:none}
.f3-card.backside:after{content:'';position:absolute;inset:3px;border-radius:4px;border:2px solid #f5b83d;background:repeating-linear-gradient(45deg,#5b3fa0 0 6px,#3b1f66 6px 12px)}
.f3-card.backside.realback:after{display:none}
.f3-card.backside>img.bk{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:5px;object-fit:cover}
.f3-card.flip{animation:f3flip .6s ease-in-out}
@keyframes f3flip{50%{transform:rotateY(90deg)}}
.f3-rows{display:grid;grid-template-columns:repeat(5,60px);gap:8px;justify-content:center;margin-top:8px}
.f3-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)}
.f3-cs .f3-card{position:relative;left:auto;top:auto}
.f3-cs.gap{border:3px solid #fff3a0;box-shadow:0 0 16px #fff3a0;animation:f3ring 1.1s ease-in-out infinite}
.f3-stack{position:absolute;left:105px;top:10px;width:170px;height:125px;z-index:10;touch-action:none;cursor:ew-resize}
.f3-bookcard{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px 12px;border-radius:14px;background:rgba(0,0,0,.3)}
.f3-bookcard .f3-card{position:relative}

/* Theke */
.f3-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}
.f3-door:after{content:'';position:absolute;right:16px;top:70px;width:12px;height:22px;border-radius:6px;background:#f5b83d;border:2px solid #111}
.f3-door.wig{animation:f3wig 0.8s ease-in-out 3}
.f3-door.dragging{pointer-events:auto;transition:none}
.f3-hook{position:absolute;width:44px;height:96px;margin-left:-22px;z-index:8;background:none;border:none;cursor:pointer;padding:0}
.f3-hook.sw svg.k{animation:f3swing .8s ease-in-out}
@keyframes f3swing{25%{transform:rotate(14deg)}75%{transform:rotate(-10deg)}}
.f3-dustbox{position:absolute;z-index:9;touch-action:none}
.f3-dustbox canvas{width:100%;height:100%;display:block}

/* Kombinieren */
.f3-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.f3-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}
.f3-sila>svg{width:80px;height:90px}
.f3-sila .got{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px}
.f3-sila .got svg{width:40px;height:40px}
.f3-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.f3-chip{width:64px;height:64px;border-radius:14px;border:3px solid #111;background:#fff8e6;padding:4px;box-shadow:3px 4px 0 #000;position:relative}
.f3-chip svg{width:100%;height:100%}

/* Nachtwache */
.f3-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}
.f3-night>svg.sch,.f3-night>img.real{position:absolute;inset:0;width:100%;height:100%}
.f3-night>img.real{object-fit:cover}
.f3-night.realimg{height:460px;background:repeating-linear-gradient(90deg,#26394f 0 57px,#16202d 57px 60px)}
.f3-night.realimg>svg.sch{display:none}
.f3-night.realimg>img.real{inset:auto;left:0;top:0;width:100%;height:250px}
.f3-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}
.f3-night.realimg .f3-mobile{left:160px}
.f3-night.pro .f3-plank{height:24px;margin-top:-12px}
.f3-plank{cursor:pointer;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}
.f3-plank svg{position:absolute;inset:0;width:100%;height:100%}
.f3-plank.on{background:linear-gradient(180deg,#b38cff,#7a5ac0)}
.f3-plank.creak{animation:f3shake .35s;background:linear-gradient(180deg,#c8502a,#8a3418)}
.f3-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}
.f3-tok svg{width:32px;height:32px}
.f3-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}
.f3-mobile .str{position:absolute;left:0;top:0;width:2px;background:#cfd6ff}
.f3-mobile svg{position:absolute;left:-60px;width:120px;height:60px}
.f3-clock{position:absolute;right:12px;top:10px;width:70px;height:70px;z-index:4}
.f3-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)}
.f3-hide>svg.sch,.f3-hide>img.real{position:absolute;inset:0;width:100%;height:100%}
.f3-hide>img.real{object-fit:cover}
.f3-duel{position:relative;text-align:center}
.f3-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,#b38cff 70%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f3-duel .bigluca img{width:290px;height:auto;max-height:440px;object-fit:contain;object-position:bottom}
.f3-duel .bigclock{width:150px;height:150px;margin:10px auto 0}
.f3-portraits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.f3-por{position:relative;height:230px;border-radius:16px;border:3px solid #111;background:radial-gradient(circle at 50% 30%,#3a2e5a,#1a1228);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;overflow:hidden}
.f3-por img{max-height:200px;max-width:120px;object-fit:contain;transition:filter .8s}
.f3-por.dark img{filter:brightness(0) drop-shadow(0 0 8px rgba(255,255,255,.55))}
.f3-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}
.f3-por.act{box-shadow:0 0 0 3px #fff3a0,0 0 20px #fff3a0}
.f3-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}
.f3-uv{position:relative;width:366px;height:220px;margin-top:12px;border-radius:12px;border:3px solid #111;overflow:hidden;background:#120a22;touch-action:none}
.f3-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 #b38cff,0 0 26px #8a5cff;text-align:center}
.f3-uv canvas{position:absolute;inset:0;width:366px;height:220px;touch-action:none}
.f3-uv .beam{position:absolute;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,rgba(179,140,255,.35),rgba(179,140,255,0) 70%);pointer-events:none;z-index:3}

/* Schlüsselbund */
.f3-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}
.f3-safe .lbl{position:absolute;left:0;right:0;top:20px;text-align:center;font:700 12px 'Courier New',monospace;letter-spacing:3px;color:#d8dde3}
.f3-holes{position:absolute;left:12px;right:12px;top:130px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.f3-hole{position:relative;height:96px;border-radius:12px;border:2px solid #111;background:#22272e;display:flex;align-items:center;justify-content:center;overflow:hidden}
.f3-hole img,.f3-hole svg{height:84px;width:auto;filter:brightness(0) invert(1) opacity(.13)}
.f3-hole.has img,.f3-hole.has svg{filter:drop-shadow(0 0 6px rgba(245,184,61,.6))}
.f3-hole.target{box-shadow:0 0 0 3px #f5b83d,0 0 18px #f5b83d;animation:f3ring 1.2s ease-in-out infinite}
.f3-hole.in{background:#3a2f12;box-shadow:0 0 0 3px #f5b83d,0 0 26px #f5b83d}
.f3-hole.in img{animation:f3ins 1s ease-out}
@keyframes f3ins{from{transform:translateY(-60px) scale(1.4);opacity:.5}}
.f3-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:f3swing 2.4s ease-in-out infinite}
.f3-secret{margin-top:12px;padding:14px;border-radius:16px;background:#2a1d40;border:3px solid var(--gold);text-align:center;font:400 22px 'Luckiest Guy',cursive;color:var(--gold)}
.f3-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}
.f3-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}
.f3-coll .spot.got{border:3px solid #111;animation:f3pop .5s ease-out}
.f3-coll .spot .ph,.f3-coll .spot img{width:90px;height:90px;min-height:0;border-radius:50%;object-fit:contain}
.f3-coll b{font:400 22px 'Luckiest Guy',cursive}
.f3-badge{width:110px;height:110px;margin:10px auto 0;border-radius:50%;cursor:grab;animation:f3float 2.4s ease-in-out infinite}
.f3-badge .ph,.f3-badge img{width:110px;height:110px;min-height:0;border-radius:50%;object-fit:contain}

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

/* Einladung */
.f3-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}
.f3-invite .k{font:700 11px 'Courier New',monospace;letter-spacing:3px;color:#5b3fa0}
.f3-invite b{display:block;font:400 26px/1.1 'Luckiest Guy',cursive;margin:4px 0}
.f3-invite .qr{width:200px;height:200px;margin:10px auto 6px;background:#fff;padding:8px;border:2px solid #111;border-radius:8px}
.f3-invite .qr svg{width:100%;height:100%;display:block}
.f3-invite .row{display:flex;align-items:center;justify-content:center;gap:10px}
.f3-invite .row img{height:70px}
.f3-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}
.f3-gate{margin-top:10px;padding:12px;border-radius:12px;background:#fff8e6;color:#1b1712;font:500 14px/1.4 Poppins,sans-serif}
.f3-gate p{margin:6px 0 10px}
.f3-gate a{color:#5b3fa0;font-weight:800}
.f3-ans3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.f3-ans3 button{min-height:48px;border-radius:10px;border:2px solid #111;background:#fff;font:800 18px Poppins,sans-serif;cursor:pointer;color:#111}
.f3-ans3 button.no{background:#f3c1c1}
.f3-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}
.f3-role{margin-top:12px;padding:16px;border-radius:18px;background:#0c0814;border:3px dashed var(--gold);text-align:center}
.f3-role .k{font:700 12px 'Courier New',monospace;letter-spacing:3px;color:var(--gold)}
.f3-role b{display:block;font:400 30px 'Luckiest Guy',cursive;margin:6px 0 10px}
.f3-role .pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.f3-role .pics span{height:96px;border-radius:12px;background:#f4efe6;border:2px solid #111;padding:6px}
.f3-role .pics svg{width:100%;height:100%}
.f3-hand{display:flex;justify-content:center;margin-top:8px}
.f3-faust{display:block;flex-shrink:0;background-image:url(img/B7-8.png);background-repeat:no-repeat}

@media print{
  body *{visibility:hidden !important}
  #ton{display:none}
  .f3-cert,.f3-cert *{visibility:visible !important}
  .f3-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}}

.f3-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}
.f3-ton svg{width:24px;height:24px;filter:invert(1)}
.f3-ton[aria-pressed="false"]{border-color:#777}
.f3-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}
.f3-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}
/* 06.10.: Theke mit echtem Bild B3 (Schlüssel im Bild, Tür rechts angeschlagen) */
.f3-hook.real{width:36px;height:110px;margin-left:-18px;border-radius:10px}
.f3-hook.real.sw{animation:f3ping .8s ease-out}
@keyframes f3ping{0%{box-shadow:0 0 0 0 rgba(255,216,77,.9)}100%{box-shadow:0 0 0 14px rgba(255,216,77,0)}}
.f3-door.real{left:62px;top:41px;width:208px;height:124px;transform-origin:100% 50%;background:repeating-linear-gradient(90deg,#b88a48 0 26px,#a67a3c 26px 28px);box-shadow:inset 0 0 0 7px #8f6a33}
.f3-door.real:after{left:14px;right:auto;top:51px}

/* ---------- f3-v10: Durchatmen (Kreis wächst 4 s = EIN, schrumpft 4 s = AUS) ---------- */
.f3-posecard.f3-wig{animation:f3bob 1.6s ease-in-out infinite}
.f3-breath{display:flex;flex-direction:column;align-items:center;margin-top:10px}
.f3-breath .ring{width:250px;height:250px;border-radius:50%;border:6px solid #fff3a0;background:radial-gradient(circle,#3b2a66 0,#21143a 70%);box-shadow:0 0 28px rgba(255,243,160,.55),inset 0 0 26px rgba(179,140,255,.5);display:flex;align-items:center;justify-content:center;transform:scale(.56);transition:transform 3.9s ease-in-out,box-shadow 3.9s ease-in-out}
.f3-breath.ein .ring{transform:scale(1);box-shadow:0 0 46px rgba(255,243,160,.85),inset 0 0 30px rgba(179,140,255,.6)}
.f3-breath.ready .ring{animation:f3ring 1.1s ease-in-out infinite}
.f3-breath .ring .in{width:150px;height:150px;border-radius:50%;background:#fff8e6;border:3px solid #111;overflow:hidden;display:flex;align-items:center;justify-content:center}
.f3-breath .ring .in img{width:92%;height:92%;object-fit:contain}
.f3-breath .w{margin-top:10px;font:400 44px/1 'Luckiest Guy',cursive;color:#fff3a0;text-shadow:3px 3px 0 #111;letter-spacing:2px}
.f3-breath.ready .w{font-size:28px;color:#f4efe6}
.f3-breath .dots{display:flex;gap:12px;margin-top:10px}
.f3-breath .dots i{width:20px;height:20px;border-radius:50%;border:3px solid #fff3a0;background:transparent}
.f3-breath .dots i.on{background:rgba(255,243,160,.45)}
.f3-breath .dots i.got{background:#fff3a0}

/* ---------- f3-v10: Ersatzschlüssel-Karten ---------- */
.f3-clues{display:flex;gap:12px;justify-content:center;align-items:stretch;margin-top:12px}
.f3-clue{width:170px;padding:8px;justify-content:center;border-radius:14px;background:#fff8e6;border:3px solid #111;box-shadow:4px 5px 0 #000;display:flex;flex-direction:column;align-items:center;gap:4px;animation:f3pin .5s ease-out;transform:rotate(-2deg)}
.f3-clue.key{transform:rotate(2deg)}
.f3-clue img{height:70px;width:auto}
.f3-clue b{font:400 15px/1.1 'Luckiest Guy',cursive;color:#1b1712;text-align:center}
.f3-clue.key b{color:#c8302a}
.f3-kasten{position:relative;display:block;border-radius:8px;overflow:hidden;border:2px solid #111}
.f3-kasten .f3-crop{display:block}
.f3-kasten .leer{position:absolute;border-radius:50%;border:3px solid #c8302a;box-shadow:0 0 0 2px #fff,0 0 12px #c8302a;animation:f3ring 1.1s ease-in-out infinite}
.f3-efehlt{position:relative;display:block}
.f3-efehlt b{position:absolute;right:-4px;top:-6px;width:26px;height:26px;border-radius:50%;background:#c8302a;color:#fff;border:2px solid #111;font:400 18px/24px 'Luckiest Guy',cursive;text-align:center}
.f3-lend{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;margin-top:12px;padding:10px 14px;border-radius:16px;background:#fff8e6;border:3px solid #111;box-shadow:4px 5px 0 #000;color:#1b1712;animation:f3pin .5s ease-out}
.f3-lend .k{grid-row:1/3;display:flex;padding:4px;border-radius:10px;background:#2b1d14;border:2px solid #111}
.f3-lend b{font:400 21px/1.1 'Luckiest Guy',cursive;align-self:end}
.f3-lend small{font:700 13px/1.2 Poppins,sans-serif;color:#5a4a3a;align-self:start}
.f3-lend.small{padding:6px 12px;margin-top:10px}
.f3-lend.small b{font-size:17px}

/* ---------- f3-v10: Jump & Run in der Bibliothek ---------- */
.f3-run{position:relative;width:366px;height:290px;border-radius:16px;overflow:hidden;border:3px solid #111;box-shadow:4px 5px 0 #000;background:#141a3a;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.f3-run canvas{display:block;width:366px;height:290px;pointer-events:none}
.f3-runtray{display:grid;grid-template-columns:1fr 76px;gap:10px;align-items:center;margin-top:8px}
.f3-runtray .f3-note{margin-top:0;grid-template-columns:repeat(4,1fr)}
.f3-runtray .f3-note span{font-size:12px;height:46px}
.f3-runtray .f3-slot.bk{height:68px;background:#5a3b25;border:3px solid #111}
.f3-runtray .f3-slot.bk.got{background:#f4efe6}

/* ---------- f3-v11: Sammel-Seiten mit neuem Inhalt ---------- */
.f3-runtray .f3-note.regal span{font-size:24px;color:#7a2bd6}
.f3-runbild{display:grid;grid-template-columns:repeat(2,44px);grid-template-rows:repeat(2,44px);gap:3px;justify-content:center;padding:6px;border-radius:12px;background:#fff8c8;border:3px solid #111;box-shadow:3px 4px 0 #000}
.f3-runbild span{border:2px dashed #b9a24a;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.f3-runbild span.got{border:2px solid #111;animation:f3pop .4s ease-out}