/* ============================================================================ * coin-moment.css — tc-coin-moment (Der Münzmoment) * ---------------------------------------------------------------------------- * Der Augenblick nach dem Spiel, in dem sichtbar wird, was man verdient hat. * Bis zum 13.08.2026 lief die Ausschüttung stumm: Das Schattengold wurde * gebucht, gespeichert — und niemand sah es. Wer nicht ins Profil ging, * erfuhr nie, dass er etwas bekommen hat. * * Vorgaben von Tim (Taskwerk #294): * - pro Spieler, NICHT beim Fremdhosten (wer für andere einträgt, sieht * deren Ertrag nicht — nur der Angemeldete sieht seinen eigenen) * - Mikroanimation, nicht nur eine Zahl * - bei mehreren Quellen alle einzeln aufzählen: Sieg + Bericht + Foto + * Achievement, nicht nur die Summe * * Läuft im tc-modal (TC.Modal.open), erbt also Overlay, Scroll-Lock und * Escape-Verhalten. Diese Datei gestaltet nur den Inhalt. * * BEWEGUNG — die Regel aus CLAUDE.md §9, hier wörtlich befolgt: * Bei reduzierter Bewegung wird NICHT `animation: none` gesetzt. Damit fiele * auch der Endzustand weg, und die Münzen blieben unsichtbar — ausgerechnet * die Zahl, um die es geht. Stattdessen: duration 0.01ms + iteration-count 1 * + delay -1ms. Die Animation läuft, sie ist nur sofort vorbei. * ========================================================================== */ .tc-coin-moment { text-align: center; padding: var(--tc-space-2) 0 0; } /* ---- Kopf: Summe --------------------------------------------------------- * Die grosse Zahl ist die Schlagzeile. Sie zählt von 0 hoch (JS setzt den * Text), die Fläche darunter pulst einmal — mehr nicht. */ /* --------------------------------------------------------------------------- GORBO, DER ZAEHLER (15.08.2026) Der Muenzmoment zeigte eine Unicode-Muenze und sonst nichts — dabei laeuft jede Ausschuettung durch ihn, und der Untergrund hat fuer genau diese Aufgabe eine Figur mit Portraet. Das Bild ist rund und klein: Es soll die Szene rahmen, nicht die Summe verdraengen. Die bleibt die Hauptsache. --------------------------------------------------------------------------- */ .tc-coin-moment__wirt { width: 72px; height: 72px; margin: 0 auto var(--tc-space-2); border-radius: 50%; overflow: hidden; border: 2px solid var(--tc-accent); box-shadow: 0 0 20px var(--tc-highlight-glow); animation: tc-coin-wirt 700ms var(--tc-ease-out) both; } .tc-coin-moment__wirt img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes tc-coin-wirt { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } } .tc-coin-moment__muenze { font-size: var(--tc-text-4xl); line-height: 1; margin-bottom: var(--tc-space-2); animation: tc-coin-kipp 900ms var(--tc-ease-bounce) both; } .tc-coin-moment__summe { font-family: var(--tc-font-display); font-size: var(--tc-text-3xl); font-weight: 700; color: var(--tc-highlight); text-shadow: 0 0 24px var(--tc-highlight-glow); letter-spacing: 1px; } .tc-coin-moment__summe-label { display: block; font-family: var(--tc-font-body); font-size: var(--tc-text-xs); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--tc-text-muted); margin-top: var(--tc-space-1); } /* ---- Aufzählung der Posten ---------------------------------------------- * Eine Zeile je Quelle. Sie kommen nacheinander herein (Verzögerung setzt JS * als Inline-Stil je Zeile), damit man sie einzeln liest statt als Block. */ .tc-coin-moment__posten { display: flex; flex-direction: column; gap: var(--tc-space-1); margin: var(--tc-space-5) 0 var(--tc-space-4); text-align: left; } .tc-coin-moment__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tc-space-3); padding: var(--tc-space-2) var(--tc-space-3); background: var(--tc-bg-surface-1); border: 1px solid var(--tc-border-subtle); border-left: 2px solid var(--tc-accent); border-radius: var(--tc-radius-md); animation: tc-coin-zeile 320ms var(--tc-ease-out) both; } .tc-coin-moment__grund { font-size: var(--tc-text-sm); color: var(--tc-text-default); min-width: 0; } .tc-coin-moment__betrag { font-family: var(--tc-font-display); font-size: var(--tc-text-base); font-weight: 700; color: var(--tc-success); white-space: nowrap; } /* Ausgaben (Wetteinsatz, Kauf) sind auch Posten — nur mit anderem Vorzeichen. */ .tc-coin-moment__zeile--ausgabe { border-left-color: var(--tc-danger); } .tc-coin-moment__zeile--ausgabe .tc-coin-moment__betrag { color: var(--tc-danger); } /* XP-Zeile: kein Schattengold, deshalb bewusst ruhiger. */ .tc-coin-moment__zeile--xp { border-left-color: var(--tc-info); } .tc-coin-moment__zeile--xp .tc-coin-moment__betrag { color: var(--tc-info); } /* ---- Fuss: Kontostand ---------------------------------------------------- */ .tc-coin-moment__saldo { font-size: var(--tc-text-sm); color: var(--tc-text-muted); padding-top: var(--tc-space-3); border-top: 1px solid var(--tc-border-subtle); } .tc-coin-moment__saldo strong { color: var(--tc-highlight); font-family: var(--tc-font-display); } /* ---- Aufstiegs-Hinweis --------------------------------------------------- */ .tc-coin-moment__aufstieg { margin-top: var(--tc-space-3); padding: var(--tc-space-2) var(--tc-space-3); background: var(--tc-success-bg); border: 1px solid var(--tc-success-border); border-radius: var(--tc-radius-md); font-size: var(--tc-text-sm); color: var(--tc-text-strong); } /* ---- Bewegung ------------------------------------------------------------ */ @keyframes tc-coin-kipp { 0% { transform: rotateY(0deg) scale(0.6); opacity: 0; } 60% { transform: rotateY(360deg) scale(1.15); opacity: 1; } 100% { transform: rotateY(360deg) scale(1); opacity: 1; } } @keyframes tc-coin-zeile { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- Trophaeen im selben Moment (Taskwerk #310) -------------------------- Bis zum 19.08.2026 kam nach dem Muenzmoment ein zweites Overlay mit den frisch freigeschalteten Erfolgen. Jetzt stehen sie hier drin. Bewusst RUHIGER gestaltet als das abgeloeste Vollbild-Overlay: Der Moment hat schon eine Hauptfigur (die Summe, die hochzaehlt). Zwei Dinge, die gleichzeitig um Aufmerksamkeit ringen, ergeben keine doppelte Freude. */ .tc-coin-moment__trophaeen { margin-top: var(--tc-space-3); padding-top: var(--tc-space-3); border-top: 1px solid var(--tc-border-subtle); } .tc-coin-moment__trophaeen-titel { font-size: var(--tc-text-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-muted); margin-bottom: var(--tc-space-2); } .tc-coin-moment__trophaee { display: flex; align-items: center; gap: var(--tc-space-3); padding: var(--tc-space-2); border-radius: var(--tc-radius-md); background: var(--tc-bg-surface-2); border: 1px solid var(--tc-border-subtle); animation: tc-coin-zeile var(--tc-motion-normal) both; } .tc-coin-moment__trophaee + .tc-coin-moment__trophaee { margin-top: var(--tc-space-2); } /* --------------------------------------------------------------------------- ZWEISPALTIG, SOBALD PLATZ IST (21.08.2026) Der Moment laeuft seit heute im 600px-Modal statt im 420px (Tim: „Darf aber auf Desktop auch wieder breiter."). Die gewonnene Breite einfach in laengere Zeilen zu stecken haette nichts gebracht — die Trophaeen sind Kacheln, keine Saetze. Zwei nebeneinander halbieren die Hoehe, und genau daran hing es: Drei Freischaltungen schoben den Moment ueber die 85vh des Modals, die dritte lag unter dem Rand. ⚠️ DIE UEBERSCHRIFT MUSS UEBER BEIDE SPALTEN. Sie ist ein direktes Kind desselben Behaelters (das Markup baut sie in `__trophaeen`, nicht in einen eigenen Kasten) — ohne `grid-column: 1 / -1` saesse „Neue Trophaeen" als erste Kachel neben der ersten Trophaee. Die POSTEN bleiben einspaltig. Sie sind ein Kontoauszug: Man liest ihn von oben nach unten, und die Summe darunter muss aus dem Gelesenen hervorgehen. Zwei Spalten waeren dort keine Ersparnis, sondern eine Leseaufgabe. 640px, nicht 600: Bei 600 Viewport ist der Container samt Aussenabstand noch nicht auf seiner vollen Breite (600 + 2x16). Eine Spalte zu frueh aufzumachen ergaebe zwei Kacheln von je 270px, in denen der Name umbricht. --------------------------------------------------------------------------- */ @media (min-width: 640px) { .tc-coin-moment__trophaeen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--tc-space-2); } .tc-coin-moment__trophaeen-titel { grid-column: 1 / -1; margin-bottom: 0; } /* Der Geschwister-Abstand von oben wuerde sich mit `gap` addieren. */ .tc-coin-moment__trophaee + .tc-coin-moment__trophaee { margin-top: 0; } } /* Die Stufenfarben sind DATENfarben, keine Stimmung (CLAUDE.md §9): Gold, Silber und Bronze bedeuten etwas ueber den Erfolg und bleiben deshalb hart kodiert — genau wie die Medaillen in den Ranglisten. */ .tc-coin-moment__trophaee.tier-bronze { border-color: #a9713b; } .tc-coin-moment__trophaee.tier-silver { border-color: #b8b8c0; } .tc-coin-moment__trophaee.tier-gold { border-color: #d4af37; } .tc-coin-moment__trophaee.tier-platinum { border-color: #7fd4d4; } .tc-coin-moment__trophaee-bild { width: 48px; height: 48px; flex: 0 0 48px; /* nicht schrumpfen, sonst quetscht ein langer Name das Bild */ border-radius: var(--tc-radius-sm); object-fit: cover; } .tc-coin-moment__trophaee-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; /* ohne das bricht ein langer Name das Flex-Layout auf */ } .tc-coin-moment__trophaee-text strong { color: var(--tc-highlight); font-size: var(--tc-text-base); } .tc-coin-moment__trophaee-text em { color: var(--tc-text-muted); font-size: var(--tc-text-sm); font-style: normal; } @media (prefers-reduced-motion: reduce) { .tc-coin-moment__wirt, .tc-coin-moment__muenze, .tc-coin-moment__zeile, .tc-coin-moment__trophaee { animation-duration: 0.01ms; animation-iteration-count: 1; animation-delay: -1ms; } } /* --------------------------------------------------------------------------- NIEDRIGE FENSTER (21.08.2026) Das Modal gibt 85vh minus Kopf her. Genau daran hing Tims Screenshot: Die dritte Trophaee war angeschnitten. Statt die Grenze zu verschieben (85vh ist der Modal-Vertrag) hier zwei Groessen zuruecknehmen, die nichts erzaehlen: Gorbos Portraet rahmt die Szene, es ist nicht die Hauptsache — die Summe darunter ist es. Und der grosse Abstand ueber den Posten ist Luft, keine Aussage. GEMESSEN (600px Modal, drei Posten), ab welcher Fensterhoehe es ohne Scrollen steht: Trophaeen Inhalt passt ab --------- ------ -------- 0 442px 600px 1 – 2 569px 750px 3 – 4 659px 860px Zwei Zahlen darin sind der Beweis, dass das zweispaltige Raster oben etwas taugt: Zwei Trophaeen kosten so viel wie eine, vier so viel wie drei. Einspaltig und mit dem alten Kopf brauchten drei Trophaeen ~900px und vier ~1000px Fensterhoehe. Bei drei Trophaeen und einem 800px-Fenster bleibt ein Rest zum Scrollen — bewusst so. Weiter zu kuerzen hiesse, die Summe kleiner zu machen, und die ist die Schlagzeile. NUR AM SCHREIBTISCH. Am Handy ist die Hoehe selten das Problem, und der eigene Block darunter regelt ohnehin anders. --------------------------------------------------------------------------- */ @media (min-width: 481px) and (max-height: 900px) { .tc-coin-moment__wirt { width: 56px; height: 56px; } .tc-coin-moment__posten { margin-top: var(--tc-space-3); } .tc-coin-moment__trophaeen { margin-top: var(--tc-space-2); padding-top: var(--tc-space-2); } } /* ---- Handy --------------------------------------------------------------- */ @media (max-width: 480px) { .tc-coin-moment__summe { font-size: var(--tc-text-2xl); } .tc-coin-moment__muenze { font-size: var(--tc-text-3xl); } /* Grund und Betrag untereinander, sobald die Zeile eng wird — sonst bricht der Grund auf drei Zeilen und der Betrag steht allein rechts. */ .tc-coin-moment__zeile { flex-direction: column; align-items: flex-start; gap: var(--tc-space-1); } /* Die Trophaee bleibt nebeneinander — Bild und Name gehoeren zusammen, untereinander waere es eine Liste aus Bildern. Nur kleiner. */ .tc-coin-moment__trophaee-bild { width: 40px; height: 40px; flex-basis: 40px; } }