/* spiele.css – gemeinsames Aussehen der Spielwiese (nutzt Farben und Schrift der Webseite) */
body { margin: 0; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--cream); border-bottom: 2px solid #F7E7B4; }
.sp-top a.back { color: var(--ink); font-weight: 700; text-decoration: none; }
.sp-top select { font: inherit; padding: .3em .6em; border-radius: 999px; border: 2px solid var(--orange); background: var(--white); }
.sp-wrap { max-width: 760px; margin: 0 auto; padding: 22px 16px 48px; text-align: center; }
.sp-wrap h1 { margin: .2em 0 .3em; }
.sp-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 24px; }
.sp-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sp-card h2 { margin: 0; font-size: 1.25rem; } .sp-card p { margin: 0; color: var(--muted); }
.sp-ico { font-size: 2.4rem; }
.sp-card.soon { opacity: .6; }
.sp-pill { background: #FFF3CC; border-radius: 999px; padding: .2em .9em; font-weight: 700; font-size: .9rem; }
/* Brett */
.board { --n: 8; width: min(94vw, 520px); aspect-ratio: 1; margin: 16px auto; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 5px solid var(--white); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); touch-action: manipulation; }
.sq { min-width: 0; min-height: 0; border: 0; padding: 0; margin: 0; position: relative; display: grid; place-items: center; background: #FFF8E6; cursor: pointer; font: inherit; }
.sq.dark { background: #DDF0D2; }
.sq.sel { background: #FFE18A; }
.sq.last { box-shadow: inset 0 0 0 3px rgba(245,166,35,.65); }
.sq.hint::after { content: ""; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(46,173,91,.55); }
.sq.hint.cap::after { width: 78%; background: none; border: 4px solid rgba(46,173,91,.8); }
.pc { width: 78%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: min(7vw, 34px); line-height: 1; box-shadow: 0 3px 0 rgba(43,43,43,.18); transition: transform .15s ease; }
.pc.me { background: #FFD84D; border: 3px solid #23924A; }
.pc.gr { background: #C98B5A; border: 3px solid #7A4A25; }
.sq.sel .pc { transform: scale(1.1) translateY(-2px); }
.sp-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; margin: 8px 0; }
.sp-btn { font: inherit; font-weight: 700; border: 2px solid var(--orange); background: var(--white); color: var(--ink); border-radius: 999px; padding: .5em 1.2em; cursor: pointer; }
.sp-btn:disabled { opacity: .45; cursor: default; }
.sp-btn.main { background: var(--green); border-color: var(--green); color: #fff; }
.sp-status { min-height: 2.6em; font-weight: 700; font-size: 1.1rem; }
.sp-status.win { color: var(--green-dark); animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } 100% { transform: none; } }
.sp-how { text-align: left; max-width: 460px; margin: 8px auto; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sp-status.win, .pc { animation: none; transition: none; } }

/* Bodis Flug */
.fl-stage { position: relative; box-sizing: border-box; width: min(100%, 720px); margin: 12px auto; border: 5px solid var(--white); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: #DFF1FF; touch-action: none; }
.fl-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.fl-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,248,230,.9); text-align: center; padding: 16px; }
.fl-over[hidden] { display: none; }
.fl-win h2 { margin: 0 0 .3em; } .fl-win p { margin: 0 0 1em; color: var(--muted); }
.fl-pad .sp-btn { min-width: 8.5em; min-height: 48px; touch-action: none; user-select: none; }
.fl-pots { font-size: 1.8rem; letter-spacing: .1em; margin: 0 0 .4em; }
.fl-bumps { color: var(--muted); font-size: .95rem; }

/* Blumen-Match */
.bm-stage { position: relative; width: min(94vw, 480px); margin: 10px auto; }
.bm-board { --n: 6; position: relative; width: 100%; aspect-ratio: 1; background: #FFF3CC; border: 5px solid var(--white); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.bm-tile { position: absolute; left: 0; top: 0; border: 0; padding: 0; margin: 0; display: grid; place-items: center; background: transparent; cursor: pointer; box-sizing: border-box; transition: transform .18s ease, opacity .25s ease; will-change: transform; }
.bm-tile svg { width: 84%; height: 84%; display: block; filter: drop-shadow(0 2px 0 rgba(43,43,43,.15)); }
.bm-tile.tB svg { width: 96%; height: 96%; }
.bm-tile.sel svg { transform: scale(1.15); transition: transform .15s; }
.bm-tile.sel::after { content: ""; position: absolute; inset: 4%; border: 3px solid var(--green); border-radius: 30%; }
.bm-tile.hint svg { animation: bm-hint .8s ease-in-out 2; }
@keyframes bm-hint { 50% { transform: scale(1.2) rotate(8deg); } }
.bm-tile.pop { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(.2); pointer-events: none; }
.bm-tile.pop svg { animation: bm-pop .26s ease-out forwards; }
@keyframes bm-pop { 60% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.bm-tile.shake { animation: bm-shake .3s; }
@keyframes bm-shake { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
.bm-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 6px 0; font-weight: 700; }
.bm-goal { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border-radius: 999px; padding: .2em .8em .2em .4em; box-shadow: var(--shadow); }
.bm-goal.done { background: #E9F7EE; color: var(--green-dark); }
.bm-goal.done::after { content: "✓"; }
.bm-mini { width: 28px; height: 28px; display: inline-block; }
.bm-moves { font-weight: 700; }
.bm-winbee { width: 90px; height: 90px; margin: 0 auto 6px; animation: maze-bob 1.6s ease-in-out infinite; }
@keyframes maze-bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .bm-tile, .bm-tile svg, .bm-winbee { transition: none; animation: none; } }

/* Schach */
.sq.check { background: #FFD1D1; animation: sc-check 1s ease-in-out infinite; }
@keyframes sc-check { 50% { background: #FFB3B3; } }
.sc-caps { display: flex; justify-content: space-between; width: min(94vw, 520px); margin: -6px auto 6px; font-size: 1.3rem; min-height: 1.6em; }
.sc-cap.me { color: #B8860B; } .sc-cap.gr { color: #7A4A25; }
.pc.me, .pc.gr { font-size: min(8vw, 38px); }
.pc.me { color: #2B2B2B; } .pc.gr { color: #2B2B2B; }
@media (prefers-reduced-motion: reduce) { .sq.check { animation: none; } }
.sp-wide { max-width: 900px; }
.sp-wide .maze { margin-top: 10px; }

/* Wörter-Welt */
.wo-stage { min-height: 300px; display: grid; place-items: center; margin: 8px 0; }
.wo-card { width: min(94vw, 520px); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 16px; transition: transform .3s, opacity .3s; }
.wo-card.done { transform: scale(1.03); }
.wo-bubble { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: #FFF3CC; border-radius: 999px; padding: 14px 24px; margin: 0 auto 10px; }
.wo-pic { font-size: 2.6rem; line-height: 1; }
.wo-word { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 700; }
.wo-speak { padding: .3em .7em; }
.wo-ask { color: var(--muted); margin: .4em 0; }
.wo-opts { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 10px; }
.wo-opt { font-size: 1.15rem; padding: .7em 1em; min-height: 52px; }
.wo-opt.good { background: var(--green); border-color: var(--green); color: #fff; }
.wo-opt.bad { opacity: .5; text-decoration: line-through; }
.wo-input { font: inherit; font-size: 1.2rem; padding: .5em .9em; border: 2px solid var(--orange); border-radius: 999px; min-width: 0; width: min(60%, 260px); }
.wo-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: var(--muted); font-size: .95rem; margin: 8px 0 14px; }
.lf-pad .sp-btn { min-width: 4.5em; }

/* Aufgaben-Bausteine */
.au-q { font-weight: 700; font-size: 1.15rem; margin: 6px 0 10px; }
.au-area { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.au-hint { min-height: 1.5em; margin: 8px 0 0; color: var(--muted); font-weight: 600; }
.au-hint.good { color: var(--green-dark); } .au-hint.bad { color: #B55; }
.au-field { position: relative; width: min(94vw, 420px); aspect-ratio: 16 / 9; background: #FFF3CC; border-radius: 16px; }
.au-obj { position: absolute; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1; }
.au-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.au-opt { font-size: 1.2rem; min-width: 3.2em; min-height: 52px; }
.au-opt.good { background: var(--green); border-color: var(--green); color: #fff; } .au-opt.bad { opacity: .5; }
.au-letter { min-width: 2.6em; }
.au-math { text-align: center; }
.au-pots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; max-width: 420px; }
.au-pot { width: 34px; height: 34px; display: inline-block; } .au-pot.away { opacity: .35; }
.au-sign { font-size: 1.6rem; font-weight: 700; margin: 0 8px; }
.au-eq { font-size: 1.5rem; font-weight: 700; margin-top: 8px; }
.au-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(94vw, 360px); }
.au-shape { background: var(--white); border: 3px solid transparent; border-radius: 16px; padding: 8px; cursor: pointer; aspect-ratio: 1; }
.au-shape svg { width: 100%; height: 100%; } .au-shape.good { border-color: var(--green); } .au-shape.bad { opacity: .4; }
.au-type { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.au-pic { font-size: 3.2rem; line-height: 1; }
.au-word { display: flex; gap: 4px; font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: .05em; }
.au-ch.gap { color: var(--orange); border-bottom: 3px solid var(--orange); min-width: .8em; text-align: center; }
.au-ch.gap.ok { color: var(--green-dark); border-color: var(--green); } .au-ch.gap.cur { background: #FFF3CC; border-radius: 6px; }
.au-trace canvas { width: min(90vw, 300px); height: auto; border-radius: 16px; box-shadow: var(--shadow); touch-action: none; display: block; }
.au-maze { --n: 6; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(90vw, 320px); aspect-ratio: 1; background: var(--white); border: 3px solid var(--ink); border-radius: 10px; touch-action: none; user-select: none; outline-offset: 4px; }
.au-cell { position: relative; box-sizing: border-box; border: 0 solid var(--ink); }
.au-cell.u { border-top-width: 3px; } .au-cell.d { border-bottom-width: 3px; } .au-cell.l { border-left-width: 3px; } .au-cell.r { border-right-width: 3px; }
.au-mbee, .au-mpot { position: absolute; inset: 8%; } .au-mbee svg, .au-mpot svg { width: 100%; height: 100%; }
.au-pad { width: min(90vw, 320px); }
.au-circuit { display: flex; align-items: stretch; gap: 6px; }
.au-cgrid { --n: 4; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; width: min(70vw, 300px); }
.au-tile { aspect-ratio: 1; background: var(--white); border: 2px solid #E6DCC0; border-radius: 10px; padding: 0; cursor: pointer; }
.au-tile svg { width: 100%; height: 100%; display: block; }
.au-cside { display: flex; flex-direction: column; gap: 4px; }
.au-cslot { flex: 1; display: grid; place-items: center; width: 44px; font-size: 1.6rem; }
.au-circuit.lit .au-lamp { filter: drop-shadow(0 0 10px #FFD84D); transform: scale(1.3); transition: transform .3s; }
.au-circuit.lit .au-tile { border-color: var(--orange); }
.au-compare { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.au-path { background: var(--white); border: 3px solid transparent; border-radius: 16px; padding: 12px; width: min(42vw, 200px); cursor: pointer; font: inherit; }
.au-path-f { font-size: 1.5rem; line-height: 1.3; word-break: break-all; }
.au-path.good { border-color: var(--green); } .au-path.bad { opacity: .45; }

/* Bodis Reise */
.re { text-align: center; }
.re-head { position: relative; }
.re-hud { display: flex; justify-content: center; gap: 22px; font-weight: 700; font-size: 1.1rem; margin: 4px 0 8px; }
.re-note { background: #FFF3CC; border-radius: 12px; padding: 8px 14px; display: inline-block; }
.re-worlds { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 16px 0; }
.re-world { border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.re-world.locked { opacity: .55; } .re-world h3 { margin: 0; } .re-world p { margin: 0; color: var(--muted); }
.re-path { display: flex; align-items: center; justify-content: center; margin: 6px 0; }
.re-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-size: 1.3rem; border: 3px solid #E6DCC0; }
.re-dot.ok { border-color: var(--green); background: #E9F7EE; } .re-dot.next { border-color: var(--orange); animation: re-pulse 1.2s ease-in-out infinite; }
.re-dot.gate { border-color: var(--green); }
@keyframes re-pulse { 50% { transform: scale(1.12); } }
.re-line { width: 18px; height: 3px; background: #E6DCC0; }
.re-done { color: var(--green-dark); font-weight: 700; } .re-lock { color: var(--muted); }
.re-reward { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 10px 0; }
.re-reset { margin-top: 14px; font-size: .9rem; }
.re-stage { margin-top: 6px; }
.re-travel-p { margin: 0 0 6px; font-weight: 600; }
.re-scene { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 14px; margin: 8px 0; }
.re-friend { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 12px; flex-wrap: wrap; }
.re-face { font-size: 2.6rem; line-height: 1; min-width: 56px; text-align: center; }
.re-gface { width: 64px; height: 64px; } .re-gface svg { width: 100%; height: 100%; }
.re-bubble { flex: 1; min-width: 200px; background: #FFF3CC; border-radius: 16px; padding: 10px 14px; position: relative; }
.re-bubble::before { content: ""; position: absolute; left: -10px; top: 20px; border: 6px solid transparent; border-right-color: #FFF3CC; }
.re-after { flex-direction: column; align-items: center; text-align: center; margin-top: 10px; }
.re-after .re-bubble::before { display: none; }
.re-plan { color: var(--muted); margin: 0 0 8px; }
.re-gate-prog { font-weight: 700; color: var(--green-dark); margin: 0 0 6px; }
@media (prefers-reduced-motion: reduce) { .re-dot.next { animation: none; } }
.sp-card-big { grid-column: 1 / -1; background: linear-gradient(180deg, #FFFFFF, #FFF3CC); }
.sp-card-big p { max-width: 60ch; }
/* Malen nach Zahlen */
.au-paint svg { width: min(90vw, 320px); height: auto; background: var(--white); border-radius: 16px; box-shadow: var(--shadow); display: block; }
.au-paint path { cursor: pointer; transition: fill .2s; }
.au-palette { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.au-swatch { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow); font: inherit; font-weight: 700; font-size: 1.2rem; color: var(--ink); cursor: pointer; }
.au-swatch.sel { border-color: var(--ink); transform: scale(1.12); }
.wo-typed { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700; margin: 6px 0 10px; min-height: 1.4em; }
.wo-slot { min-width: .8em; border-bottom: 3px solid var(--orange); color: var(--orange); text-align: center; }
.wo-slot.on { color: var(--ink); border-color: var(--green); }
.wo-sp { min-width: .6em; }
.wo-letters { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
.sc-score { font-weight: 700; color: var(--muted); margin: 2px 0; }

/* Backgammon */
.bg-board { width: min(100%, 760px); margin: 8px auto; background: #E8D9A8; border: 6px solid #8A5A33; border-radius: 14px; padding: 6px; box-sizing: border-box; box-shadow: var(--shadow); }
.bg-row { display: flex; gap: 2px; height: clamp(120px, 24vw, 190px); }
.bg-row.bottom { margin-top: 6px; }
.bg-point { --tri: #F4E2B4; flex: 1; min-width: 0; position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: visible; }
.bg-point.dark { --tri: #CDA86A; }
.bg-tri { position: absolute; inset: 0; z-index: 0; background: var(--tri); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.bg-row.bottom .bg-point { justify-content: flex-end; }
.bg-row.bottom .bg-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bg-stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 2px 0; }
.bg-row.bottom .bg-stack { flex-direction: column-reverse; }
.bg-point.can .bg-tri { --tri: #BFE3B0; } .bg-point.can.dark .bg-tri { --tri: #9CCB8C; }
.bg-point.sel .bg-tri { --tri: #F5A623; }
.bg-point.target .bg-tri { --tri: #4CC47E; } .bg-point.target.combo .bg-tri { --tri: #5AA9F0; }
.bg-num { position: absolute; z-index: 1; font-size: .7rem; color: rgba(43,43,43,.6); bottom: 2px; left: 0; right: 0; text-align: center; }
.bg-row.bottom .bg-num { top: 2px; bottom: auto; }
.bg-stone { width: clamp(18px, 3.8vw, 32px); height: clamp(18px, 3.8vw, 32px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(10px, 2.2vw, 18px); margin: 1px 0; line-height: 1; box-shadow: 0 1px 0 rgba(43,43,43,.25); }
.bg-stone.me { background: #FFD84D; border: 2px solid #23924A; }
.bg-stone.gr { background: #C98B5A; border: 2px solid #7A4A25; filter: saturate(.6); }
.bg-stone.many { font-weight: 700; font-size: clamp(9px, 2vw, 15px); color: var(--ink); }
.bg-bar { width: 26px; background: #8A5A33; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 4px; }
.bg-barbtn { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; min-height: 30px; cursor: pointer; }
.bg-barbtn.can { outline: 3px solid var(--green); border-radius: 6px; }
.bg-barbtn.sel { outline: 3px solid var(--orange); border-radius: 6px; }
.bg-off { display: flex; justify-content: flex-end; margin-top: 6px; }
.bg-offbox { background: #F4E2B4; border-radius: 8px; padding: 4px 10px; display: flex; gap: 14px; font-weight: 700; cursor: pointer; }
.bg-offbox.target { outline: 3px solid var(--green); }
.bg-dice { font-size: 2.2rem; line-height: 1; min-width: 2.6em; display: inline-flex; gap: 6px; }
.bg-die.used { opacity: .3; } .bg-die.gr { color: #7A4A25; }

/* Countdown mit Anleitung */
.fl-stage.cd-on { touch-action: auto; background: var(--cream); }
.fl-stage.cd-on canvas { display: none; }
.fl-stage.cd-on .fl-over { position: static; background: transparent; min-height: 0; padding: 14px 10px; }
.cd { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.cd-title { margin: 0; font-weight: 700; font-size: 1.15rem; }
.cd-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.cd-card { flex: 1 1 200px; max-width: 300px; background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 10px; }
.cd-card p { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.cd-stage { position: relative; height: 110px; display: flex; align-items: center; justify-content: center; gap: 18px; overflow: hidden; }
.cd-track { position: relative; width: 56px; height: 100%; background: #DFF1FF; border-radius: 12px; }
.cd-bee { position: absolute; left: 6px; width: 44px; height: 44px; top: 8px; animation: cd-updown 2.4s ease-in-out infinite; }
.cd-bee svg { width: 100%; height: 100%; }
.cd-tilt .cd-bee { animation: cd-hold 2.4s ease-in-out infinite; }
.cd-lanes { position: relative; width: 150px; height: 100%; background: #E9D9A8; border-radius: 12px; }
.cd-lanes .cd-bee { top: 40px; left: 8px; animation: cd-lane 3s ease-in-out infinite; }
.cd-icon { font-size: 2rem; line-height: 1; }
.cd-move { animation: cd-updown-icon 2.4s ease-in-out infinite; }
.cd-press { animation: cd-press 2.4s ease-in-out infinite; }
.cd-swipe { animation: cd-swipe 3s ease-in-out infinite; }
.cd-keys { display: flex; gap: 6px; } .cd-keys.small { opacity: .7; transform: scale(.8); }
.cd-keys kbd { min-width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 8px; background: var(--white); font: inherit; font-weight: 700; animation: cd-key 1.6s ease-in-out infinite; }
.cd-keys kbd:nth-child(2) { animation-delay: .8s; } .cd-keys kbd.wide { min-width: 96px; }
.cd-num { font-size: 4rem; font-weight: 700; line-height: 1; color: var(--orange); min-height: 1.1em; }
.cd-num.pop { animation: cd-pop .5s ease-out; } .cd-num.go { color: var(--green); }
@keyframes cd-updown { 0%, 100% { top: 6px; } 50% { top: 56px; } }
@keyframes cd-hold { 0%, 20% { top: 56px; } 45%, 70% { top: 8px; } 100% { top: 56px; } }
@keyframes cd-updown-icon { 0%, 100% { transform: translateY(-26px); } 50% { transform: translateY(26px); } }
@keyframes cd-press { 0%, 20% { transform: translateY(14px) scale(1); } 30%, 70% { transform: translateY(-14px) scale(.85); } 100% { transform: translateY(14px) scale(1); } }
@keyframes cd-swipe { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(34px); } }
@keyframes cd-lane { 0%, 100% { left: 8px; } 50% { left: 98px; } }
@keyframes cd-key { 0%, 60%, 100% { transform: none; border-bottom-width: 4px; } 30% { transform: translateY(3px); border-bottom-width: 1px; background: #FFE3A6; } }
@keyframes cd-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cd-bee, .cd-icon, .cd-keys kbd, .cd-num.pop { animation: none; } }
@media (max-width: 480px) { .cd-stage { height: 84px; } .cd-card { flex-basis: 150px; } .cd-num { font-size: 3rem; } }
.sp-zones { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); cursor: pointer; }

/* Backgammon: gewählte Biene und Ziele unmissverständlich */
.bg-point.sel .bg-stack .bg-stone:last-child { transform: scale(1.22); box-shadow: 0 0 0 4px #2B2B2B, 0 6px 12px rgba(0,0,0,.35); position: relative; z-index: 3; animation: bg-lift .7s ease-in-out infinite alternate; }
.bg-barbtn.sel .bg-stone:last-child { transform: scale(1.22); box-shadow: 0 0 0 4px #2B2B2B; animation: bg-lift .7s ease-in-out infinite alternate; }
.bg-barbtn.sel { outline: 4px solid #F5A623; }
.bg-point.target::after { content: attr(data-d); position: absolute; left: 50%; transform: translateX(-50%); bottom: 16%; z-index: 3; min-width: 1.6em; padding: 0 .35em; border-radius: 999px; background: #fff; border: 3px solid #2B2B2B; font-weight: 700; font-size: clamp(.7rem, 1.8vw, .95rem); line-height: 1.5; text-align: center; }
.bg-row.bottom .bg-point.target::after { bottom: auto; top: 16%; }
@keyframes bg-lift { to { margin-top: -4px; } }
@media (prefers-reduced-motion: reduce) { .bg-point.sel .bg-stack .bg-stone:last-child, .bg-barbtn.sel .bg-stone:last-child { animation: none; } }

/* Bodis Wabenbau */
.wb-layout { display: flex; gap: 14px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 10px 0; }
.wb-stage { position: relative; width: min(62vw, 320px); border: 5px solid var(--white); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: #FFF3CC; touch-action: none; }
.wb-board { display: block; width: 100%; height: auto; aspect-ratio: 320 / 576; touch-action: none; }
.wb-stage .fl-over { background: rgba(255,248,230,.92); }
.wb-stage.cd-on { width: min(94vw, 560px); touch-action: auto; }
.cd-on canvas { display: none; }
.wb-stage.cd-on .fl-over { position: static; background: transparent; padding: 14px 10px; }
.wb-side { display: flex; flex-direction: column; gap: 10px; min-width: 110px; }
.wb-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 12px; text-align: center; }
.wb-h { margin: 0 0 4px; font-weight: 700; font-size: .9rem; color: var(--muted); }
.wb-next { width: 84px; height: 84px; display: block; margin: 0 auto; }
.wb-stat { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; padding: 2px 0; }
.wb-stat b { color: var(--green-dark); }
.wb-pad .sp-btn { min-width: 3.4em; min-height: 52px; font-size: 1.2rem; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 520px) { .wb-pad { gap: 6px; } .wb-pad .sp-btn { padding: .5em .7em; min-width: 3em; } .wb-layout { gap: 8px; } .wb-stage { width: min(60vw, 260px); } .wb-side { min-width: 96px; } .wb-next { width: 72px; height: 72px; } }
/* Countdown-Anleitung für Block-Spiele */
.cd-blocks { position: relative; width: 120px; height: 100%; background: #FFF3CC; border-radius: 12px; overflow: hidden; }
.cd-blk { position: absolute; left: 10px; top: 4px; width: 22px; height: 22px; background: #C9A6FF; border-radius: 5px; box-shadow: 24px 0 0 #C9A6FF, 48px 0 0 #C9A6FF, 24px -24px 0 #C9A6FF; animation: cd-blk 3s ease-in-out infinite; }
@keyframes cd-blk { 0% { left: 6px; top: 32px; transform: rotate(0); } 30% { left: 46px; top: 44px; transform: rotate(0); } 55% { left: 46px; top: 62px; transform: rotate(90deg); } 100% { left: 6px; top: 32px; transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .cd-blk { animation: none; } }

/* Feier und Bodi-Bilder in den Spielen */
.cf-canvas { pointer-events: none; }
.fl-over { overflow: hidden; }
.win-img { display: block; width: min(46%, 170px); height: auto; margin: 0 auto 4px; mask-image: radial-gradient(ellipse at center, #000 52%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 74%); animation: maze-bob 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .win-img { animation: none; } }

/* Hintergrundbilder der Spielseiten (zart, damit Spielfeld und Texte vorne bleiben) */
body.bg-room { background: linear-gradient(rgba(255,248,230,.9), rgba(255,248,230,.94)), url(../assets/img/hintergrund/hg-spielzimmer.webp) center top / cover no-repeat fixed; }
body.bg-meadow { background: linear-gradient(rgba(255,248,230,.86), rgba(255,248,230,.92)), url(../assets/img/hintergrund/hg-wiese-schachtisch.webp) center top / cover no-repeat fixed; }
body.bg-forest { background: linear-gradient(rgba(255,248,230,.86), rgba(255,248,230,.92)), url(../assets/img/hintergrund/hg-wald-lichtung.webp) center top / cover no-repeat fixed; }
body.bg-sky { background: linear-gradient(rgba(255,248,230,.84), rgba(255,248,230,.92)), url(../assets/img/hintergrund/hg-himmel-regenbogen.webp) center top / cover no-repeat fixed; }
body.bg-hive { background: linear-gradient(rgba(255,248,230,.86), rgba(255,248,230,.93)), url(../assets/img/hintergrund/hg-bienenhaus-huegel.webp) center top / cover no-repeat fixed; }
@media (max-width: 720px) { body.bg-room, body.bg-meadow, body.bg-forest, body.bg-sky, body.bg-hive { background-attachment: scroll; } }
/* Hub-Karten mit Bild */
.sp-card { overflow: hidden; padding-top: 0; }
.sp-img { width: calc(100% + 32px); margin: 0 -16px 0; height: 150px; object-fit: cover; object-position: center 30%; display: block; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.sp-card-big .sp-img { height: 220px; object-position: center 40%; }
.sp-ico-small { font-size: 1.5rem; margin-top: -22px; background: var(--white); border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: var(--shadow); }
.sp-card.soon { padding-top: 22px; }
.sp-img[src*="seitlich-schnell"] { object-position: center 6%; }   /* Bodis Flug: Gesicht ganz sichtbar */
.sp-img[src*="flug-landschaft"] { object-position: 12% 24%; }   /* Bodis Reise: Bodi sitzt links im 16:9-Bild, Gesicht ganz sichtbar */