/* wg.css — drehbarer Würfel-Betrachter (wg.js). */
.wg-svg { display: block; width: 100%; height: 100%; overflow: visible; user-select: none; -webkit-user-select: none; }
.wg-svg .wg-vorne, .wg-svg .wg-zahl { font-family: Fredoka, system-ui, sans-serif; font-weight: 700; }
.wg-svg .wg-vorne { fill: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.wg-svg .wg-schild rect { filter: drop-shadow(0 2px 3px rgba(60,20,120,.35)); }
.wg-svg .wg-zahl { fill: #fff; font-size: 17px; stroke: rgba(40,30,80,.55); stroke-width: .9px; paint-order: stroke; pointer-events: none; }
.wg-svg .wg-neu { animation: wgFall .42s cubic-bezier(.3, 1.35, .5, 1) both; }
/* Der Wuerfel ist nach einem Viertel des Falls schon voll deckend, sonst
   schimmert das Gebaeude darunter durch ihn hindurch (Mats 3597). */
@keyframes wgFall { 0% { transform: translateY(-34px); opacity: 0; } 22% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.wg-svg .wg-hell { filter: drop-shadow(0 0 3px #7c3aed) drop-shadow(0 0 6px rgba(124,58,237,.6)); }
.wg-knoepfe { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: 0 4px 12px rgba(60,40,20,.18), inset 0 0 0 1.5px rgba(124,58,237,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wg-knoepfe-lab { font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 15px; color: #5b3fb0; margin-right: 2px; }
.wg-knopf { min-width: 44px; height: 44px; border-radius: 999px; border: none; background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); box-shadow: 0 2px 0 #5423a8; color: #fff !important; font-family: Fredoka, system-ui, sans-serif; font-weight: 700; font-size: 22px; color: #5b3fb0; cursor: pointer; }
.wg-knopf.wg-klein { font-size: 15px; padding: 0 10px; }
.wg-knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(150,120,80,.28); }
@media (prefers-reduced-motion: reduce) { .wg-svg .wg-neu { animation: none; } }

/* Kartenwahl-Level */
.wg-stand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; }
.wg-viewer { width: 100%; flex: 1 1 auto; min-height: 120px; max-height: 100%; touch-action: none; cursor: grab; }
.wg-viewer:active { cursor: grabbing; }
.wg-schloss { font-family: Fredoka, system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.game-area.mu .mu-karten.wg-karten { display: grid !important; grid-template-columns: repeat(2, var(--wg-kw, 140px)); gap: 10px !important; padding: 12px !important; box-sizing: border-box; justify-content: center; }
.game-area.mu .mu-karten.wg-karten.wg-karten1 { grid-template-columns: var(--wg-kw, 220px); }
.mu-karte.wg-karte { width: var(--wg-kw, 140px) !important; height: var(--wg-kh, 110px) !important; padding: 6px !important; align-items: center !important; justify-content: center; font-family: Fredoka, system-ui, sans-serif; font-weight: 700; font-size: 22px; color: #3b2f1c; }
.mu-karte.wg-karte.mu-textkarte { font-size: clamp(16px, calc(var(--wg-kw) * .12), 22px); font-weight: 700; line-height: 1.2; text-align: center; }
.mu-karte.wg-karte .wg-mini { width: 100%; height: 100%; pointer-events: none; }
.mu-karte.wg-karte .bp-ansicht { width: 80%; height: 80%; }

.wg-geist { position: fixed; z-index: 9999; width: 48px; height: 48px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.wg-knopf.wg-klein { color: #fff; }
.wg-bauleiste { display: inline-flex; gap: 8px; align-items: center; }
/* Umschalter Bauen | Wegnehmen: eine Glaspille, das aktive Werkzeug voll gefaerbt. */
.wg-modus { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(60,40,20,.18), inset 0 0 0 1.5px rgba(124,58,237,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wg-modus-k, .wg-werkzeug { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: none; background: transparent; font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 16px; color: #5b3fb0; cursor: pointer; transition: background .2s, color .2s; }
.wg-modus-k svg, .wg-werkzeug svg { width: 18px; height: 18px; flex: 0 0 auto; }
.wg-modus-k.an[data-modus="bauen"] { background: linear-gradient(180deg, #8b5cf6, #7c3aed); color: #fff; box-shadow: 0 2px 0 #5423a8; }
.wg-modus-k.an[data-modus="weg"] { background: linear-gradient(180deg, #f0a24a, #d9822b); color: #fff; box-shadow: 0 2px 0 #a55f16; }
.wg-werkzeug { background: rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(60,40,20,.18), inset 0 0 0 1.5px rgba(124,58,237,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wg-werkzeug:active, .wg-modus-k:active { transform: translateY(1px); }
/* Beim Bauen nehmen nur Deckflaechen und Bodenfelder Tipps an (wg.js). */
.wg-svg .wg-w .wg-seite { pointer-events: none; }
.wg-wegmodus .wg-svg .wg-w .wg-seite { pointer-events: auto; }
.wg-wegmodus .wg-w { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .wg-wegmodus .wg-w:hover polygon { filter: brightness(.85) sepia(.5) hue-rotate(-20deg); } }
.wg-wegmodus .wg-svg { outline: 3px dashed rgba(217,130,43,.55); outline-offset: -6px; border-radius: 18px; }
/* Die Hand, die das Drehen vorfuehrt (wg.js handZeigen): Finger, Druckring
   und Zugspur werden per JS an dieselbe Stelle gesetzt, das Gebaeude dreht
   im selben Takt mit. */
.wg-hand { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.wg-hand.da { opacity: 1; }
.wg-hand-finger { position: absolute; left: 0; top: 0; width: 52px; height: 61px; transform-origin: 23px 2px; transition: transform .18s ease; }
.wg-hand.zieht .wg-hand-finger { transition: none; }
.wg-hand-finger svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 8px rgba(40,20,90,.45)); }
.wg-hand-rand { fill: #3b2a6e; stroke: #3b2a6e; stroke-width: 3.2; stroke-linejoin: round; }
.wg-hand-fuell { fill: #fff; }
.wg-hand-punkt { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(124,58,237,.28); box-shadow: 0 0 0 3px rgba(124,58,237,.75); opacity: 0; transition: opacity .2s ease; }
.wg-hand.drueckt .wg-hand-punkt { opacity: 1; }
.wg-hand-spur { position: absolute; height: 8px; margin-top: -4px; border-radius: 99px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 2px rgba(124,58,237,.45); opacity: 0; transition: opacity .25s ease; }
.wg-hand.zieht .wg-hand-spur { opacity: 1; }
/* Quer: die Breite kommt exakt aus wg.js (--mu-vb), siehe bp.css. */
.game-area.mu.mu-quer .mu-karten.wg-karten { max-width: none; }
/* Beim Bauen zeigt das Feld unter dem Finger bzw. der Maus, wohin der Würfel
   kommt: Bodenfeld violett, Deckfläche heller. */
.wg-svg .wg-boden { transition: fill .12s; }
@media (hover: hover) and (pointer: fine) { .wg-svg .wg-boden:hover { fill: rgba(124, 58, 237, .24); } }
.wg-svg .wg-w .wg-deckel { transition: filter .12s; }
@media (hover: hover) and (pointer: fine) { .wg-svg .wg-w .wg-deckel:hover { filter: brightness(1.18) drop-shadow(0 0 3px rgba(124,58,237,.8)); } }
@media (hover: hover) and (pointer: fine) { .wg-wegmodus .wg-svg .wg-boden:hover { fill: rgba(0,0,0,0); } }

/* Seitenflächen antippbar (Level „Wegnehmen": jeder Würfel ist gemeint). */
.wg-seiten-an .wg-svg .wg-w .wg-seite { pointer-events: auto; }
/* Ein Würfel hebt ab und verblasst. */
.wg-svg .wg-w.wg-raus { animation: wgRaus .5s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes wgRaus { to { transform: translateY(-46px); opacity: 0; } }
.wg-svg .wg-w.wg-oben-drauf polygon { filter: brightness(1.2) drop-shadow(0 0 4px #d9822b); }
@media (prefers-reduced-motion: reduce) { .wg-svg .wg-w.wg-raus { animation-duration: .01s; } }
/* Ebenen-Zahlen der Erklaerung nach dem Loesen (welche-rechnung). */
.wg-svg .wg-ebenenzahl text { font-family: Fredoka, system-ui, sans-serif; font-weight: 700; font-size: 22px; fill: #fff; }
.wg-svg .wg-ebenenzahl { animation: wgZahlEin .35s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes wgZahlEin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wg-svg .wg-ebenenzahl { animation: none; } }
.mu-karte.wg-karte .wg-rechnung { white-space: pre; } .mu-karte.wg-karte .wg-rechnung b { font-weight: 700; }