/* * Arcade-Look — greift nur unter body.look-arcade. * * Klassik bleibt der ruhige Analysemodus; hier darf alles laut sein. Der * Kontrast ist Absicht: derselbe Bildschirm in zwei Tonlagen macht beide * schaerfer, als wenn alles gleich bunt waere. * * Schrift: die runden System-Schnitte (ui-rounded auf Apple, Segoe UI * Variable auf Windows). Bewusst keine Comic-Webschrift — das Projekt laedt * keine Fonts von fremden Servern, und eine mitgelieferte Datei waere eine * Wartungsschuld fuer einen einzelnen Modus. */ /* Auch das Wurzelelement einfaerben. Der Seiten-Canvas kommt von ; * bleibt der hell, sieht man ihn ueberall dort, wo body nicht deckt — * beim Ueberscrollen und unter jeder Compositing-Ebene. */ html:has(body.look-arcade) { background: #14103a; } body.look-arcade { --arc-bg: #14103a; --arc-bg-2: #241a5c; --arc-ink: #fff8e7; --arc-hot: #ff2d92; --arc-warm: #ffd60a; --arc-cool: #22d3ee; --arc-go: #34e57a; --arc-line: #0b0824; --arc-font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Hiragino Maru Gothic ProN", Quicksand, Verdana, sans-serif; /* Die Variablen aus Base.astro mitfaerben, damit Kopf- und Fusszeile nicht als helle Streifen ueber dem dunklen Grund stehen bleiben. */ --fg: var(--arc-ink); --muted: rgba(255, 248, 231, 0.55); --line: rgba(255, 255, 255, 0.14); --nav-bg: rgba(11, 8, 36, 0.85); --foot-fg: rgba(255, 248, 231, 0.45); --foot-link: rgba(255, 248, 231, 0.7); background: radial-gradient(120% 90% at 50% 0%, var(--arc-bg-2), var(--arc-bg) 70%); color: var(--arc-ink); } /* Der Startscreen wird im Arcade-Look hoeher (vier Moduskarten obendrauf); ohne mehr Luft verschwinden die Schalter hinter dem Start-Footer. */ body.look-arcade .start { padding-bottom: 8rem; } /* Konturschrift: Umrandung hinter die Fuellung, sonst frisst der Strich die Buchstabenform von innen auf. */ body.look-arcade .arc-outline, body.look-arcade .fx-pop, body.look-arcade .final .total, body.look-arcade .mini-status .ms-score, body.look-arcade .gm-card .gm-name, body.look-arcade .start-title { font-family: var(--arc-font); font-weight: 800; letter-spacing: 0.01em; -webkit-text-stroke: 3px var(--arc-line); paint-order: stroke fill; } body.look-arcade .tool-page, body.look-arcade .start, body.look-arcade .final { color: var(--arc-ink); } body.look-arcade h1, body.look-arcade .start-title { color: var(--arc-warm); font-size: 30px; } body.look-arcade .start-intro, body.look-arcade .start-section-title, body.look-arcade .palette-title, body.look-arcade .hs-note { color: rgba(255, 248, 231, 0.65); } /* ------------------------------------------------------------ Statuszeile */ body.look-arcade .mini-status { background: rgba(0, 0, 0, 0.28); border: 2.5px solid var(--arc-line); border-radius: 999px; box-shadow: 0 4px 0 var(--arc-line); padding: 0.5rem 0.9rem; } body.look-arcade .mini-status .ms-round { font-family: var(--arc-font); font-weight: 700; color: rgba(255, 248, 231, 0.75); } body.look-arcade .mini-status .ms-score { font-size: 22px; color: var(--arc-warm); } body.look-arcade .mini-status .ms-streak { color: var(--arc-warm); font-size: 13px; } body.look-arcade .mini-status .ms-combo { color: var(--arc-hot); font-size: 16px; } body.look-arcade .mini-status .ms-lives { color: var(--arc-hot); font-size: 15px; } body.look-arcade .ms-close { color: rgba(255, 248, 231, 0.5); } /* ------------------------------------------------------------------ Uhr */ body.look-arcade .timer { height: 18px; } body.look-arcade .timer-track { height: 10px; background: rgba(0, 0, 0, 0.45); border: 2.5px solid var(--arc-line); border-radius: 999px; } body.look-arcade .timer-fill { background: linear-gradient(90deg, var(--arc-go), var(--arc-cool)); border-radius: 999px; } body.look-arcade .timer.low .timer-fill { background: var(--arc-hot); } body.look-arcade .timer-secs { font-family: var(--arc-font); font-weight: 800; font-size: 13px; color: var(--arc-ink); } body.look-arcade .timer.low .timer-secs { color: var(--arc-hot); } /* -------------------------------------------------------------- Zielflaeche */ /* Heller Passepartout um die Zielflaeche. Auf dem dunklen Grund haben dunkle * Zielfarben sonst fast keinen Kontrast — eine Mischung aus Ultramarin und * Elfenbeinschwarz sieht dann aus, als waere gar keine Farbe da. Der helle * Rahmen gibt jeder Farbe denselben bekannten Untergrund. */ body.look-arcade .compare { border: 6px solid var(--arc-ink); outline: 4px solid var(--arc-line); border-radius: 20px; box-shadow: 0 8px 0 var(--arc-line); } body.look-arcade .compare-half .tag { font-family: var(--arc-font); font-weight: 800; background: var(--arc-line); color: var(--arc-warm); border-radius: 999px; } /* ------------------------------------------------------------- Palette */ body.look-arcade .palette { background: rgba(0, 0, 0, 0.22); border: 2.5px solid var(--arc-line); border-radius: 16px; } body.look-arcade .pcard { border: 3px solid var(--arc-line); border-radius: 14px; box-shadow: 0 5px 0 var(--arc-line); background: rgba(255, 255, 255, 0.06); /* Der Versatz beim Druecken ist der billigste Knopf-Effekt, den es gibt. */ transition: box-shadow 90ms ease, translate 90ms ease; } body.look-arcade .pcard:active { translate: 0 4px; box-shadow: 0 1px 0 var(--arc-line); } body.look-arcade .pcard-name { font-family: var(--arc-font); font-weight: 700; color: var(--arc-ink); } /* ---------------------------------------------------------------- Slots */ body.look-arcade .slots { background: transparent; } /* Kein Kasten mehr um den Slot: der Balken selbst ist die Flaeche. */ body.look-arcade .slot { background: none; border: 0; } body.look-arcade .empty-hint { color: rgba(255, 248, 231, 0.5); } /* --------------------------------------------------------------- Knoepfe */ body.look-arcade .btn { font-family: var(--arc-font); font-weight: 800; font-size: 15px; border: 3px solid var(--arc-line); border-radius: 999px; box-shadow: 0 5px 0 var(--arc-line); transition: box-shadow 90ms ease, translate 90ms ease; } body.look-arcade .btn:active:not(:disabled) { translate: 0 4px; box-shadow: 0 1px 0 var(--arc-line); } body.look-arcade .btn.primary { background: var(--arc-hot); color: #fff; } body.look-arcade .btn.primary:hover:not(:disabled) { background: #ff4ba3; } body.look-arcade .btn:not(.primary) { background: var(--arc-warm); color: var(--arc-line); } /* --------------------------------------------------------- Modusauswahl */ body.look-arcade .gm-card, body.look-arcade .mode-card { background: rgba(255, 255, 255, 0.07); border: 3px solid var(--arc-line); border-radius: 16px; box-shadow: 0 5px 0 var(--arc-line); color: var(--arc-ink); } body.look-arcade .gm-card.active, body.look-arcade .mode-card.active { background: var(--arc-warm); color: var(--arc-line); box-shadow: 0 5px 0 var(--arc-line), 0 0 0 4px var(--arc-hot); } body.look-arcade .gm-card .gm-name { font-size: 17px; color: inherit; } /* Auf der aktiven, hellen Karte wuerde die dunkle Kontur die Buchstaben zulaufen lassen — dort umrandet die Kartenfarbe selbst. */ body.look-arcade .gm-card.active .gm-name { -webkit-text-stroke-color: var(--arc-warm); } body.look-arcade .mode-card.active .mname { -webkit-text-stroke: 0; } body.look-arcade .gm-card .gm-tag, body.look-arcade .mode-card .mcount { color: inherit; opacity: 0.7; } body.look-arcade .mode-card .mname { font-family: var(--arc-font); font-weight: 800; font-size: 15px; } body.look-arcade .gm-card .gm-badge { color: var(--arc-go); } body.look-arcade .gm-card .gm-badge.local { color: inherit; opacity: 0.6; } /* ------------------------------------------------------------- Schalter */ body.look-arcade .toggle { font-family: var(--arc-font); font-weight: 700; color: rgba(255, 248, 231, 0.7); border: 2.5px solid var(--arc-line); background: rgba(0, 0, 0, 0.2); } body.look-arcade .toggle.on { color: var(--arc-warm); border-color: var(--arc-line); } body.look-arcade .toggle.on .dot { background: var(--arc-warm); } /* ------------------------------------------------------------ Abschluss */ body.look-arcade .final .total { font-size: 64px; color: var(--arc-warm); } body.look-arcade .arcade-final .af-mode { color: var(--arc-cool); } body.look-arcade .arcade-final .af-stats { color: rgba(255, 248, 231, 0.7); } body.look-arcade .arcade-final .af-stats b { font-family: var(--arc-font); color: var(--arc-ink); font-size: 18px; } body.look-arcade .final .record { color: var(--arc-warm); } body.look-arcade .round-tile { border: 2.5px solid var(--arc-line); border-radius: 8px; } /* Der Startfooter liegt ueber dem dunklen Grund und braucht dessen Farbe. */ body.look-arcade .start-footer { background: linear-gradient(to top, var(--arc-bg) 60%, rgba(20, 16, 58, 0)); border-top: none; } /* Fliegende Punkte im Arcade-Look: dickere Kontur, groesser. */ body.look-arcade .fx-pop { --pop-font: var(--arc-font); font-size: 40px; color: var(--arc-warm); -webkit-text-stroke: 4px var(--arc-line); } body.look-arcade .fx-pop-big { font-size: 58px; } body.look-arcade .fx-pop-good { color: var(--arc-go); } body.look-arcade .fx-pop-ok { color: var(--arc-cool); } body.look-arcade .fx-pop-bad { color: rgba(255, 248, 231, 0.55); } body.look-arcade .fx-pop-combo { color: var(--arc-hot); -webkit-text-stroke: 3px var(--arc-line); } body.look-arcade .fx-pop-time { color: var(--arc-go); } /* Sprechblasen bekommen die runde Schrift und einen harten Schlagschatten. */ body.look-arcade .bubble { font-family: var(--arc-font); font-weight: 800; font-size: 20px; border-width: 3px; border-color: var(--arc-line); box-shadow: 5px 5px 0 var(--arc-line); } body.look-arcade .bubble-perfect { background: var(--arc-warm); font-size: 25px; } body.look-arcade .bubble-good { background: var(--arc-go); } body.look-arcade .bubble-ok { background: var(--arc-cool); } body.look-arcade .bubble-bad { background: #fff; color: #444; } body.look-arcade .bubble-streak { background: var(--arc-hot); color: #fff; box-shadow: 5px 5px 0 var(--arc-warm); } body.look-arcade .bubble-timeout { background: #ffd2cc; color: #7a1200; } /* ------------------------------------------------------- Anteils-Regler */ body.look-arcade .slot .slider-track { background: rgba(0, 0, 0, 0.45); border: 3px solid var(--arc-line); border-radius: 14px; } body.look-arcade .slot .slider-fill { opacity: 1; } body.look-arcade .slot .slider-knob { width: 8px; margin-left: -4px; background: var(--arc-ink); box-shadow: 0 0 0 2px var(--arc-line); } body.look-arcade .slot .slider.dragging .slider-knob { width: 11px; margin-left: -5.5px; } body.look-arcade .slot .slider-label { /* Auf gesaettigten Pigmentfarben traegt ein heller Textschatten nicht. Stattdessen dunkle Kontur hinter heller Schrift — dieselbe Loesung wie bei den fliegenden Punkten. */ text-shadow: none; } body.look-arcade .slot .slider-label .ptitle, body.look-arcade .slot .slider-label .pct { font-family: var(--arc-font); font-weight: 800; color: var(--arc-ink); -webkit-text-stroke: 3px var(--arc-line); paint-order: stroke fill; } body.look-arcade .slot .slider-label .ptitle { font-size: 16px; } body.look-arcade .slot .slider-label .pct { font-size: 15px; color: var(--arc-warm); } body.look-arcade .slot .rm { background: rgba(0, 0, 0, 0.35); color: var(--arc-ink); border: 3px solid var(--arc-line); border-radius: 14px; box-shadow: 0 4px 0 var(--arc-line); } /* ------------------------------------------------------ Ton-Entscheidung */ body.look-arcade .sound-gate .sg-title { font-family: var(--arc-font); font-weight: 800; font-size: 34px; color: var(--arc-warm); -webkit-text-stroke: 3px var(--arc-line); paint-order: stroke fill; } body.look-arcade .sound-gate .sg-text { color: rgba(255, 248, 231, 0.7); } body.look-arcade .sound-gate .sg-note { color: rgba(255, 248, 231, 0.4); } /* ------------------------------------------------- Farben ohne Beschriftung * Im Arcade-Look tragen die Pigmente keinen Namen: bei fuenf Karten * nebeneinander blieb von "Ultramarinblau" ohnehin nur "Ultrama···", und wer * unter einer laufenden Uhr mischt, liest den Namen nicht — die Farbflaeche * ist die Information. Klassik behaelt die Namen, dort ist Zeit zum Lesen. * * Der Name bleibt in title und aria-label erhalten, damit Vorlesesoftware * und Hover ihn weiter kennen. */ body.look-arcade .pcard-name { display: none; } body.look-arcade .pcard { padding: 0; overflow: hidden; } body.look-arcade .pcard-swatch { aspect-ratio: 1 / 1; border-radius: 11px; } body.look-arcade .slot .slider-label .ptitle { display: none; } body.look-arcade .slot .slider-label { justify-content: flex-end; } /* Die Palettenzeile sagt "klick zum Hinzufuegen" — auf dem Handy stimmt das Verb nicht, und im Arcade-Look ist die Zeile ohnehin nur Hoehe: eine Reihe Farbfelder ueber einer Zielfarbe erklaert sich selbst. */ body.look-arcade.in-game .palette-title { display: none; }