/* NUMBERBONDS-NUMBERS.CSS — „Verliebte Zahlen" (Zerlegung der 10) Nur das Layout dieses Moduls. Die Herz-Hälften sind INLINE-SVG (ein einziger Pfad, per viewBox halbiert) → sie skalieren verlustfrei mit dem Auto-Fit. */ @import url("../../../../../global/ui/elements/numberbox.css"); /* 🔴 ALLE Tokens am :root, NICHT am .game-container: Der Zieh-Klon des globalen DragDropManagers (`.nb-drag-ghost`) hängt an — außerhalb des Moduls — und würde dort Modul-Variablen verlieren (schwarzes Herz, falsche Größe). */ :root { --hb-red: #e8455f; /* Herz-Rot */ --hb-ghost-fill: #fbe4e8; /* leere Lücke (blasses Rosa) */ --hb-big-h: clamp(230px, 54vh, 460px); /* Höhe des großen Herzens */ --hb-small-h: clamp(72px, 15vh, 130px); /* Höhe der kleinen Hälften unten */ --hb-seam: clamp(5px, 1.2vh, 11px); /* Trennstrich = Spalt zwischen den Hälften */ } body { overflow: hidden; } .game-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--stage-height); padding: clamp(4px, 1vh, 12px) 12px clamp(8px, 2vh, 20px); box-sizing: border-box; background: #fff; gap: clamp(16px, 5vh, 56px); } /* --- Herz-Hälften (groß in der Mitte UND klein unten) ------------------ */ /* Eine Herz-Hälfte: Die Höhe gibt die Größe vor, die Breite folgt dem Seitenverhältnis der halben viewBox (50 : 90). */ .heart-part { position: relative; height: var(--hb-big-h); width: calc(var(--hb-big-h) * 50 / 90); flex: 0 0 auto; } /* 🔴 Der Zieh-Klon des DragDropManagers ist `position: fixed` (numberbox.css, `.nb-drag-ghost`) und trägt zugleich `heart-part` — mein Modul-CSS steht NACH dem @import und würde ihn sonst mit `position: relative` zurück in den Textfluss holen: der Klon klebte unsichtbar unter der Seite statt am Finger. */ .heart-part.nb-drag-ghost { position: fixed; } /* 🔴 KEIN `overflow: visible` — das Abschneiden an der viewBox IST die Halbierung: derselbe ganze Pfad, links mit viewBox „0 0 50 90", rechts mit „50 0 50 90". Mit sichtbarem Überlauf malt jede Hälfte das GANZE Herz. */ .heart-part svg { width: 100%; height: 100%; display: block; } .heart-part path { fill: var(--hb-red); } /* Die Zahl sitzt in der Mitte der jeweiligen HÄLFTE (nicht des Rechtecks) — darum die leicht verschobenen Prozentwerte, gespiegelt je Seite. */ .heart-num { position: absolute; top: 40%; left: 46%; /* Vorgabe = rechte Hälfte (auch die Stücke unten) */ transform: translate(-50%, -50%); color: #fff; font-weight: 900; line-height: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); pointer-events: none; user-select: none; -webkit-user-select: none; } .heart-left .heart-num { left: 54%; } /* --- Das Herz (Mitte) ------------------------------------------------- */ .heart-stage { display: flex; align-items: flex-start; gap: var(--hb-seam); transform-origin: center center; transition: gap 0.3s ease; } .heart-stage .heart-num { font-size: calc(var(--hb-big-h) * 0.3); } /* --- Die Lücke (Dropzone) --------------------------------------------- */ .heart-slot.ghost path { fill: var(--hb-ghost-fill); stroke: var(--hb-red); stroke-width: 2.5; stroke-dasharray: 6 5; } /* MAGNET: Sobald das gezogene Stück über der Lücke schwebt, zieht sie sichtbar an (`nb-hover` setzt der globale DragDropManager). */ .heart-slot.nb-hover { filter: drop-shadow(0 0 14px rgba(232, 69, 95, 0.85)); transform: scale(1.06); transition: transform 0.15s ease; } /* Angezogen: das kleine Stück fliegt in die Lücke und wird dabei GROSS. */ @keyframes hb-snap { 0% { transform: translate(30%, 22%) scale(0.42); opacity: 0.7; } 65% { transform: translate(-2%, 0) scale(1.08); opacity: 1; } 100% { transform: translate(0, 0) scale(1); } } .heart-slot.snap { animation: hb-snap 0.42s cubic-bezier(0.22, 0.9, 0.3, 1.25); } /* --- Richtig: verschmelzen + pulsieren -------------------------------- */ @keyframes hb-beat { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.13); } 46% { transform: scale(1); } 68% { transform: scale(1.08); } } .heart-stage.merged { gap: 0; /* Trennstrich verschwindet */ animation: hb-beat 1s ease-in-out 2; } /* Haarlinie zwischen den beiden SVG-Kanten schließen → EIN Herz. */ .heart-stage.merged .heart-right { margin-left: -1px; } /* 🔴 Der Schatten gehört an die BÜHNE, nicht an die einzelnen Hälften: sonst wirft die linke Hälfte ihren Schatten auf die rechte und der Trennstrich ist trotz `gap: 0` weiter zu sehen. */ .heart-stage.merged { filter: drop-shadow(0 8px 16px rgba(232, 69, 95, 0.3)); } /* --- Falsch: das Stück bricht wieder ab ------------------------------- */ @keyframes hb-break { 0% { transform: none; opacity: 1; } 18% { transform: translateX(5px) rotate(3deg); } 100% { transform: translate(85%, 40%) rotate(24deg); opacity: 0; } } @keyframes hb-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .heart-stage.breaking .heart-slot { animation: hb-break 0.6s ease-in forwards; } .heart-stage.breaking .heart-left { animation: hb-shake 0.35s ease-in-out; } /* --- Die vier kleinen Hälften (unten) --------------------------------- */ .options-container { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3.5vw, 40px); } /* Die Stücke sind zugleich `.heart-part` (Optik/Zahl) und `.nb-box` (der globale DragDropManager greift nur Boxen mit `draggable="true"`). Zwei Klassen tief → die Größe schlägt sicher die globale --_nb-size. */ .heart-piece.heart-part { width: calc(var(--hb-small-h) * 50 / 90); height: var(--hb-small-h); /* Der Zieh-Klon erbt die GERECHNETE Schriftgröße → die Zahl bleibt beim Ziehen proportional (siehe draganddrop.js). */ font-size: calc(var(--hb-small-h) * 0.3); display: block; cursor: grab; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.18)); } .heart-piece .heart-num { font-size: 1em; } /* Beim Ziehen/nach dem Ablegen ist das Stück oben im Herz → unten unsichtbar (Platz bleibt reserviert, die Reihe darf nicht springen). */ .heart-piece.taken { visibility: hidden; }