/* ===================================================================== Games — Design-System "Midnight Arcade" Reines CSS, keine Frameworks, kein Build-Step (läuft 1:1 auf lima-city). Mobile-first: das Spiel wird überwiegend am Handy gespielt. Bewusst DUNKEL statt im hellen iOS-Look von Hub/Fitness-App: ein Spiel soll sich wie ein Spiel anfühlen, nicht wie ein Formular. Die Verwandt- schaft zur Familie bleibt über dieselbe Formensprache erhalten (weiche Radien, Systemschrift, großzügige Tap-Ziele) — nur eben in dunkel. Systemschriften statt Webfonts: die CSP (s. .htaccess) erlaubt nur eigene Quellen, externe Fonts wären blockiert. Farbwelt pro Spiel: --accent* wird von .theme- überschrieben (s. Games.php: 'theme'). Alles darunter — Buttons, Ringe, Verläufe, Glow — zieht automatisch mit, ohne eigene Regeln je Spiel. ===================================================================== */ :root { /* --- Flächen ------------------------------------------------------ */ --bg: #080A11; --bg-2: #0E111A; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.075); --surface-3: rgba(255, 255, 255, 0.11); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); /* --- Text --------------------------------------------------------- */ --text: #F3F5F9; --text-2: #98A2B6; --text-3: #616B80; /* --- Akzent (Standard: Arcade-Violett→Cyan) ----------------------- */ --accent: #8B5CFF; --accent-soft: rgba(139, 92, 255, 0.16); --accent-grad: linear-gradient(135deg, #8B5CFF 0%, #5B7CFA 55%, #22D3EE 100%); --accent-glow: rgba(139, 92, 255, 0.45); /* --- Status ------------------------------------------------------- */ --green: #34D399; --green-soft: rgba(52, 211, 153, 0.14); --red: #FB7185; --red-soft: rgba(251, 113, 133, 0.14); --amber: #FBBF24; --amber-soft: rgba(251, 191, 36, 0.14); /* --- Maße --------------------------------------------------------- */ --radius: 14px; --radius-lg: 20px; --radius-xl: 26px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --header-h: 58px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* History Guesser: Bernstein/Sepia — Archiv, altes Papier, Messing. Nur die Akzent-Token werden getauscht, der Rest des Systems bleibt. */ .theme-hg { --accent: #F0A83A; --accent-soft: rgba(240, 168, 58, 0.16); --accent-grad: linear-gradient(135deg, #FFD277 0%, #F0A83A 45%, #DC6437 100%); --accent-glow: rgba(240, 168, 58, 0.42); } * { box-sizing: border-box; } /* Grundfarbe bewusst auf , nicht auf : hätte nur body eine Hintergrundfarbe, würde sie auf die Zeichenfläche "hochgereicht" und body selbst gälte als transparent — das Zusammenspiel mit dem Aurora- Pseudoelement (z-index:-1) hinge dann an genau dieser Feinheit. So liegt die Farbe eindeutig unten, die Aurora sauber darüber, der Inhalt darauf. */ html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; min-height: 100vh; font-family: var(--font); background: transparent; color: var(--text); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; } /* Aurora-Hintergrund: weiche Farbwolken hinter allem. Fixed + pointer-events:none, damit sie beim Scrollen stehen bleiben und nie Klicks abfangen. Rein dekorativ. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58vw 42vh at 12% -6%, rgba(139, 92, 255, 0.20), transparent 62%), radial-gradient(52vw 40vh at 92% 8%, rgba(34, 211, 238, 0.14), transparent 60%), radial-gradient(70vw 50vh at 50% 108%, rgba(91, 124, 250, 0.13), transparent 65%), var(--bg); } body.theme-hg::before { background: radial-gradient(58vw 42vh at 12% -6%, rgba(240, 168, 58, 0.18), transparent 62%), radial-gradient(52vw 40vh at 92% 8%, rgba(220, 100, 55, 0.14), transparent 60%), radial-gradient(70vw 50vh at 50% 108%, rgba(160, 90, 40, 0.16), transparent 65%), var(--bg); } a { color: inherit; text-decoration: none; } button { font-family: inherit; } h1, h2, h3, p { margin: 0; } ::selection { background: var(--accent-soft); color: var(--text); } /* --- Typo-Bausteine ---------------------------------------------------- */ .gradient-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } /* --- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; color: var(--text); background: var(--surface-2); transition: transform 0.14s ease, filter 0.18s ease, background 0.18s ease; } .btn:active { transform: scale(0.975); } .btn-block { width: 100%; } .btn-primary { background: var(--accent-grad); color: #0A0C12; font-weight: 750; box-shadow: 0 6px 22px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .btn-primary:active { filter: brightness(1.06); } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:active { background: var(--surface-3); } .btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid rgba(251, 113, 133, 0.24); } .btn-plain { background: none; color: var(--text-2); padding: 0 10px; min-height: 40px; font-size: 14px; font-weight: 600; } .btn-plain:active { color: var(--text); } .btn-sm { min-height: 34px; padding: 0 16px; font-size: 13px; border-radius: 100px; } .btn-icon { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 12px; } .btn:disabled { opacity: 0.42; cursor: default; } .btn:disabled:active { transform: none; } /* --- Formulare ---------------------------------------------------------- */ .field { margin-bottom: 18px; } .field label, .login-form label { display: block; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .field input[type="text"], .field input[type="number"], .field input[type="password"], .field input[type="email"], .field select, .field textarea, .login-form input, .input { width: 100%; font-family: inherit; font-size: 16px; /* verhindert Auto-Zoom bei Fokus auf iOS Safari */ font-weight: 500; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); appearance: none; -webkit-appearance: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .field textarea { resize: vertical; min-height: 88px; line-height: 1.55; } .field input::placeholder, .input::placeholder { color: var(--text-3); } .field input:focus, .field select:focus, .field textarea:focus, .login-form input:focus, .input:focus { outline: none; border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 4px var(--accent-soft); } /* Datei-Auswahl (Bild-Upload im Admin-Bereich) */ .field input[type="file"] { width: 100%; font-size: 14px; color: var(--text-2); padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); } /* Bewusst ZWEI getrennte Regeln statt einer mit Komma: kennt ein Browser einen Selektor aus einer Komma-Liste nicht, verwirft er die GANZE Regel — Firefox kennt die -webkit-Variante nicht und hätte dann gar kein Styling für den Datei-Button bekommen. */ .field input[type="file"]::file-selector-button { font-family: inherit; font-size: 13px; font-weight: 650; margin-right: 12px; padding: 8px 14px; border: none; border-radius: 100px; background: var(--surface-3); color: var(--text); cursor: pointer; } .field input[type="file"]::-webkit-file-upload-button { font-family: inherit; font-size: 13px; font-weight: 650; margin-right: 12px; padding: 8px 14px; border: none; border-radius: 100px; background: var(--surface-3); color: var(--text); cursor: pointer; } .field-hint { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 7px; } /* Auswahl-Pfeil für