/* ========================================================================== LAN Casino — shared dark casino theme Used by index.html, admin.html and all game renderers. ========================================================================== */ :root { --bg: #0b0e1a; --panel: #171d33; --panel2: #222a4a; --gold: #f5c542; --accent: #7c5cff; --green: #2ecc71; --red: #e74c3c; --text: #f2f4fb; /* Kontrast angehoben (Tim, 12.08.2026: "mach einfach etwas mehr kontrast rein ... ist voll scheisse so"). Die alten Werte waren so blass, dass Trennlinien und Nebentexte auf einem hellen Bildschirm praktisch verschwanden: --muted lag bei #9aa3c0, die Linien bei 10–14 % Deckung. */ --muted: #ccd4e8; --line: rgba(245, 197, 66, 0.46); --line-soft: rgba(232, 234, 242, 0.32); --field-bg: #0e1226; --field-border: #4a5788; --shadow: 0 12px 34px rgba(0, 0, 0, 0.45); --radius: 14px; } /* ---------- Themes (switchable via ) ---------- */ /* Light */ :root[data-theme="light"] { --bg: #eaeef8; --panel: #ffffff; --panel2: #f2f5fc; --gold: #b9860b; --accent: #6a4cff; --green: #1c9d54; --red: #d63b2b; --text: #10151f; --muted: #414863; --line: rgba(185, 134, 11, 0.44); --line-soft: rgba(26, 32, 48, 0.24); --field-bg: #f4f7fd; --field-border: #a4b1d2; --shadow: 0 12px 30px rgba(20, 30, 60, 0.14); } :root[data-theme="light"] body { background: radial-gradient(1100px 700px at 50% -12%, #dbe4ff 0%, rgba(219, 228, 255, 0) 60%), radial-gradient(900px 600px at 100% 110%, rgba(124, 92, 255, 0.08) 0%, rgba(124, 92, 255, 0) 55%), var(--bg); } /* Green felt classic */ :root[data-theme="greenfelt"] { --bg: #08281a; --panel: #0e3626; --panel2: #124a31; --gold: #f0c94a; --accent: #e0b64a; --green: #3ad07f; --red: #e8564a; --text: #f3fbf5; --muted: #bfdfcc; --line: rgba(240, 201, 74, 0.44); --line-soft: rgba(234, 245, 236, 0.28); --field-bg: #0a2c1c; --field-border: #2f8055; --shadow: 0 12px 34px rgba(0, 0, 0, 0.50); } :root[data-theme="greenfelt"] body { background: radial-gradient(1100px 700px at 50% -12%, #16613f 0%, rgba(22, 97, 63, 0) 60%), radial-gradient(900px 600px at 100% 110%, rgba(240, 201, 74, 0.08) 0%, rgba(240, 201, 74, 0) 55%), var(--bg); } /* Midnight blue */ :root[data-theme="midnight"] { --bg: #060a1c; --panel: #0c1330; --panel2: #141d47; --gold: #ffd76e; --accent: #4f7cff; --green: #2ecc71; --red: #e74c3c; --text: #f0f3ff; --muted: #b4bfe8; --line: rgba(255, 215, 110, 0.42); --line-soft: rgba(230, 236, 255, 0.28); --field-bg: #0a1130; --field-border: #3b4b86; --shadow: 0 12px 34px rgba(0, 0, 0, 0.55); } :root[data-theme="midnight"] body { background: radial-gradient(1100px 700px at 50% -12%, #1b2a6b 0%, rgba(27, 42, 107, 0) 60%), radial-gradient(900px 600px at 100% 110%, rgba(79, 124, 255, 0.12) 0%, rgba(79, 124, 255, 0) 55%), var(--bg); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: radial-gradient(1100px 700px at 50% -12%, #202a55 0%, rgba(32, 42, 85, 0) 60%), radial-gradient(900px 600px at 100% 110%, rgba(124, 92, 255, 0.10) 0%, rgba(124, 92, 255, 0) 55%), var(--bg); background-attachment: fixed; color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; } [hidden] { display: none !important; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; } a { color: var(--gold); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 0.85em; color: var(--muted); background: rgba(0, 0, 0, 0.3); padding: 1px 6px; border-radius: 6px; } ::selection { background: rgba(245, 197, 66, 0.35); } /* Slim dark scrollbars (cosmetic) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--panel2); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #2a3460; } /* ---------- Panels & layout ---------- */ .container { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; } .panel { background: linear-gradient(165deg, var(--panel2) 0%, var(--panel) 70%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .section-title { font-size: 1.5rem; margin: 18px 0 16px; color: var(--text); letter-spacing: 0.02em; } .section-title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), rgba(245, 197, 66, 0)); } /* ---------- Gold glow titles ---------- */ .casino-title { font-size: clamp(2.2rem, 6vw, 3.4rem); text-align: center; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 0.15em; text-shadow: 0 0 10px rgba(245, 197, 66, 0.55), 0 0 34px rgba(245, 197, 66, 0.30), 0 2px 2px rgba(0, 0, 0, 0.6); } .tagline { text-align: center; color: var(--muted); margin: 0 0 28px; letter-spacing: 0.06em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; color: var(--text); background: var(--panel2); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease; user-select: none; } .btn:hover { filter: brightness(1.12); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); transform: none; } .btn-gold { background: linear-gradient(180deg, #ffdf7a 0%, var(--gold) 45%, #d9a520 100%); color: #221a04; border-color: rgba(255, 235, 170, 0.6); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 4px 14px rgba(245, 197, 66, 0.22); } .btn-gold:hover { box-shadow: 0 6px 22px rgba(245, 197, 66, 0.40); } .btn-ghost { background: transparent; border-color: var(--line-soft); color: var(--text); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); filter: none; } .btn-danger { background: transparent; border-color: rgba(231, 76, 60, 0.5); color: #ff8d80; } .btn-danger:hover { background: rgba(231, 76, 60, 0.14); filter: none; } .btn-block { width: 100%; } .btn-small { padding: 5px 12px; font-size: 0.85rem; border-radius: 8px; } /* ---------- Forms ---------- */ label { display: block; margin: 14px 0 6px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; } input[type="text"], input[type="password"], input[type="number"], input:not([type]), textarea, select { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25); } input::placeholder, textarea::placeholder { color: #5c668c; } .form-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 9px; background: rgba(231, 76, 60, 0.13); border: 1px solid rgba(231, 76, 60, 0.45); color: #ff9a8d; font-size: 0.92rem; } .msg-ok { color: var(--green); font-weight: 600; } .msg-err { color: var(--red); font-weight: 600; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; background: rgba(11, 14, 26, 0.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .brand { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.05em; color: var(--gold); text-shadow: 0 0 12px rgba(245, 197, 66, 0.45); white-space: nowrap; } .topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .user-name { color: var(--muted); font-weight: 600; } .btn-icon { padding: 6px 9px; min-width: 0; font-size: 1rem; line-height: 1; } .btn-icon.sound-off { opacity: 0.45; } .admin-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; color: #1a1405; background: linear-gradient(180deg, #ffdf7a, #d9a520); } /* Owner badge: distinct from the admin badge, with a subtle crown-like sheen. */ .owner-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; color: #24120a; background: linear-gradient(180deg, #ffe9a8, #c07b1e); box-shadow: 0 0 10px rgba(245, 197, 66, 0.4); } .protected-note { color: var(--muted); font-size: 0.85rem; font-style: italic; } /* Frei oder belegt. Gruen/rot, weil das die einzige Frage ist, die ein Admin an ein Testkonto hat: kann ich es gerade jemandem geben? */ .test-frei { font-size: 0.78rem; font-weight: 700; color: #58c47a; } .test-frei.ist-belegt { color: #e07a5f; } .test-pw { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; } /* Testkonto: bewusst nuechtern, nicht golden wie der Besitzer — es soll als Werkzeug erkennbar sein, nicht als Auszeichnung. */ .test-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: #0d1b2a; background: #7fb8d8; } /* Spalte "Betreut von". Schmal halten — sie steht zwischen zwei breiten Spalten und soll die Aktionen nicht an den Rand druecken. */ .betreuer-cell { font-size: 0.88rem; white-space: nowrap; } .betreuer-herkunft { font-size: 0.78rem; } /* "Mir zuweisen" steht unter dem Wort "niemand", nicht daneben — sonst wird die Spalte doppelt so breit wie alle anderen. Rot hinterlegt, weil der Klick nicht rueckgaengig zu machen ist: der Spieler gehoert danach dir und verschwindet bei allen anderen Admins. Zurueckgeben kann ihn nur das Besitzerkonto. Ein Knopf mit dieser Wirkung soll nicht aussehen wie "Details anzeigen". */ .betreuer-holen { display: block; margin-top: 0.25rem; white-space: nowrap; background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; } .betreuer-holen:hover { filter: brightness(1.12); } .betreuer-holen:disabled { opacity: .55; } .betreuer-edit { margin-left: 0.4rem; padding: 0.1rem 0.35rem; line-height: 1; } .betreuer-edit-box { display: flex; flex-direction: column; gap: 0.25rem; min-width: 11rem; } /* Die globale Regel fuer