/** * NUMBERLINE.CSS — vereintes Zahlenstrahl-Modul. * Basis + typ-abhängiges Layout, umgeschaltet über die Klasse an * (nl-mode-view / nl-mode-assign, gesetzt in numberline.js → setType()). * - Erkunden (view): Strahl füllt die ganze Bühne. * - Zuordnen (assign): kompakter Strahl oben, Zahlenkarten unten. */ /* Globale Bausteine (für den Zuordnen-Modus). */ @import url("../../../../../global/ui/elements/numberbox.css"); @import url("../../../../../global/ui/elements/dropzone.css"); @import url("../../../../../global/ui/elements/check-button.css"); /* ---- BASIS (beide Typen) ---- */ #game-container { background-color: #ffffff; margin: 0; padding: 0; } .numberline-wrapper { width: 100%; height: 100%; } /* Rahmen sofort neutralisieren (beide Typen entfernen ihn ohnehin) — sonst blitzt beim Öffnen der schwarze Default-Rahmen des Viewports auf, bevor JS die nl-mode-*-Klasse an setzt. */ .viewport { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* ===================================================================== ERKUNDEN (view) — Strahl auf voller Höhe unter dem Header. ===================================================================== */ html.nl-mode-view #game-container { display: block; /* Zentrierung aufheben, volle Breite */ height: var(--stage-height); } html.nl-mode-view .viewport { width: 100vw !important; max-width: none !important; height: var(--stage-height) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; background: transparent !important; display: block !important; } /* Erkunden ist bewusst KEINE Aufgabe → kein Stern in diesem Modus. */ html.nl-mode-view .collect-star { display: none !important; } /* ===================================================================== ZUORDNEN (assign) — kompakter Strahl oben, Zahlenkarten unten. ===================================================================== */ html.nl-mode-assign #game-container { display: flex; flex-direction: column; /* Genau den Platz unter der Kopfzeile füllen (mobil-sicher). */ height: var(--stage-height); width: 100vw; overflow: hidden; } /* NICHT flex:1 — der Viewport bekommt GENAU die Höhe, die der Strahl braucht (Ticks oben, um 45px tiefer hängende Drop-Felder/Labels unten), sonst zentriert der Strahl in einer riesigen Fläche und die Drop-Felder rücken an die Karten. */ html.nl-mode-assign .viewport { flex: 0 0 auto; height: calc(var(--nb-box-size-small, 70px) * 2 + 120px); width: 100vw; max-width: none; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; position: relative; display: block; overflow: hidden; user-select: none; } /* Tutorial-Highlight-Band an dieses Layout anpassen: die Drop-Slots hängen 45px UNTER der Linie und sind bis zu einer Box-Größe hoch → Band nach unten bis unter die Slots reichen lassen; oben genügt etwas Luft über den Ticks. */ html.nl-mode-assign .numberline-band { --nl-band-up: 50px; --nl-band-down: calc(45px + var(--nb-box-size-small, 70px) + 22px); } /* Drop-Slots (Dropzones) — im Erkunden-Modus existieren sie gar nicht. */ .slot.nb-dropzone.nb-box-small { position: absolute; top: 50%; margin-top: 45px; left: 0; /* Ankerpunkt vom JS gesetzt, transform zentriert */ transform: translateX(-50%); z-index: 100; width: var(--nb-box-size-small, 70px); height: var(--nb-box-size-small, 70px); background: rgba(255, 255, 255, 0.4); border: 3px dashed #cbd5e1; border-radius: 12px; display: flex !important; align-items: center; justify-content: center; /* pointer-events steuert numberline.css gegatet über body.nb-dragging. */ transition: background-color 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Befüllte Karte. */ .slot.nb-dropzone.is-filled { background-color: #ffffff; color: #2c3e50; border: none; font-weight: 900; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 0 0 2px #d1d5db; opacity: 1; transform: translateX(-50%) scale(1); } /* Hover-Feedback. */ .slot.nb-dropzone.nb-hover:not(.correct):not(.wrong) { background-color: rgba(52, 152, 219, 0.2); border-color: #3498db; transform: translateX(-50%) scale(1.1); } /* Schüttel-Animation inkl. -50%-Offset in jedem Keyframe. */ @keyframes shakeZoneNumberline { 0%, 100% { transform: translateX(-50%); } 20%, 60% { transform: translateX(calc(-50% - 10px)); } 40%, 80% { transform: translateX(calc(-50% + 10px)); } } .slot.nb-dropzone.wrong { animation: shakeZoneNumberline 0.5s ease-in-out !important; background-color: #e74c3c !important; color: #ffffff !important; } .slot.nb-dropzone.correct { background-color: #2e7d32 !important; color: #ffffff !important; transform: translateX(-50%) scale(1.05); } /* Auswahlleiste unten — nur im Zuordnen-Modus sichtbar. */ .symbol-container { display: flex; justify-content: center; align-items: center; margin-top: auto; /* Karten ans untere Ende, Strahl bleibt kompakt oben */ /* wrap-reverse: überzählige Boxen klappen nach OBEN um (Smartphone). */ flex-wrap: wrap-reverse; gap: 15px; padding: 20px 40px; background-color: transparent; border-top: none; box-shadow: none; z-index: 200; max-height: 45%; overflow-y: auto; } /* Im Erkunden-Modus sind Karten + ✓ ausgeblendet. */ html:not(.nl-mode-assign) .symbol-container { display: none; } /* Schmale Schirme: kleinerer Gap/Padding → mehr Boxen pro Zeile. */ @media (max-width: 640px) { .symbol-container { gap: 8px; padding: 12px 10px; } } /* Zugeordnete Karte (`nl-used`) und wartende Überzählige (`nl-waiting`) sind aus der Zeile genommen → die restlichen Zahlen rücken automatisch nach (Größe/Anzahl rechnet layoutCards() in numberline-numbers.js). */ .symbol-container .nb-option.nl-used, .symbol-container .nb-option.nl-waiting { display: none !important; } .nb-box.nb-option.nb-box-small { cursor: pointer; user-select: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nb-box.nb-option.nb-box-small:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } .nb-is-dragging { opacity: 0.4; transform: scale(0.9); }