/* assets/theme-game.css — Design 4, Etappe 2, Baustein 2 (D14/D1). * * DIE QUELLE FUER FARBEN UND BAUSTEINE DER SPIEL-WELT. * * NICHT der Screen-Welt: board_display.html, game_display.php und tv_shell.php * tragen ihre Werte weiterhin selbst (`--bg:#2b2b2b`, `#111214`, `#0b1220`). * Sie sollen dieselben Token benutzen, aber das ist Etappe 5. * * DER GRUNDSATZ: Diese Datei aendert das Aussehen NICHT. Sie macht aus mehreren * Werten je einen - und zwar den von X01 (board.html), weil X01 die * meistgespielte und im Lokal abgenommene Referenz ist. * * Der Bestand vor dem Umbau: sieben Spielseiten mit je eigenem :root, * `--green` in DREI Auspraegungen (#1c6e2e bei X01 und 121 Checkout, #0f9d58 bei * Round the Clock, Shanghai und Split Score, #1f7a3d bei Cricket), dazu Cricket * mit einer eigenen, viel dunkleren Familie. Dieselbe Spielart sah je nach Seite * anders aus - und niemand konnte sagen, welcher Ton der richtige war. * * DIE REGELN, die diese Datei traegt - dieselben wie im Admin-Theme: * 1. Farbwerte stehen AUSSCHLIESSLICH in :root, als Token. * 2. Jeder Baustein verweist nur auf var(--game-*). * 3. Der Weltwechsel `body.game-active` steht an genau EINER Stelle: hier. * Die fuenf Seiten mit Setup UND Spiel in einer Datei setzen die Klasse * weiterhin selbst per JavaScript - das ist unberuehrt -, aber die REGEL, * was die Klasse bedeutet, steht nicht mehr fuenfmal. * Geprueft in tests/game_theme_test.php. * * TOKENNAMEN aus 19_Design_System_and_Colors.md Abschnitt 3a. Was dort fehlte - * --game-primary-text, --game-accent-active, --game-surface-text, * --game-text-muted, --game-key-* und die Strukturtoken - ist am 10.09.2026 * dort ergaenzt worden. * * KONTRAST, gemessen: Text und Grossziffer auf Grund 11.20:1, Text auf Verlauf * 9.59:1, Tastenbeschriftung 7.94:1, Zusatztext 7.19:1, Text auf Primaer 6.33:1, * Weiss auf Gefahr 5.44:1, Text auf heller Flaeche 4.73:1. * * DREI WERTE DES BESTANDS liegen unter 4.5:1 und sind bewusst NICHT geaendert * worden - der Auftrag sagt "nicht verbessern, sondern nennen": * --game-accent-active auf dem Grund 4.45:1 (Rahmen des aktiven Spielers) * --game-text-muted auf dem Grund 3.24:1 (Spielmodus, Wurfnummer) * --game-danger als TEXT auf Grund 2.06:1 (ueberworfener Score im Verlauf) * Alle drei stehen im Bericht 2026-09-10_Design4-SpielTheme.md. * * NICHT HIER DRIN: die TV-Anzeigen. Sie werden dieselben Token benutzen, aber * ihr Umbau ist Etappe 5 (Guideline 14 ist noch zu schreiben). */ :root { /* Ab welcher Bildschirmbreite die Schnellwahl steht (Design 23, Entscheid Thomas 13.09.2026). Schmaler als dieser Wert weicht sie den Zifferntasten - siehe den Abschnitt "Kleine Handys" ganz unten. DER WERT STEHT ZWEIMAL, und das ist unvermeidlich: eine @media-Abfrage darf keine CSS-Variable lesen. Damit die beiden nicht auseinanderlaufen, bindet tests/design23_kleine_handys_test.php Abschnitt 2 sie aneinander. */ --game-schnellwahl-ab: 410px; /* --- Flaechen und Text -------------------------------------- aus X01 --- */ --game-background: #3b3b3b; /* Seitengrund (X01 --bg) */ --game-surface: #454545; /* Verlauf, Panels (X01 --hist-bg) */ --game-surface-elevated: #8c8c8c; /* Zahnrad, Restscore (X01 --panel) */ --game-surface-text: #222; /* Text auf heller Flaeche (X01 --panel-text) */ --game-text-primary: #fff; /* Haupttext, Restscore (X01 --white) */ --game-text-secondary: #cfcfcf; /* Legs, Format, Verlauf */ --game-text-muted: #8a8a8a; /* Spielmodus, Wurfnummer (X01 --muted) */ --game-border: #555; /* Rahmen der Eingabe */ /* --- Handlungsfarben ---------------------------------------------------- */ --game-primary: #1c6e2e; /* Namensbalken, ok-Taste (X01 --green) */ --game-primary-hover: #15521f; /* gedrueckt (X01 --green-dark) */ --game-primary-text: #fff; /* --- Zustaende ---------------------------------------------------------- */ --game-accent-active: #2fb6a3; /* aktiver Spieler, Checkout (X01 --active) */ --game-danger: #c0392b; /* Bust, Abbruch (X01 --bust) */ --game-warning: #ffd24a; /* Finish-Vorschau */ --game-success: #7fd88a; /* gueltige Vorschau */ --game-live: #2fb6a3; /* laufender Zustand - heute derselbe Ton wie der aktive Spieler; ein eigener Ton waere eine Designentscheidung fuer Etappe 5 (TV), nicht fuer diesen Umbau */ /* --- Eingabetasten ------------------------------------------------------ */ --game-key-background: #a8a8a8; /* X01 --key-bg */ --game-key-text: #111; /* X01 --key-text */ /* --- Struktur ----------------------------------------------------------- */ --game-space-1: 5px; --game-space-2: 7px; --game-space-3: 14px; --game-radius: 5px; --game-radius-sm: 3px; --game-font: "Segoe UI", Roboto, Arial, sans-serif; --game-font-size: 16px; --game-score-size: 75px; --game-focus-ring: 0 0 0 3px rgba(47, 182, 163, .35); /* Der abdunkelnde Grund hinter einem Dialog (Design 21). Eine Farbe - also gehoert sie hierher und nicht in die Regel. */ --game-overlay: rgba(0, 0, 0, .62); /* --- Bestandsnamen als Alias ------------------------------------------- Die Spielseiten benutzen heute kurze Namen (--bg, --green, --active ...). Sie hier auf die Token zu legen kostet nichts und erspart es, in sieben Dateien hunderte Regeln umzuschreiben, bevor Etappe 4 sie ohnehin anfasst. Es entsteht dadurch KEINE zweite Quelle: die Werte stehen nur einmal, oben. Wer eine Seite umstellt, entfernt hier nichts - er hoert einfach auf, den alten Namen zu benutzen. */ --bg: var(--game-background); --panel: var(--game-surface-elevated); --panel-text: var(--game-surface-text); --key-bg: var(--game-key-background); --key-text: var(--game-key-text); --green: var(--game-primary); --green-dark: var(--game-primary-hover); --active: var(--game-accent-active); --white: var(--game-text-primary); --hist-bg: var(--game-surface); --bust: var(--game-danger); --muted: var(--game-text-muted); } /* ===================================================================== Der Weltwechsel (D1) - die EINE Stelle ===================================================================== Fuenf Seiten tragen Setup UND Spiel in einer Datei. Ihr JavaScript setzt `body.game-active`, sobald das Spiel beginnt, und nimmt die Klasse am Ende wieder weg. Was die Klasse BEDEUTET, stand bisher in jeder dieser Seiten noch einmal. Ab hier steht es hier - und nur hier. */ body.game-active { background: var(--game-background); color: var(--game-text-primary); font-family: var(--game-font); } /* ===================================================================== Spielrahmen ===================================================================== */ .game-page { background: var(--game-background); color: var(--game-text-primary); font-family: var(--game-font); } /* ===================================================================== Spielerkachel und Grossanzeige --------------------------------------------------------------------- Die Bestandsnamen stehen als Alias daneben: die fuenf Seiten und board.html benutzen sie heute, und sie sollen bis Etappe 4 unveraendert weiterlaufen. Ein Umbenennen waere ein Bruch ohne Gewinn. ===================================================================== */ .player-card, .player { display: flex; flex-direction: column; gap: var(--game-space-2); min-width: 0; flex: 1; } .player-card .name, .player .name { background: var(--game-primary); color: var(--game-primary-text); text-align: center; padding: 9px 5px; font-size: 19px; font-weight: 600; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-card.is-active .score-box, .player.active .score-box { border-color: var(--game-accent-active); } .score-big, .remaining { font-size: var(--game-score-size); font-weight: 800; line-height: 1; color: var(--game-text-primary); } /* ===================================================================== Eingabetasten ===================================================================== */ .key { background: var(--game-key-background); color: var(--game-key-text); border: none; border-radius: var(--game-radius-sm); font-weight: 800; line-height: 1.1; font-family: inherit; } .key:focus-visible { outline: none; box-shadow: var(--game-focus-ring); } .key-primary { background: var(--game-primary); color: var(--game-primary-text); } .key-danger { background: var(--game-danger); color: var(--game-primary-text); } .key-muted { background: var(--game-surface-elevated); color: var(--game-surface-text); } /* Tablet und Handy: dieselbe Taste, zwei Groessen. */ .key-lg { min-height: 66px; font-size: 26px; } .key-sm { min-height: 48px; font-size: 20px; } /* Die grosse Hauptaktion am Fuss der Eingabe (D-01, Guideline 17 Abschnitt 7). Eine eigene ZEILE, nicht eine Taste im Raster: volle Breite, damit sie am Board aus zwei Metern ohne Zielen zu treffen ist. Cricket benutzt sie seit dem 15.09.2026 fuer OK und fuer "Score eingeben"; die uebrigen vier Spielarten sollen dieselbe Form bekommen, wenn sie nachziehen - deshalb steht sie hier und nicht in cricket.php. */ .key-xl { width: 100%; min-height: 64px; font-size: 1.25rem; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* ===================================================================== Statuszeile, Overlay, Standby ===================================================================== */ .game-status { text-align: center; color: var(--game-text-secondary); line-height: 1.35; } .game-status .muted { color: var(--game-text-muted); } .game-overlay { position: fixed; inset: 0; background: var(--game-background); color: var(--game-text-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--game-space-3); text-align: center; z-index: 90; } .game-standby { color: var(--game-text-secondary); text-align: center; font-size: 20px; } /* ===================================================================== Obere Navigationsleiste (Guideline 11, Design 5) --------------------------------------------------------------------- ABNAHME 5 (12.09.2026): Dieser Abschnitt stand bis dahin ZWEIMAL in dieser Datei - Zeile fuer Zeile gleich, bis auf sechs Zeilen, die nur die zweite Kopie trug (`.topbar-menu[hidden]`). Wirksam war damit ohnehin die zweite; die erste ist entfernt. Wer den Abschnitt aendert, aendert ihn AN DIESER EINEN STELLE. Struktur und Verhalten stehen in Guideline 11; die Farben kommen ausschliesslich aus den Token dieser Datei. Dieselben Klassennamen gelten im anderen Theme - eine Komponente, zwei Welten. Jede Regel haengt am Weltrahmen `.topbar-game`. Sonst entscheidet die Ladereihenfolge der Stylesheets ueber die Welt statt das Markup. §9 ist hier die harte Regel: die Leiste bricht NIE um. Der Bestand tat genau das - `.ua-top` schaltete unter 760px auf `flex-wrap: wrap` und wurde zweizeilig, `.topbar` der Liga-Seiten unter 680px ebenso. ===================================================================== */ .topbar-game .topbar { display: flex; align-items: center; gap: var(--game-space-2); flex-wrap: nowrap; /* §9: kein mehrzeiliger Header */ min-width: 0; padding: var(--game-space-2) var(--game-space-3); background: var(--game-surface); border-bottom: 1px solid var(--game-border); color: var(--game-text-primary); font-family: var(--game-font); font-size: var(--game-font-size); position: relative; } /* §4: Marke und Schriftzug sind die Home-Navigation. */ .topbar-game .topbar-brand { display: inline-flex; align-items: center; gap: var(--game-space-1); font-weight: 800; font-size: 18px; text-decoration: none; color: var(--game-text-primary); white-space: nowrap; flex: 0 0 auto; } .topbar-game .topbar-brand img { height: 28px; width: auto; display: block; } .topbar-game .topbar-spacer { flex: 1 1 auto; min-width: 0; } /* §5.2: der Anzeigename. Er darf schrumpfen, bevor die Leiste umbricht. */ .topbar-game .topbar-user { color: var(--game-text-secondary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* §5.1: nur auf "Mein Bereich". §9: Badges duerfen die Hoehe nicht treiben. */ .topbar-game .topbar-badges { display: inline-flex; align-items: center; gap: var(--game-space-1); flex: 0 0 auto; } .topbar-game .topbar-badges > * { max-height: 30px; } .topbar-game .topbar-item { display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--game-border); border-radius: var(--game-radius-sm); background: transparent; color: var(--game-text-primary); text-decoration: none; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; flex: 0 0 auto; } .topbar-game .topbar-item:hover { border-color: var(--game-primary); } .topbar-game .topbar-item-primary { background: var(--game-primary); border-color: var(--game-primary); color: var(--game-primary-text); } .topbar-game .topbar-item:focus-visible, .topbar-game .topbar-menu-btn:focus-visible, .topbar-game .topbar-back:focus-visible { outline: none; box-shadow: var(--game-focus-ring); } /* §7: das Drei-Punkte-Menue. Ueber 1080px gibt es es nicht. */ .topbar-game .topbar-menu-btn { display: none; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--game-border); border-radius: var(--game-radius-sm); background: transparent; color: var(--game-text-primary); font-size: 20px; line-height: 1; cursor: pointer; } .topbar-game .topbar-menu { position: absolute; top: 100%; right: var(--game-space-3); z-index: 70; min-width: 200px; display: flex; flex-direction: column; /* Flaeche, nicht "elevated": in der Spiel-Welt ist --game-surface-elevated ein HELLES Grau (#8c8c8c). Weisse Schrift darauf ergaebe 2.4:1. */ background: var(--game-surface); border: 1px solid var(--game-border); border-radius: var(--game-radius); padding: var(--game-space-1); } /* Das `hidden`-Attribut MUSS gewinnen. `display: flex` oben ist staerker als die Regel `[hidden]{display:none}` des Browsers - ohne diese Zeile stand das Menue auf jeder Seite dauerhaft offen, auch am Desktop. Der Rauchtest hat es nicht gesehen, weil er nur den KNOPF gemessen hat; sichtbar wurde es erst im Screenshot. */ .topbar-game .topbar-menu[hidden] { display: none; } .topbar-game .topbar-menu-user { padding: 8px 12px; color: var(--game-text-secondary); font-size: 13px; border-bottom: 1px solid var(--game-border); } .topbar-game .topbar-menu-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: none; background: transparent; color: var(--game-text-primary); text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; border-radius: var(--game-radius-sm); } .topbar-game .topbar-menu-item:hover { background: var(--game-primary); color: var(--game-primary-text); } /* ===================================================================== Die Kopfzeile UNTER der Leiste (Guideline 13-Setup §4 und §5) --------------------------------------------------------------------- Guideline 11 §4 verbietet ein Zurueck IN der Leiste; 13-Setup §4 verlangt eines DIREKT DARUNTER, in genau einer Form. Beide Saetze gelten - sie sprechen von verschiedenen Zeilen. ===================================================================== */ .topbar-game .topbar-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--game-space-1) var(--game-space-3); padding: var(--game-space-3) var(--game-space-3) 0; } .topbar-game .topbar-back { color: var(--game-text-secondary); text-decoration: none; font-size: 14px; flex: 0 0 auto; border-radius: var(--game-radius-sm); } .topbar-game .topbar-back:hover { color: var(--game-primary); } .topbar-game .topbar-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--game-text-primary); } .topbar-game .topbar-kontext { color: var(--game-text-secondary); font-size: 13px; } /* §6/§9: der verbindliche Breakpoint. Darunter uebernimmt das Menue. */ @media (max-width: 1080px) { .topbar-game .topbar-item { display: none; } .topbar-game .topbar-menu-btn { display: inline-flex; align-items: center; justify-content: center; } .topbar-game .topbar-brand { font-size: 16px; } .topbar-game .topbar-brand img { height: 24px; } } @media (max-width: 430px) { /* §7: reicht der Platz auch dafuer nicht, hat die eine Zeile Vorrang - der Name steht dann im Menue, wo er ohnehin schon steht. */ .topbar-game .topbar-user { display: none; } .topbar-game .topbar-brand span { display: none; } } /* ========================================================================== DER AUSGANG DER ARBEITSFLAECHE (Design 21, 13.09.2026) Das X oben rechts ist der einzige Ausgang aus einem laufenden Spiel. Es fragt nach; die zwei Wege heissen "Spaeter fortsetzen" und "Spiel beenden". Verhalten: assets/game_exit.js. Texte: partials/game_exit.php. Die Regeln stehen hier, weil der Dialog zur SPIEL-Welt gehoert - und weil es ihn sonst sechsmal gaebe. ========================================================================== */ .gx-ovl{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center; background:var(--game-overlay);padding:16px;} .gx-ovl[hidden]{display:none;} .gx-box{width:min(92vw,460px);background:var(--game-surface);border:1px solid var(--game-border); border-radius:var(--game-radius);padding:var(--game-space-3); display:flex;flex-direction:column;gap:var(--game-space-2);} .gx-titel{color:var(--game-text-primary);font-size:1.25rem;font-weight:800;margin-bottom:2px;} .gx-wahl{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer; background:var(--game-primary);color:var(--game-primary-text); border:0;border-radius:var(--game-radius-sm);padding:var(--game-space-3);font:inherit;} .gx-wahl:active{background:var(--game-primary-hover);} .gx-wahl.gx-ende{background:var(--game-surface-elevated);color:var(--game-surface-text);} .gx-w-titel{font-size:1.05rem;font-weight:800;} .gx-w-text{font-size:.86rem;font-weight:500;line-height:1.35;opacity:.92;} .gx-ab{background:none;border:0;color:var(--game-text-secondary);font:inherit;font-size:.95rem; padding:var(--game-space-2);cursor:pointer;text-decoration:underline;} /* =========================================================================== KLEINE HANDYS - die Schnellwahl weicht den Ziffern (Design 23, 13.09.2026) ENTSCHEID VON THOMAS: Ist der Bildschirm schmaler als 410 px, verschwindet die Schnellwahl, und es bleibt die Seite mit den Zifferntasten - die dadurch die ganze Breite bekommt. Ab 410 px aendert sich nichts: am Board (1024x768) und auf dem Tablet ist X01 die abgenommene Referenz. WARUM DIESE REGEL FUER BEIDE SEITEN REICHT. board.html und checkout121.php tragen denselben Aufbau: #kbWrap > .controls > (.quick-col > .quick) + (.input-col > .toprow + .pad) dieselben Klassennamen, beide Spalten flex:1, .quick dreispaltig und .pad vierspaltig. Verschieden sind nur Groessen und Farben - board.html misst ueber min-height und --kfs, checkout121.php ueber padding. Diese Regel fasst NUR den Aufbau an, nicht die Groessen; deshalb wirkt sie auf beiden gleich, ohne dort irgendetwas zu vereinheitlichen. AUSBLENDEN ALLEIN GENUEGT NICHT: Beide Spalten stehen auf flex:1, teilen sich also die Breite haelftig. Erst 'flex:1 1 100%' auf der Eingabespalte gibt die frei gewordene Flaeche wirklich an die Zifferntasten weiter - sie werden dadurch rund doppelt so breit. Gemessen am 13.09.2026 bei 320 px: Zifferntaste 26 -> 69 px bei X01, 30 -> 69 px bei 121 Checkout. DIE HOEHE BLEIBT UNBERUEHRT. Die Schnellwahlspalte ist nicht die hoehere der beiden (bei 121 Checkout 196 px gegen 313 px), ihr Wegfall gewinnt also keinen einzigen Pixel in der Hoehe. Sie anzufassen wuerde die Tasten kleiner machen statt groesser - das Gegenteil des Entscheids. NICHT BETROFFEN: die Feld-/Treffer-Tastatur (#fieldKb). Sie bleibt laut Entscheid unveraendert, auf beiden Seiten, mit ihrer jeweiligen Beschriftung am Umschalter. Die Spezifitaet ist mit Absicht hoeher als die der Seitenregeln (#kbWrap + Klasse gegen Klasse): beide Seiten setzen .quick-col und .input-col in ihrem eigenen