@font-face{font-family:"Geist";src:url(../fonts/Geist-100_900.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/Geist-Mono-100_900.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Lacquer";src:url(../fonts/Lacquer-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Holly Brief";src:url(../fonts/Holly-Brief-400.woff2) format("woff2");font-display:swap}
/* Layout: ein Bildschirm wie eine Rätsel-App – Spielbrett oben (Desktop links), Korkpinnwand mit den Aussagen darunter (Desktop rechts). */
:root{
  --papier:#FCF7F0; --karte:#FFFFFF; --tinte:#1A1512; --text-2:#6B615A; --linie:#E3D9CC; --flaeche-2:#F4EEE5;
  --orange:#E8621A; --orange-d:#B84A10; --orange-zart:#FDE8D8;
  --los:#00FB56; --los-d:#00D94A; --kork:#B5895A; --kork-d:#8A6640;
  --tanne:#1F4A36; --rot:#B8321A; --notiz:#FFF1A6; --tipp:#EAF6EC; --tipp-rand:#B4DDBD; --guck:#2762B4;
  --f-sans:"Geist","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Geist Mono","SF Mono",Menlo,Consolas,monospace;
  --f-hand:"Holly Brief","Bradley Hand","Segoe Print",cursive;
  --f-name:"Lacquer","Marker Felt","Segoe Print",cursive;
  --r-s:10px; --r-m:18px; --r-l:28px;
  --sh-1:0 1px 2px rgba(26,21,18,.06),0 2px 8px rgba(26,21,18,.05);
  --sh-2:0 2px 4px rgba(26,21,18,.07),0 12px 32px rgba(26,21,18,.12);
  --sh-3:0 4px 8px rgba(26,21,18,.08),0 28px 64px rgba(26,21,18,.18);
  --ruhig:cubic-bezier(.2,.8,.2,1); --feder:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
  --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px);
}
/* Eingebettet (z. B. Claude-App, Shop-iFrame): Rahmen liegt nicht am Bildschirmrand, Safe-Area-Abstände wären leere Fläche */
html.eingebettet{--sa-t:0px;--sa-b:0px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--f-sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--guck);border-radius:8px}
img{max-width:100%;height:auto;display:block}
#app{height:100%}
.screen{min-height:100%}
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border-radius:18px;font-weight:700;font-size:17px;letter-spacing:-.01em;transition:transform .12s var(--ruhig),box-shadow .12s,background .16s;text-decoration:none;white-space:nowrap;position:relative;top:0}
.btn:active{transform:translateY(3px)}
.btn-los{background:var(--los);color:var(--tinte);box-shadow:0 5px 0 #00B23D,0 10px 18px rgba(0,120,40,.22)}
.btn-los:active{box-shadow:0 2px 0 #00B23D,0 4px 8px rgba(0,120,40,.2)}
.btn-tinte{background:var(--tinte);color:var(--papier);box-shadow:0 5px 0 #000}
.btn-tinte:active{box-shadow:0 2px 0 #000}
.btn-leise{background:var(--karte);color:var(--tinte);box-shadow:0 4px 0 #E3D9CC,inset 0 0 0 2px #E3D9CC}
.btn-leise:active{box-shadow:0 1px 0 #E3D9CC,inset 0 0 0 2px #E3D9CC}
.btn svg{width:20px;height:20px}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:20px}

/* ---------- Chat (Messenger, dunkel, Holly-Doodle-Muster) ---------- */
.chat{position:fixed;inset:0;z-index:90;color:#F4EEE5;display:flex;flex-direction:column;font-family:var(--f-sans);-webkit-font-smoothing:antialiased;transition:opacity .7s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2830 30%29 rotate%28-20%29'%3E%3Cg%3E%3Cellipse cx='0' cy='4' rx='7' ry='6'/%3E%3Ccircle cx='-8' cy='-6' r='3'/%3E%3Ccircle cx='-3' cy='-11' r='3'/%3E%3Ccircle cx='3' cy='-11' r='3'/%3E%3Ccircle cx='8' cy='-6' r='3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate%2895 22%29 rotate%2810%29'%3E%3Cpath d='M0-11 3-3.5 11-3.4 4.7 1.6 7 9.5 0 4.8-7 9.5-4.7 1.6-11-3.4-3-3.5z'/%3E%3C/g%3E%3Cg transform='translate%28170 35%29 rotate%28-30%29'%3E%3Cpath d='M-14-3a4 4 0 1 1 4-4l20 0a4 4 0 1 1 4 4a4 4 0 1 1-4 4l-20 0a4 4 0 1 1-4-4z'/%3E%3C/g%3E%3Cg transform='translate%28225 95%29 rotate%280%29'%3E%3Cpath d='M0-12V12M-10.4-6 10.4 6M-10.4 6 10.4-6M-3-9.5 0-6.5 3-9.5M-3 9.5 0 6.5 3 9.5'/%3E%3C/g%3E%3Cg transform='translate%2840 100%29 rotate%288%29'%3E%3Cpath d='M-10-3h20v13h-20zM-12-8h24v5h-24zM0-8v18M0-8c-3-6-9-6-8-1M0-8c3-6 9-6 8-1'/%3E%3C/g%3E%3Cg transform='translate%28120 90%29 rotate%28-12%29'%3E%3Ccircle cx='-3' cy='-3' r='8'/%3E%3Cpath d='M3 3 11 11'/%3E%3C/g%3E%3Cg transform='translate%28190 150%29 rotate%284%29'%3E%3Cpath d='M0-13-8-2h4l-7 9h22l-7-9h4zM0 7v5'/%3E%3C/g%3E%3Cg transform='translate%2885 160%29 rotate%28-8%29'%3E%3Cpath d='M0 9C-10 2-11-5-6-8c3-2 5 0 6 2 1-2 3-4 6-2 5 3 4 10-6 17z'/%3E%3C/g%3E%3Cg transform='translate%2825 180%29 rotate%2814%29'%3E%3Cpath d='M-5-6a5 5 0 1 1 7 4.5c-2 1-2 2-2 4M0 8v.5'/%3E%3C/g%3E%3Cg transform='translate%28140 215%29 rotate%28-18%29'%3E%3Cpath d='M-3 12V-5a5 5 0 0 1 10 0'/%3E%3Cpath d='M-3 4l4-3M-3-2l4-3'/%3E%3C/g%3E%3Cg transform='translate%28215 215%29 rotate%286%29'%3E%3Cpath d='M-12-2h24l-3 9h-18zM-8-2c1-4 15-4 16 0'/%3E%3C/g%3E%3Cg transform='translate%28160 140%29 rotate%2825%29'%3E%3Cg%3E%3Cellipse cx='0' cy='4' rx='7' ry='6'/%3E%3Ccircle cx='-8' cy='-6' r='3'/%3E%3Ccircle cx='-3' cy='-11' r='3'/%3E%3Ccircle cx='3' cy='-11' r='3'/%3E%3Ccircle cx='8' cy='-6' r='3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate%2860 225%29 rotate%28-6%29'%3E%3Cpath d='M0-11 3-3.5 11-3.4 4.7 1.6 7 9.5 0 4.8-7 9.5-4.7 1.6-11-3.4-3-3.5z'/%3E%3C/g%3E%3Cg transform='translate%28110 148%29 rotate%2820%29'%3E%3Cpath d='M0-12V12M-10.4-6 10.4 6M-10.4 6 10.4-6M-3-9.5 0-6.5 3-9.5M-3 9.5 0 6.5 3 9.5'/%3E%3C/g%3E%3Cg transform='translate%28220 40%29 rotate%2840%29'%3E%3Cpath d='M-14-3a4 4 0 1 1 4-4l20 0a4 4 0 1 1 4 4a4 4 0 1 1-4 4l-20 0a4 4 0 1 1-4-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/250px 250px,#0E0C0B}
.chat::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.chat.weg{opacity:0;pointer-events:none}
.chat-kopf{flex:none;position:relative;display:flex;align-items:center;gap:11px;padding:calc(10px + var(--sa-t)) max(14px,calc(50% - 290px)) 10px;z-index:2;background:rgba(28,24,22,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.chat-kopf .ava{width:42px;height:42px;border-radius:50%;background:var(--notiz);display:grid;place-items:center;overflow:hidden;flex:none}
.chat-kopf .ava img{width:118%;max-width:none;margin-top:14%}
.chat-kopf .wer{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.chat-kopf .nm{font-size:17px;font-weight:700;letter-spacing:-.015em;color:#fff}
.chat-kopf .rolle{font-size:13px;color:rgba(244,238,229,.6);margin-top:2px;display:flex;align-items:center;gap:6px}
.chat-kopf .rolle i{width:7px;height:7px;border-radius:50%;background:var(--los)}
.chat-kopf .rolle.tippt{color:var(--los)}
.chat-kopf .skip{flex:none;color:rgba(244,238,229,.75);font-size:14px;font-weight:600;padding:8px 6px}
.chat-liste{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px max(14px,calc(50% - 280px)) 12px max(14px,calc(50% - 290px));display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;position:relative;z-index:1}
.chat-liste>*{flex-shrink:0}
.chat-liste .zeit{align-self:center;background:rgba(38,33,29,.92);color:rgba(244,238,229,.75);border-radius:8px;padding:5px 11px;margin:4px 0 14px;font-size:12.5px;font-weight:500;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.msg{position:relative;max-width:min(80%,340px);padding:7px 10px 8px 11px;border-radius:12px;font-size:16px;line-height:1.38;letter-spacing:-.008em;word-wrap:break-word;margin-top:3px;box-shadow:0 1px 1px rgba(0,0,0,.35);animation:blub .26s cubic-bezier(.2,.9,.3,1.15) both}
.msg.in{align-self:flex-start;background:#2A2420;color:#F4EEE5;margin-left:40px;transform-origin:top left}
.msg.out{align-self:flex-end;background:var(--orange);color:#fff;transform-origin:top right}
.msg.neu-gruppe{margin-top:12px}
.msg.in.neu-gruppe{border-top-left-radius:0}
.msg.out.neu-gruppe{border-top-right-radius:0}
.msg.in.neu-gruppe::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:#2A2420;clip-path:polygon(0 0,100% 0,100% 100%)}
.msg.out.neu-gruppe::before{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;background:var(--orange);clip-path:polygon(0 0,100% 0,0 100%)}
.msg .zt{float:right;font-size:11px;line-height:1;margin:9px 0 -3px 10px;color:rgba(244,238,229,.5);font-variant-numeric:tabular-nums}
.msg.out .zt{color:rgba(255,255,255,.75)}
@keyframes blub{0%{opacity:0;transform:translateY(14px) scale(.7)}60%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{transform:none}}
.msg.jumbo{background:none;box-shadow:none;font-size:52px;line-height:1;padding:0 4px;margin-left:40px;animation:jumbo .6s var(--feder) both}
.msg.jumbo::before{display:none}
@keyframes jumbo{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
.chat-kopf .ava.hops{animation:avahops .45s var(--feder)}
@keyframes avahops{40%{transform:translateY(-5px) scale(1.08)}}
.msg .reaktion{position:absolute;left:-12px;bottom:-12px;font-size:16px;line-height:1;background:#2A2420;border-radius:999px;padding:4px 5px;box-shadow:0 0 0 2px #0E0C0B;animation:jumbo .5s var(--feder) both}
.pfote{position:fixed;z-index:120;font-size:18px;pointer-events:none;animation:pfote 1.1s cubic-bezier(.2,.7,.3,1) both}
@keyframes pfote{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(1.1)}}
.antworten .chip-v{background:#2A2420;color:#F4EEE5;box-shadow:inset 0 0 0 1px rgba(244,238,229,.22);font-size:14px;padding:9px 14px}
.antworten .chip-v:first-child{background:#2A2420}
/* Glas-Chat ueber der Fallkarte */
.chat.glas{background:rgba(14,12,11,.5);-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);animation:glasrein .55s cubic-bezier(.2,.8,.2,1) both}
.chat.glas::before{opacity:.25}
.chat.glas .chat-kopf{background:rgba(28,24,22,.7)}
.chat.glas .chat-liste,.chat.glas .chat-fuss{animation:glasinhalt .6s cubic-bezier(.2,.8,.2,1) .08s both}
@keyframes glasrein{from{background:rgba(14,12,11,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes glasinhalt{from{opacity:0;transform:translateY(24px) scale(.98)}}
.chat.glas.weg{opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .45s ease}
/* Karte sanft einblenden */
.board.einblenden{animation:einbl .6s cubic-bezier(.2,.8,.2,1) both}
.board.einblenden .grid,.board.einblenden .lbl{animation:einbl2 .5s ease .25s both}
@keyframes einbl{from{opacity:0;transform:scale(.97)}}
@keyframes einbl2{from{opacity:0}}
/* Icon-Buttons und Chips (wiederhergestellt) */
.lvl-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{font-family:var(--f-mono);font-size:12px;font-weight:600;border-radius:999px;padding:5px 10px;background:var(--flaeche-2);color:var(--text-2)}
.chip.ok{background:#D9FBE3;color:#0B5B26}
.iconbtn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:none;transition:background .16s}
.iconbtn:hover{background:rgba(26,21,18,.06)}
.iconbtn svg{width:22px;height:22px}
.geschenk-sheet{text-align:center}
.geschenk-sheet .gift-art.g{width:min(250px,64vw);margin:0 auto 6px;animation:wackler 2.2s ease-in-out infinite}
.code{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--karte);border:2px dashed var(--orange);border-radius:16px;padding:12px 12px 12px 18px;margin:6px 0 16px;font-family:var(--f-mono);font-weight:600;font-size:22px;letter-spacing:.06em}
.code button{font-family:var(--f-sans);font-size:14px;font-weight:700;background:var(--tinte);color:#fff;border-radius:12px;padding:10px 14px;letter-spacing:0}

/* Chat-Bausteine (Profilbild, Tipp-Anzeige, Antworten, Eingabe) – wiederhergestellt */
.msg .mini{position:absolute;left:-40px;top:0;width:32px;height:32px;border-radius:50%;background:var(--notiz);overflow:hidden;display:grid;place-items:center}
.msg .mini img{width:120%;max-width:none;margin-top:16%}
.msg.tipp-ind{padding:0;width:58px;height:34px;display:flex;align-items:center;justify-content:center;gap:4px}
.msg.tipp-ind i{width:7px;height:7px;border-radius:50%;background:rgba(244,238,229,.55);animation:punkt 1.1s infinite ease-in-out}
.msg.tipp-ind i:nth-child(2){animation-delay:.15s}.msg.tipp-ind i:nth-child(3){animation-delay:.3s}
@keyframes punkt{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.msg.sticker{background:none;box-shadow:none;padding:0;width:140px;margin:8px 0 2px 40px;animation:sticker .45s var(--feder) both}
.msg.sticker::before{display:none}
.msg.sticker.mittext{width:min(84%,330px);display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px}
.msg.sticker.mittext>img{width:110px;height:110px}
.msg.sticker.mittext .story{font-size:15px;line-height:1.35;color:rgba(244,238,229,.92);background:#2A2420;border-radius:12px;padding:9px 12px;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.msg.sticker>img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
@keyframes sticker{from{opacity:0;transform:scale(.5) rotate(-8deg)}}
.msg.foto{padding:3px;background:#2A2420;width:min(84%,330px);max-width:none;border-radius:12px}
.msg.foto.neu-gruppe{border-top-left-radius:0}
.foto-inhalt{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:12px 8px 9px;background:var(--kork) url(img/kork.webp);background-size:160px;border-radius:9px}
.foto-inhalt figure{margin:0;text-align:center;animation:blub .35s ease both}
.foto-inhalt figure:nth-child(2){animation-delay:.07s}.foto-inhalt figure:nth-child(3){animation-delay:.14s}.foto-inhalt figure:nth-child(4){animation-delay:.21s}.foto-inhalt figure:nth-child(5){animation-delay:.28s}
.foto-inhalt img{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.foto-inhalt figcaption{font-family:var(--f-name);font-size:12px;text-transform:lowercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);margin-top:2px}
.msg.foto .mini{left:-40px;top:0}
.chat-fuss{flex:none;position:relative;z-index:2;padding:8px max(10px,calc(50% - 290px)) calc(10px + var(--sa-b))}
.antworten{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 2px}
.antworten:empty{display:none}
.antworten button{background:var(--los);color:var(--tinte);border-radius:22px;padding:12px 20px;font-size:16px;font-weight:700;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(0,0,0,.4);animation:knopf .35s var(--feder) both;transition:transform .1s}
.antworten button+button{background:#2A2420;color:#F4EEE5;box-shadow:inset 0 0 0 1px rgba(244,238,229,.18)}
.antworten button:active{transform:scale(.96)}
@keyframes knopf{from{opacity:0;transform:translateY(10px)}}
.eingabe{display:flex;align-items:center;gap:8px}
.eingabe.aus{display:none}
.feld{flex:1;display:flex;align-items:center;min-height:48px;background:#2A2420;border-radius:24px;padding:0 5px 0 18px;animation:knopf .35s var(--feder) both}
.feld input{flex:1;min-width:0;background:none;border:0;outline:0;color:#F4EEE5;font:inherit;font-size:17px;padding:10px 0}
.feld input::placeholder{color:rgba(244,238,229,.42)}
.feld .senden{width:38px;height:38px;border-radius:50%;background:var(--orange);display:grid;place-items:center;flex:none;transform:scale(0);transition:transform .25s var(--feder)}
.feld .senden.an{transform:none}
.feld .senden svg{width:16px;height:16px}
.schneefall{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:95}
/* ---------- Spiel ---------- */
#play,#tut{height:100%;display:flex;flex-direction:column;overflow:hidden}
.bar{display:flex;align-items:center;gap:4px;padding:calc(4px + var(--sa-t)) 8px 4px 4px;min-height:52px;flex:none}
.bar .ttl{flex:1;min-width:0;line-height:1.15;padding-left:2px}
.bar .ttl .eyebrow{font-size:11px;display:flex;gap:4px;align-items:center}
.bar .ttl b{display:block;font-weight:800;letter-spacing:-.025em;font-size:clamp(14px,4vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinte)}
.kbtn{height:40px;min-width:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;flex:none;background:var(--karte);box-shadow:inset 0 0 0 1.5px var(--linie);font-weight:700;font-size:14px}
.kbtn svg{width:19px;height:19px}
.kbtn.tipp{background:var(--tipp);box-shadow:inset 0 0 0 1.5px var(--tipp-rand);padding:0 12px 0 10px}
.kbtn:disabled{opacity:.35}
.kbtn:not(:disabled):active{transform:scale(.95)}
.play-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:0 6px calc(6px + var(--sa-b))}
.board-col{flex:1 1 0;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.board-frame{--ar:1;position:relative;padding:16px 15px 0 15px;margin:0 auto;width:min(100%,520px)}
.seite{flex:none;display:flex;flex-direction:column;gap:6px;margin-top:auto}
/* Ansage-Zeile: Schrittanzeige oder Hollys Nachricht, feste Hoehe, nie ueber den Zetteln */
.zeile{position:relative;height:44px;flex:none}
.zeile .step{height:100%;display:flex;align-items:center;gap:8px;background:var(--papier);border-radius:12px;padding:0 12px;box-shadow:var(--sh-1);font-size:13.5px;line-height:1.25}
.zeile .step .eyebrow{font-size:10.5px;color:var(--orange-d);flex:none}
.zeile.msg-an .step{visibility:hidden}
.pinwand{flex:none;background:var(--kork) url(img/kork.webp) repeat;background-size:220px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(26,21,18,.12),inset 0 2px 10px rgba(26,21,18,.18);padding:6px}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.notes li{min-width:0;display:flex}
.note{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto 1fr;gap:1px 6px;align-items:center;text-align:left;background:var(--karte);border-radius:5px;padding:4px 6px 4px 4px;box-shadow:0 1px 1px rgba(26,21,18,.18),0 4px 8px rgba(26,21,18,.14);transform:rotate(var(--rot,0deg));transition:transform .2s var(--feder),box-shadow .2s}
.note::before{content:"";position:absolute;top:-3px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F06A55,#A8261A 70%);box-shadow:0 1px 2px rgba(26,21,18,.35)}
.note .face{grid-row:1 / span 2;width:34px;height:34px;object-fit:contain;margin:0 0 0 -3px;align-self:start;touch-action:none;filter:drop-shadow(0 2px 2px rgba(26,21,18,.2));transition:transform .2s var(--feder)}
.note .nm{font-family:var(--f-name);font-size:14px;line-height:1.05;text-transform:lowercase;display:flex;align-items:center;gap:4px;min-width:0}
.note .tx{font-size:12.5px;line-height:1.22;color:#2A221D;align-self:start}
.note .pos{text-transform:none;margin-left:auto;font-family:var(--f-mono);font-size:10.5px;font-weight:600;background:var(--flaeche-2);border-radius:999px;padding:1px 5px;letter-spacing:.02em}
.note .ok-dot{width:14px;height:14px;flex:none;display:none}
.note.erfuellt .ok-dot{display:block}
.note.sel{box-shadow:0 0 0 3px var(--orange),0 8px 16px rgba(26,21,18,.24);transform:rotate(0deg) translateY(-1px)}
.note.sel .face{transform:scale(1.1)}
.note.fail{animation:wackel .5s;box-shadow:0 0 0 3px var(--rot),0 4px 8px rgba(26,21,18,.16)}
.note.platziert .face{opacity:.55}
.note.hl{box-shadow:0 0 0 3px var(--orange),0 4px 8px rgba(26,21,18,.16);animation:notepuls 1.1s ease-in-out infinite}
@keyframes notepuls{50%{box-shadow:0 0 0 6px rgba(232,98,26,.4),0 4px 8px rgba(26,21,18,.16)}}
.note.taeter{box-shadow:0 0 0 3px var(--rot),0 8px 16px rgba(26,21,18,.24)}
.note .stamp{font-size:13px;left:22px;top:22px}
.note.gesucht{background:var(--notiz);cursor:default}
.note.gesucht .face{touch-action:auto}
.note.gesucht .nm{font-family:var(--f-hand);font-size:12px;text-transform:none;color:var(--text-2)}
.note.gesucht .tx{font-weight:700;font-size:clamp(11px,3.3vw,13px);letter-spacing:-.02em;hyphens:auto;-webkit-hyphens:auto}
.play-body.wahl-culprit .note:not(.gesucht){cursor:pointer}
.board{position:relative;width:100%;border-radius:8px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.board>img.map{width:100%;height:auto;border-radius:6px;box-shadow:var(--sh-1);pointer-events:none}
.lbl{position:absolute;font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--text-2);transform:translate(-50%,-50%);pointer-events:none}
.grid{position:absolute;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}
.cell{position:relative;display:block;width:100%;height:100%;border-radius:3px;cursor:pointer;outline:none}
.cell.has{touch-action:none}
.cell:focus-visible{box-shadow:inset 0 0 0 3px var(--guck);z-index:3}
.cell>*{position:absolute;pointer-events:none}
.cell .strich{inset:10%;width:80%;height:80%;opacity:0;transition:opacity .15s;overflow:visible}
.cell .strich path{fill:none;stroke:#3A2E26;stroke-width:5.5;stroke-linecap:round;opacity:.62;stroke-dasharray:80;stroke-dashoffset:80}
.cell.washed .strich{opacity:1}
.cell.washed .strich path{animation:zeichnen .28s ease-out forwards}
.cell.washed .strich path+path{animation-delay:.12s}
.cell::before{content:"";position:absolute;inset:0;border-radius:2px;background:rgba(40,30,22,.12);opacity:0;transition:opacity .25s;pointer-events:none}
.cell.washed::before{opacity:1}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.cell.has .strich,.cell.blocked .strich,.cell.mark .strich{display:none}
.cell.has::before{opacity:0!important}
.cell .dim{inset:0;background:rgba(26,21,18,.42);opacity:0;transition:opacity .4s}
.board.raum .cell:not(.inraum) .dim{opacity:1}
.cell .lock{right:5%;bottom:5%;width:24%;height:24%;opacity:.85}
.cell .fen{left:5%;top:5%;width:24%;height:24%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cell.amfenster::before{opacity:1;background:radial-gradient(circle at 50% 30%,rgba(120,200,255,.42) 0,rgba(120,200,255,0) 70%)}
.cell .x{inset:12%;width:76%;height:76%;opacity:0;overflow:visible}
.cell .x path{fill:none;stroke:#C62F1F;stroke-width:9;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.cell.mark .x{opacity:1}
.cell.mark .x path{animation:zeichnen .22s ease-out forwards}
.cell.mark .x path+path{animation-delay:.1s}
.cell .tok{left:6%;top:4%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(26,21,18,.35));opacity:0;transform:scale(.4);transition:transform .32s var(--feder),opacity .16s}
.cell.has .tok{opacity:1;transform:none}
.cell.has.conflict .tok{animation:wackel .5s 2}
.cell.conflict::after{content:"";position:absolute;inset:3px;border-radius:50%;box-shadow:0 0 0 3px var(--rot);pointer-events:none}
.cell .fund{left:4%;top:4%;width:92%;height:92%;object-fit:contain;opacity:0;transform:scale(.2) rotate(-30deg);filter:drop-shadow(0 4px 4px rgba(26,21,18,.35))}
.cell.found .fund{opacity:1;transform:none;transition:transform .7s var(--feder),opacity .2s}
.cell.found::before{content:"";position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,rgba(255,241,166,.95) 0 40%,rgba(255,241,166,0) 70%);animation:glanz 1.2s var(--ruhig) both;pointer-events:none;opacity:1}
@keyframes glanz{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.cell.hl::after{content:"";position:absolute;inset:2px;border-radius:6px;box-shadow:0 0 0 3px var(--orange);animation:puls 1.1s ease-in-out infinite;pointer-events:none}
@keyframes puls{50%{box-shadow:0 0 0 6px rgba(232,98,26,.35)}}
.cell.hover{box-shadow:inset 0 0 0 3px var(--orange);background:rgba(232,98,26,.12)}
.board.wahl .cell:not(.has):not(.blocked):hover{background:rgba(232,98,26,.12)}
.cell.shake{animation:wackel .4s}
@keyframes wackel{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.cell.schnapp-zelle{z-index:15}
.cell>.schnapp{pointer-events:auto;cursor:pointer}
.schnapp{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:16;white-space:nowrap;background:var(--los);color:var(--tinte);font-weight:800;font-size:15px;letter-spacing:-.01em;padding:10px 16px;border-radius:999px;box-shadow:0 3px 0 var(--los-d),0 8px 18px rgba(0,0,0,.28);animation:schnapprein .5s var(--feder) both,schnapphuepf 1.4s ease-in-out .6s infinite}
.schnapp::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--los)}
.schnapp:active{transform:translateX(-50%) translateY(2px)}
@keyframes schnapprein{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.6)}}
@keyframes schnapphuepf{50%{transform:translateX(-50%) translateY(-4px)}}
.cell.schnapp-zelle.s-unten .schnapp{bottom:auto;top:calc(100% + 6px)}
.cell.schnapp-zelle.s-unten .schnapp::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--los)}
.cell.schnapp-zelle.s-links .schnapp,.cell.schnapp-zelle.s-rechts .schnapp{bottom:auto;top:50%;left:auto;transform:translateY(-50%);animation:schnapprein2 .5s var(--feder) both}
.cell.schnapp-zelle.s-links .schnapp{right:calc(100% + 8px)}.cell.schnapp-zelle.s-rechts .schnapp{left:calc(100% + 8px)}
.cell.schnapp-zelle.s-links .schnapp::after,.cell.schnapp-zelle.s-rechts .schnapp::after{left:auto;top:50%;margin:-7px 0 0;border:7px solid transparent}
.cell.schnapp-zelle.s-links .schnapp::after{left:100%;border-left-color:var(--los)}.cell.schnapp-zelle.s-rechts .schnapp::after{right:100%;border-right-color:var(--los)}
@keyframes schnapprein2{from{opacity:0;transform:translateY(-50%) scale(.6)}}
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);font-family:var(--f-name);text-transform:lowercase;color:var(--rot);border:2px solid var(--rot);border-radius:6px;padding:0 4px;font-size:11px;line-height:1.3;background:rgba(252,247,240,.88);animation:stempel .45s var(--feder) both;white-space:nowrap}
@keyframes stempel{from{transform:translate(-50%,-50%) rotate(-14deg) scale(2.4);opacity:0}}

@media (min-width:880px) and (min-height:560px), (min-width:600px) and (max-height:559px) and (orientation:landscape){
  .play-body{flex-direction:row;align-items:flex-start;justify-content:center;gap:28px;padding:6px 28px 20px}
  .board-col{flex:1 1 0;align-self:stretch;justify-content:flex-start}
  .play-body{align-items:stretch}
  .seite{flex:0 0 380px;gap:10px;margin-top:0}
  .zeile{height:64px}
  .pinwand{padding:12px}
  .notes{grid-template-columns:1fr;gap:9px}
  .note{grid-template-columns:44px 1fr;padding:8px 10px 9px 8px}
  .note .face{width:46px;height:46px}
  .note .nm{font-size:17px}.note .tx{font-size:14.5px}
  .note .stamp{font-size:15px;left:28px;top:30px}
}
@media (min-width:600px) and (max-height:559px) and (orientation:landscape){
  .play-body{gap:16px;padding:4px 16px 8px}
  .seite{flex:0 1 340px;min-width:300px}
  .zeile{height:44px}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .note{grid-template-columns:30px 1fr;padding:4px 6px 4px 4px}
  .note .face{width:34px;height:34px}.note .nm{font-size:14px}.note .tx{font-size:12.5px}
}
@media (max-width:599px) and (max-height:500px){#play,#tut{height:auto;min-height:100%;overflow:visible}}
#play.eng,#tut.eng{height:auto;min-height:100%;overflow:visible}
#play.eng .seite,#tut.eng .seite{margin-top:8px}
#play.eng .board-col,#tut.eng .board-col{flex:none}
/* ---------- Intro: Logo + Auftauen ---------- */
#splash{position:fixed;inset:0;z-index:200;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,#FFFFFF 0%,#F3F7FA 60%,#E7EEF4 100%);display:grid;place-items:center;overflow:hidden}
#splash canvas{position:absolute;inset:0;width:100%;height:100%}
#splash .logo{position:relative;width:min(56vw,300px);height:auto;opacity:0;transform:scale(.94);filter:blur(8px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter .8s ease;will-change:transform,opacity}
#splash.da .logo{opacity:1;transform:none;filter:none}
#splash.weg .logo{opacity:0;transform:scale(1.05);filter:blur(4px);transition:opacity .38s ease,transform .5s ease,filter .38s ease}
#splash.taut{background:transparent}
#splash.fertig{opacity:0;transition:opacity .3s ease;pointer-events:none}

/* ---------- Holly-Blase ---------- */
.zeile .blase{position:absolute;left:0;right:0;top:auto;bottom:0;transform:none;width:auto;z-index:25;display:grid;grid-template-columns:36px 1fr;align-items:end;gap:6px;pointer-events:none}
.zeile .blase .holly{width:36px;height:36px;object-fit:cover;object-position:50% 20%;border-radius:50%;background:var(--notiz);margin:0 0 4px 0;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.2);animation:rein .3s var(--feder) both}
.zeile .blase .inhalt{min-height:44px;border-radius:12px;padding:6px 32px 7px 11px;display:flex;flex-direction:column;justify-content:center}
.zeile .blase .lab{display:none}
.zeile .blase p{font-size:13.5px;line-height:1.3}
.zeile .blase .zu{width:30px;height:30px;right:2px;top:2px}
.zeile .blase.neu .inhalt{animation:melden .38s cubic-bezier(.2,.9,.25,1.1) both}
.zeile .blase.neu .holly{animation:melden .38s cubic-bezier(.2,.9,.25,1.1) both}
.zeile .blase .inhalt::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:currentColor;opacity:.18;transform-origin:left;animation:ablauf var(--dauer,4s) linear both}
.zeile .blase.geht .inhalt,.zeile .blase.geht .holly{animation:abmelden .22s ease forwards}
@keyframes melden{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes abmelden{to{opacity:0;transform:translateY(6px)}}
@keyframes ablauf{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Fortschritts-Stepper statt Anleitungstext */
.zeile .step{justify-content:center;gap:6px;padding:0 10px}
.stufe{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border-radius:999px;background:var(--flaeche-2);color:var(--text-2);font-weight:700;font-size:13px;white-space:nowrap;transition:background .3s,color .3s,transform .3s var(--feder)}
.stufe b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:12px;color:var(--text-2)}
.stufe svg{width:22px;height:22px}
.stufe.an{background:var(--tinte);color:#fff;transform:scale(1.04)}
.stufe.an b{background:var(--orange);color:#fff}
.stufe.ok{background:#E7FBEC;color:#0B5B26}
.stufe:not(.an) span{max-width:0;overflow:hidden;transition:max-width .35s ease}
.stufe:not(.an){padding-right:4px}
.stufe.an span{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.verb{width:14px;height:2px;border-radius:2px;background:var(--linie);flex:none}

.blase{position:fixed;left:50%;bottom:calc(14px + var(--sa-b));transform:translateX(-50%);width:min(calc(100% - 20px),520px);z-index:40;display:grid;grid-template-columns:62px 1fr;align-items:end;gap:4px;pointer-events:none}
.blase[hidden]{display:none!important}
.blase .holly{width:72px;margin:0 0 -6px -8px;filter:drop-shadow(0 6px 8px rgba(26,21,18,.18));animation:rein .4s var(--feder) both}
.blase .inhalt{pointer-events:auto;position:relative;background:var(--tipp);border:1.5px solid var(--tipp-rand);border-radius:18px 18px 18px 6px;padding:11px 38px 12px 14px;box-shadow:var(--sh-2);animation:rein .35s var(--feder) both}
.blase.info .inhalt{background:var(--karte);border-color:var(--linie)}
.blase.warn .inhalt{background:#FFF0EB;border-color:#F3B9A6}
.blase .lab{font-size:12px;font-weight:600;color:var(--rot);letter-spacing:.01em;margin:0 0 2px}
.blase p{margin:0;font-size:15px;line-height:1.38}
.blase .zu{position:absolute;right:4px;top:4px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.blase .zu svg{width:16px;height:16px}
@keyframes rein{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* ---------- Sheets ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(26,21,18,.42);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
@media (min-width:640px){.sheet-bg{align-items:center;padding:24px}}
.sheet{background:var(--papier);width:100%;max-width:560px;max-height:min(92%,860px);overflow:auto;border-radius:var(--r-l) var(--r-l) 0 0;padding:22px 22px calc(22px + var(--sa-b));box-shadow:var(--sh-3);animation:hoch .35s var(--ruhig) both;position:relative}
@media (min-width:640px){.sheet{border-radius:var(--r-l);padding:30px 32px}}
@keyframes hoch{from{transform:translateY(60px) scale(.98);opacity:0}}
.sheet{animation:hoch .42s cubic-bezier(.2,.9,.25,1.08) both}
.sheet-bg.geht{animation:fadeaus .23s ease forwards}
.sheet-bg.geht .sheet{animation:runter .23s cubic-bezier(.4,0,1,1) forwards}
@keyframes fadeaus{to{opacity:0}}
@keyframes runter{to{transform:translateY(50px);opacity:0}}
.sheet>*{animation:sheetinhalt .45s cubic-bezier(.2,.8,.2,1) both}
.sheet>*:nth-child(2){animation-delay:.04s}.sheet>*:nth-child(3){animation-delay:.08s}.sheet>*:nth-child(4){animation-delay:.12s}.sheet>*:nth-child(5){animation-delay:.16s}
@keyframes sheetinhalt{from{opacity:0;transform:translateY(10px)}}
/* Bildschirmwechsel */
::view-transition-old(root){animation:.28s cubic-bezier(.4,0,1,1) both vtaus}
::view-transition-new(root){animation:.42s cubic-bezier(.2,.8,.2,1) both vtrein}
[data-richtung="raus"]::view-transition-new(root){animation-name:vtrein2}
@keyframes vtaus{to{opacity:0;transform:scale(.985)}}
@keyframes vtrein{from{opacity:0;transform:translateY(18px) scale(1.01)}}
@keyframes vtrein2{from{opacity:0;transform:scale(1.02)}}
.auftritt{animation:einblende .35s ease both}
@keyframes einblende{from{opacity:0}}
/* Druck-Feedback ueberall */
.btn,.kbtn,.knoten,.preis,.geschenk,.note,.iconbtn,.antworten button,.cell{-webkit-tap-highlight-color:transparent}
.iconbtn:active,.kbtn:not(:disabled):active{transform:scale(.92);transition:transform .08s}
.btn:active{transform:translateY(2px) scale(.985)}
.note:active{transform:rotate(0) scale(.97)}
.sheet h2{font-weight:800;letter-spacing:-.035em;font-size:30px;line-height:1.05;margin:4px 0 14px;text-wrap:balance}
.sheet .zu{position:absolute;right:12px;top:12px;z-index:3;background:var(--papier)}
.sheet p{margin:0 0 12px}
.regeln{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:12px;counter-reset:r}
.regeln li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;background:var(--karte);border-radius:14px;padding:12px 14px;box-shadow:var(--sh-1);counter-increment:r}
.regeln li::before{content:counter(r);font-family:var(--f-mono);font-weight:600;width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--tinte);display:grid;place-items:center}
.regeln b{display:block;font-size:16px;margin-bottom:2px}
.regeln span{font-size:15px;color:#3B322C}
.gut{background:var(--flaeche-2);border-radius:14px;padding:14px 16px;margin:0 0 18px;font-size:15px}
.gut h3{font-size:13px;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:0 0 8px;font-weight:500}
.gut ul{margin:0;padding-left:18px;display:grid;gap:6px}
.lockicon{display:inline-block;width:18px;height:18px;vertical-align:-4px}
.sheet-actions{display:flex;flex-direction:column;gap:10px}
@media (min-width:480px){.sheet-actions{flex-direction:row-reverse}.sheet-actions .btn{flex:1}}
.erg-bild{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:2px 0 6px;position:relative;height:150px}
.erg-bild .o{width:120px;height:120px;object-fit:contain;transform:rotate(-8deg) translateX(14px);filter:drop-shadow(0 8px 10px rgba(26,21,18,.18))}
.erg-bild .d{width:132px;height:132px;object-fit:contain;transform:rotate(5deg);filter:drop-shadow(0 8px 10px rgba(26,21,18,.18))}
.erg-bild .stamp{font-size:26px;left:62%;top:62%;border-width:3px;padding:0 8px}
.erg-center{text-align:center}
.stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.stats div{background:var(--karte);border-radius:14px;padding:10px 14px;box-shadow:var(--sh-1);min-width:92px}
.stats b{display:block;font-family:var(--f-mono);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stats span{font-size:12px;color:var(--text-2)}
.badge{display:inline-block;font-family:var(--f-mono);font-size:12px;font-weight:600;background:var(--notiz);border-radius:999px;padding:5px 10px;margin:0 0 14px}
.promo{background:var(--tanne);color:var(--papier);border-radius:18px;padding:16px 18px;margin:16px 0 0;display:grid;gap:10px}
.promo b{font-weight:800;letter-spacing:-.02em;font-size:20px;line-height:1.15}
.promo span{color:#D9E6DE;font-size:15px}
.promo .btn{justify-self:start;min-height:44px;background:var(--papier);color:var(--tinte)}
.kopiert{font-family:var(--f-mono);font-size:13px;color:#0B5B26;text-align:center;margin-top:8px;min-height:18px}
.ghost{position:fixed;left:0;top:0;width:64px;height:64px;pointer-events:none;z-index:80;filter:drop-shadow(0 10px 10px rgba(26,21,18,.35));transform:translate(-50%,-60%) scale(1.1)}
canvas.konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- Rätsel-Feinschliff (16.10.): Coach-Hand, Erfolgsmoment, Pulse nur über transform/opacity ---------- */
/* Hervorhebung: statischer Ring + pulsierender Ring per opacity/transform (vorher box-shadow-Animation = Repaint pro Frame) */
.note.hl{animation:none}
.note.hl::after{content:"";position:absolute;inset:-3px;border-radius:8px;box-shadow:0 0 0 3px var(--orange);pointer-events:none;animation:hlring 1.1s ease-in-out infinite}
.cell.hl::after{animation:hlring 1.1s ease-in-out infinite}
@keyframes hlring{50%{opacity:.3;transform:scale(1.05)}}
/* Coach-Hand (Fall 1): zeigt erst auf den Zettel, dann aufs Feld */
#play .mit-hand{z-index:20}
#play .coach-hand{left:auto;right:8px;bottom:-18px;width:32px}
#play .cell .coach-hand{right:auto;left:50%;bottom:auto;top:52%;margin-left:-14px}
#play #b-undo.pulsiert{animation:tipppuls 1.6s ease-in-out infinite}
/* „Alle fünf sitzen“: Hunde hüpfen nacheinander (Squash & Stretch, Ursprung unten) */
.board.alle-sitzen .cell.has .tok{transform-origin:50% 100%;animation:huepfer .46s var(--ruhig) calc(var(--k,0) * 90ms) both}
@keyframes huepfer{0%{transform:none}18%{transform:scale(1.1,.86)}50%{transform:translateY(-24%) scale(.94,1.08)}78%{transform:scale(1.05,.95)}100%{transform:none}}
/* … dann laufen Lichtspuren über die freie Reihe und Spalte und treffen sich im Versteck */
.cell .cell-licht{inset:-2%;border-radius:22%;opacity:0;background:radial-gradient(circle,rgba(255,246,196,.95) 0 30%,rgba(255,206,70,.55) 55%,rgba(255,206,70,0) 75%)}
.cell.lichtweg .cell-licht{animation:lichtlauf .62s var(--ruhig) calc(var(--d,0) * 55ms) both}
.cell.lichtziel{z-index:6}
.cell.lichtziel .cell-licht{inset:-30%;border-radius:50%;animation:lichtziel .95s var(--feder) calc(var(--d,0) * 55ms) both}
@keyframes lichtlauf{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1)}}
@keyframes lichtziel{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1)}}
/* Stepper: Text blendet ein statt max-width zu animieren (Layout) */
.stufe:not(.an) span{transition:none}
.stufe.an span{animation:stufetext .3s var(--ruhig) both}
@keyframes stufetext{from{opacity:0;transform:translateX(-4px)}}
/* Regelbruch-Glühen: gültige drop-shadow-Syntax (game.css hatte einen Spread-Wert, der den Filter ungültig machte) */
#play .cell.regelbruch .tok{filter:drop-shadow(0 0 3px #e0372b) drop-shadow(0 3px 3px rgba(26,21,18,.35))}
.blase .inl{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.18em}
/* Regelbruch-Ring auf dem Feld wirklich zeigen (.cell.has::before blendete ihn bisher mit !important aus) */
#play .cell.has.regelbruch::before{opacity:1!important;background:none}