/* ============================================================ Fake Casino – Styles Dunkles Casino-Grün + Gold. Responsive & touch-tauglich (iPad). ============================================================ */ /* Palette, Radien, Abstände, Schrift und Schatten stehen in tokens.css und werden dort je Theme (klassik / mitternacht / neon) gesetzt. Hier steht bewusst kein :root mehr, sonst würde es die Themes überschreiben. */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { margin: 0; min-height: 100%; /* Fallback, falls der Body den Viewport nicht ganz füllt (iOS). */ background: var(--bg-3); } html, body { margin: 0; min-height: 100dvh; /* dvh = dynamic viewport height, respects iOS address bar */ font-family: var(--font); color: var(--text); -webkit-text-size-adjust: 100%; } /* Layered casino background; theme classes (.bg-*) swap the palette. */ body { /* Standard = die Farben des gewählten Themes. Die .bg-*-Klassen der Spielautomaten überschreiben sie, solange eine Maschine offen ist. */ --bg1: var(--bg-1); --bg2: var(--bg-2); --bg3: var(--bg-3); --bgGlow: var(--bg-glow); --bgGlow2: var(--bg-glow-2); position: relative; min-height: 100vh; background: radial-gradient(1100px 820px at 50% -12%, var(--bgGlow), transparent 62%), radial-gradient(700px 600px at 100% 108%, var(--bgGlow2), transparent 60%), radial-gradient(700px 600px at 0% 108%, var(--bgGlow2), transparent 60%), linear-gradient(165deg, var(--bg1), var(--bg2) 58%, var(--bg3)); transition: background 0.6s ease; } /* drifting spotlight + faint pattern */ body::before { content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none; background: radial-gradient(560px 560px at 28% 18%, rgba(255,255,255,0.06), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 28px); animation: bgdrift 18s ease-in-out infinite alternate; } @keyframes bgdrift { from { transform: translate(-2.5%, -1.5%); } to { transform: translate(2.5%, 1.5%); } } /* vignette */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,0.5) 100%); } /* Per-theme palettes (set on while a slot machine is open) */ body.bg-classic { --bg1:#48121d; --bg2:#280b12; --bg3:#170509; --bgGlow:rgba(214,58,46,0.42); --bgGlow2:rgba(255,180,120,0.10); } body.bg-gems { --bg1:#0e2c47; --bg2:#081a2e; --bg3:#040f1d; --bgGlow:rgba(74,160,255,0.42); --bgGlow2:rgba(120,220,255,0.10); } body.bg-dragon { --bg1:#43200a; --bg2:#271306; --bg3:#150a03; --bgGlow:rgba(255,140,40,0.40); --bgGlow2:rgba(255,90,30,0.12); } body.bg-cosmic { --bg1:#281259; --bg2:#150b32; --bg3:#090520; --bgGlow:rgba(154,91,255,0.45); --bgGlow2:rgba(90,200,255,0.10); } body.bg-algae { --bg1:#06263c; --bg2:#031522; --bg3:#010912; --bgGlow:rgba(20,180,220,0.46); --bgGlow2:rgba(var(--accent-rgb), 0.10); } /* Cosmic starfield */ body.bg-cosmic::before { background: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 140px 80px, #cfe6ff, transparent), radial-gradient(1px 1px at 80px 160px, #fff, transparent), radial-gradient(1.5px 1.5px at 220px 50px, #fff, transparent), radial-gradient(1px 1px at 300px 140px, #d6c8ff, transparent), radial-gradient(1px 1px at 40px 220px, #fff, transparent), radial-gradient(560px 560px at 70% 20%, rgba(154,91,255,0.12), transparent 60%); background-size: 340px 260px, 340px 260px, 340px 260px, 340px 260px, 340px 260px, 340px 260px, 100% 100%; animation: bgdrift 26s ease-in-out infinite alternate, twinkle 4s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } } /* Der opake Body-Verlauf würde das ::before (z-index -2, malt UNTER Block-Hintergründen) komplett verdecken — fürs Algen-Theme wird der Body deshalb durchsichtig und die Unterwasser-Szene übernimmt den Hintergrund. */ body.bg-algae { background: radial-gradient(1100px 820px at 50% -12%, rgba(20,180,220,0.16), transparent 62%); } body.bg-algae::before { /* Nur die (schachbrettfreie) Szene — light-rays/bubbles haben eingebackene Fake-Transparenz und kommen hier nicht mehr rein. */ background: linear-gradient(rgba(2,10,18,0.10), rgba(2,10,18,0.32)), url("/assets/slots/algae/background.webp") center / cover no-repeat, linear-gradient(165deg, #06263c, #031522 58%, #010912); animation: bgdrift 28s ease-in-out infinite alternate, algaeGlow 5s ease-in-out infinite alternate; will-change: transform, opacity; /* eine GPU-Ebene statt Repaint pro Frame */ } @keyframes algaeGlow { from { opacity: 0.86; } to { opacity: 1; } } /* Book of Rah: gleicher Stacking-Fix — Body durchsichtig, Tempel-Szene im ::before, darüber Gold-Strahlen und Staub (echte Alpha-Overlays). */ body.bg-pharaoh { background: radial-gradient(1100px 820px at 50% -12%, rgba(255,190,80,0.14), transparent 62%); } body.bg-pharaoh::before { /* Nur die (schachbrettfreie) Szene — god-rays/dust haben eingebackene Fake-Transparenz, der Gold-Schimmer kommt stattdessen per Gradient. */ background: linear-gradient(rgba(12,6,2,0.10), rgba(12,6,2,0.34)), radial-gradient(90% 50% at 50% 0%, rgba(255,200,90,0.16), transparent 70%), url("/assets/slots/pharaoh/background.webp") center / cover no-repeat, linear-gradient(165deg, #2a1a06, #170e04 58%, #0a0602); animation: bgdrift 30s ease-in-out infinite alternate, algaeGlow 6s ease-in-out infinite alternate; will-change: transform, opacity; /* eine GPU-Ebene statt Repaint pro Frame */ } button { font-family: inherit; cursor: pointer; } /* iOS Safari ignoriert seit iOS 10 user-scalable=no → schnelles Doppel-Tippen (z. B. Ball droppen, Heist-Hämmern) löste einen Zoom aus. touch-action: manipulation unterbindet NUR den Doppel-Tipp-Zoom; Scrollen und Pinch-Zoom bleiben erhalten. Global auf ALLES, damit auch tippbare Nicht-Buttons (Wett-Zellen, Karten, leere Flächen) betroffen sind. Die Drag-/Pan-Flächen (Hebel, Stadtkarte) behalten ihr eigenes touch-action:none dank höherer Spezifität und bleiben voll bedienbar. */ * { touch-action: manipulation; } .hidden { display: none !important; } .muted { color: var(--text-dim); } .small { font-size: 0.85rem; } /* ---------------- Top bar ---------------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + var(--safe-top)) 16px 10px; background: var(--bar); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .brand { font-size: 1.15rem; font-weight: 800; color: var(--gold-strong); cursor: pointer; white-space: nowrap; } .brand span { color: var(--text); } .topbar-right { display: flex; align-items: center; gap: 10px; } .balance { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--gold); color: var(--gold-strong); font-weight: 700; padding: 6px 12px; border-radius: 999px; } .chip-btn { background: linear-gradient(180deg, var(--gold-strong), var(--gold)); color: var(--accent-ink); font-weight: 700; border: none; border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow); } .chip-btn:disabled { opacity: 0.5; } .profile-chip { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.25); padding: 5px 10px 5px 6px; border-radius: 999px; cursor: pointer; max-width: 40vw; } .profile-chip .avatar { font-size: 1.2rem; } .profile-chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Auf schmalen Geraeten passt die volle Topbar nicht: Name und Menue liefen rechts aus dem Bild. Der Name faellt weg (das Bildchen reicht, um sein eigenes Profil zu erkennen), und der Bonus-Knopf zeigt nur noch Symbol bzw. Countdown. Der grosse Bonus-Knopf steht ohnehin im Hero. */ @media (max-width: 560px) { .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; } .brand span { display: none; } .topbar-right { gap: 6px; } .profile-chip { padding: 5px 6px; max-width: none; } .profile-chip #player-name { display: none; } .balance { padding: 6px 9px; } #bonus-btn { padding: 7px 9px; font-size: var(--fs-sm); } } /* ---------------- Screen system ---------------- */ #app { padding: 16px; max-width: var(--app-max); margin: 0 auto; } /* Die Spieltische (Poker-Filz, Roulette-Tableau) sind auf die schmale Spalte ausgelegt und bleiben dabei. Die Lobby ist eine Liste und darf im Querformat die Breite nutzen, statt zwei Spalten in einem Meer von Rand zu zeigen. */ @media (min-width: 1080px) { #app[data-active-screen="lobby"] { max-width: 1240px; } } .screen { display: none; animation: fade 0.22s ease; } .screen.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------------- Login ---------------- */ .screen[data-screen="login"] { min-height: 80vh; display: none; } .screen[data-screen="login"].active { display: flex; align-items: center; justify-content: center; } .login-card { width: 100%; max-width: 380px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); text-align: center; } .login-card .logo { font-size: 3rem; } .login-card h1 { margin: 6px 0 2px; color: var(--gold-strong); } .subtitle { color: var(--text-dim); margin-top: 0; } /* Formular-Baustein: gestapelte Felder mit Beschriftung darüber. Wird von Login, Passwort ändern und Chips senden benutzt. Vorher hatte nur das Login Regeln, deshalb liefen die anderen Formulare unformatiert in einer Zeile durch. */ .form-col, #login-form, #change-pin-form, #transfer-form { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; margin-top: var(--sp-4); } .form-col label, #login-form label, #change-pin-form label, #transfer-form label { display: flex; flex-direction: column; gap: var(--sp-1); font-weight: 600; font-size: var(--fs-sm); } .form-col input, #login-form input, #change-pin-form input, #transfer-form input { font-size: var(--fs-lg); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid rgba(var(--accent-rgb), 0.4); background: var(--surface-sunken); color: var(--text); } .form-col input:focus, #login-form input:focus, #change-pin-form input:focus, #transfer-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .hint { font-size: 0.8rem; color: var(--text-dim); margin: 0; } .form-error { color: var(--bad-text); font-size: 0.9rem; min-height: 1.1em; } .btn-primary { font-size: 1.1rem; font-weight: 800; padding: 14px; border: none; border-radius: 12px; color: var(--accent-ink); background: linear-gradient(180deg, var(--gold-strong), var(--gold)); box-shadow: var(--shadow); } .btn-primary:active { transform: translateY(1px); } /* ---------------- Lobby ---------------- */ .section-title { color: var(--gold-strong); font-size: 1.05rem; margin: 18px 4px 10px; } .online-strip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.08); } .online-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px rgba(var(--good-rgb), 0.8); } .online-strip > b { color: var(--good-text); font-size: 0.82rem; white-space: nowrap; } .online-list { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .online-list::-webkit-scrollbar { display: none; } .online-player { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); font-size: 0.78rem; cursor: pointer; } .online-player:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(var(--accent-rgb), 0.35); } .online-player b { color: var(--text); } .online-player small { font-weight: 800; opacity: 0.9; } .online-player em { color: var(--text-mute); font-size: 0.7rem; font-style: normal; } .online-clan { color: var(--accent-strong); } /* ---------------- Hero: Guthaben, Level, die zwei wichtigen Knöpfe ------- */ .hero { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5); margin-bottom: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.14), transparent 60%), var(--surface); box-shadow: var(--e-2); } @media (min-width: 620px) { .hero { grid-template-columns: 1fr auto; align-items: center; } } .hero-label { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); } .hero-balance { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-1); } .hero-balance b { font-family: var(--font-num); font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 900; line-height: 1; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .hero-coin { font-size: 1.4rem; } .hero-level { margin-top: var(--sp-3); } .hero-level-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); } .hero-level-badge { font-size: var(--fs-sm); font-weight: 800; } .hero-level-row small { color: var(--text-dim); font-size: var(--fs-xs); } .hero-level-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } .hero-level-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width var(--dur-3) var(--ease-out); } .hero-actions { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 200px; } .hero-btn { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text); text-align: left; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .hero-btn:active { transform: scale(0.985); } .hero-btn:disabled { opacity: 0.62; } .hero-btn-icon { font-size: 1.5rem; flex: 0 0 auto; } .hero-btn-text { display: flex; flex-direction: column; min-width: 0; } .hero-btn-text b { font-size: var(--fs-md); font-weight: 800; } .hero-btn-text small { font-size: var(--fs-xs); color: var(--text-dim); } /* Abholbereiter Bonus soll ins Auge fallen, ohne zu blinken. */ .hero-btn-bonus.ready { border-color: var(--accent); background: var(--accent-soft); } .hero-btn-bonus.ready .hero-btn-text small { color: var(--accent-strong); font-weight: 800; } /* ---------------- Kategorien ---------------- */ .cat-tabs { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cat-tabs::-webkit-scrollbar { display: none; } .cat-tab { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text-dim); font-size: var(--fs-md); font-weight: 700; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .cat-tab small { font-size: var(--fs-xs); font-weight: 800; padding: 1px 6px; border-radius: var(--r-pill); background: var(--line-neutral); color: var(--text-mute); } .cat-tab.active { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border-color: transparent; } .cat-tab.active small { background: rgba(0, 0, 0, 0.22); color: var(--accent-ink); } /* ---------------- Spielkarten ---------------- Jedes Spiel traegt einen Farbton (--h). Der wird nur schwach in die Theme-Flaeche gemischt, statt eine eigene Farbe zu setzen: so bekommt jedes Spiel ein Gesicht und alle drei Themes bleiben stimmig. */ .game-grid { display: grid; /* 250px als Mindestbreite: darunter bricht der Untertitel ab. Ergibt auf dem iPad quer vier Spalten, hochkant zwei, auf dem Handy eine. */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); } .game-tile { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); min-height: 88px; text-align: left; border-radius: var(--r-md); border: 1px solid hsl(var(--h, 40) 45% 62% / 0.22); background: linear-gradient(150deg, hsl(var(--h, 40) 48% 34% / 0.26), transparent 58%), var(--surface); color: var(--text); box-shadow: var(--e-2); transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .game-tile:hover { border-color: hsl(var(--h, 40) 55% 66% / 0.5); box-shadow: var(--e-3); } .game-tile:active { transform: scale(0.985); } .game-tile .tile-icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-sm); font-size: 1.55rem; background: hsl(var(--h, 40) 50% 46% / 0.24); border: 1px solid hsl(var(--h, 40) 50% 66% / 0.22); } /* Platz fuer den Favoriten-Stern rechts unten freihalten, sonst laeuft der Untertitel dagegen. */ .game-tile .tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 26px; } .game-tile.tile-sm .tile-body { padding-right: 0; } .game-tile .tile-name { font-weight: 800; font-size: var(--fs-lg); } /* Zwei Zeilen statt Abschneiden: der Untertitel erklaert, worum es geht, und "Vier Automaten, von zah…" erklaert nichts. */ .game-tile .tile-sub { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Wer gerade dort spielt. Kommt aus der Praesenz, nicht aus einer Schaetzung. */ .game-tile .tile-live { position: absolute; top: var(--sp-2); right: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); background: var(--good-soft); color: var(--good-text); } .game-tile .tile-fav { position: absolute; right: var(--sp-2); bottom: var(--sp-2); width: 30px; height: 30px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--text-mute); font-size: 1.05rem; line-height: 1; transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .game-tile .tile-fav:hover { color: var(--accent); transform: scale(1.15); } .game-tile .tile-fav.on { color: var(--accent-strong); } .game-tile.locked { cursor: not-allowed; filter: grayscale(0.55) brightness(0.74); opacity: 0.72; } .game-tile.locked::after { content: "LOCK"; position: absolute; top: 10px; right: 10px; padding: 3px 7px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.34); border: 1px solid var(--line-neutral); color: var(--text-dim); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.08em; } /* Schnellzugriff oben: kleinere Karten, nur Symbol und Name. */ .quick-row { margin-bottom: var(--sp-2); } .quick-list { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-1); -webkit-overflow-scrolling: touch; } .quick-list::-webkit-scrollbar { display: none; } .game-tile.tile-sm { flex: 0 0 auto; min-height: 0; min-width: 150px; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); } .game-tile.tile-sm .tile-icon { width: 34px; height: 34px; font-size: 1.15rem; } .game-tile.tile-sm .tile-name { font-size: var(--fs-md); } .game-tile.tile-sm .tile-live { top: 3px; right: 5px; } .feed-box { border: 1px solid var(--line-neutral); border-radius: var(--r-xs); padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); } #lobby-live { margin-top: var(--sp-6); } #lobby-live .online-strip { margin-top: var(--sp-3); } /* ---------------- Menü (Sheet) ---------------- */ .menu-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-pill); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text); font-size: 1.1rem; } .sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } body.sheet-open { overflow: hidden; } .sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid var(--line); background: var(--overlay); backdrop-filter: blur(14px); box-shadow: var(--e-4); animation: sheet-up var(--dur-2) var(--ease-out); } @keyframes sheet-up { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } } /* Auf breiten Schirmen kein Vollbreit-Blatt, sondern eine Spalte rechts. */ @media (min-width: 760px) { .sheet { left: auto; top: 0; width: 360px; max-height: 100vh; border-radius: var(--r-xl) 0 0 var(--r-xl); border-top: none; border-left: 1px solid var(--line); padding-top: calc(var(--sp-4) + var(--safe-top)); animation: sheet-in var(--dur-2) var(--ease-out); } @keyframes sheet-in { from { transform: translateX(12%); opacity: 0; } to { transform: none; opacity: 1; } } .sheet-grip { display: none; } } .sheet-grip { width: 40px; height: 4px; margin: 0 auto var(--sp-3); border-radius: var(--r-pill); background: var(--line-neutral); } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .sheet-head b { font-size: var(--fs-lg); } .sheet-close { width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text); } .sheet-group { margin-bottom: var(--sp-4); } .sheet-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); } .sheet-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-2); border: none; border-radius: var(--r-sm); background: transparent; color: var(--text); text-align: left; } .sheet-item:hover { background: var(--surface-sunken); } .sheet-item:active { background: var(--accent-soft); } .sheet-item span { grid-row: 1 / 3; font-size: 1.35rem; text-align: center; } .sheet-item b { font-weight: 700; font-size: var(--fs-md); } .sheet-item small { color: var(--text-dim); font-size: var(--fs-xs); } /* ---------------- Placeholder & Panels ---------------- */ .placeholder, .panel { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .placeholder { text-align: center; } .placeholder .ph-icon { font-size: 3.4rem; margin: 8px 0; } .placeholder p, .panel p { color: var(--text-dim); line-height: 1.5; } .badge { display: inline-block; margin-top: 8px; background: var(--gold); color: var(--accent-ink); font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; } .back-btn { background: none; border: none; color: var(--gold-strong); font-size: 1rem; font-weight: 700; padding: 6px 0; margin-bottom: 8px; } /* ---------------- Leaderboard ---------------- */ .leaderboard { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: rank; } .leaderboard li { counter-increment: rank; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); margin-bottom: 8px; } .leaderboard li:not(.muted)::before { content: counter(rank); font-weight: 800; color: var(--gold-strong); margin-right: 12px; min-width: 1.4em; } .leaderboard li b { color: var(--gold-strong); } /* Player leaderboard supplies its own rank (medals + numbers) in JS, so hide the CSS counter here (the admin list still uses it). */ #leaderboard-list li::before { content: none; } /* ---------------- Profile ---------------- */ /* ---------------- Profil ---------------- */ .pf-card { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.14), transparent 62%), var(--surface); box-shadow: var(--e-2); } .pf-avatar { display: grid; place-items: center; width: 68px; height: 68px; font-size: 2.6rem; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line-strong); } .pf-ident { min-width: 0; } .pf-ident h2 { margin: 0; font-size: var(--fs-xl); } .pf-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); } .pf-tag { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line-neutral); color: var(--text-dim); } .pf-tag-bounty { color: var(--bad-text); border-color: rgba(var(--bad-rgb), 0.4); } /* Der Level-Balken laeuft ueber die volle Breite unter Bild und Name. */ .pf-card .level-box { grid-column: 1 / -1; } /* Zahlen als Raster statt als Liste aus Beschriftung und Wert. */ .pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); } .pf-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-neutral); } .pf-stat span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); } .pf-stat b { font-family: var(--font-num); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--accent-strong); } .pf-ach-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-5); } #profile-ach-toggle { margin-bottom: var(--sp-4); } .stat-row { display: flex; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .stat-row b { color: var(--gold-strong); } .btn-danger { width: 100%; margin-top: 20px; padding: 13px; border: 1px solid var(--danger); background: var(--bad-soft); color: var(--bad-text); font-weight: 700; border-radius: 12px; } .btn-secondary { font-size: 1rem; font-weight: 700; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: var(--text); background: rgba(255, 255, 255, 0.06); cursor: pointer; } .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); } .btn-secondary:active { transform: translateY(1px); } .btn-secondary:disabled { opacity: 0.5; cursor: default; } /* ---------------- Settings ---------------- */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600; } .toggle-row input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); } .toggle-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .toggle-note { font-weight: 500; font-size: var(--fs-xs); color: var(--text-mute); } .settings-range { flex: 1; max-width: 200px; accent-color: var(--accent); } .settings-head { margin: var(--sp-5) 0 var(--sp-1); font-size: var(--fs-md); color: var(--accent-strong); letter-spacing: 0.01em; } .settings-head:first-of-type { margin-top: var(--sp-4); } .settings-rule { border: 0; border-top: 1px solid var(--line-neutral); margin: var(--sp-5) 0; } /* ---------------- Theme-Auswahl ---------------- */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); } .theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-3); text-align: left; border-radius: var(--r-md); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .theme-card:active { transform: scale(0.98); } .theme-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-soft); } .theme-card b { font-size: var(--fs-md); font-weight: 800; } .theme-card small { color: var(--text-dim); font-size: var(--fs-xs); } /* Zwei echte Farbtupfer aus der Palette: Grundton und Akzent. */ .theme-swatch { display: flex; margin-bottom: var(--sp-1); } .theme-swatch i { display: block; width: 26px; height: 26px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.22); } .theme-swatch i + i { margin-left: -10px; } /* Wer "Bewegung reduzieren" wählt, bekommt keine Deko-Animationen mehr. Spielanimationen (Walzen, Karten, Rennen) tragen Information und laufen weiter, die stehen nicht in dieser Liste. */ html.reduce-motion body::before, html.reduce-motion .machine-card::after, html.reduce-motion .machine-card .mc-syms span, html.reduce-motion .machine-card .mc-led { animation: none !important; } html.reduce-motion .screen { animation: none; } /* ---------------- Toast ---------------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: rgba(0, 0, 0, 0.85); color: var(--gold-strong); border: 1px solid var(--gold); padding: 12px 20px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 100; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .announcement-strip { position: fixed; left: 16px; bottom: 84px; z-index: 90; display: flex; align-items: flex-start; gap: 9px; max-width: min(420px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px; background: var(--overlay); border: 1px solid rgba(var(--accent-rgb), 0.32); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); color: var(--text); font-size: 0.86rem; line-height: 1.25; backdrop-filter: blur(6px); } .announcement-strip.hidden { display: none; } .announcement-icon { flex: 0 0 auto; margin-top: 1px; } .announcement-strip b { display: block; color: var(--gold-strong); overflow-wrap: anywhere; } .announcement-strip small { display: block; margin-top: 3px; color: var(--text-dim); font-size: 0.72rem; } @media (max-width: 560px) { .announcement-strip { left: 10px; right: 10px; bottom: 74px; max-width: none; } } /* ============================================================ Poker ============================================================ */ .poker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; } .poker-actions .panel h3 { margin: 0 0 12px; color: var(--gold-strong); } .poker-actions label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; } .poker-actions select, .poker-actions input { font-size: 1.05rem; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(0, 0, 0, 0.3); color: var(--text); } .poker-actions .btn-primary { width: 100%; padding: 12px; } #join-code { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 800; } .table-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .table-code { color: var(--text-dim); } .table-code b { color: var(--gold-strong); letter-spacing: 2px; } .add-bot-btn { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--gold); color: var(--gold-strong); font-weight: 700; font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap; } /* Bots config (poker lobby) */ .bots-panel { margin-bottom: 14px; } .bots-config { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .bots-config label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; } .bots-config select, .bots-config input { font-size: 1rem; padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(0, 0, 0, 0.3); color: var(--text); } .bots-config #bot-buyin { width: 110px; } .bots-config .btn-primary { padding: 11px 18px; } /* Filz. Farben aus den --felt-Tokens, damit der Tisch dem Theme folgt: vorher war er in jedem Theme gruen mit brauner Bande, auch im blauen Mitternacht und im fast schwarzen Neon. Die Bande ist aus Schatten gebaut statt aus einem Rahmen, sonst bricht sie an der Ellipse auf. */ .felt { position: relative; width: calc(100% - 24px); aspect-ratio: 4 / 3; max-height: 62vh; margin: var(--sp-3) auto 0; border-radius: 48% / 42%; background: radial-gradient(ellipse at 50% 42%, var(--felt-light) 0%, var(--felt) 58%, var(--felt-dark) 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(var(--accent-rgb), 0.28), 0 0 0 11px rgba(0, 0, 0, 0.55), 0 0 0 12px rgba(var(--accent-rgb), 0.16), var(--e-3); } .pot { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2); color: var(--accent-strong); font-weight: 800; font-size: 0.95rem; white-space: nowrap; padding: 0; } /* Ohne Pot bleibt nichts stehen — vorher war dort ein leeres graues Oval. */ .pot.has-pot { background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(var(--accent-rgb), 0.3); padding: 5px 14px 5px 10px; border-radius: var(--r-pill); } .pot-chips { position: relative; display: block; width: 22px; height: 26px; } .pot-chips i { position: absolute; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; } .table-banner { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); font-weight: 800; color: #fff; opacity: 0; transition: opacity 0.3s ease; background: rgba(0, 0, 0, 0.55); padding: 6px 16px; border-radius: 999px; border: 1px solid var(--gold); white-space: nowrap; pointer-events: none; } .table-banner.show { opacity: 1; } /* Cards */ .card { width: 42px; height: 60px; border-radius: 7px; background: #fff; color: #1a1a1a; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .card .cr { font-size: 1.1rem; } .card .cs { font-size: 1rem; } .card.red { color: var(--card-red); } .card.back { background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 6px, #5e1620 6px, #5e1620 12px); border: 2px solid #fff; } .card.mini { width: 30px; height: 42px; border-radius: 5px; } .card.mini .cr { font-size: 0.8rem; } .card.mini .cs { font-size: 0.75rem; } /* Seats */ .seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; width: 92px; text-align: center; } .seat.empty .seat-empty { color: rgba(255, 255, 255, 0.42); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: var(--r-pill); padding: 8px 14px; background: rgba(0, 0, 0, 0.16); } .seat .hole { display: flex; gap: 3px; justify-content: center; } .seat-plate { position: relative; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: var(--r-sm); padding: 5px 8px; min-width: 84px; } /* Zug-Uhr direkt am Sitz. Vorher lief sie nur als Text im Banner ueber dem Tisch — man schaut aber auf den Sitz, nicht auf das Banner, und merkte deshalb erst am Auto-Fold, dass die Zeit weg war. */ .seat.active-turn .seat-plate::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -4px; height: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); } .seat.active-turn .seat-plate::before { content: ""; position: absolute; left: 4px; bottom: -4px; z-index: 1; width: calc(var(--turn, 1) * (100% - 8px)); height: 3px; border-radius: var(--r-pill); background: var(--accent-strong); transition: width 0.5s linear, background 0.3s var(--ease); } /* Letzte zehn Sekunden: die Farbe wechselt, damit man es aus dem Augenwinkel mitbekommt. */ .seat.active-turn.turn-low .seat-plate::before { background: var(--bad); } .seat-name { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seat-chips { font-size: 0.72rem; color: var(--gold-strong); } .btn-chip { display: inline-block; background: #fff; color: #222; font-size: 0.6rem; font-weight: 800; width: 15px; height: 15px; line-height: 15px; border-radius: 50%; vertical-align: middle; } .seat.active-turn .seat-plate { border-color: var(--gold-strong); box-shadow: 0 0 0 2px var(--gold-strong), 0 0 14px var(--gold); } .seat.folded { opacity: 0.4; } .seat.winner .seat-plate { border-color: var(--good-text); box-shadow: 0 0 0 2px var(--good-text), 0 0 16px #3fc977; } .seat-bet { background: rgba(0, 0, 0, 0.4); color: var(--gold-strong); font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--gold); } .hand-name { font-size: 0.68rem; color: var(--text-dim); } /* Controls */ .table-controls { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; } .action-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; width: 100%; } .action-row > button, .raise-wrap .act-raise { font-size: 1.05rem; font-weight: 800; padding: 14px 18px; border: none; border-radius: 12px; color: #fff; min-width: 96px; } .act-fold { background: linear-gradient(180deg, #d65a4e, #b0392d); } .act-check, .act-call { background: linear-gradient(180deg, #3aa76d, #1f7d4d); } .act-raise { background: linear-gradient(180deg, var(--gold-strong), var(--gold)); color: var(--accent-ink); width: 100%; } .raise-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 200px; flex: 1; max-width: 320px; } .raise-wrap input[type="range"] { width: 100%; accent-color: var(--gold); } .raise-line { display: flex; gap: 8px; } .raise-line input { flex: 1; font-size: 1rem; padding: 10px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(0,0,0,0.3); color: var(--text); } .raise-quick { display: flex; gap: 8px; } .raise-quick button { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(0,0,0,0.25); color: var(--gold-strong); font-weight: 700; } .buyin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; } .buyin input { width: 110px; font-size: 1rem; padding: 10px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(0,0,0,0.3); color: var(--text); } .buyin .btn-primary { padding: 11px 18px; } .waiting-row, .start-row { font-weight: 600; color: var(--text-dim); padding: 6px; } .start-row .btn-primary { padding: 12px 22px; } .stand-btn { background: none; border: 1px solid rgba(255,255,255,0.25); color: var(--text-dim); padding: 8px 16px; border-radius: 10px; font-weight: 600; font-size: 0.85rem; } .table-log { margin-top: 14px; max-height: 120px; overflow-y: auto; background: rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 10px 14px; font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; } .table-log div:last-child { color: var(--text); } /* ============================================================ Slots ============================================================ */ .ph-icon { font-size: 3.4rem; } /* Machine select */ .machine-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; } .machine-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 15px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), 0.34); color: var(--text); text-align: left; box-shadow: var(--shadow); position: relative; overflow: hidden; min-height: 130px; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; isolation: isolate; } .machine-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.34); box-shadow: 0 18px 36px rgba(0,0,0,0.42), 0 0 24px rgba(var(--accent-rgb), 0.12); } .machine-card:active { transform: scale(0.98); } .machine-card::before { content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 32%), radial-gradient(circle at 18% 18%, rgba(255,255,255,0.18), transparent 34%), radial-gradient(circle at 88% 0%, rgba(255,255,255,0.11), transparent 42%); border: 1px solid rgba(255,255,255,0.08); } .machine-card::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent); transform: skewX(-18deg); animation: sheen 4.5s ease-in-out infinite; } @keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } } .machine-card .mc-topline { display: flex; align-items: center; gap: 6px; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.58); } .machine-card .mc-led { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-strong); box-shadow: 0 0 10px var(--gold-strong); animation: ledblink 1.8s ease-in-out infinite; } @keyframes ledblink { 0%,100%{opacity:0.45} 50%{opacity:1} } .machine-card .mc-syms { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 2px 0 1px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 12px 20px rgba(255,255,255,0.04), inset 0 -18px 24px rgba(0,0,0,0.25); font-size: 1.9rem; letter-spacing: 3px; } .machine-card .mc-syms span { animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45)); } @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} } .machine-card .mc-name { font-weight: 900; font-size: 1.12rem; letter-spacing: 0.01em; } .machine-card .mc-tag { font-size: 0.78rem; color: var(--text-dim); } .machine-card .mc-feature { margin-top: auto; font-size: 0.75rem; font-weight: 700; color: var(--gold-strong); background: rgba(0, 0, 0, 0.3); padding: 3px 10px; border-radius: 999px; } .machine-card .mc-bets { font-size: 0.72rem; color: var(--gold-strong); opacity: 0.85; } .machine-card.locked { filter: grayscale(0.55) brightness(0.68); } .machine-card .mc-lock { margin-top: auto; font-size: 0.82rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--gold); padding: 4px 12px; border-radius: 999px; } .theme-classic { background: linear-gradient(160deg, #7a2230, #3a0f17); } .theme-gems { background: linear-gradient(160deg, #1b4d6b, #0c2236); } .theme-dragon { background: linear-gradient(160deg, #6b3a12, #2e1606); } .theme-cosmic { background: linear-gradient(160deg, #3a2068, #140a2e); } .theme-algae { background: linear-gradient(160deg, #0b526b, #061824); } .machine-card.theme-algae { background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.38)), url("/assets/slots/algae/light-rays.webp") center / cover, linear-gradient(160deg, #0b526b, #061824); } .machine-card.theme-algae::before { background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 32%), url("/assets/slots/algae/bubbles.webp") center / cover; opacity: 0.66; } .mc-symbol-img { width: 38px; height: 38px; object-fit: contain; vertical-align: middle; margin-right: -2px; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.46)); } /* Machine view */ .slots-mtopbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .machine-title { font-weight: 800; font-size: 1.15rem; color: var(--gold-strong); } .paytable-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(0, 0, 0, 0.3); color: var(--gold-strong); font-size: 1rem; font-weight: 800; } #slots-machine.theme-classic { --machine-accent: #ff5a6e; --glow: #ff5a6e; --metal1:#8b2638; --metal2:#25070d; } #slots-machine.theme-gems { --machine-accent: #5ad1ff; --glow: #5ad1ff; --metal1:#126081; --metal2:#041725; } #slots-machine.theme-dragon { --machine-accent: #ffa53a; --glow: #ff7a18; --metal1:#925115; --metal2:#251004; } #slots-machine.theme-cosmic { --machine-accent: #b98cff; --glow: #9a5bff; --metal1:#5930a2; --metal2:#110725; } #slots-machine.theme-algae { --machine-accent: #21d7ff; --glow: #19bdf0; --metal1:#0b637c; --metal2:#031521; /* Kein Panel-Verlauf über der Unterwasser-Szene — die generische .theme-algae-Regel (für Karten) soll hier nicht durchschlagen. */ background: none; } /* Kein Panel-Kasten hinter dem Automaten: Der 9-Slice-Goldrahmen sitzt direkt am Walzenfenster, die Themen-Szene soll dahinter frei sichtbar bleiben. Nur ein weicher Schatten gibt dem Fenster Tiefe. */ #slots-machine.theme-algae .slot-stage { background: none; border: 0; box-shadow: none; padding: 14px 8px 10px; } #slots-machine.theme-algae .reels-window, #slots-machine.theme-pharaoh .reels-window { /* box-shadow statt filter:drop-shadow — Filter zwingen iOS, das ganze animierende Walzenfenster jeden Frame offscreen zu rendern (Lag). */ box-shadow: 0 18px 30px rgba(0,0,0,0.55); } /* Der Deko-Streifen der Standard-Stage stört unter dem echten Rahmen. */ #slots-machine.theme-algae .slot-stage::before { background: none; border: 0; } #slots-machine.theme-algae .slot-stage > * { position: relative; z-index: 1; } #slots-machine.theme-algae .slot-stage::after { content: "ALGEN ABYSS"; z-index: 3; } /* Gold-Rahmen als 9-Slice DIREKT auf dem Walzenfenster: Innenkante = Fenster, Ecken unverzerrt, Bänder strecken sich mit — passt bei jeder Größe. Slices = Fensterkanten im Asset (1448×1086: oben 279, seitlich 167, unten 226). */ #slots-machine.theme-algae .reels-window { border: solid transparent; border-width: 58px 36px 48px; border-image: url("/assets/slots/algae/frame-cut.webp") 279 167 226 167 stretch; border-radius: 0; background-clip: padding-box; /* Fenster-Schwarz nicht hinter den Rahmen malen */ box-shadow: none; } @media (max-width: 640px) { #slots-machine.theme-algae .reels-window { border-width: 44px 27px 36px; } } #slots-machine.theme-algae .slot-controls { position: relative; } #slots-machine.theme-algae .slot-controls::before { content: ""; position: absolute; inset: -15px -18px; z-index: -1; pointer-events: none; background: url("/assets/slots/algae/symbols/stats-bar.webp") center / 100% 100% no-repeat; opacity: 0.5; } #slots-machine.theme-algae #buy-bonus, #slots-machine.theme-algae #auto-roll { background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.24)), url("/assets/slots/algae/symbols/multiplier-bar.webp"); background-size: cover; border-color: rgba(33,215,255,0.55); } #slots-machine.theme-algae .lever-knob { background: url("/assets/slots/algae/symbols/spin-orb.webp") center / cover no-repeat; border-color: rgba(33,215,255,0.55); box-shadow: 0 0 18px rgba(33,215,255,0.55), 0 4px 10px rgba(0,0,0,0.5); } /* ── Book of Rah ──────────────────────────────────────────────────────── */ .theme-pharaoh { background: linear-gradient(160deg, #6b4a12, #241404); } .machine-card.theme-pharaoh { background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.42)), url("/assets/slots/pharaoh/background.webp") center / cover, linear-gradient(160deg, #6b4a12, #241404); } .machine-card.theme-pharaoh::before { background: linear-gradient(180deg, rgba(255,220,140,0.20), transparent 34%), radial-gradient(80% 60% at 50% 0%, rgba(255,200,90,0.22), transparent 70%); opacity: 0.7; } #slots-machine.theme-pharaoh { --machine-accent: #ffd76a; --glow: #f4b942; --metal1:#8a6420; --metal2:#1d1204; background: none; /* Szene übernimmt (gleicher Fix wie beim Algen-Theme) */ } #slots-machine.theme-pharaoh .slot-stage { background: none; border: 0; box-shadow: none; padding: 14px 8px 10px; } #slots-machine.theme-pharaoh .slot-stage::before { background: none; border: 0; } #slots-machine.theme-pharaoh .slot-stage > * { position: relative; z-index: 1; } #slots-machine.theme-pharaoh .slot-stage::after { content: "BOOK OF RAH"; z-index: 3; } /* Tempel-Rahmen als 9-Slice ums Walzenfenster (Asset 1536×1024, Fenster- Kanten: oben 268, rechts 337, unten 247, links 345). */ #slots-machine.theme-pharaoh .reels-window { border: solid transparent; border-width: 52px 58px 48px 60px; border-image: url("/assets/slots/pharaoh/frame.webp") 268 337 247 345 stretch; border-radius: 0; background-clip: padding-box; box-shadow: none; } @media (max-width: 640px) { #slots-machine.theme-pharaoh .reels-window { border-width: 40px 44px 36px 46px; } } #slots-machine.theme-pharaoh .lever-knob { background: url("/assets/slots/pharaoh/symbols/spin-orb.webp") center / cover no-repeat; border-color: rgba(255,215,106,0.6); box-shadow: 0 0 18px rgba(255,190,80,0.6), 0 4px 10px rgba(0,0,0,0.5); } /* Expansion des Bonussymbols: Zelle blitzt golden auf und wächst rein. */ .cell.expand-pop { animation: expandPop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); } .cell.expand-pop span { display: inline-block; animation: expandGrow 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); } @keyframes expandPop { 0% { box-shadow: 0 0 0 rgba(255,215,106,0); } 40% { box-shadow: 0 0 26px rgba(255,215,106,0.95), inset 0 0 18px rgba(255,215,106,0.5); } 100% { box-shadow: 0 0 10px rgba(255,215,106,0.35); } } @keyframes expandGrow { from { transform: scale(0.25); opacity: 0.3; } 60% { transform: scale(1.18); opacity: 1; } to { transform: scale(1); } } /* Risiko-/Gamble-Bar */ .gamble-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(58,38,10,0.85), rgba(20,12,3,0.9)); border: 1px solid rgba(255,215,106,0.45); box-shadow: 0 0 18px -4px rgba(255,190,80,0.5); animation: gambleIn 0.25s ease-out; } @keyframes gambleIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .gamble-info { font-weight: 800; color: var(--gold-strong); } .gamble-btn { padding: 9px 14px; border-radius: 10px; font-weight: 800; border: 1px solid rgba(255,255,255,0.18); } .gamble-btn.gamble-red { background: linear-gradient(135deg, #d64545, #8f1f1f); color: #fff; } .gamble-btn.gamble-black { background: linear-gradient(135deg, #3a3a46, #16161d); color: #fff; } .gamble-btn.gamble-collect { background: linear-gradient(135deg, var(--good), var(--good-deep)); color: var(--good-ink); margin-left: auto; } .gamble-result { font-size: 1.3rem; min-width: 28px; text-align: center; } .gamble-bar.gamble-lost { animation: crashShake 0.4s; border-color: rgba(214,90,90,0.7); } .slot-stage { position: relative; margin: 14px auto; padding: 24px 18px 20px; border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,0.16), transparent 18%), linear-gradient(180deg, var(--metal1, #633), var(--metal2, #12080a) 70%); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 0 30px -4px var(--glow, var(--gold)), 0 24px 44px rgba(0,0,0,0.42), inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -24px 38px rgba(0,0,0,0.35); overflow: visible; isolation: isolate; } .slot-stage::before { content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 13px; border: 1px solid rgba(255,255,255,0.09); background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.14), transparent 36%), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 7px, transparent 7px 18px); opacity: 0.55; } .slot-stage::after { content: "FAKE CASINO"; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.12); color: var(--gold-strong); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.18em; text-shadow: 0 0 8px var(--glow, var(--gold)); } .slot-stage.shake, .shake { animation: shake 0.6s; } @keyframes shake { 0%,100%{transform:translate(0,0) rotate(0)} 15%{transform:translate(-12px,6px) rotate(-1deg)} 30%{transform:translate(12px,-6px) rotate(1deg)} 45%{transform:translate(-10px,-5px) rotate(-1deg)} 60%{transform:translate(10px,5px) rotate(1deg)} 75%{transform:translate(-7px,4px) rotate(-0.5deg)} 90%{transform:translate(7px,-4px)} } /* Machine body = reel stage + lever side by side */ .machine-body { display: flex; align-items: center; gap: 10px; } .machine-body .slot-stage { flex: 1; margin: 14px 0; } .reels-window { position: relative; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 18%, rgba(0,0,0,0.36)), #070707; border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.52), inset 0 22px 32px rgba(255,255,255,0.05), inset 0 -26px 32px rgba(0,0,0,0.55), 0 0 18px rgba(0,0,0,0.35); overflow: hidden; } .reels-window::before { content: ""; position: absolute; inset: 8px; z-index: 5; pointer-events: none; border-radius: 12px; /* Ohne mix-blend-mode: Blend-Modes über den rollenden Walzen erzwingen teures Neu-Compositing pro Frame auf iOS — der Alpha-Verlauf wirkt fast identisch und ist gratis. */ background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 18%, transparent 72%, rgba(0,0,0,0.22)), linear-gradient(90deg, rgba(255,255,255,0.06), transparent 12%, transparent 88%, rgba(255,255,255,0.05)); } .reels-window::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; z-index: 5; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent); } .reels { display: grid; gap: 6px; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 38%), rgba(0, 0, 0, 0.58); border-radius: 12px; padding: 8px; position: relative; box-shadow: inset 0 0 22px rgba(0,0,0,0.62); } .reels.tumble .cell { animation: drop 0.26s ease; } @keyframes drop { from { transform: translateY(-18px); opacity: 0.2; } to { transform: none; opacity: 1; } } .reel { position: relative; border-radius: 9px; background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2), rgba(255,255,255,0.05)); box-shadow: inset 8px 0 14px rgba(255,255,255,0.025), inset -8px 0 14px rgba(0,0,0,0.22); } .reel.rolling { overflow: hidden; } .reel.rolling .strip { filter: blur(0.7px) saturate(1.12); } .reel .strip { display: flex; flex-direction: column; will-change: transform; } .reel.bump { animation: bump 0.22s ease; } @keyframes bump { 0%{transform:translateY(-6px)} 55%{transform:translateY(3px)} 100%{transform:none} } /* Center payline marker */ .payline { position: absolute; left: -4px; right: -4px; pointer-events: none; z-index: 6; border-top: 2px solid var(--machine-accent, var(--accent)); border-bottom: 2px solid var(--machine-accent, var(--accent)); background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.07), rgba(255,255,255,0.0)); box-shadow: 0 0 14px -2px var(--glow, var(--gold)); } .payline .pl-arrow { position: absolute; top: 50%; transform: translateY(-50%); color: var(--machine-accent, var(--accent)); font-size: 0.9rem; filter: drop-shadow(0 0 4px var(--glow)); animation: plpulse 1.1s ease-in-out infinite; } .payline .pl-arrow.left { left: -2px; } .payline .pl-arrow.right { right: -2px; } @keyframes plpulse { 0%,100%{opacity:0.6} 50%{opacity:1} } .cell { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: radial-gradient(circle at 42% 30%, rgba(255,255,255,0.16), transparent 34%), linear-gradient(160deg, rgba(255,255,255,0.10), rgba(0,0,0,0.34)); border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.10); font-size: clamp(1.4rem, 7vw, 2.4rem); line-height: 1; user-select: none; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -12px 16px rgba(0,0,0,0.22); overflow: hidden; } .cell:not(.win)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,0.15), transparent 28%, transparent 72%, rgba(0,0,0,0.18)); pointer-events: none; } .cell span { display: block; position: relative; z-index: 3; transition: transform 0.15s ease; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.38)); } .slot-symbol-img { width: 92%; height: 92%; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.44)); } .theme-algae .cell { background: radial-gradient(circle at 50% 34%, rgba(33,215,255,0.18), transparent 38%), linear-gradient(160deg, rgba(7,63,78,0.88), rgba(0,0,0,0.42)); border-color: rgba(33,215,255,0.22); } .cell.mystery-pop { animation: mysteryReveal 0.58s cubic-bezier(0.2,1.7,0.4,1); box-shadow: 0 0 18px rgba(33,215,255,0.85), inset 0 0 18px rgba(255,255,255,0.22); } /* Golden-Shark-Münze: Tier-Bild + ×Wert, bleibt bis zum Sequenz-Ende liegen. */ .razor-coin { position: absolute; inset: 2%; z-index: 7; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: coinPop 0.5s cubic-bezier(0.2,1.7,0.4,1); } .razor-coin img { width: 88%; height: 88%; object-fit: contain; } .razor-coin em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-weight: 950; font-size: clamp(0.72rem, 2.6vw, 1.1rem); color: #fff; text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 2px 4px rgba(0,0,0,0.85); } .razor-coin.bronze img { filter: drop-shadow(0 0 8px rgba(209,122,66,0.85)); } .razor-coin.silver img { filter: drop-shadow(0 0 10px rgba(214,230,240,0.9)); } .razor-coin.gold img { filter: drop-shadow(0 0 14px rgba(255,214,92,1)); animation: goldCoinGlow 0.8s ease-in-out infinite alternate; } @keyframes goldCoinGlow { from { filter: drop-shadow(0 0 10px rgba(255,214,92,0.8)); } to { filter: drop-shadow(0 0 22px rgba(255,236,150,1)); } } @keyframes coinPop { 0% { opacity: 0; transform: scale(0.25) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.18) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* Der ganze Stack flippt zu Golden Sharks. */ .cell.golden-flip { animation: goldenFlip 0.62s cubic-bezier(0.2,1.5,0.4,1); border-color: rgba(255,214,92,0.85); box-shadow: 0 0 22px rgba(255,196,64,0.9), inset 0 0 16px rgba(255,236,150,0.3); } @keyframes goldenFlip { 0% { transform: rotateY(0deg); filter: brightness(1); } 50% { transform: rotateY(180deg) scale(1.12); filter: brightness(2) saturate(1.5); } 100% { transform: rotateY(360deg); filter: brightness(1); } } @keyframes mysteryReveal { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); } 45% { transform: scale(1.24) rotate(-2deg); filter: brightness(1.8) saturate(1.4); } 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } } .cell.win { background: radial-gradient(circle, var(--machine-accent, var(--accent)), rgba(0,0,0,0.3)); border-color: #fff; z-index: 4; overflow: visible; } .cell.win span { animation: winpulse 0.5s ease infinite alternate; } @keyframes winpulse { from { transform: scale(1); } to { transform: scale(1.22); } } /* Radiating light beams behind a winning symbol. */ .cell.win::before { content: ""; position: absolute; left: 50%; top: 50%; width: 240%; height: 240%; transform: translate(-50%, -50%); z-index: 1; background: repeating-conic-gradient( from 0deg, rgba(255, 240, 190, 0.55) 0deg 7deg, transparent 7deg 20deg ); -webkit-mask: radial-gradient(circle, #000 8%, rgba(0,0,0,0.5) 35%, transparent 62%); mask: radial-gradient(circle, #000 8%, rgba(0,0,0,0.5) 35%, transparent 62%); animation: rays 4s linear infinite, raysfade 0.5s ease; pointer-events: none; } /* Bright glow halo on the winning cell. */ .cell.win::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; z-index: 2; box-shadow: 0 0 16px 3px var(--glow, var(--gold)), inset 0 0 12px rgba(255,255,255,0.6); animation: haloflash 0.5s ease infinite alternate; pointer-events: none; } @keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes raysfade { from { opacity: 0; } to { opacity: 1; } } @keyframes haloflash { from { opacity: 0.55; } to { opacity: 1; } } .win-flash { animation: winflash 0.6s ease; } @keyframes winflash { 0% { transform: scale(1); color: var(--gold-strong); } 40% { transform: scale(1.4); color: #fff; text-shadow: 0 0 12px var(--glow); } 100% { transform: scale(1); } } .cell.dim { opacity: 0.15; transform: scale(0.7); transition: all 0.25s ease; } .cell.scatter-hit { animation: scatterflash 0.5s ease infinite alternate; border-color: var(--gold-strong); } @keyframes scatterflash { from{box-shadow:0 0 4px var(--gold)} to{box-shadow:0 0 20px var(--gold-strong)} } .free-badge, .multiplier-badge { position: absolute; top: 10px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--gold); color: var(--gold-strong); opacity: 0; transform: translateY(-6px); transition: all 0.25s ease; z-index: 5; font-size: 0.85rem; } .free-badge { left: 10px; } .multiplier-badge { right: 10px; color: #fff; border-color: var(--machine-accent, var(--accent)); font-size: 1.1rem; } .free-badge.show, .multiplier-badge.show { opacity: 1; transform: none; } .win-pop { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.4); font-size: 2.4rem; font-weight: 900; color: #fff; text-shadow: 0 0 10px var(--glow), 0 2px 4px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; z-index: 6; } .win-pop.show { animation: winpop 0.9s ease; } @keyframes winpop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); } 70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-80%) scale(1); } } .slot-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.6); font-size: 2rem; font-weight: 900; text-align: center; white-space: pre-line; color: var(--gold-strong); text-shadow: 0 0 16px var(--glow), 0 2px 6px rgba(0,0,0,0.7); opacity: 0; pointer-events: none; z-index: 7; } .slot-banner.show { animation: bannerin 1.7s ease; } @keyframes bannerin { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.4)} 15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)} 80%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)} } /* Win tiers — escalate size & colour */ .slot-banner.t-big { font-size: 2.4rem; color: #ffe08a; } .slot-banner.t-mega { font-size: 2.9rem; background: linear-gradient(90deg, #ffd24a, #ff7eb3, #6fe3ff, #ffd24a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.25); } .slot-banner.t-ultra { font-size: 3.3rem; color: #fff; text-shadow: 0 0 18px var(--glow), 0 0 36px var(--machine-accent, var(--accent)), 0 2px 6px rgba(0,0,0,0.8); animation: bannerin 1.7s ease, ultrahue 1.7s linear; } @keyframes ultrahue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } .slot-stage.shake-strong, .shake-strong { animation: shakeStrong 0.9s; } @keyframes shakeStrong { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-22px,11px) rotate(-2.2deg)} 30%{transform:translate(24px,-13px) rotate(2.2deg)} 50%{transform:translate(-20px,-9px) rotate(-2deg)} 70%{transform:translate(20px,11px) rotate(1.4deg)} 90%{transform:translate(-11px,-6px)} } /* Lever — fixed size, independent of the reel grid */ .lever { flex: 0 0 58px; position: relative; height: 210px; display: flex; align-items: flex-start; justify-content: center; touch-action: none; } .lever.disabled { opacity: 0.55; } .lever-track { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 12px; transform: translateX(-50%); background: linear-gradient(90deg, #2a2a2e, #5a5a60, #2a2a2e); border-radius: 8px; box-shadow: inset 0 0 6px rgba(0,0,0,0.6); } .lever-arm { position: relative; z-index: 2; margin-top: 8px; display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; } .lever-arm:active { cursor: grabbing; } .lever-knob { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--bad-text), #d2342a 60%, #7a160f); box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.4); border: 2px solid rgba(255,255,255,0.25); } .lever-arm::after { content: ""; width: 10px; height: 70px; background: linear-gradient(90deg, #9a9aa2, #e8e8ee, #9a9aa2); border-radius: 6px; margin-top: -4px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } .lever-hint { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: var(--text-dim); white-space: nowrap; animation: hintbob 1.6s ease-in-out infinite; } @keyframes hintbob { 0%,100%{transform:translate(-50%,0);opacity:0.6} 50%{transform:translate(-50%,3px);opacity:1} } /* Controls */ .slot-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .spin-hint { color: var(--gold-strong); font-weight: 700; font-size: 0.9rem; text-align: center; opacity: 0.85; animation: hintpulse 1.8s ease-in-out infinite; } @keyframes hintpulse { 0%,100%{opacity:0.55} 50%{opacity:1} } .bet-control, .win-display { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 8px 10px; border: 1px solid rgba(var(--accent-rgb), 0.25); } .bet-display, .win-display { display: flex; flex-direction: column; line-height: 1.1; text-align: center; min-width: 64px; } .bet-display .lbl, .win-display .lbl { font-size: 0.65rem; color: var(--text-dim); } .bet-display b, .win-display b { color: var(--gold-strong); font-size: 1rem; } .bet-step { width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; font-weight: 800; border: 1px solid var(--gold); background: rgba(0,0,0,0.3); color: var(--gold-strong); } .bet-step:disabled { opacity: 0.4; } .spin-btn { flex: 0 0 auto; width: 84px; height: 84px; border: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--machine-accent, var(--accent)), #3a0f17); color: #fff; font-size: 1.05rem; font-weight: 900; letter-spacing: 1px; box-shadow: 0 0 20px -2px var(--glow, var(--gold)), inset 0 2px 6px rgba(255,255,255,0.3); transition: transform 0.1s ease; } .spin-btn:not(:disabled) { animation: idleglow 2.2s ease-in-out infinite; } @keyframes idleglow { 0%, 100% { box-shadow: 0 0 16px -2px var(--glow, var(--gold)), inset 0 2px 6px rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 30px 2px var(--glow, var(--gold)), inset 0 2px 6px rgba(255,255,255,0.4); } } .spin-btn:active { transform: scale(0.92); } .spin-btn:disabled { animation: spinwait 0.9s ease-in-out infinite; } @keyframes spinwait { 0%, 100% { opacity: 0.5; box-shadow: 0 0 10px -2px var(--glow, var(--gold)); } 50% { opacity: 0.85; box-shadow: 0 0 26px 2px var(--glow, var(--gold)); } } @media (max-width: 560px) { .machine-grid { grid-template-columns: 1fr; } .machine-card { min-height: 118px; } .machine-body { gap: 6px; } .machine-body .slot-stage { min-width: 0; } .slot-stage { padding: 22px 10px 14px; } .reels-window { padding: 6px; border-radius: 13px; } .reels { gap: 4px; padding: 6px; } .lever { flex-basis: 44px; height: 172px; } .lever-knob { width: 34px; height: 34px; } .lever-arm::after { height: 56px; } .slot-controls { flex-wrap: wrap; justify-content: center; } .spin-hint { order: 3; width: 100%; } } /* Central win celebration (counts up in the middle of the screen) */ .win-celebration { position: fixed; inset: 0; z-index: 180; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; opacity: 0; transition: opacity 0.3s ease; } .win-celebration.show { opacity: 1; } .win-celebration::before { content: ""; position: absolute; inset: 0; z-index: -1; /* light focus glow only — reels & win markers stay visible while counting */ background: radial-gradient(circle at 50% 46%, rgba(0,0,0,0.34), transparent 46%); } /* "+amount" flying from a win into the central total */ .fly-add { position: fixed; z-index: 190; pointer-events: none; font-weight: 900; font-size: clamp(1.3rem, 5.5vw, 2.2rem); color: #fff; text-shadow: 0 0 10px var(--glow, var(--accent)), 0 2px 5px rgba(0,0,0,0.75); transform: translate(0,0); opacity: 1; transition: transform 0.45s cubic-bezier(0.4,0,0.6,1), opacity 0.45s ease-in; } .wc-amount.wc-bump { animation: wcbump 0.26s ease; } @keyframes wcbump { 0%{transform:scale(1)} 45%{transform:scale(1.13)} 100%{transform:scale(1)} } .wc-tier { font-size: clamp(1.9rem, 9vw, 4rem); font-weight: 900; letter-spacing: 1px; opacity: 0; transform: scale(0.5); line-height: 1; } .wc-tier.show { animation: wcpop 0.5s cubic-bezier(0.2, 1.7, 0.4, 1) forwards; } @keyframes wcpop { to { opacity: 1; transform: scale(1); } } .wc-amount { font-size: clamp(2.8rem, 15vw, 6.4rem); font-weight: 900; color: var(--gold-strong); text-shadow: 0 0 20px var(--glow, var(--accent)), 0 3px 10px rgba(0, 0, 0, 0.75); line-height: 1; } .wc-coins { font-size: 1.5rem; opacity: 0.85; } .wc-tier.t-small { color: #d7ecdf; font-size: clamp(1.4rem, 6vw, 2.2rem); } .wc-tier.t-big { color: #ffe08a; } .wc-tier.t-mega, .wc-tier.t-super, .wc-amount.t-mega, .wc-amount.t-super { background: linear-gradient(90deg, #ffd24a, #ff7eb3, #6fe3ff, #ffd24a); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: huemove 2.5s linear infinite; } @keyframes huemove { to { background-position: 300% 0; } } .wc-tier.t-ultra { color: #fff; text-shadow: 0 0 22px var(--glow), 0 0 46px var(--machine-accent, var(--accent)), 0 2px 6px #000; animation: wcpop 0.5s cubic-bezier(0.2,1.7,0.4,1) forwards, ultraspin 2.2s linear infinite; } .wc-amount.t-ultra { animation: ultrathrob 0.7s ease-in-out infinite alternate; } @keyframes ultraspin { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } @keyframes ultrathrob { from { transform: scale(1); } to { transform: scale(1.06); } } .confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; } /* ===== Übertriebene Dopamin-Effekte (liebevolle Casino-Parodie) ===== */ /* Vollbild-Farbstrobe für Mega+ Gewinne */ #casino-strobe { position: fixed; inset: 0; z-index: 175; pointer-events: none; opacity: 0; mix-blend-mode: screen; } #casino-strobe.go { animation: strobe 0.6s steps(1) 2; } @keyframes strobe { 0% { opacity: 0; background: #ff2e88; } 12% { opacity: .7; background: #ffe24a; } 25% { opacity: .7; background: #2effe1; } 37% { opacity: .7; background: #8a5cff; } 50% { opacity: .7; background: #ff6b3d; } 62% { opacity: .7; background: #5aff7a; } 75% { opacity: .7; background: #ff2eff; } 87% { opacity: .7; background: #fff; } 100% { opacity: 0; background: #ff2e88; } } /* Expanding shockwave rings */ #shockwave, #shockwave2 { position: fixed; left: 50%; top: 44%; width: 24px; height: 24px; border-radius: 50%; border: 8px solid var(--accent-strong); z-index: 185; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0); } #shockwave2 { border-color: #7ec8ff; } #shockwave.go, #shockwave2.go { animation: shockwave 0.75s ease-out; } @keyframes shockwave { 0% { opacity: 0.9; transform: translate(-50%,-50%) scale(0); border-width: 10px; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(38); border-width: 1px; } } /* Full-screen rainbow pulse */ #screen-rainbow { position: fixed; inset: 0; z-index: 173; pointer-events: none; opacity: 0; mix-blend-mode: overlay; background: linear-gradient(45deg, #ff004c, #ffb300, #00e676, #00b0ff, #d500f9, #ff004c); background-size: 400% 400%; } #screen-rainbow.go { animation: scrainbow 0.4s linear infinite, scrainbowfade 0.8s ease-in-out infinite alternate; } @keyframes scrainbow { to { background-position: 400% 0; } } @keyframes scrainbowfade { from { opacity: 0.18; } to { opacity: 0.5; } } /* Side light blasts and fake jackpot sirens */ #slot-side-lights { position: fixed; inset: 0; z-index: 176; pointer-events: none; opacity: 0; } #slot-side-lights i { position: absolute; top: 0; bottom: 0; width: 18vw; max-width: 180px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.62), transparent); filter: blur(10px); opacity: 0; } #slot-side-lights i:first-child { left: 0; } #slot-side-lights i:last-child { right: 0; transform: scaleX(-1); } #slot-side-lights.go { opacity: 1; } #slot-side-lights.go i { animation: sidelight 0.34s steps(1) infinite; } @keyframes sidelight { 0% { opacity: 0.1; background-color: rgba(255,40,120,0.2); } 33% { opacity: 0.9; background-color: rgba(255,225,60,0.24); } 66% { opacity: 0.55; background-color: rgba(80,220,255,0.24); } 100% { opacity: 0.15; } } #slot-sirens { position: fixed; left: 0; right: 0; top: 74px; height: 0; z-index: 197; pointer-events: none; opacity: 0; } #slot-sirens i { position: absolute; top: 0; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #ff2e55 18% 44%, transparent 68%); box-shadow: 0 0 28px #ff2e55, 0 0 56px rgba(255,46,85,0.6); } #slot-sirens i:first-child { left: 18px; } #slot-sirens i:last-child { right: 18px; background: radial-gradient(circle, #fff 0 12%, #2ecbff 18% 44%, transparent 68%); box-shadow: 0 0 28px #2ecbff, 0 0 56px rgba(46,203,255,0.6); } #slot-sirens.go { opacity: 1; } #slot-sirens.go i { animation: sirenSpin 0.42s linear infinite; } @keyframes sirenSpin { from { transform: rotate(0deg) scale(0.92); filter: brightness(1); } 50% { transform: rotate(180deg) scale(1.18); filter: brightness(1.6); } to { transform: rotate(360deg) scale(0.92); filter: brightness(1); } } #slot-money-ticker { position: fixed; left: 0; right: 0; top: 12px; z-index: 198; pointer-events: none; display: flex; gap: 28px; width: max-content; min-width: 200vw; padding: 7px 0; background: linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.52), rgba(0,0,0,0.0)); color: #ffe58a; font-weight: 950; font-size: clamp(0.82rem, 2.8vw, 1.25rem); text-shadow: 0 0 10px var(--accent-strong), 0 2px 4px #000; opacity: 0; transform: translateX(0); } #slot-money-ticker.go { animation: tickerRush 1.45s linear; } @keyframes tickerRush { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50vw); } } .coin-pop { position: fixed; z-index: 193; pointer-events: none; font-size: clamp(1.35rem, 5vw, 2.4rem); transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgba(0,0,0,0.42)); animation: coinpop 1.08s cubic-bezier(0.16, 0.82, 0.28, 1) forwards; } @keyframes coinpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); } 18% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.22), calc(-50% + var(--dy) * 0.78)) scale(1.15) rotate(calc(var(--rot) * 0.4)); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 260px)) scale(0.58) rotate(var(--rot)); } } #reels-window.payblast { animation: payblast 0.5s steps(1) 1; } @keyframes payblast { 0% { filter: brightness(1); } 18% { filter: brightness(2.15) saturate(1.6); } 34% { filter: brightness(0.85) saturate(1.2); } 52% { filter: brightness(1.75) saturate(1.5); } 100% { filter: brightness(1); } } .slot-stage.neon-suck { animation: neonSuck 0.62s ease; } @keyframes neonSuck { 0% { box-shadow: 0 0 30px -4px var(--glow, var(--gold)), 0 24px 44px rgba(0,0,0,0.42), inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -24px 38px rgba(0,0,0,0.35); } 42% { box-shadow: 0 0 48px 8px var(--glow, var(--gold)), 0 0 86px rgba(var(--accent-rgb), 0.24), 0 24px 44px rgba(0,0,0,0.42), inset 0 0 38px rgba(255,255,255,0.16); } 100% { box-shadow: 0 0 30px -4px var(--glow, var(--gold)), 0 24px 44px rgba(0,0,0,0.42), inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -24px 38px rgba(0,0,0,0.35); } } .win-celebration.dopamine-on::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/slots/algae/coins-overlay-cut.webp") center / cover no-repeat, radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.22), transparent 30%), repeating-conic-gradient(from 0deg, rgba(255,255,255,0.11) 0deg 5deg, transparent 5deg 16deg); opacity: 0.32; animation: dopamineRays 5s linear infinite; -webkit-mask: radial-gradient(circle, #000 0 48%, transparent 70%); mask: radial-gradient(circle, #000 0 48%, transparent 70%); } @keyframes dopamineRays { to { transform: rotate(360deg); } } /* Herausspringende Hype-Wörter */ .hype-word { position: fixed; z-index: 195; pointer-events: none; font-weight: 900; font-size: clamp(2rem, 9vw, 4.5rem); color: #fff; white-space: nowrap; text-shadow: 0 0 18px var(--gold-strong, var(--accent-strong)), 0 0 36px #ff6b3d, 0 2px 6px #000; letter-spacing: 1px; transform: translate(-50%,-50%) scale(0.3) rotate(var(--rot,0deg)); opacity: 0; } .hype-word.go { animation: hypepop 0.95s cubic-bezier(0.2,1.7,0.4,1) forwards; } @keyframes hypepop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(var(--rot,0deg)); } 22% { opacity: 1; transform: translate(-50%,-50%) scale(1.3) rotate(var(--rot,0deg)); } 70% { opacity: 1; transform: translate(-50%,-150%) scale(1) rotate(var(--rot,0deg)); } 100% { opacity: 0; transform: translate(-50%,-230%) scale(0.9) rotate(var(--rot,0deg)); } } /* Explodierende Gewinn-Emojis */ .emoji-bit { position: fixed; z-index: 192; pointer-events: none; font-size: 30px; will-change: transform, opacity; } /* Zoom-Punch auf die Bühne */ .slot-stage.zoompunch { animation: zoompunch 0.42s ease; } @keyframes zoompunch { 0%{transform:scale(1)} 28%{transform:scale(1.07)} 100%{transform:scale(1)} } /* Satirisches "Glücks"-Popup – rein kosmetisch */ #luck-popup { position: fixed; left: 50%; bottom: 92px; z-index: 178; pointer-events: none; opacity: 0; background: linear-gradient(135deg, #2a1a4a, #3a2a1a); border: 1px solid var(--gold, var(--accent)); color: #ffe9b0; font-weight: 700; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 18px rgba(var(--accent-rgb), 0.45); font-size: 0.95rem; white-space: nowrap; transform: translateX(-50%) translateY(20px); } #luck-popup.go { animation: luckpop 3.2s ease forwards; } @keyframes luckpop { 0% { opacity: 0; transform: translateX(-50%) translateY(20px); } 12% { opacity: 1; transform: translateX(-50%) translateY(0); } 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } } /* Pop when a cell lights up during the sequential win "trace" */ .cell.trace-pop { animation: tracepop 0.32s ease; } @keyframes tracepop { 0%{transform:scale(1)} 35%{transform:scale(1.18)} 100%{transform:scale(1)} } /* Combo counter that climbs as more connected wins reveal in sequence */ #combo-badge { position: fixed; left: 50%; top: 21%; z-index: 196; pointer-events: none; opacity: 0; font-weight: 900; font-size: clamp(1.4rem, 6vw, 2.7rem); color: #fff; text-shadow: 0 0 16px var(--gold-strong, var(--accent-strong)), 0 2px 6px #000; transform: translate(-50%, 0) scale(0.5); transition: opacity 0.35s ease; /* fades out when .go (and its animation) is removed */ } #combo-badge.go { animation: combopop 0.6s cubic-bezier(0.2,1.7,0.4,1) forwards; } @keyframes combopop { 0% { opacity: 0; transform: translate(-50%,0) scale(0.5); } 30% { opacity: 1; transform: translate(-50%,0) scale(1.25); } 100% { opacity: 1; transform: translate(-50%,0) scale(1); } } /* Rapid screen flicker on EVERY win — the constant-flashing casino-parody drip */ #win-flash { position: fixed; inset: 0; z-index: 174; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 46%, rgba(255,240,180,0.5), transparent 62%); } #win-flash.go { animation: winflick 0.46s steps(1) 1; } @keyframes winflick { 0%{opacity:0} 12%{opacity:.75} 24%{opacity:0} 38%{opacity:.6} 52%{opacity:0} 66%{opacity:.45} 80%{opacity:0} 100%{opacity:0} } /* Quick brightness pop on the reel window with each win */ #reels-window.flickwin { animation: reelflick 0.4s steps(1) 1; } @keyframes reelflick { 0%{filter:brightness(1)} 20%{filter:brightness(1.6)} 40%{filter:brightness(1)} 60%{filter:brightness(1.4)} 100%{filter:brightness(1)} } /* Slots auto-roll toggle */ .auto-roll-btn { margin-left: 8px; padding: 3px 9px; border-radius: 999px; cursor: pointer; font-size: 0.72rem; font-weight: 800; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: var(--text); } .auto-roll-btn.active { background: linear-gradient(135deg, var(--good), var(--good-deep)); color: var(--good-ink); border-color: var(--good); box-shadow: 0 0 10px rgba(var(--good-rgb), 0.5); } /* Shared city map */ .city-wrap { max-width: 640px; margin: 0 auto; padding: 12px; } .city-map-box { margin: 12px 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #2a2e32; box-shadow: inset 0 0 30px rgba(0,0,0,0.4); position: relative; } #city-map { width: 100%; height: auto; display: block; touch-action: none; min-height: 320px; } /* Overlay controls on the real-city map. */ .city-back-btn { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(0,0,0,0.55); color: var(--accent-strong); border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 0.85rem; cursor: pointer; } .city-zoom { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .city-zoom button { width: 40px; height: 40px; border-radius: 10px; cursor: pointer; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-size: 1.15rem; font-weight: 800; line-height: 1; } .city-zoom button:active { background: rgba(var(--accent-rgb), 0.3); } .dist text { user-select: none; pointer-events: none; } .lot text { user-select: none; pointer-events: none; } .city-detail { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px; min-height: 56px; } .cd-head { font-size: 1.1rem; margin-bottom: 8px; } .cd-row { font-size: 0.9rem; opacity: 0.9; margin: 3px 0; } .cd-btn { width: 100%; margin-top: 10px; } .cd-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; } .cd-build { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.9rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: #e8f0ea; } .cd-build:hover { background: rgba(255,255,255,0.13); } .cd-build small { font-weight: 600; font-size: 0.65rem; opacity: 0.7; } .cd-section { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; } .cd-section:first-of-type { border-top: none; margin-top: 0; } .cd-sub { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; opacity: 0.6; text-transform: uppercase; margin-bottom: 4px; } .cd-pnl { margin: 6px 0; font-size: 0.85rem; } .cd-pnl > div { display: flex; justify-content: space-between; padding: 2px 0; } .cd-pnl .cd-net { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 3px; padding-top: 4px; font-weight: 800; } .cd-pnl .pos { color: var(--good); } .cd-pnl .neg { color: var(--bad-text); } .cd-product { margin-top: 10px; padding: 10px; border-radius: 10px; background: rgba(var(--info-rgb), 0.1); border: 1px solid rgba(var(--info-rgb), 0.3); } .cd-prod-head { font-size: 0.85rem; margin-bottom: 8px; font-weight: 800; } .cd-prodbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 6px; text-align: left; } .cd-prodbtn small { font-weight: 600; font-size: 0.68rem; opacity: 0.8; } /* Active-buff strip in the topbar */ .buff-strip { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: center; } .buff-chip { font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: rgba(var(--good-rgb), 0.16); border: 1px solid var(--good); color: var(--good-text); } .buff-chip small { opacity: 0.75; font-weight: 600; } /* Marktplatz */ .mkt-item, .mkt-offer { background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px; margin-bottom: 8px; } .mkt-item-head { font-size: 0.95rem; margin-bottom: 8px; } .mkt-item-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .mkt-item-actions .btn-primary { flex: 0 0 auto; } .mkt-sell { display: flex; gap: 6px; align-items: center; margin-left: auto; } .mkt-price { width: 90px; padding: 7px; border-radius: 8px; } .mkt-list, .mkt-buy, .mkt-unlist { padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: var(--text); } .mkt-buy { background: linear-gradient(135deg, var(--good), var(--good-deep)); color: var(--good-ink); border: none; } .mkt-offer { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .mkt-offer-buy { display: flex; gap: 8px; align-items: center; white-space: nowrap; } .cd-toggle { width: 100%; margin-top: 8px; padding: 9px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.85rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); color: var(--text); } .cd-toggle.on { background: rgba(var(--good-rgb), 0.16); border-color: var(--good); color: var(--good-text); } .cd-collect { width: 100%; margin-bottom: 8px; animation: collectpulse 1.2s ease-in-out infinite; } @keyframes collectpulse { 0%,100%{ box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); } 50%{ box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6); } } .city-landprice { text-align: center; font-size: 0.85rem; opacity: 0.85; margin: 4px 0 0; } .city-landprice b { color: var(--gold-strong, var(--accent-strong)); } .bank-input-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .bank-input-row input { flex: 1; max-width: 60%; padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 1rem; } .stat-row .neg { color: var(--bad-text); } /* Börse / stock market */ .stk-news { margin: 8px 0; min-height: 0; } .stk-news-item { font-size: 0.78rem; opacity: 0.85; padding: 2px 0; } .stk-list { display: flex; flex-direction: column; gap: 6px; } .stk-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 10px; cursor: pointer; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); color: #e8f0ea; } .stk-row.sel { border-color: var(--gold, var(--accent)); background: rgba(var(--accent-rgb), 0.08); } .stk-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .stk-id b { font-size: 0.95rem; } .stk-id span { font-size: 0.7rem; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spark { width: 64px; height: 22px; flex-shrink: 0; } .stk-px { text-align: right; display: flex; flex-direction: column; min-width: 84px; } .stk-px span { font-size: 0.72rem; } .stk-px .up, .stk-pos-pnl.up { color: var(--good); } .stk-px .down, .stk-pos-pnl.down { color: var(--bad-text); } .stk-trade { margin: 12px 0; padding: 12px; border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); position: relative; } .stk-detclose { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text); opacity: 0.6; cursor: pointer; font-size: 0.85rem; } .stk-detprice { font-size: 1.4rem; font-weight: 900; margin: 2px 0 8px; } .stk-detprice .up { color: var(--good); font-size: 0.9rem; } .stk-detprice .down { color: var(--bad-text); font-size: 0.9rem; } .stk-bigchart { width: 100%; height: 130px; display: block; background: rgba(0,0,0,0.25); border-radius: 8px; margin-bottom: 10px; } .stk-bigchart-empty { text-align: center; padding: 30px; } .stk-axis { fill: rgba(255,255,255,0.45); font-size: 8px; } .stk-detpos-wrap { margin-bottom: 10px; } .stk-detpos { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.08); } .stk-detpos .stk-close { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; background: linear-gradient(135deg,#ff8a5c,#e0563b); border: none; color: #2a1206; font-weight: 800; font-size: 0.8rem; } .stk-detpos .stk-close small { font-weight: 600; opacity: 0.8; } .stk-trade.hidden { display: none; } .stk-trade-head { font-weight: 700; margin-bottom: 6px; } .stk-lev-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; } .stk-lev { padding: 5px 11px; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 0.85rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--text); } .stk-lev.on { background: var(--gold, var(--accent)); color: #1a1209; border-color: var(--gold-strong, var(--accent-strong)); } .stk-actions { display: flex; gap: 8px; } .stk-long, .stk-short { flex: 1; padding: 11px; border-radius: 10px; cursor: pointer; font-weight: 800; border: none; color: #fff; } .stk-long { background: linear-gradient(135deg, var(--good), var(--good-deep)); color: var(--good-ink); } .stk-short { background: linear-gradient(135deg, var(--bad-text), #c2334a); } .stk-portfolio { display: flex; flex-direction: column; gap: 6px; } .stk-pos { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); } .stk-pos-id { flex: 1; } .stk-pos-pnl { font-weight: 800; min-width: 78px; text-align: right; } .stk-close { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.8rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #e8f0ea; } .stk-close small { font-size: 0.62rem; opacity: 0.7; } /* Floating "+N" when clicking the work button */ .click-float { position: fixed; z-index: 195; pointer-events: none; transform: translate(-50%, 0); font-weight: 900; font-size: 1.3rem; color: var(--good); text-shadow: 0 2px 5px rgba(0,0,0,0.6); animation: clickfloat 0.8s ease-out forwards; } @keyframes clickfloat { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -60px) scale(1.3); } } /* Leaderboard category tabs */ .lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .lb-tab { flex: 1 1 auto; padding: 7px 10px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text); font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .lb-tab.active { background: linear-gradient(135deg, var(--gold, var(--accent)), #c8920a); color: #1a1209; border-color: var(--gold-strong, var(--accent-strong)); } /* Slots session strip — win/loss streak + recent-spin dots */ .slots-session { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 14px 0; min-height: 18px; } .slots-session.hidden { display: none; } .ss-streak { font-size: 0.8rem; font-weight: 800; white-space: nowrap; } .ss-streak.ss-hot { color: #ff9b54; animation: ssPulse 0.8s ease-in-out infinite alternate; } .ss-streak.ss-cold { color: #7ec8ff; } @keyframes ssPulse { from { transform: scale(1); } to { transform: scale(1.08); } } .ss-dots { display: flex; gap: 4px; flex-wrap: nowrap; } .ss-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.13); flex-shrink: 0; } .ss-dot.ss-win { background: var(--good); box-shadow: 0 0 6px rgba(var(--good-rgb), 0.7); } .ss-dot.ss-partial { background: var(--accent); } .ss-dot.ss-loss { background: rgba(255,255,255,0.14); } /* Paytable modal */ .paytable-modal { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; padding: 20px; } .paytable-card { width: 100%; max-width: 460px; max-height: 80vh; overflow-y: auto; background: var(--felt); border: 1px solid var(--gold); border-radius: var(--radius); padding: 22px; } .paytable-card h3 { color: var(--gold-strong); margin-top: 0; } .pt-note { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 10px; } .pt-note b { color: var(--gold-strong); } .pt-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; margin-bottom: 4px; border-radius: 10px; background: rgba(0,0,0,0.22); font-size: 0.85rem; } .pt-row.pt-scatter { background: rgba(var(--accent-rgb), 0.12); } .pt-sym { font-size: 1.9rem; min-width: 44px; text-align: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .pt-symbol-img { width: 42px; height: 42px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45)); } .pt-vals { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; } .pt-vals .pt-cnt { color: #1c1c1c; background: var(--gold); font-weight: 800; font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; margin-right: 3px; } .paytable-card .btn-primary { width: 100%; margin-top: 14px; } /* ============================================================ Slots PvP ============================================================ */ .pvp-entry { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin: 4px 0 14px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--gold); color: #fff; font-weight: 800; font-size: 1.05rem; background: linear-gradient(160deg, #5a2a8a, #3a1568); box-shadow: var(--shadow); } .pvp-entry small { font-weight: 500; font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); } .pvp-entry:active { transform: scale(0.98); } #pvp-hud { position: relative; display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--gold); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; box-shadow: var(--shadow); } .pvp-side { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; } .pvp-side.you .pvp-pchips { color: var(--gold-strong); } .pvp-side.opp .pvp-pchips { color: #ff9d8a; } .pvp-pname { font-size: 0.8rem; font-weight: 700; max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pvp-pchips { font-size: 1.25rem; font-weight: 800; } .pvp-pspins { font-size: 0.68rem; color: var(--text-dim); } .pvp-vs { font-weight: 900; color: var(--gold-strong); font-size: 0.9rem; } .pvp-quit { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--danger); background: #2a0e0a; color: var(--bad-text); font-weight: 800; line-height: 1; } .pvp-room-code { font-size: 1.1rem; margin: 8px 0; } .pvp-room-code b { color: var(--gold-strong); letter-spacing: 3px; font-size: 1.4rem; } .pvp-room-players { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .pvp-room-player { background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 10px; font-weight: 700; } #pvp-room .btn-primary, .pvp-result-card .btn-primary { width: 100%; margin-top: 10px; } #pvp-result { display: flex; align-items: center; justify-content: center; min-height: 62vh; } .pvp-result-card { text-align: center; max-width: 420px; width: 100%; } #pvp-result-icon { font-size: 3.6rem; } .pvp-result-detail { color: var(--text-dim); line-height: 1.8; margin: 12px 0; } .pvp-result-detail b { color: var(--gold-strong); } .pvp-win-msg { color: var(--good-text); font-weight: 800; font-size: 1.25rem; margin-top: 10px; } .pvp-lose-msg { color: var(--bad-text); font-weight: 700; margin-top: 10px; } /* PvP mode-select grid */ .pvp-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; } .pvp-mode-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; background: linear-gradient(160deg, var(--felt-light), var(--felt)); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow); transition: transform 0.12s, border-color 0.15s; text-align: center; cursor: pointer; } .pvp-mode-card:hover { border-color: var(--gold); } .pvp-mode-card:active { transform: scale(0.97); } .pvp-mode-icon { font-size: 2.4rem; } .pvp-mode-name { font-weight: 800; font-size: 1.05rem; } .pvp-mode-sub { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; } /* Bot chip update flash */ @keyframes pvpChipFlash { 0% { color: var(--gold-strong); transform: scale(1); } 30% { color: var(--good-text); transform: scale(1.18); } 100% { color: var(--gold-strong); transform: scale(1); } } .pvp-chip-flash { animation: pvpChipFlash 0.6s ease; } /* ---------------- Blackjack ---------------- */ .bj-wrap { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 620px; margin: 0 auto; padding-bottom: var(--sp-6); } /* ---------------- Der Tisch ---------------- Filz mit Bande statt drei Kaesten untereinander. Die Farben kommen aus den --felt-Tokens, damit der Tisch in jedem Theme passt: gruen im Klassik, blau im Mitternacht, fast schwarz im Neon. */ .bj-table { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); min-height: 380px; padding: var(--sp-6) var(--sp-4) var(--sp-5); margin: var(--sp-3) 12px 0; border-radius: var(--r-xl); background: radial-gradient(120% 80% at 50% 0%, var(--felt-light), transparent 62%), radial-gradient(100% 70% at 50% 110%, rgba(0, 0, 0, 0.4), transparent 60%), var(--felt); /* Die Bande aus Schatten statt aus border-image: ein Rahmen mit Verlauf folgt dem border-radius nicht und brach an den Ecken auf. Von innen nach aussen: Haarlinie, dunkle Bande, aeussere Haarlinie. */ box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 2px rgba(var(--accent-rgb), 0.3), 0 0 0 12px rgba(0, 0, 0, 0.55), 0 0 0 13px rgba(var(--accent-rgb), 0.16), var(--e-3); } /* Die aufgedruckte Hausregel. Steht auf jedem echten Tisch und beantwortet die Frage, die sonst im Cheatsheet nachgeschlagen werden muss. */ .bj-felt-line { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: min(88%, 420px); text-align: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.13); pointer-events: none; user-select: none; transition: opacity var(--dur-2) var(--ease); } /* Wenn eine Meldung steht ("Verloren.", "Blackjack!"), tritt die aufgedruckte Hausregel zurueck. Sonst liegen beide Texte uebereinander. */ .bj-table:has(.bj-message.show) .bj-felt-line { opacity: 0; } .bj-dealer-area { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .bj-area-label { font-size: var(--fs-xs); font-weight: 800; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.12em; display: flex; align-items: center; gap: var(--sp-2); } .bj-value-chip { background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(var(--accent-rgb), 0.45); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 800; padding: 2px 10px; border-radius: var(--r-pill); } /* Kartenreihe. Die Karten ueberlappen leicht, wie auf der Hand. */ .bj-cards { display: flex; justify-content: center; gap: var(--sp-2); align-items: flex-start; min-height: 96px; } .bj-cards .bj-card + .bj-card { margin-left: -6px; } .bj-card { width: 64px; height: 92px; border-radius: var(--r-xs); background: linear-gradient(160deg, #ffffff, var(--card-face)); color: var(--card-black); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.6) inset; position: relative; font-family: Georgia, "Times New Roman", serif; flex-shrink: 0; /* Aus dem Kartenschlitten oben rechts hereingeschoben statt aus dem Nichts. */ animation: bjCardIn 0.26s var(--ease-out) backwards; } @keyframes bjCardIn { from { transform: translate(60px, -70px) rotate(14deg) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } } html.reduce-motion .bj-card { animation: none; } .bj-card.red { color: var(--card-red); } .bj-card-tl { position: absolute; top: 5px; left: 6px; font-size: 0.8rem; font-weight: 700; line-height: 1.1; } .bj-card-br { position: absolute; bottom: 5px; right: 6px; font-size: 0.8rem; font-weight: 700; line-height: 1.1; transform: rotate(180deg); } .bj-card-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .bj-card.face-down { background: linear-gradient(135deg, #1e5399 25%, #0d2750 100%); } .bj-card.face-down .bj-card-inner { position: absolute; inset: 5px; border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 5px; background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 8px); } /* ---------------- Eigene Haende ---------------- Beim Teilen stehen sie nebeneinander, damit man sieht, dass es zwei sind, und welche gerade dran ist. Vorher lagen sie untereinander und die aktive Hand war nur an einem Rahmen zu erkennen. */ .bj-player-hands { display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-3); width: 100%; flex-wrap: wrap; } .bj-hand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) var(--sp-3); border-radius: var(--r-md); border: 1px solid transparent; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .bj-hand.active { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(0, 0, 0, 0.22); box-shadow: 0 0 22px -6px rgba(var(--accent-rgb), 0.5); } .bj-player-hands .bj-hand:only-child { border-color: transparent; background: none; box-shadow: none; } .bj-hand-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .bj-hand-value { background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: var(--fs-sm); font-weight: 800; padding: 2px 10px; border-radius: var(--r-pill); letter-spacing: 0; } .bj-hand.active .bj-hand-value { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent-strong); } .bj-badge { background: rgba(var(--accent-rgb), 0.22); border: 1px solid rgba(var(--accent-rgb), 0.5); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 800; padding: 1px 7px; border-radius: var(--r-pill); } /* Einsatz als Chipstapel statt als Textzeile. */ .bj-hand-bet { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--sp-1); } .bj-chip-stack { position: relative; height: 26px; display: flex; justify-content: center; } .bj-chip-stack i { position: absolute; bottom: 0; width: 30px; height: 30px; border-radius: 50%; /* Heller Rand und die typischen Kerben am Chiprand. */ border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(0, 0, 0, 0.16), inset 0 0 0 5px rgba(255, 255, 255, 0.5); } .bj-hand-bet b { color: var(--accent-strong); font-size: var(--fs-sm); } .bj-hand-result { margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: 800; padding: 3px 12px; border-radius: var(--r-pill); } .bj-hand-result.win, .bj-hand-result.blackjack { color: var(--good-text); background: var(--good-soft); } .bj-hand-result.lose, .bj-hand-result.bust { color: var(--bad-text); background: var(--bad-soft); } .bj-hand-result.push { color: var(--text-dim); background: rgba(255, 255, 255, 0.08); } .bj-message { text-align: center; font-size: 1.1rem; font-weight: 800; color: var(--gold-strong); min-height: 1.6em; opacity: 0; transition: opacity 0.2s; } .bj-message.show { opacity: 1; } /* Controls wrapper */ .bj-controls-wrap { display: flex; flex-direction: column; gap: 12px; } /* Action buttons row */ .bj-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; } .bj-btn { padding: 14px 8px; border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: transform 0.1s, opacity 0.15s; } .bj-btn:active { transform: scale(0.96); } .bj-btn:disabled { opacity: 0.35; } .bj-btn-hit { background: linear-gradient(180deg, #5dbf7a, #2e8f50); color: #fff; } .bj-btn-stand { background: linear-gradient(180deg, var(--bad), var(--bad-deep)); color: #fff; } .bj-btn-double { background: linear-gradient(180deg, var(--gold-strong), var(--gold)); color: var(--accent-ink); } .bj-btn-split { background: linear-gradient(180deg, #5b8cde, #2d5fa8); color: #fff; } /* Done / play-again row */ .bj-done { text-align: center; } .bj-btn-again { width: 100%; } /* Bet area */ .bj-betting { display: flex; flex-direction: column; gap: 10px; } .bj-bet-row { display: flex; align-items: center; gap: 10px; } .bj-bet-display-wrap { flex: 1; text-align: center; background: rgba(0,0,0,0.3); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; } .bj-bet-display-wrap b { color: var(--gold-strong); font-size: 1.1rem; } .bj-chip-bar { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; } .bj-chip-btn { background: radial-gradient(circle at 38% 36%, #7a6a24, #4a3a0a); border: 2px solid var(--gold); color: var(--gold-strong); font-weight: 800; font-size: 0.85rem; border-radius: 50%; width: 46px; height: 46px; box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1); transition: transform 0.1s; } .bj-chip-btn:active { transform: scale(0.92); } .bj-deal-btn { width: 100%; } /* ---------------- Responsive ---------------- Frueher standen hier zwei feste Spalten ab 700px und eine Mindesthoehe von 150px je Kachel. Beides stammte aus dem alten Raster und hat das neue auto-fill ausgehebelt: auf dem iPad im Querformat blieben es zwei sehr breite Kacheln, statt die Flaeche zu nutzen. */ @media (max-width: 480px) { .poker-actions { grid-template-columns: 1fr; } .seat { width: 78px; } .seat-plate { min-width: 70px; padding: 4px 6px; } .card { width: 34px; height: 48px; } .card .cr { font-size: 0.9rem; } .card.mini { width: 24px; height: 34px; } .felt { max-height: 56vh; } .bj-actions { grid-template-columns: 1fr 1fr; } } /* ============================================================ Wirtschaft – Arbeiten & Unternehmen ============================================================ */ /* ── Arbeiten (Klicker) ── */ .work-wrap { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; } /* ---------------- Arbeiten: Kopf ---------------- Was habe ich heute schon verdient und wie viel geht noch. Stand vorher als zwei nackte Zeilen ganz unten, unter der laufenden Aufgabe. */ .wk-head { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%), var(--surface); } @media (min-width: 560px) { .wk-head { grid-template-columns: 1fr auto; align-items: center; } } .wk-label { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); } .wk-amount { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-1) 0; } .wk-amount b { font-family: var(--font-num); font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 900; line-height: 1; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .wk-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } .wk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width var(--dur-3) var(--ease-out); } .wk-sub { display: block; margin-top: var(--sp-1); color: var(--text-dim); font-size: var(--fs-xs); } .wk-head-side { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .wk-mini { flex: 1 1 130px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-sunken); border: 1px solid var(--line-neutral); } .wk-mini b { display: block; font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; } .wk-mini small { display: block; margin-top: 2px; color: var(--text-mute); font-size: var(--fs-xs); line-height: 1.3; } /* ---------------- Arbeiten: die Schichten ---------------- Ganze Karte ist der Knopf. Vorher lag der Knopf rechts daneben, und man traf die Karte, ohne dass etwas passierte. */ .work-jobs { display: grid; gap: var(--sp-2); } .work-job { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; width: 100%; padding: var(--sp-3); text-align: left; overflow: hidden; border-radius: var(--r-md); border: 1px solid hsl(var(--h, 40) 45% 62% / 0.22); background: linear-gradient(150deg, hsl(var(--h, 40) 48% 34% / 0.24), transparent 58%), var(--surface); color: var(--text); transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .work-job:hover:not(:disabled) { border-color: hsl(var(--h, 40) 55% 66% / 0.5); } .work-job:active:not(:disabled) { transform: scale(0.99); } .work-job.is-busy { opacity: 0.62; cursor: default; } .work-job-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); font-size: 1.45rem; background: hsl(var(--h, 40) 50% 46% / 0.24); border: 1px solid hsl(var(--h, 40) 50% 66% / 0.22); } .work-job-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .work-job-head b { font-size: var(--fs-lg); font-weight: 800; } .work-job-hint { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.3; } .work-job-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; } .work-job-pay { font-weight: 900; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .work-job-xp { font-size: var(--fs-xs); color: var(--good-text); font-weight: 700; } .work-job-cta { margin-top: var(--sp-1); padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line-neutral); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; } .work-job:not(.is-busy) .work-job-cta { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-strong); } /* Auf schmalen Geraeten passen drei Spalten nicht: Lohn und Knopf rutschten unter das Symbol nach links. Dort wird daraus eine zweite Zeile ueber die volle Breite, rechtsbuendig. */ @media (max-width: 480px) { .work-job { grid-template-columns: auto 1fr; row-gap: var(--sp-2); } .work-job-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-3); } .work-job-cta { margin-top: 0; } } /* Restliche Wartezeit als schrumpfender Streifen am unteren Kartenrand. */ .work-job-cool { position: absolute; left: 0; bottom: 0; height: 3px; background: hsl(var(--h, 40) 60% 60% / 0.7); transition: width 1s linear; } /* ---------------- Arbeiten: Trinkgeld (Klick-Job) ---------------- Die Notfallhilfe fuer ganz blanke Spieler. Steht deshalb zugeklappt unten und nimmt dem Rest nicht mehr den Platz weg. */ .wk-clicker { border-radius: var(--r-md); border: 1px solid var(--line-neutral); background: var(--surface); overflow: hidden; } .wk-clicker > summary { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); cursor: pointer; font-weight: 700; list-style: none; } .wk-clicker > summary::-webkit-details-marker { display: none; } .wk-clicker > summary::after { content: "▾"; position: absolute; right: var(--sp-4); color: var(--text-mute); } .wk-clicker > summary { position: relative; } .wk-clicker[open] > summary::after { content: "▴"; } .wk-clicker > summary small { color: var(--text-dim); font-weight: 500; font-size: var(--fs-xs); } .wk-clicker-body { padding: 0 var(--sp-3) var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .wk-upgrade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; margin-top: var(--sp-2); } .wk-upgrade > div { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-sunken); border: 1px solid var(--line-neutral); } .wk-upgrade > div b { display: block; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .wk-upgrade > button { grid-column: 1 / -1; } .work-task-panel { border-color: rgba(var(--info-rgb), 0.28); background: rgba(var(--info-rgb), 0.07); } /* Chips zum Wechseln. Farben wie am Tisch, damit der Wert am Aussehen haengt und nicht nur an der Zahl. */ .work-chip-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin: var(--sp-3) 0; } .work-chip { width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); font-size: 0.78rem; font-weight: 900; color: #10161c; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.14), inset 0 0 0 7px rgba(255,255,255,0.55), 0 4px 10px rgba(0,0,0,0.5); transition: transform var(--dur-1) var(--ease); } .work-chip:active { transform: scale(0.93); } .work-chip:nth-child(1) { background: #8e44ad; color: #fff; } .work-chip:nth-child(2) { background: #2980b9; color: #fff; } .work-chip:nth-child(3) { background: #27ae60; color: #fff; } .work-chip:nth-child(4) { background: #ecf0f1; } /* Wettscheine zum Nachrechnen. Feste Zeichenbreite, sonst vergleicht man Zahlen, die unterschiedlich breit stehen. */ .work-slips { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-3) 0; } .work-slip { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); background: var(--surface-sunken); border: 1px solid var(--line-neutral); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); } /* Auswahlfragen zweispaltig, damit lange Betraege nicht umbrechen. */ .work-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-2); } .work-choice .work-crate-btn { font-variant-numeric: tabular-nums; } .work-task-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .work-task-head b { color: #bcd8f0; } .work-task-head p { margin: 3px 0 0; } .work-task-head > span { white-space: nowrap; color: var(--accent-strong); font-size: 0.82rem; font-weight: 800; } .work-task-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .work-task-buttons button small { display: block; opacity: .72; font-size: .68rem; margin-top: 2px; } .work-task-actions { display: grid; grid-template-columns: .7fr 1fr; gap: 8px; margin-top: 8px; } .work-input-line { margin-top: 8px; color: rgba(232,236,242,0.68); font-size: .82rem; } .work-input-line b { color: var(--accent-strong); } .work-route-target, .work-code-display { margin-top: 10px; padding: 10px 12px; border-radius: 8px; text-align: center; background: rgba(0,0,0,0.22); color: var(--accent-strong); font-weight: 900; letter-spacing: 0.06em; } .work-code-input { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: #232833; color: #fff; text-align: center; font-weight: 800; } .work-switches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 10px; } .work-switch { padding: 10px 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.06); color: var(--text-dim); font-weight: 800; } .work-switch.on { background: rgba(102,192,122,0.18); color: var(--good-text); border-color: rgba(102,192,122,0.45); } .work-meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 10px; } .work-meter-slot { min-height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.055); color: var(--text-dim); font-weight: 900; } .work-meter-slot.target { background: rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.62); color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12) inset; } .work-scan-grid, .work-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .work-scan-card { min-height: 48px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.055); font-size: 1.35rem; } .work-keypad-screen { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.26); color: var(--good-text); text-align: center; font-weight: 900; letter-spacing: .18em; } .work-key { padding: 12px 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.06); color: #fff; font-weight: 900; } @media (max-width: 560px) { .work-job { grid-template-columns: auto 1fr; } .work-job .chip-btn { grid-column: 1 / -1; width: 100%; } .work-task-buttons { grid-template-columns: 1fr; } } .clicker-area { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0 8px; } .clicker-btn { font-size: 5rem; line-height: 1; background: radial-gradient(circle at 38% 36%, var(--felt-light), var(--felt-dark)); border: 3px solid rgba(var(--accent-rgb), 0.45); border-radius: 50%; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 0 0 rgba(var(--accent-rgb), 0); transition: transform 0.08s ease, box-shadow 0.12s ease; user-select: none; } .clicker-btn:active, .clicker-btn.clicker-press { transform: scale(0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 0 6px rgba(var(--accent-rgb), 0.18); } .clicker-sub { font-size: 0.9rem; color: var(--text-dim); font-weight: 600; } /* Floating "+N" popup on click */ .clicker-popup { position: fixed; pointer-events: none; z-index: 200; font-size: 1.4rem; font-weight: 900; color: var(--gold-strong); text-shadow: 0 2px 6px rgba(0,0,0,0.7); transform: translate(-50%, -50%); animation: clickpop 0.75s ease forwards; } @keyframes clickpop { 0% { opacity: 1; transform: translate(calc(-50% + var(--drift, 0px)), -50%) scale(0.8); } 30% { opacity: 1; transform: translate(calc(-50% + var(--drift, 0px)), -80%) scale(1.2); } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -130%) scale(0.9); } } /* ── Unternehmen ── */ .biz-wrap { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; } .biz-collect-panel {} .biz-pending-val { color: var(--gold-strong); font-size: 1.1rem; } .biz-list { display: flex; flex-direction: column; gap: 10px; } .biz-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(0,0,0,0.25); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: var(--radius); box-shadow: var(--shadow); } .biz-card-icon { font-size: 2.2rem; flex-shrink: 0; width: 44px; text-align: center; } .biz-card-info { flex: 1; min-width: 0; } .biz-card-name { font-weight: 800; font-size: 1rem; } .biz-card-sub { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; font-size: 0.78rem; } .biz-owned { color: var(--text-dim); } .biz-income { color: var(--gold-strong); font-weight: 700; } .biz-card-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .biz-cost { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; } .biz-buy-btn { padding: 8px 16px; border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 800; color: var(--accent-ink); background: linear-gradient(180deg, var(--gold-strong), var(--gold)); box-shadow: 0 2px 8px rgba(0,0,0,0.3); white-space: nowrap; } .biz-buy-btn:active { transform: scale(0.96); } @media (max-width: 480px) { .biz-card { padding: 12px; gap: 10px; } .biz-card-icon { font-size: 1.8rem; width: 36px; } } /* ============================================================ Roulette ============================================================ */ .roulette-wrap { max-width: 520px; margin: 0 auto; padding: 0 12px 80px; } .roulette-wheel-area { display: flex; justify-content: center; margin: 6px 0 10px; } #roulette-canvas { border-radius: 50%; box-shadow: 0 6px 28px rgba(0,0,0,0.6); } /* Result banner */ .rt-result { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 8px; min-height: 52px; animation: fade 0.3s ease; } .rt-result-num { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } .rt-result-color { font-weight: 700; font-size: 1rem; letter-spacing: 1px; } .rt-net-win { font-size: 1.15rem; font-weight: 800; } .rt-win { color: var(--good); } .rt-lose { color: #f87171; } /* Colors for numbers */ .rt-hist-red { background: #b52e2e; color: #fff; } .rt-hist-black { background: #181818; color: #fff; } .rt-hist-green { background: #1a8c3c; color: #fff; } /* History row */ .rt-history-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; overflow-x: auto; } .rt-history { display: flex; gap: 4px; } .rt-hist-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; } /* Hot/Cold board — satirical nod to the gambler's fallacy */ .rt-hotcold { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; padding: 8px 12px; background: rgba(0,0,0,0.22); border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 10px; } .rt-hotcold.hidden { display: none; } .rt-hc-col { display: flex; align-items: center; gap: 6px; } .rt-hc-label { font-size: 0.78rem; font-weight: 800; white-space: nowrap; } .rt-hc-hot { color: #ff9b54; } .rt-hc-cold { color: #7ec8ff; } .rt-hc-nums { display: flex; gap: 4px; } .rt-hc-note { flex-basis: 100%; font-size: 0.66rem; opacity: 0.55; font-style: italic; } /* Placed bets strip */ .rt-placed-bets { min-height: 34px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 8px; } .rt-bet-tag { background: rgba(var(--accent-rgb), 0.13); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; } .rt-bet-total { font-weight: 700; margin-left: auto; font-size: 0.9rem; } /* Die Chip-Auswahl steht weiter unten bei der Bedienleiste; die alte Reiter-Fassung ist entfallen. */ /* ---------------- Tableau ---------------- Ein DOM, zwei Layouts. Jede Zelle traegt ihre Position fuer beide Faelle als Variablen (--lr/--lc quer, --pr/--pc hochkant); hier wird nur entschieden, welche gilt. */ .rt-table { user-select: none; margin-bottom: var(--sp-3); font-size: 0.82rem; } .rt-board { display: grid; gap: 3px; margin-bottom: 3px; } .rt-cell { display: grid; place-items: center; padding: 9px 3px; min-height: 38px; border-radius: 5px; cursor: pointer; text-align: center; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.14); transition: filter var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1); position: relative; } .rt-cell:active { transform: scale(0.94); } .rt-cell:hover { filter: brightness(1.28); } .rt-zero { background: #1a8c3c; color: #fff; } .rt-r { background: #b52e2e; color: #fff; } .rt-b { background: rgba(18, 18, 18, 0.88); color: #fff; border-color: rgba(255, 255, 255, 0.18); } .rt-col { background: rgba(0, 0, 0, 0.45); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.3); font-size: 0.72rem; } .rt-dozen { background: rgba(0, 0, 0, 0.4); border-color: rgba(var(--accent-rgb), 0.22); } .rt-out { background: rgba(0, 0, 0, 0.35); } /* Rot und Schwarz als Aussenwette behalten ihre Farbe. Muss nach .rt-out stehen, sonst gewinnt dessen neutraler Hintergrund. */ .rt-out.rt-r { background: #b52e2e; } .rt-out.rt-b { background: rgba(14, 14, 14, 0.9); } .rt-dozens, .rt-outside { display: grid; gap: 3px; margin-bottom: 3px; } /* --- Hochkant (Handy): drei Spalten, oben 34-36, unten 1-3 --- */ @media (max-width: 639px) { .rt-board { grid-template-columns: repeat(3, 1fr); } .rt-zero { grid-row: 1; grid-column: 1 / 4; } .rt-num { grid-row: calc(var(--pr) + 1); grid-column: var(--pc); } .rt-col { grid-row: 14; grid-column: var(--pc); } .rt-dozens, .rt-outside { grid-template-columns: repeat(3, 1fr); } } /* --- Quer (iPad und breiter): das klassische Tableau --- */ @media (min-width: 640px) { .rt-board { grid-template-columns: 1.15fr repeat(12, 1fr) 1.05fr; grid-template-rows: repeat(3, 1fr); } .rt-zero { grid-row: 1 / 4; grid-column: 1; border-radius: 8px 5px 5px 8px; } .rt-num { grid-row: var(--lr); grid-column: calc(var(--lc) + 1); } .rt-col { grid-row: var(--lr); grid-column: 14; } /* Dutzende und Aussenwetten richten sich am Zahlenfeld aus, nicht an der ganzen Breite: sonst stehen sie unter der Null und den Kolonnen. */ .rt-dozens, .rt-outside { grid-template-columns: 1.15fr repeat(12, 1fr) 1.05fr; } .rt-dozen:nth-child(1) { grid-column: 2 / 6; } .rt-dozen:nth-child(2) { grid-column: 6 / 10; } .rt-dozen:nth-child(3) { grid-column: 10 / 14; } .rt-out:nth-child(1) { grid-column: 2 / 4; } .rt-out:nth-child(2) { grid-column: 4 / 6; } .rt-out:nth-child(3) { grid-column: 6 / 8; } .rt-out:nth-child(4) { grid-column: 8 / 10; } .rt-out:nth-child(5) { grid-column: 10 / 12; } .rt-out:nth-child(6) { grid-column: 12 / 14; } } /* Gesetzte Chips liegen als Scheibe auf dem Feld, nicht als Rahmen darum. */ .rt-has-bet { box-shadow: 0 0 0 2px var(--accent-strong), 0 0 14px -2px rgba(var(--accent-rgb), 0.55); } .rt-bet-badge { position: absolute; right: -5px; bottom: -5px; min-width: 24px; height: 24px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: var(--accent-ink); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55); font-size: 0.66rem; font-weight: 900; line-height: 1; z-index: 2; pointer-events: none; } .rt-win-cell { animation: winpulse 0.45s ease 3; } .rt-lose-cell { opacity: 0.35; transition: opacity 0.3s; } /* Bedienleiste. Zuruecknehmen, Wiederholen und Loeschen sind Nebensachen und stehen als schmale Knoepfe nebeneinander; Drehen ist die Hauptsache und bekommt die volle Breite darunter. */ .rt-controls { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } .rt-side-btn { flex: 1; padding: 11px 6px; border-radius: var(--r-sm); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text); font-size: var(--fs-sm); font-weight: 700; transition: border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); } .rt-side-btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.5); } .rt-side-btn:active:not(:disabled) { transform: scale(0.97); } .rt-side-btn:disabled { opacity: 0.35; cursor: not-allowed; } .rt-clear-btn { color: var(--bad-text); border-color: rgba(var(--bad-rgb), 0.35); } .rt-spin-btn { width: 100%; font-size: 1.05rem; padding: 15px; margin-top: var(--sp-2); } /* Einsatz-Chips als echte Scheiben statt als Reiter. */ .rt-chips { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-3); flex-wrap: wrap; } .rt-chip { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); background: var(--chip, #ecf0f1); color: #10161c; font-size: 0.8rem; font-weight: 900; /* Die Kerben am Chiprand als gestrichelter Innenring. */ box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.14), inset 0 0 0 7px rgba(255, 255, 255, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .rt-chip.active { transform: translateY(-5px) scale(1.06); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.14), inset 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 0 3px var(--accent-strong), 0 8px 18px rgba(0, 0, 0, 0.55); } /* ===================== Floating chat dock (bottom-left) ===================== */ .chat-dock { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1200; width: min(320px, 78vw); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; /* container never blocks the screen behind it */ } .chat-dock.hidden { display: none; } /* Message log — faded & click-through by default; revealed on .show. */ .chat-dock .chat-log { width: 100%; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 2px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 72%, transparent); mask-image: linear-gradient(to top, #000 72%, transparent); } .chat-dock.show .chat-log { opacity: 1; transform: none; } .chat-dock.open .chat-log { pointer-events: auto; } .chat-row { align-self: flex-start; max-width: 100%; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 5px 10px; font-size: 0.9rem; line-height: 1.3; backdrop-filter: blur(4px); } .chat-row.mine { background: rgba(40, 90, 60, 0.6); } .chat-row .chat-name { color: var(--gold-strong); font-weight: 600; margin-right: 6px; } .chat-row.mine .chat-name { color: #8be0a8; } .chat-row .chat-text { color: var(--text); word-break: break-word; } .chat-empty { align-self: flex-start; background: rgba(0, 0, 0, 0.5); border-radius: 12px; padding: 8px 12px; } /* Input row — only visible when the dock is open. */ .chat-dock .chat-input { width: 100%; display: none; gap: 6px; pointer-events: auto; } .chat-dock.open .chat-input { display: flex; } .chat-input input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.7); color: var(--text); backdrop-filter: blur(6px); } .chat-input input:focus { outline: 2px solid var(--gold); } .chat-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; background: linear-gradient(180deg, var(--gold-strong), var(--gold)); color: #2a1d05; font-size: 1rem; font-weight: 700; cursor: pointer; } /* Always-tappable bubble. */ .chat-fab { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); font-size: 1.35rem; line-height: 1; cursor: pointer; position: relative; box-shadow: var(--shadow); } .chat-room-tag { position: absolute; top: 3px; right: 7px; color: var(--gold-strong); font-size: 0.7rem; } /* ===================== Open-lobby browser (home screen) ===================== */ .open-lobbies-head { display: flex; align-items: center; justify-content: space-between; } .open-lobbies-head .section-title { margin-bottom: 6px; } #lobby-refresh { font-size: 1.1rem; line-height: 1; } .lobby-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 4px 8px; } .lobby-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 12px 14px; } .lobby-card-info { min-width: 0; } .lobby-card-title { font-weight: 600; color: var(--text); } .lobby-join { flex: 0 0 auto; padding: 10px 18px; } /* ===================== Blackjack lobby panel ===================== */ .bj-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bj-lobby-panel { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; } .bj-lobby-head { display: flex; align-items: center; justify-content: space-between; color: var(--gold-strong); } .bj-lobby-players { display: flex; flex-direction: column; gap: 4px; } .bj-lp { display: flex; align-items: center; justify-content: space-between; padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); } .bj-lp.mine { background: rgba(40, 90, 60, 0.4); } .bj-lobby-feed { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 6px; } .bj-feed-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; } .bj-lobby-panel .pos { color: var(--good-text); } .bj-lobby-panel .neg { color: var(--bad-text); } /* ===================== Roulette lobby panel ===================== */ .rt-lobby-bets-head { margin-top: 2px; } .rt-lobby-bets { display: flex; flex-wrap: wrap; gap: 6px; } .rt-lobby-bets .rt-bet-tag { font-size: 0.78rem; } /* ===================== City location-factor tags ===================== */ .cd-boost { display: inline-block; margin-left: 6px; font-size: 0.72rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; } .cd-boost.hot { background: rgba(255, 138, 60, 0.22); color: #ffb074; } .cd-boost.cold { background: rgba(120, 160, 200, 0.18); color: #a9c2d6; } .cd-build { position: relative; } /* Buff label pill inside a build button (default, when no hot/cold variant). */ .cd-build .cd-boost { display: block; margin: 4px 0 0; white-space: normal; line-height: 1.2; background: rgba(var(--info-rgb), 0.16); color: var(--info-text); } /* Active-buffs panel on the city screen. */ .biz-buffs { display: flex; flex-wrap: wrap; gap: 8px; } .buff-chip { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(var(--info-rgb), 0.14); color: var(--info-text); border: 1px solid rgba(var(--info-rgb), 0.3); } /* Info block (address, type, size) at the top of the building detail. */ .cd-info { margin: 6px 0 10px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); } .cd-info .cd-row { margin: 2px 0; } /* "what owning this gives you" row in the lot detail. */ .cd-buff { margin-top: 6px; padding: 6px 9px; border-radius: 9px; font-size: 0.82rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } .cd-buff.on { background: rgba(var(--good-rgb), 0.12); border-color: rgba(var(--good-rgb), 0.35); } .cd-buff .pos { color: var(--good); font-weight: 800; } /* Street-monopoly progress row + trophy tag + news feed. */ .cd-street { margin-top: 6px; padding: 6px 9px; border-radius: 9px; font-size: 0.82rem; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25); } .cd-trophy-tag { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; vertical-align: middle; background: linear-gradient(135deg, var(--accent-strong), #c9962e); color: #3a2c05; border-radius: 999px; padding: 2px 8px; margin-left: 6px; } .news-up { color: var(--good-text); } .news-down { color: #e89a9a; } /* Achievements grid (profile). */ .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; } .badge-grid > p { grid-column: 1 / -1; } .badge { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); } .badge .badge-label { color: rgba(255,255,255,0.55); } .badge small { color: rgba(255,255,255,0.45); } .badge .badge-emoji { opacity: 0.5; } .badge.on { background: rgba(0,0,0,0.45); border-color: rgba(var(--accent-rgb), 0.55); } .badge.on .badge-label { color: #ffe9a8; } .badge.on small { color: #9fdcaa; } .badge.on .badge-emoji { opacity: 1; } .badge-emoji { font-size: 1.5rem; } .badge-label { font-weight: 800; font-size: 0.78rem; } /* Die Bedingung. Steht jetzt immer in der Karte statt nur im Tooltip: auf dem iPad gibt es kein Draufzeigen, dort war sie sonst nicht erreichbar. */ .badge-desc { font-size: 0.68rem; line-height: 1.3; color: var(--text-dim); margin-top: 2px; } .badge.on .badge-desc { color: rgba(255, 255, 255, 0.7); } .badge small { font-size: 0.64rem; line-height: 1.25; margin-top: 2px; } /* Etwas breiter, damit die Bedingung nicht in vier Zeilen zerfaellt. */ .badge-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .badge.on { cursor: pointer; } .badge.on:hover { border-color: rgba(var(--accent-rgb), 0.9); } .badge.selected { border-color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35), 0 0 14px rgba(var(--accent-rgb), 0.25); } .badge.selected small { color: var(--accent-strong); font-weight: 800; } .player-profile-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); } .player-profile-modal.hidden { display: none; } .player-profile-card { position: relative; width: min(480px, 100%); border-radius: 14px; padding: 16px; background: linear-gradient(180deg, rgba(34,40,52,0.98), rgba(17,22,31,0.98)); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.45); } .player-profile-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #fff; font-size: 1.3rem; cursor: pointer; } .player-profile-head { display: flex; align-items: center; gap: 12px; padding-right: 32px; } .player-profile-avatar { font-size: 3rem; line-height: 1; } .player-profile-head h2 { margin: 0 0 3px; } .player-profile-level { margin: 12px 0; } .player-profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .player-profile-stats > div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.09); } .player-profile-stats span { display: block; color: var(--text-mute); font-size: 0.72rem; margin-bottom: 3px; } .player-profile-stats b { color: var(--accent-strong); font-size: 0.88rem; } .player-profile-badges { margin-top: 12px; } .player-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .player-profile-actions button:only-child { grid-column: 1 / -1; } .challenge-picker h2 { margin: 0 0 4px; } .challenge-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .challenge-game { padding: 14px 8px; font-weight: 700; } .challenge-game:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); } .mini-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 6px 5px 0 0; border-radius: 999px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.28); } /* Quest board (Aufträge). */ .quest { padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); } .quest.done { opacity: 0.6; border-color: rgba(var(--good-rgb), 0.4); } .quest-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .quest-label { font-weight: 700; font-size: 0.9rem; } .quest-reward { color: var(--accent-strong); white-space: nowrap; } .quest.done .quest-reward { color: var(--good); } .quest-bar { height: 7px; border-radius: 999px; background: rgba(0,0,0,0.4); margin: 8px 0 4px; overflow: hidden; } .quest-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9962e, var(--accent-strong)); transition: width 0.4s; } .quest.done .quest-fill { background: var(--good); } .quest-prog { font-size: 0.72rem; opacity: 0.65; text-align: right; } /* Abholbereiter Bonus: ruhiges Pulsieren am Hero-Knopf. */ .hero-btn-bonus.ready { animation: bonusPulse 2.4s ease-in-out infinite; } html.reduce-motion .hero-btn-bonus.ready { animation: none; } @keyframes bonusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.0); } 50% { box-shadow: 0 0 14px 2px rgba(var(--accent-rgb), 0.35); } } /* Kosmetik-Shop. */ .cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .cos-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; cursor: pointer; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); } .cos-item:hover { background: rgba(255,255,255,0.1); } .cos-item.equipped { border-color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3); } .cos-emoji { font-size: 1.8rem; } .cos-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); } .cos-item small { font-size: 0.66rem; font-weight: 700; opacity: 0.75; } /* Clans. */ .clan-header { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .clan-header b { font-size: 1.05rem; } .clan-level-card { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 8px; } .clan-roster { display: flex; flex-direction: column; gap: 4px; } .clan-mrow { display: flex; justify-content: space-between; padding: 7px 11px; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 0.9rem; } .clan-create { padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); } .lb-clan { font-size: 0.72rem; font-weight: 800; color: var(--accent-strong); } .clan-mrow .chip-btn { padding: 2px 7px; font-size: 0.85rem; margin-left: 4px; } .clan-motto { padding: 8px 12px; margin-bottom: 8px; font-style: italic; color: #d6c99a; } .clan-treasury { padding: 10px 12px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.25); margin-bottom: 10px; } .clan-donate-row { display: flex; gap: 6px; margin-top: 8px; } .clan-donate-row input { flex: 1; padding: 8px; border-radius: 8px; background: #232833; border: 1px solid rgba(255,255,255,0.12); color: #fff; box-sizing: border-box; } .clan-quests { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; } .clan-quest { padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); } .clan-quest.done { border-color: rgba(102,192,122,0.45); background: rgba(102,192,122,0.08); } .clan-quest > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.88rem; } .clan-quest span { color: rgba(232,236,242,0.64); font-size: 0.75rem; white-space: nowrap; } .clan-quest-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,0.28); margin-top: 7px; } .clan-quest-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #66c07a); } .clan-requests { margin-top: 10px; } .clan-closed { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.9rem; cursor: pointer; } .clan-closed input { accent-color: var(--accent); } .cd-sub { font-weight: 700; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; } .clan-warcard { padding: 12px 14px; border-radius: 12px; margin: 10px 0; background: rgba(214,90,90,0.12); border: 1px solid rgba(214,90,90,0.35); } .clan-war-score { font-size: 1.6rem; font-weight: 800; text-align: center; margin: 6px 0; letter-spacing: 0.04em; } .clan-war-actions { display: flex; gap: 8px; margin-top: 8px; } .clan-war-actions button { flex: 1; } .clan-war-btn { color: var(--bad-text) !important; } /* Casino-Heist overlay. */ .heist-overlay { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; background: rgba(10,4,4,0.82); backdrop-filter: blur(4px); padding: 16px; } .heist-overlay.hidden { display: none; } .heist-card { max-width: 420px; width: 100%; padding: 24px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, #2a1616, #1a0e0e); border: 1px solid rgba(214,90,90,0.5); box-shadow: 0 0 40px rgba(214,90,90,0.35); } .heist-emoji { font-size: 2.8rem; animation: heistPulse 0.8s ease-in-out infinite; } @keyframes heistPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} } .heist-card h2 { margin: 4px 0 0; color: #ffb074; letter-spacing: 0.03em; } .heist-loot { margin: 12px 0 8px; font-size: 1.05rem; } .heist-vault { position: relative; height: 26px; border-radius: 999px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15); overflow: hidden; } .heist-vault-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #d65a5a, #f4a24a); transition: width 0.2s; } .heist-vault span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; text-shadow: 0 1px 2px rgba(0,0,0,0.7); } .heist-timer { margin: 10px 0; font-weight: 700; opacity: 0.9; } .heist-crack { width: 100%; padding: 20px; font-size: 1.4rem; font-weight: 900; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #f4a24a, #d65a5a); color: #200; border: none; box-shadow: 0 6px 0 #8a3030; transition: transform 0.05s; user-select: none; } .heist-crack:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a3030; } .heist-result { margin-top: 14px; } .heist-win { font-size: 1.3rem; font-weight: 900; color: var(--good); } .heist-fail { font-size: 1.2rem; font-weight: 900; color: var(--bad-text); } .heist-crooks { margin-top: 8px; font-size: 0.75rem; opacity: 0.7; } /* Event-Overlays minimieren: ✕ auf der Karte, Pill unten rechts zum Zurückholen. */ .heist-card { position: relative; } .ev-min { position: absolute; top: 8px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.35); color: #fff; font-size: 0.95rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; } .ev-min:hover { background: rgba(255,255,255,0.15); } #ev-pills { position: fixed; bottom: 14px; right: 14px; z-index: 209; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .ev-pill { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,214,110,0.6); background: rgba(20, 14, 10, 0.92); color: #ffd66e; font-weight: 800; font-size: 0.85rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45); animation: evPillPulse 1.4s ease-in-out infinite; touch-action: manipulation; } @keyframes evPillPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .ev-pill.hidden { display: none; } /* Chip-Regen: click-through layer, only the chips catch taps. */ #rain-layer { position: fixed; inset: 0; z-index: 205; pointer-events: none; overflow: hidden; } #rain-hud { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 206; background: rgba(10, 24, 18, 0.85); border: 1px solid rgba(255, 214, 110, 0.5); border-radius: 999px; padding: 6px 16px; font-size: 0.9rem; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } #rain-hud.hidden { display: none; } .rain-chip { position: absolute; top: -70px; pointer-events: auto; background: none; border: none; cursor: pointer; font-size: 2.2rem; line-height: 1; padding: 8px; /* fette Tap-Fläche fürs iPad */ filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5)); animation: rainFall linear forwards; touch-action: manipulation; } .rain-chip.gold { font-size: 2.8rem; filter: drop-shadow(0 0 10px rgba(255, 214, 110, 0.9)); } @keyframes rainFall { 0% { transform: translateY(0) rotate(-12deg); } 25% { transform: translateY(28vh) rotate(10deg) translateX(10px); } 50% { transform: translateY(55vh) rotate(-8deg) translateX(-10px); } 75% { transform: translateY(82vh) rotate(12deg) translateX(8px); } 100% { transform: translateY(112vh) rotate(-6deg); } } .rain-pop { position: fixed; z-index: 207; transform: translateX(-50%); font-weight: 900; color: #ffd66e; text-shadow: 0 2px 4px rgba(0,0,0,0.8); pointer-events: none; animation: rainPop 1s ease-out forwards; } .rain-pop.gold { font-size: 1.3rem; color: #ffe9a8; } @keyframes rainPop { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -60px; } } /* Blitz-Quiz. */ .quiz-card { max-width: 460px; } .quiz-card h2 { font-size: 1.05rem; } .quiz-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.5); overflow: hidden; margin: 10px 0; } .quiz-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--good), #f4d34a); transition: width 0.15s linear; } .quiz-question { font-size: 1.15rem; font-weight: 800; margin: 8px 0 12px; min-height: 2.2em; } .quiz-options { display: grid; gap: 8px; } .quiz-opt { padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: left; } .quiz-opt:not(:disabled):hover { background: rgba(255,255,255,0.14); } .quiz-opt.picked { border-color: #f4d34a; background: rgba(244, 211, 74, 0.18); } .quiz-opt.correct { border-color: var(--good); background: rgba(var(--good-rgb), 0.22); } .quiz-opt.wrong { border-color: var(--bad); background: var(--bad-soft); } .quiz-info { margin-top: 12px; min-height: 1.4em; } .quiz-me { color: var(--good); } .quiz-board { font-size: 0.9rem; line-height: 1.6; } /* Team-Tresorkampf. */ .vault-card { max-width: 460px; } .vault-side { margin: 8px 0; } .vault-fill-red { background: linear-gradient(90deg, #b23a3a, #ff7b6b); } .vault-fill-blue { background: linear-gradient(90deg, #2f5fb2, #6bb2ff); } .vault-roster { font-size: 0.72rem; opacity: 0.7; margin-top: 3px; min-height: 1em; } .vault-my-team { margin: 10px 0 2px; font-size: 0.95rem; } .vault-hit { width: 100%; padding: 20px; font-size: 1.4rem; font-weight: 900; border-radius: 14px; cursor: pointer; border: none; color: #fff; background: linear-gradient(180deg, #8a8f9c, #5c6270); box-shadow: 0 6px 0 #3c414d; transition: transform 0.05s; user-select: none; touch-action: manipulation; } .vault-hit.red { background: linear-gradient(180deg, #e56666, #b23a3a); box-shadow: 0 6px 0 #7a2626; } .vault-hit.blue { background: linear-gradient(180deg, #5f8fdd, #2f5fb2); box-shadow: 0 6px 0 #1f3f7a; } .vault-hit:active { transform: translateY(4px); box-shadow: 0 2px 0 #3c414d; } /* Glücksrad. */ .wheel-stage { position: relative; width: min(320px, 80vw); margin: 16px auto 8px; } .wheel-stage svg { width: 100%; height: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5)); } .wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--accent-strong); font-size: 1.8rem; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.6); } /* Spieler-Level. */ .level-chip { font-size: 0.72rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.3); border: 1px solid currentColor; margin-left: 2px; } .level-box { margin: 8px 0 12px; } .level-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; } .level-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.4); overflow: hidden; } .level-fill { height: 100%; border-radius: 999px; transition: width 0.5s; } .lb-level { font-size: 0.7rem; font-weight: 800; opacity: 0.7; } /* Update / changelog modal. */ .update-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); padding: 16px; } .update-modal.hidden { display: none; } .update-card { max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, #1c2432, #141a24); border: 1px solid rgba(var(--accent-rgb), 0.4); box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: center; } .update-emoji { font-size: 2.6rem; } .update-card h2 { margin: 4px 0 0; } .update-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; text-align: left; } .update-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .update-item > span { font-size: 1.5rem; line-height: 1; } .update-item b { display: block; font-size: 0.92rem; } .update-item small { color: rgba(255,255,255,0.6); font-size: 0.76rem; line-height: 1.3; } /* Bei mehreren verpassten Updates trennt eine Ueberschrift die Bloecke, sonst steht alles als eine lange Liste da und man sieht nicht, was zusammengehoert. */ .update-release-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); } .update-release-head:first-child { margin-top: 0; } .update-release-head b { color: var(--accent-strong); font-size: var(--fs-md); } .update-release-head small { color: var(--text-mute); font-size: var(--fs-xs); white-space: nowrap; } .update-more { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-dim); font-size: var(--fs-sm); text-align: center; } .update-more b { color: var(--accent-strong); } .update-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .update-actions .btn-primary { flex: 1; min-width: 150px; } .update-actions .chip-btn { flex: 1; min-width: 150px; } /* ---------------- Season-Pass ---------------- */ .se-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; } .se-head h2 { margin: 0; } .se-head p { margin: var(--sp-1) 0 0; } .se-timer { flex: 0 0 auto; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line-neutral); color: var(--text-dim); font-size: var(--fs-sm); font-weight: 700; } .se-progress { margin: var(--sp-4) 0; } .se-progress-top { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); } .se-open { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 800; color: var(--accent-strong); } .se-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); } /* Die drei Multiplikatoren. Stehen ueber den Tagesdeckeln, weil sie die Frage beantworten, warum man heute ueberhaupt spielen sollte. */ .se-boosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); } .se-boost { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line-neutral); background: var(--surface); text-align: left; color: var(--text); } .se-boost-icon { font-size: 1.5rem; flex: 0 0 auto; } .se-boost-text { display: flex; flex-direction: column; min-width: 0; } .se-boost-text small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); } .se-boost-text b { font-size: var(--fs-md); color: var(--accent-strong); } .se-boost-aus .se-boost-text b { color: var(--text-dim); } /* Der Fokus ist anklickbar und fuehrt direkt ins Spiel. */ .se-boost-fokus { border-color: rgba(var(--accent-rgb), 0.45); background: var(--accent-soft); cursor: pointer; } .se-boost-fokus:active { transform: scale(0.985); } /* ---------------- Clan: Schatzkammer und Protokoll ---------------- */ .clan-tr-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); } .clan-tr-head b { font-family: var(--font-num); font-size: var(--fs-lg); color: var(--accent-strong); font-variant-numeric: tabular-nums; } .clan-payout { display: grid; grid-template-columns: 1fr 110px auto; gap: var(--sp-2); margin-top: var(--sp-2); } @media (max-width: 480px) { .clan-payout { grid-template-columns: 1fr 1fr; } .clan-payout > button { grid-column: 1 / -1; } } .clan-payout select, .clan-payout input { padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text); font-size: var(--fs-sm); min-width: 0; } .clan-log { margin: var(--sp-3) 0; } .clan-log-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--r-xs); background: var(--surface-sunken); margin-bottom: 3px; font-size: var(--fs-sm); } .clan-log-row small { color: var(--text-mute); font-size: var(--fs-xs); white-space: nowrap; } /* ---------------- Clan-Season ---------------- */ .clan-season { margin: var(--sp-3) 0; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); } .clan-season-bonus { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-dim); } .clan-season-bonus b { color: var(--accent-strong); } .clan-season-track { display: flex; flex-direction: column; gap: 3px; margin: var(--sp-3) 0; } .clan-season-step { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--r-xs); background: var(--surface-sunken); font-size: var(--fs-sm); } .clan-season-step .css-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--line-neutral); color: var(--text-mute); font-size: var(--fs-xs); font-weight: 900; } .clan-season-step .css-xp { color: var(--text-mute); font-size: var(--fs-xs); } .clan-season-step.done { background: var(--good-soft); } .clan-season-step.done .css-num { background: rgba(var(--good-rgb), 0.35); color: var(--good-text); } .clan-season-step.done .css-label { color: var(--good-text); } /* Die Stufenleiter. Eine senkrechte Bahn statt eines Kachelrasters: der Pass ist ein Weg, und den liest man von oben nach unten. */ .se-track { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .se-step { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line-neutral); background: var(--surface); } .se-step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line-neutral); font-weight: 900; font-size: var(--fs-sm); color: var(--text-dim); } .se-step-body { display: flex; flex-direction: column; min-width: 0; } .se-step-body b { font-size: var(--fs-md); } .se-step-body small { color: var(--text-mute); font-size: var(--fs-xs); } .se-step-btn { min-width: 84px; padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-neutral); background: var(--surface-sunken); color: var(--text-dim); font-weight: 800; font-size: var(--fs-sm); } .se-step-btn:disabled { opacity: 0.5; cursor: default; } /* Freigeschaltet und noch nicht abgeholt: das ist der Zustand, den man sehen soll, wenn man den Screen oeffnet. */ .se-ready { border-color: rgba(var(--accent-rgb), 0.5); background: var(--accent-soft); } .se-ready .se-step-num { border-color: var(--accent); color: var(--accent-strong); } .se-ready .se-step-btn { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border-color: transparent; color: var(--accent-ink); opacity: 1; } .se-claimed { opacity: 0.6; } .se-claimed .se-step-num { background: var(--good-soft); border-color: rgba(var(--good-rgb), 0.4); color: var(--good-text); } .se-locked .se-step-body b { color: var(--text-dim); } /* Die vier Kosmetik-Stufen sind der Grund, den Pass durchzuspielen. */ .se-special { border-style: dashed; border-color: rgba(var(--accent-rgb), 0.45); } .se-special .se-step-body b { color: var(--accent-strong); } /* ---------------- Updates-Tab ---------------- */ .screen-title { color: var(--accent-strong); margin: var(--sp-1) 0 var(--sp-3); } .cl-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .cl-entry { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .cl-head { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); border: none; background: transparent; color: var(--text); text-align: left; } .cl-head:hover { background: var(--surface-sunken); } .cl-date { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 800; color: var(--text-mute); min-width: 116px; } .cl-title { flex: 1; font-weight: 800; font-size: var(--fs-md); min-width: 0; } .cl-tag { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); } .cl-tag-new { background: var(--good-soft); color: var(--good-text); } .cl-chevron { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-dim); font-size: 0.9rem; line-height: 1; transition: transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease); } .cl-head:hover .cl-chevron { color: var(--accent-strong); } .cl-entry.open .cl-chevron { transform: rotate(180deg); } .cl-body { display: none; } .cl-entry.open .cl-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); } .cl-intro { color: var(--text-dim); font-size: var(--fs-sm); margin: 0 0 var(--sp-1); line-height: 1.45; } @media (max-width: 560px) { .cl-head { flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); } .cl-date { min-width: 0; width: 100%; } .cl-title { flex: 1 1 auto; } } /* Punkt am Menue-Knopf, solange Updates ungelesen sind. */ .menu-btn { position: relative; } .menu-btn.has-news::after { content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--good); border: 2px solid var(--bar); box-shadow: 0 0 8px var(--good); } .force-reload-modal { z-index: 10000; } .force-reload-card { border-color: rgba(90,220,255,0.55); box-shadow: 0 24px 80px rgba(0,0,0,0.75), 0 0 34px rgba(90,220,255,0.18); } /* Mines. */ .mines-wrap { max-width: 560px; margin: 0 auto; } .mines-topbar { display: flex; gap: 8px; margin: 10px 0; } .mines-stat { flex: 1; text-align: center; padding: 8px; border-radius: 10px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); } .mines-stat span { display: block; font-size: 0.65rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; } .mines-stat b { font-size: 1rem; color: var(--accent-strong); } .mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; } .mine-tile { aspect-ratio: 1; border-radius: 12px; font-size: 1.6rem; cursor: pointer; background: linear-gradient(180deg, #3a4150, #2a303c); border: 1px solid rgba(255,255,255,0.12); transition: transform 0.08s, background 0.2s; display: flex; align-items: center; justify-content: center; } .mine-tile:hover:not(:disabled) { background: linear-gradient(180deg, #454d5e, #333a47); transform: translateY(-2px); } .mine-tile:disabled { cursor: default; } .mine-tile.gem { background: rgba(var(--good-rgb), 0.18); border-color: rgba(var(--good-rgb), 0.5); } .mine-tile.bomb { background: rgba(214,90,90,0.15); border-color: rgba(214,90,90,0.4); opacity: 0.75; } .mine-tile.boom { background: rgba(214,90,90,0.4); border-color: #d65a5a; animation: crashShake 0.4s; } /* Pinco Ball. */ .pinco-wrap { max-width: 720px; margin: 0 auto; } .pinco-head { text-align: center; } .pinco-head h2 { margin: 4px 0 2px; } .pinco-controls { margin: 10px 0 12px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); } .pinco-size-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; } .pinco-size { padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text); font-weight: 900; } .pinco-size span { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-dim); font-weight: 700; } .pinco-size.active { border-color: var(--good); background: rgba(var(--good-rgb), 0.16); color: var(--good-text); } .pinco-actions { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 8px; margin-top: 10px; } .pinco-actions button { width: 100%; } .pinco-lobby-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 10px; padding: 9px 12px; border-radius: 12px; background: rgba(var(--good-rgb), 0.11); border: 1px solid rgba(var(--good-rgb), 0.32); } .pinco-lobby-panel span { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.28); color: var(--gold-strong); font-weight: 900; letter-spacing: 0.08em; } .pinco-board-wrap { padding: 12px; border-radius: 18px; background: radial-gradient(90% 70% at 50% 0%, rgba(90,160,224,0.14), rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 0 40px rgba(0,0,0,0.4); } #pinco-canvas { width: 100%; aspect-ratio: 0.92; display: block; border-radius: 14px; background: radial-gradient(120% 60% at 50% -8%, rgba(90,160,224,0.16), transparent 60%), linear-gradient(180deg, #131a2b, #0a0e18 70%, #070a12); } .pinco-mults { display: grid; gap: 3px; margin-top: 7px; } .pinco-mult { min-width: 0; padding: 7px 2px; border-radius: 8px; text-align: center; font-size: 0.72rem; font-weight: 900; color: #10130a; background: var(--c, #7fd79a); /* Fallback für Browser ohne color-mix */ background: linear-gradient(180deg, var(--c, #7fd79a), color-mix(in srgb, var(--c, #7fd79a) 70%, #000)); box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } .pinco-status { min-height: 24px; margin: 10px 0 4px; text-align: center; font-weight: 800; color: var(--gold-strong); } .pinco-room { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-top: 8px; } .pinco-player { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid transparent; font-size: 0.84rem; } .pinco-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 6px; box-shadow: 0 0 8px currentColor; vertical-align: middle; } .pinco-feed { display: flex; flex-direction: column; gap: 6px; max-height: 170px; overflow-y: auto; } .pinco-feed-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07); font-size: 0.85rem; } .pinco-feed-row .pos { color: var(--good); font-weight: 900; } .pinco-feed-row .neg { color: var(--bad-text); font-weight: 900; } .pinco-feed-row .muted { white-space: nowrap; } /* Memory-Duell. */ .mem-wrap { max-width: 560px; margin: 0 auto; } .mem-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; margin: 12px 0; } .mem-label { display: block; font-size: 0.85rem; color: var(--text-dim); } .mem-label input { display: block; width: 100%; margin-top: 6px; padding: 10px; border-radius: 10px; background: #232833; border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 1rem; box-sizing: border-box; } .mem-sizes { display: flex; gap: 8px; margin-top: 6px; } .mem-size-btn { flex: 1; padding: 10px 4px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); font-weight: 700; font-size: 0.95rem; display: flex; flex-direction: column; align-items: center; gap: 2px; } .mem-size-btn span { font-size: 0.72rem; font-weight: 500; color: var(--text-dim); } .mem-size-btn.active { background: rgba(var(--accent-rgb), 0.18); border-color: var(--accent); color: #f4d58a; } .mem-size-btn.active span { color: var(--accent); } .mem-visibility { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .mem-radio { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; cursor: pointer; } .mem-radio input { accent-color: var(--accent); } .mem-code-big { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.3em; margin: 12px 0; color: var(--accent); text-shadow: 0 2px 8px rgba(0,0,0,0.4); } .mem-scorebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; } .mem-score { flex: 1; text-align: center; background: rgba(255,255,255,0.04); border-radius: 12px; padding: 8px 4px; } .mem-score .mem-name { display: block; font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mem-score .mem-pairs { font-size: 1.6rem; } .mem-turn { flex: 1.2; text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--text-dim); } .mem-turn.me { color: var(--good); } .mem-pot { text-align: center; margin-bottom: 8px; } .mem-grid { display: grid; gap: 8px; margin: 8px 0; } .mem-card { aspect-ratio: 1; border-radius: 12px; font-size: 1.9rem; cursor: pointer; background: linear-gradient(180deg, #3a4150, #2a303c); border: 1px solid rgba(255,255,255,0.12); transition: transform 0.12s, background 0.2s; display: flex; align-items: center; justify-content: center; } .mem-card:hover:not(:disabled) { transform: translateY(-2px); background: linear-gradient(180deg, #454d5e, #333a47); } .mem-card:disabled { cursor: default; } .mem-card.up { background: linear-gradient(180deg, #4a5568, #39414f); } .mem-card.matched { background: rgba(var(--good-rgb), 0.16); border-color: rgba(var(--good-rgb), 0.45); opacity: 0.85; } .mem-result-emoji { font-size: 3.2rem; margin-bottom: 6px; } /* Schach-Duell. */ .chs-wrap { max-width: 520px; margin: 0 auto; } .chs-playerbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; margin: 4px 0; } .chs-playerbar.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); } .chs-pname { font-weight: 700; font-size: 0.92rem; } .chs-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.03em; } .chs-playerbar.active .chs-clock { color: var(--accent); } .chs-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; border: 2px solid rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; margin: 4px 0; } .chs-cell { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } .chs-cell.light { background: #ebd8b7; } .chs-cell.dark { background: #a9825b; } .chs-cell.lastmv::after { content: ""; position: absolute; inset: 0; background: rgba(var(--accent-rgb), 0.35); } .chs-cell.sel::after { content: ""; position: absolute; inset: 0; background: rgba(94,168,224,0.45); } .chs-cell.legal::before { content: ""; position: absolute; width: 32%; height: 32%; border-radius: 50%; background: rgba(20,20,20,0.35); z-index: 2; } .chs-cell.legal:has(.chs-piece)::before { width: 92%; height: 92%; background: transparent; border: 4px solid rgba(20,20,20,0.4); box-sizing: border-box; } .chs-piece { font-size: min(8vw, 40px); line-height: 1; z-index: 3; user-select: none; } .chs-piece.wp { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .chs-piece.bp { color: #1a1a1a; text-shadow: 0 1px 1px rgba(255,255,255,0.3); } .chs-spec-banner { text-align: center; font-weight: 700; font-size: 0.9rem; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: rgba(94,168,224,0.15); border: 1px solid rgba(94,168,224,0.4); color: #bcd8f0; } .lobby-watch { white-space: nowrap; } .chs-status { text-align: center; min-height: 20px; font-weight: 600; margin: 6px 0; color: #cdd6e4; } .chs-status.warn { color: #e0a05e; } .chs-moves { max-height: 68px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.82rem; color: var(--text-dim); padding: 6px 8px; background: rgba(0,0,0,0.15); border-radius: 8px; } .chs-mv { white-space: nowrap; } .chs-me-card { margin-bottom: 10px; } .chs-me { background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 10px; padding: 10px 12px; } .chs-lb-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .chs-lb-rank { flex: 0 0 22px; text-align: center; font-weight: 700; color: var(--text-dim); } .chs-lb-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chs-lb-rating { font-weight: 800; color: var(--accent); } .chs-lb-wl { flex: 0 0 auto; } /* Solitär (Klondike). */ .sol-wrap { max-width: 640px; margin: 0 auto; } .sol-mode-tabs { display: flex; gap: 8px; margin: 10px 0; } .sol-mode-tab { flex: 1; padding: 12px 6px; border-radius: 10px; cursor: pointer; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); } .sol-mode-tab.active { background: rgba(var(--accent-rgb), 0.18); border-color: var(--accent); color: #f4d58a; } .sol-hud { display: flex; justify-content: space-around; gap: 8px; margin: 6px 0 10px; } .sol-hud-item { text-align: center; font-size: 0.8rem; color: var(--text-dim); display: flex; flex-direction: column; } .sol-hud-item b { font-size: 1.1rem; color: #fff; } .sol-hud-timer b { color: var(--accent); } .sol-board { user-select: none; } .sol-top { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; align-items: start; } .sol-tableau { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: start; } .sol-col { min-height: 90px; display: flex; flex-direction: column; } .sol-slot { aspect-ratio: 0.72; border-radius: 6px; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,0.18); color: rgba(255,255,255,0.35); font-size: 1.2rem; } .sol-spacer { border: none; } .sol-waste { border: none; } .rematch-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .rematch-row .btn-primary, .rematch-row .btn-secondary { flex: 0 1 auto; padding: 11px 18px; } .sol-stock, .sol-waste, .sol-foundation, .sol-empty-col { cursor: pointer; } .sol-empty-col { width: 100%; } .sol-found-suit.red, .sol-card.red { color: #e0705e; } .sol-found-suit.black, .sol-card.black { color: var(--text); } .sol-card { aspect-ratio: 0.72; border-radius: 6px; background: #f4f1e8; color: #1a1a1a; border: 1px solid rgba(0,0,0,0.4); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 4px; font-weight: 800; font-size: 0.95rem; cursor: pointer; box-sizing: border-box; width: 100%; } .sol-card.red { color: var(--card-red); } .sol-card.black { color: #1a1a1a; } .sol-card.down { background: repeating-linear-gradient(45deg, #2f5aa8, #2f5aa8 4px, #274d92 4px, #274d92 8px); border-color: rgba(255,255,255,0.25); } .sol-card.sel { outline: 3px solid var(--accent); outline-offset: -1px; box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); } .sol-col .sol-card { position: relative; } .sol-actions { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; } .sol-actions .btn-secondary { flex: 0 1 auto; padding: 10px 16px; } #sol-movehint { text-align: center; min-height: 18px; color: #e0a05e; } /* Sudoku-Race. */ .sdk-wrap { max-width: 520px; margin: 0 auto; } .sdk-topbar { display: flex; justify-content: center; margin: 6px 0; } .sdk-timer { font-size: 1.6rem; font-weight: 800; color: var(--accent); letter-spacing: 0.05em; } .sdk-progress { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; } .sdk-prog-row { display: flex; align-items: center; gap: 8px; } .sdk-prog-name { flex: 0 0 88px; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sdk-prog-val { flex: 0 0 32px; text-align: right; font-weight: 700; font-size: 0.9rem; } .sdk-bar { flex: 1; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; } .sdk-bar-fill { height: 100%; width: 0; background: #5ea8e0; transition: width 0.3s; } .sdk-bar-fill.me { background: var(--good); } .sdk-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; margin: 0 auto; max-width: 460px; background: rgba(255,255,255,0.16); border: 2px solid rgba(255,255,255,0.35); border-radius: 8px; overflow: hidden; } .sdk-cell { aspect-ratio: 1; border: none; background: #2a303c; color: #cdd6e4; font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sdk-cell.br { border-right: 2px solid rgba(255,255,255,0.35); } .sdk-cell.bb { border-bottom: 2px solid rgba(255,255,255,0.35); } .sdk-cell.given { color: #fff; font-weight: 800; background: #333a47; cursor: default; } .sdk-cell.sel { background: rgba(var(--accent-rgb), 0.35); color: #fff; } .sdk-cell.conflict { background: rgba(214,90,90,0.32); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,110,110,0.7); } .sdk-cell.given.conflict { background: rgba(214,90,90,0.42); } .sdk-cell.sel.conflict { background: rgba(214,90,90,0.46); } .sdk-cell:not(.given):hover { background: #39414f; } .sdk-cell.conflict:not(.given):hover { background: rgba(214,90,90,0.5); } .sdk-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px auto 0; max-width: 460px; } .sdk-key { padding: 14px 0; border-radius: 10px; font-size: 1.2rem; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, #3a4150, #2a303c); border: 1px solid rgba(255,255,255,0.12); color: #fff; } .sdk-key:hover { background: linear-gradient(180deg, #454d5e, #333a47); } .sdk-key.sdk-erase { background: rgba(214,90,90,0.18); border-color: rgba(214,90,90,0.4); } /* Vorschläge. */ #suggest-text { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; background: #232833; border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 1rem; resize: vertical; font-family: inherit; } .suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .suggest-ok { margin-top: 10px; color: var(--good); font-weight: 600; } .suggest-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; margin-bottom: 10px; } .suggest-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .suggest-item-text { white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; } .suggest-del { font-size: 0.85rem; padding: 6px 10px; } /* Crash / Aviator. */ .crash-wrap { max-width: 720px; margin: 0 auto; } .crash-history { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; justify-content: center; } .crash-hchip { font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; } .crash-hchip.lo { background: rgba(214,90,90,0.2); color: var(--bad-text); } .crash-hchip.mid { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-strong); } .crash-hchip.hi { background: rgba(var(--good-rgb), 0.18); color: var(--good-text); } .crash-stage { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 100% at 20% 90%, #1c2740, #0c1018); border: 1px solid rgba(var(--info-rgb), 0.22); box-shadow: 0 0 26px -8px rgba(var(--info-rgb), 0.5), 0 14px 34px rgba(0,0,0,0.45), inset 0 0 60px rgba(0,0,0,0.5); } .crash-stage::after { /* Vignette über dem Canvas */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0,0,0,0.42) 100%); } .crash-stage.shake { animation: crashShake 0.5s; } #crash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .crash-mult { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8%; font-size: 3rem; font-weight: 900; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.85); pointer-events: none; z-index: 1; transition: color 0.3s; font-variant-numeric: tabular-nums; } .crash-mult.flying { color: var(--info-text); text-shadow: 0 0 22px rgba(var(--info-rgb), 0.55), 0 2px 18px rgba(0,0,0,0.85); } .crash-mult.flying.t2 { color: #ffd76a; text-shadow: 0 0 24px rgba(255,205,90,0.6), 0 2px 18px rgba(0,0,0,0.85); } .crash-mult.flying.t5 { color: #7dffab; text-shadow: 0 0 28px rgba(90,255,150,0.65), 0 2px 18px rgba(0,0,0,0.85); } .crash-mult.flying.t10 { color: #ff7ad9; text-shadow: 0 0 32px rgba(255,110,220,0.75), 0 2px 18px rgba(0,0,0,0.85); animation: crashT10 1.1s ease-in-out infinite alternate; } @keyframes crashT10 { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(50deg); } } .crash-mult.pulse { animation: crashPulse 0.28s ease-out; } .crash-mult.flying.t10.pulse { animation: crashPulse 0.28s ease-out, crashT10 1.1s ease-in-out infinite alternate; } @keyframes crashPulse { from { transform: scale(1.14); } to { transform: scale(1); } } .crash-mult.crashed { color: var(--bad-text); animation: crashShake 0.4s; } @keyframes crashShake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-6px,3px)} 75%{transform:translate(6px,-3px)} } .crash-status { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 0.85rem; opacity: 0.85; pointer-events: none; } .crash-controls { margin: 12px 0; } .crash-betrow { display: flex; gap: 10px; flex-wrap: wrap; } .crash-betrow label { flex: 1; min-width: 130px; font-size: 0.75rem; font-weight: 700; opacity: 0.75; display: flex; flex-direction: column; gap: 4px; } .crash-betrow input { padding: 10px; border-radius: 10px; } .crash-cashbtn { background: linear-gradient(135deg, var(--good), var(--good-deep)) !important; color: var(--good-ink) !important; } .crash-action, #crash-action { width: 100%; margin-top: 10px; font-size: 1.05rem; } .crash-players-head { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; opacity: 0.55; text-transform: uppercase; margin-top: 12px; } .crash-players { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .crash-prow { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 0.9rem; } .crash-prow .pos { color: var(--good); } .crash-prow .neg { color: var(--bad-text); } /* Login calendar. */ .calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; } .cal-day { padding: 12px 6px; border-radius: 12px; text-align: center; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); } .cal-day.claimed { opacity: 0.5; border-color: rgba(var(--good-rgb), 0.4); } .cal-day.next { border-color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35), 0 0 14px rgba(var(--accent-rgb), 0.25); } .cal-daynum { font-size: 0.7rem; font-weight: 800; opacity: 0.7; } .cal-reward { font-weight: 800; margin: 4px 0; } .cal-mark { font-size: 1.1rem; color: var(--good); min-height: 1.2em; } .cal-day.next .cal-mark { color: var(--accent-strong); } /* Live-Ops banner (lobby) + slot-of-the-day badge. */ .liveops-banner { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .liveops-banner.hidden { display: none; } .lo-chip { padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; } .lo-chip.happy { background: rgba(255,120,180,0.16); color: #ff9ec4; border: 1px solid rgba(255,120,180,0.4); } .lo-chip.tourney { background: rgba(var(--info-rgb), 0.16); color: var(--info-text); border: 1px solid rgba(var(--info-rgb), 0.4); } .machine-card.sotd { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55), 0 0 18px rgba(var(--accent-rgb), 0.3); position: relative; } .mc-sotd { font-size: 0.7rem; font-weight: 800; color: var(--accent-strong); margin-bottom: 4px; } /* Shared progressive jackpot (slots lobby). */ .jackpot-line { margin: 6px 0 0; font-size: 0.95rem; color: #ffd700; } .jackpot-line b { font-size: 1.05rem; } /* Leaderboard: chosen achievement emoji + clickable rows. */ .lb-badge { font-size: 1rem; } .lb-clickable { cursor: pointer; } .lb-clickable:hover { background: rgba(255,255,255,0.06); border-radius: 8px; } /* "Meine Immobilien" list inside the empire panel. */ .empire-list { width: 100%; margin-top: 8px; } .empire-list summary { cursor: pointer; font-weight: 800; font-size: 0.85rem; opacity: 0.85; } .empire-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto; } .empire-item { text-align: left; padding: 7px 9px; border-radius: 9px; cursor: pointer; font-size: 0.8rem; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: inherit; } .empire-item small { display: block; font-weight: 600; opacity: 0.6; font-size: 0.68rem; } .empire-item:hover { background: rgba(255,255,255,0.12); } /* ===================== Sportwetten ===================== */ .sb-wrap { max-width: 720px; margin: 0 auto; } .sb-matches { display: flex; flex-direction: column; gap: 12px; } .sb-match { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 12px 14px; } .sb-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-dim); } .sb-live { color: #ff7a7a; font-weight: 700; } .sb-kick { color: var(--gold-strong); } .sb-final { color: var(--text-dim); } .sb-teams { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 10px; font-weight: 600; } .sb-teams > span { flex: 1; } .sb-teams > span:last-child { text-align: right; } .sb-score { color: var(--gold-strong); font-size: 1.2rem; } .sb-vs { color: var(--text-dim); font-weight: 400; flex: 0 !important; } /* Aufklapper fuer die Nebenmaerkte. Sichtbar bleibt nur der Sieger-Markt; alles andere kostete bei siebzig Spielen ueber 700 Knoepfe und rund vierunddreissig Bildschirme Scrollen. */ .sb-more { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; margin-top: var(--sp-2); padding: 8px; border-radius: var(--r-sm); border: 1px dashed var(--line-neutral); background: transparent; color: var(--text-dim); font-size: var(--fs-sm); font-weight: 700; } .sb-more:hover { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-strong); } /* Punkt, wenn in einem eingeklappten Markt etwas im Wettschein liegt. */ .sb-more-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 8px var(--accent-strong); } .sb-more-body { margin-top: var(--sp-2); } .sb-load-more { width: 100%; margin-top: var(--sp-3); padding: 13px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; } .sb-load-more:hover { border-color: rgba(var(--accent-rgb), 0.5); } #sb-leagues { margin-bottom: var(--sp-3); } .sb-market { margin-top: 8px; } .sb-mk-label { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 4px; } .sb-sels { display: flex; gap: 6px; } .sb-sel { position: relative; overflow: hidden; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); color: var(--text); cursor: pointer; } .sb-sel.on { border-color: var(--gold); background: rgba(var(--accent-rgb), 0.16); } .sb-sel-name { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sb-odds { color: var(--gold-strong); font-size: 0.98rem; } .sb-book { font-size: 0.64rem; color: var(--text-dim); z-index: 1; } .sb-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); opacity: 0.7; } .sb-myb { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 6px; } .sb-myb-row { font-size: 0.8rem; color: var(--text-dim); } .sb-slip { margin-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.14); padding-top: 10px; } .sb-slip-info { font-size: 0.9rem; margin-bottom: 8px; } .sb-chips { display: flex; gap: 6px; margin-bottom: 8px; } .sb-chip { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.3); color: var(--text); cursor: pointer; } .sb-chip.on { border-color: var(--gold); background: rgba(var(--accent-rgb), 0.16); } .sb-place { width: 100%; } .sb-feed { display: flex; flex-direction: column; gap: 4px; } .sb-feed-row { font-size: 0.82rem; color: var(--text-dim); } .sb-feed-sel { color: var(--gold-strong); } .sb-match .pos { color: var(--good-text); } .sb-match .neg { color: var(--bad-text); } /* Real-fixture badge in sportsbook */ .sb-real { display: inline-block; margin-left: 6px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; background: rgba(var(--good-rgb), 0.18); color: var(--good-text); vertical-align: middle; } .sb-real-match { border-color: rgba(var(--good-rgb), 0.35); } /* Sportsbook free amount entry */ .sb-amount-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sb-amount { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.3); color: var(--text); font-size: 1rem; } .sb-amount:focus { outline: 2px solid var(--gold); } /* Sportsbook section headers (real WC vs simulated) */ .sb-section-head { margin: 14px 2px 8px; font-weight: 700; color: var(--gold-strong); font-size: 1rem; } .sb-section-head:first-child { margin-top: 0; } .sb-pending { color: #d9c463; font-weight: 600; } /* ===================== Sportwetten bet slip + combos ===================== */ /* Der Wettschein bleibt beim Scrollen stehen — aber UNTER der Topbar, nicht darunter durchrutschend. Vorher klebte er bei top:8px und verschwand halb hinter der Leiste. Die Farben kamen aus einem fest verdrahteten Gruen und sahen in den anderen beiden Themes falsch aus. */ .sb-slip-panel { position: sticky; top: calc(var(--topbar-h, 58px) + var(--sp-2)); z-index: 30; background: var(--overlay); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); box-shadow: var(--e-3); backdrop-filter: blur(10px); } .sb-slip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sb-slip-head .sb-odds { color: var(--gold-strong); font-size: 1.1rem; } .sb-legs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .sb-leg { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 5px 8px; } .sb-leg b { color: var(--gold-strong); } .sb-leg-x { background: none; border: none; color: var(--bad-text); font-size: 0.95rem; cursor: pointer; flex: 0 0 auto; } .sb-slip-actions { display: flex; gap: 8px; margin-top: 4px; } .sb-slip-clear { flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.3); color: var(--text); cursor: pointer; } .sb-slip-place { flex: 1; } .sb-combos { display: flex; flex-direction: column; gap: 8px; } .sb-combo { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 10px 12px; } .sb-combo-head { font-size: 0.9rem; margin-bottom: 6px; } .sb-combo-head b { color: var(--gold-strong); } .sb-combo-leg { font-size: 0.8rem; color: var(--text-dim); padding: 1px 0; } .sb-combo .pos, .sb-combos .pos { color: var(--good-text); } .sb-combo .neg, .sb-combos .neg { color: var(--bad-text); } /* ===================== Slots: blue lightning + shockwave ===================== */ #slot-bolts { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 62; overflow: visible; } #slot-zap-flash { position: fixed; inset: 0; pointer-events: none; z-index: 61; opacity: 0; background: radial-gradient(circle at 50% 45%, rgba(90,180,255,0.30), transparent 62%); } #slot-zap-flash.go { animation: zapflash 0.34s ease-out; } @keyframes zapflash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } } .slot-shockwave { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid rgba(125,212,255,0.95); box-shadow: 0 0 20px rgba(90,180,255,0.85), inset 0 0 12px rgba(120,210,255,0.6); pointer-events: none; z-index: 60; animation: slotShock 0.6s cubic-bezier(0.2,0.7,0.3,1) forwards; } @keyframes slotShock { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(7.5); opacity: 0; } } /* Slots: auto-spin count selector */ .auto-count-sel { background: rgba(0,0,0,0.35); color: var(--text); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 4px 6px; font-size: 0.8rem; } /* Stats screen accent colors */ #stats-overview .pos, #stats-by-game .pos { color: var(--good-text); } #stats-overview .neg, #stats-by-game .neg { color: var(--bad-text); } /* Blackjack lobby: live hands (scoped so roulette roster keeps its row) */ #bj-lobby-players .bj-lp { flex-direction: column; align-items: stretch; gap: 4px; } .bj-lp-top { display: flex; align-items: center; justify-content: space-between; } .bj-lp-dealer { margin-top: 2px; } .bj-lp-hand { font-size: 0.85rem; } .bj-mini { display: inline-block; background: #f5f5f5; color: #111; border-radius: 4px; padding: 0 4px; margin: 0 1px; font-weight: 700; font-size: 0.78rem; } .bj-mini.red { color: var(--card-red); } /* Sportsbook cash-out button */ .sb-cashout { margin-left: 6px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--gold); background: rgba(var(--accent-rgb), 0.14); color: var(--gold-strong); font-size: 0.72rem; font-weight: 700; cursor: pointer; } /* Admin: per-account leaderboard reset */ .admin-acc { display: block; } .admin-acc-top { display: flex; align-items: center; justify-content: space-between; } .admin-acc-lb { margin-top: 4px; font-size: 0.72rem; color: var(--text-dim); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .admin-acc-lb .chip-btn { padding: 2px 6px; font-size: 0.72rem; } /* Poker turn-timer countdown */ .pk-timer { color: var(--gold-strong); font-weight: 700; margin-left: 6px; } .pk-timer.low { color: #ff7a7a; } /* ===================== 🐎 Rennbahn ===================== */ .horses-wrap { max-width: 760px; margin: 0 auto; } .horses-tabs { display: flex; gap: 8px; margin: 10px 0; } .horses-tab { flex: 1; padding: 9px 6px; border-radius: 12px; font-weight: 800; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--text); } .horses-tab.active { border-color: var(--gold); background: rgba(var(--accent-rgb), 0.14); color: var(--gold-strong); } .race-head { font-size: 0.92rem; margin: 6px 2px; } .race-head .rh-phase { float: right; font-weight: 800; color: var(--gold-strong); } .race-stage { position: relative; width: 100%; aspect-ratio: 16/9.5; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 12px 28px rgba(0,0,0,0.4); } #race-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .race-status { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 0.9rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.8); pointer-events: none; } .race-podium { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(10, 20, 12, 0.35); backdrop-filter: blur(1.5px); pointer-events: none; } .race-podium.hidden { display: none; } .rp-card { min-width: 200px; max-width: 80%; padding: 12px 18px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, rgba(20, 30, 20, 0.92), rgba(10, 18, 10, 0.92)); border: 1px solid rgba(255, 214, 110, 0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: rpIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes rpIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .rp-title { font-weight: 900; color: var(--gold-strong); margin-bottom: 8px; } .rp-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-weight: 700; } .rp-row.rp-0 { font-size: 1.05rem; } .rp-row.rp-1, .rp-row.rp-2 { opacity: 0.85; font-size: 0.9rem; } .rp-medal { flex: 0 0 auto; } .rp-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sprint-btn { position: absolute; bottom: 10px; right: 10px; z-index: 3; padding: 12px 18px; border-radius: 999px; border: 0; font-weight: 900; font-size: 1rem; background: linear-gradient(135deg, #ffd76a, #f4a942); color: #3a2402; box-shadow: 0 0 22px rgba(255,205,90,0.7), 0 6px 14px rgba(0,0,0,0.4); animation: sprintPulse 0.9s ease-in-out infinite alternate; } @keyframes sprintPulse { from { transform: scale(1); } to { transform: scale(1.07); } } .race-ticker { margin: 8px 0; padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,0.28); font-size: 0.8rem; max-height: 62px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.08); } .race-field { display: flex; flex-direction: column; gap: 5px; } .hf-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); } .hf-silk { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; box-shadow: 0 0 6px rgba(0,0,0,0.4); } .hf-main { flex: 1; min-width: 0; } .hf-name { font-weight: 800; font-size: 0.9rem; } .hf-name .hf-pos { color: var(--gold-strong); } .hf-owner { font-size: 0.7rem; color: var(--gold-strong); opacity: 0.9; margin-left: 4px; } .hf-npc { font-size: 0.7rem; opacity: 0.5; margin-left: 4px; } .hf-sub { font-size: 0.72rem; opacity: 0.65; } .hf-mybet { background: rgba(var(--good-rgb), 0.16); color: var(--good-text); border-radius: 6px; padding: 1px 6px; font-weight: 800; margin-left: 4px; } .hf-bet { flex: 0 0 auto; min-width: 58px; padding: 5px 7px; border-radius: 9px; font-size: 0.68rem; font-weight: 700; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.09); color: var(--text); line-height: 1.25; } .hf-bet b { font-size: 0.85rem; color: var(--gold-strong); } .hf-bet:disabled { opacity: 0.4; } .race-bets-head { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; opacity: 0.55; text-transform: uppercase; margin-top: 12px; } .race-bets { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; font-size: 0.82rem; } .rb-row { padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,0.035); } .rb-row .pos { color: var(--good); } .rb-row .neg { color: var(--bad-text); } .stable-list, .market-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .horse-card { padding: 11px 12px; border-radius: 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); } .horse-card.retired { opacity: 0.75; } .hc-name { font-weight: 800; margin-bottom: 5px; } .hc-stats { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; } .hc-stats .sb { display: inline-block; width: 90px; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.12); vertical-align: middle; margin: 0 6px; overflow: hidden; } .hc-stats .sb i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-strong), #e7a94b); border-radius: 99px; } .hc-train { font-size: 0.68rem; padding: 2px 8px; border-radius: 7px; font-weight: 700; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: var(--text); } .hc-actions { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; align-items: center; } .hc-actions .btn-primary { font-size: 0.8rem; padding: 8px 12px; width: auto; } .hc-tactic { padding: 7px; border-radius: 9px; font-size: 0.78rem; } .hc-sell { font-size: 0.72rem; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(214,90,90,0.5); background: rgba(214,90,90,0.12); color: var(--bad-text); } .hc-event { margin: 3px 0 6px; padding: 5px 9px; border-radius: 9px; font-size: 0.78rem; font-weight: 700; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--gold-strong); } /* ── Rennbahn: Champion-Banner, Wettschein & schönere Karten ── */ .champ-banner { margin: 6px 0 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.03)); border: 1px solid rgba(var(--accent-rgb), 0.32); } .cb-title { font-weight: 800; color: var(--gold-strong); font-size: 0.9rem; margin-bottom: 7px; } .cb-crown { filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.8)); } .cb-list { display: flex; flex-direction: column; gap: 3px; } .cb-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 0.82rem; background: rgba(255,255,255,0.03); } .cb-row.cb-me { background: rgba(126,215,154,0.14); border: 1px solid rgba(126,215,154,0.35); } .cb-row.cb-outside { opacity: 0.85; margin-top: 2px; } .cb-row.cb-empty { opacity: 0.8; font-size: 0.8rem; } .cb-medal { flex: 0 0 24px; text-align: center; font-weight: 800; } .cb-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-wins { flex: 0 0 auto; opacity: 0.85; } .cb-cash { flex: 0 0 auto; color: var(--good-text); font-weight: 800; min-width: 62px; text-align: right; } .cb-foot { margin-top: 8px; font-size: 0.76rem; opacity: 0.75; } .hc-rename { border: 0; background: none; cursor: pointer; font-size: 0.85rem; padding: 0 2px; opacity: 0.6; vertical-align: middle; } .hc-rename:hover { opacity: 1; } /* Feld-Wettbuttons hübscher */ .hf-bet { min-width: 60px; border-radius: 10px; padding: 6px 8px; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05)); border: 1px solid rgba(var(--accent-rgb), 0.4); transition: transform 0.08s, background 0.15s; } .hf-bet:not(:disabled):active { transform: scale(0.94); } .hf-bet:not(:disabled):hover { background: rgba(var(--accent-rgb), 0.24); } /* Wettschein-Bottom-Sheet */ .bet-slip { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .bet-slip.show { opacity: 1; pointer-events: auto; } .bet-slip-card { position: relative; width: 100%; max-width: 460px; margin: 0 8px; background: linear-gradient(180deg, #14251c, #0b1712); border: 1px solid var(--gold); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + var(--safe-bottom, 0px)); box-shadow: 0 -12px 40px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2,0.9,0.3,1); } .bet-slip.show .bet-slip-card { transform: translateY(0); } .bet-slip-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: var(--text); font-weight: 800; } .bet-slip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .bet-slip-head .hf-silk { width: 20px; height: 20px; border-radius: 6px; } .bet-slip-types { display: flex; gap: 8px; margin-bottom: 12px; } .bs-type { flex: 1; padding: 10px; border-radius: 11px; font-weight: 800; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: var(--text); } .bs-type.active { border-color: var(--gold); background: rgba(var(--accent-rgb), 0.16); color: var(--gold-strong); } .bet-slip-chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .bs-chip { flex: 1; min-width: 48px; padding: 9px 4px; border-radius: 10px; font-weight: 800; font-size: 0.82rem; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--text); } .bs-chip.bs-clear { flex: 0 0 40px; color: var(--bad-text); border-color: rgba(214,90,90,0.4); } .bet-slip-amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .bet-slip-amount input { flex: 1; padding: 11px 12px; border-radius: 11px; font-size: 1.1rem; font-weight: 800; text-align: right; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.16); color: #fff; } .bet-slip-payout { text-align: center; font-size: 0.95rem; margin-bottom: 12px; opacity: 0.9; } .bet-slip-payout b { color: var(--good-text); font-size: 1.15rem; } .bet-slip-go { width: 100%; font-size: 1.05rem; padding: 13px; } /* Stall/Markt-Karten aufgewertet */ .hc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .hc-head .hc-name { margin-bottom: 0; } .hc-form { font-size: 0.9rem; } .hc-tier { font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.03em; } .hc-tier.t-elite { background: linear-gradient(90deg,var(--accent-strong),#e7a94b); color: #2a1c04; } .hc-tier.t-strong { background: rgba(126,215,154,0.2); color: var(--good-text); border: 1px solid rgba(126,215,154,0.4); } .hc-tier.t-mid { background: rgba(var(--info-rgb), 0.16); color: #9cd0ff; border: 1px solid rgba(var(--info-rgb), 0.35); } .hc-tier.t-low { background: rgba(255,255,255,0.08); color: var(--text-dim); border: 1px solid rgba(255,255,255,0.15); } .hc-stat { display: flex; align-items: center; gap: 8px; } .hc-stat > span:first-child { flex: 0 0 84px; opacity: 0.8; } .hc-stat > .sb { flex: 1; } .hc-stat > b { flex: 0 0 26px; text-align: right; } .hc-stats .sb { width: auto; } .sb.sb-warn i { background: linear-gradient(90deg,var(--accent-strong),#e7a94b); } .sb.sb-low i { background: linear-gradient(90deg,#e88,#d65a5a); } .hc-record { font-size: 0.75rem; opacity: 0.7; margin-top: 4px; } .horse-card.busy { opacity: 0.85; } .horse-card { transition: border-color 0.15s; } .horse-card:hover { border-color: rgba(var(--accent-rgb), 0.28); } /* ===================== 🗼 Towers ===================== */ .towers-wrap { max-width: 520px; margin: 0 auto; } .towers-board { position: relative; display: flex; flex-direction: column; gap: 5px; margin: 18px 0 12px; padding: 14px 12px 12px; border-radius: 4px 4px 16px 16px; background: radial-gradient(120% 60% at 50% 0%, rgba(90, 60, 40, 0.18), transparent 60%), linear-gradient(180deg, #2c2440, #191330 55%, #120d22); border: 1px solid #4a3f68; border-top: none; box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.55), 0 8px 26px rgba(0, 0, 0, 0.4); } /* Zinnen oben — der Turm ist eine Burg. */ .towers-board::before { content: ""; position: absolute; top: -11px; left: -1px; right: -1px; height: 12px; background: repeating-linear-gradient(90deg, #4a3f68 0 20px, transparent 20px 34px); border-radius: 3px 3px 0 0; pointer-events: none; } .tw-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 10px; transition: background 0.15s, opacity 0.25s; } .tw-row.active { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.04)); animation: twRowPulse 1.5s ease-in-out infinite; } @keyframes twRowPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35) inset; } 50% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.7) inset, 0 0 16px rgba(var(--accent-rgb), 0.25); } } .tw-row.future { opacity: 0.42; filter: saturate(0.6); } .tw-row.climbed { opacity: 1; } .tw-row.climbed .tw-mult-lab { color: #7fd6a0; } .tw-mult-lab { flex: 0 0 64px; text-align: right; font-size: 0.8rem; font-weight: 800; color: #b7a7d8; font-variant-numeric: tabular-nums; } .tw-row.active .tw-mult-lab { color: var(--accent-strong); } .tw-dragon { position: absolute; right: -4px; top: 50%; transform: translateY(-50%) scaleX(-1); font-size: 1.35rem; pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7)); animation: twDragonBob 1.2s ease-in-out infinite alternate; } @keyframes twDragonBob { from { transform: translateY(-58%) scaleX(-1); } to { transform: translateY(-42%) scaleX(-1); } } .tw-tiles { display: flex; gap: 6px; flex: 1; } .tw-tile { flex: 1; aspect-ratio: 2.6 / 1; min-height: 34px; border-radius: 10px; font-size: 1.25rem; cursor: default; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, #3d3556, #262038); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -2px 0 rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; transition: transform 0.08s, background 0.15s; } .tw-row.active .tw-tile { cursor: pointer; border-color: rgba(var(--accent-rgb), 0.5); background: linear-gradient(180deg, #4e4270, #2e2647); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -3px 0 rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35); } .tw-row.active .tw-tile:hover { transform: translateY(-2px); background: linear-gradient(180deg, #5a4d80, #352c52); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .tw-row.active .tw-tile:active { transform: translateY(1px) scale(0.98); } .tw-tile.egg { background: linear-gradient(180deg, #2f8f5a, #1b6b3f); border-color: #3fbf78; text-shadow: 0 0 10px rgba(120,255,180,0.8); } .tw-tile.safe-dim { background: linear-gradient(180deg, #24503a, #163826); opacity: 0.6; } .tw-tile.trap { background: linear-gradient(180deg, #7a2b2b, #4a1616); border-color: #d65a5a; } .tw-tile.covered { opacity: 0.5; } .tw-tile.pop { animation: twPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes twPop { 0% { transform: scale(0.6); box-shadow: 0 0 0 rgba(120,255,180,0); } 45% { transform: scale(1.16); box-shadow: 0 0 22px rgba(120,255,180,0.8); } 100% { transform: scale(1); } } .tw-tile.boom { animation: twBoom 0.6s; box-shadow: 0 0 24px rgba(255,90,60,0.9); } @keyframes twBoom { 0% { transform: scale(1); } 15% { transform: scale(1.28) rotate(-4deg); background: #a33; } 35% { transform: scale(0.92) rotate(3deg); } 55% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1); } } .towers-board.tw-bust { animation: crashShake 0.45s; } .towers-board.tw-bust .tw-tile.safe-dim { opacity: 0.28; } .towers-board.tw-win { animation: twWinGlow 1.5s ease-out; } @keyframes twWinGlow { 0% { box-shadow: inset 0 0 46px rgba(0,0,0,0.55); } 30% { box-shadow: inset 0 0 60px rgba(var(--accent-rgb), 0.35), 0 0 44px rgba(var(--accent-rgb), 0.6); } 100% { box-shadow: inset 0 0 46px rgba(0,0,0,0.55), 0 8px 26px rgba(0,0,0,0.4); } } .tw-float { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 5; font-size: 1.7rem; font-weight: 900; color: #ffd66e; text-shadow: 0 2px 8px rgba(0,0,0,0.9); pointer-events: none; animation: rainPop 1.5s ease-out forwards; } .tw-diffs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .tw-diff { flex: 1; min-width: 84px; padding: 8px 4px; border-radius: 11px; font-weight: 800; font-size: 0.82rem; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--text); display: flex; flex-direction: column; gap: 2px; line-height: 1.15; } .tw-diff span { font-size: 0.62rem; font-weight: 600; opacity: 0.6; } .tw-diff.active { border-color: var(--gold); background: rgba(var(--accent-rgb), 0.16); color: var(--gold-strong); } /* ============================================================ Wochenrekorde in der Lobby Ein Raster statt einer Scroll-Reihe: auf dem iPad soll man alle neun Spiele auf einen Blick sehen, ohne seitwaerts zu wischen. ============================================================ */ .recs { margin: var(--sp-4) 0 var(--sp-2); } .recs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); } .recs-head .section-title { margin: 0 4px 0 0; } .recs-head small { font-size: var(--fs-xs); line-height: var(--lh-tight); } .recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); } .rec { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon game" "icon faktor" "who who" "det det"; align-items: center; gap: 2px var(--sp-2); text-align: left; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; /* Auf dem iPad ist das eine Tap-Flaeche, kein Hover-Ziel. */ -webkit-tap-highlight-color: transparent; min-height: 96px; transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .rec:active { transform: scale(0.98); } @media (hover: hover) { .rec:hover { border-color: var(--line-strong); } } .rec-icon { grid-area: icon; font-size: 1.5rem; line-height: 1; } .rec-game { grid-area: game; font-size: var(--fs-xs); color: var(--text-dim); } .rec-faktor { grid-area: faktor; font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 800; color: var(--accent); line-height: var(--lh-tight); } .rec-who { grid-area: who; font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-1); } .rec-detail { grid-area: det; font-size: var(--fs-xs); color: var(--text-mute); } /* Der eigene Rekord bekommt einen Rand, damit man ihn im Raster sofort sieht. */ .rec-mein { border-color: var(--line-strong); background: var(--accent-soft); } .rec-mein .rec-who { color: var(--accent-strong); } /* Offene Spiele sind die Einladung und sollen nicht wie ein Fehler wirken. */ .rec-frei { border-style: dashed; background: var(--surface-sunken); } .rec-frei .rec-faktor { color: var(--text-mute); font-size: var(--fs-lg); } .rec-frei .rec-who { color: var(--good-text); } /* --- Benachrichtigungen (Einstellungen) --- */ .push-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); } .push-actions .btn-primary { flex: 1 1 200px; } .push-hinweis { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); padding: var(--sp-3); font-size: var(--fs-sm); color: var(--text-dim); } .push-hinweis ol { margin: var(--sp-2) 0 0; padding-left: 20px; } .push-hinweis li { margin-bottom: var(--sp-1); } #ruf-btn { margin-left: auto; } /* --- Online-Leiste: zweite Zeile für "Zuletzt hier" und den Ruf-Knopf --- */ .online-strip { flex-wrap: wrap; } .online-strip .online-list { flex: 1 1 200px; } .online-last { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: var(--sp-2); border-top: 1px solid var(--line-neutral); margin-top: var(--sp-1); } .online-last::-webkit-scrollbar { display: none; } .online-last > .muted { flex: 0 0 auto; } /* Offline: gedämpft, damit die Online-Liste darüber die stärkere bleibt. */ .online-player.last-player { opacity: 0.72; } /* ============================================================ "Wem gehört Porta" — Besitzliste in der Stadt Zeilen statt Karten: auf dem iPad soll eine Freundesrunde von sechs bis acht Leuten ohne Scrollen komplett zu sehen sein. ============================================================ */ .city-board { display: flex; flex-direction: column; gap: var(--sp-1); } .cb-block { border-radius: var(--r-sm); overflow: hidden; } .cb-block.open { background: var(--surface-sunken); } .cb-row { display: grid; grid-template-columns: 1.6rem 10px 1fr auto auto; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-2); border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cb-row:active { background: var(--surface-2); } @media (hover: hover) { .cb-row:hover { border-color: var(--line); } } .cb-row.mine { border-color: var(--line-strong); background: var(--accent-soft); } .cb-rank { color: var(--text-mute); font-size: var(--fs-xs); text-align: right; } .cb-dot { width: 10px; height: 10px; border-radius: 50%; } .cb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-num { font-family: var(--font-num); font-size: var(--fs-sm); white-space: nowrap; } .cb-value { color: var(--text-dim); } .cb-tags { font-size: var(--fs-xs); white-space: nowrap; } .cb-caret { color: var(--text-mute); } /* Bei wenig Platz fliegen Wert und Abzeichen raus, Name und Hausanzahl bleiben: das ist die Information, um die es geht. */ @media (max-width: 560px) { .cb-row { grid-template-columns: 1.6rem 10px 1fr auto; } .cb-value, .cb-tags { display: none; } } .cb-items { padding: 0 var(--sp-2) var(--sp-2); } .cb-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; padding: var(--sp-2); margin-top: var(--sp-1); border: 1px solid var(--line-neutral); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cb-item:active { transform: scale(0.99); } .cb-item-main { display: flex; flex-direction: column; min-width: 0; } .cb-item-main small { color: var(--text-mute); font-size: var(--fs-xs); } .cb-item b { font-family: var(--font-num); font-size: var(--fs-sm); white-space: nowrap; } /* ============================================================ Spieler-Aussehen: Namensstile, Rahmen, Titel Alle Stile faerben den Text ueber einen Verlauf mit background-clip. Safari braucht dafuer zwingend -webkit-text-fill-color: transparent, sonst bleibt der Name einfarbig — und auf dem iPad ist Safari der Normalfall. Jede Bewegung steht in EINER Regel am Ende, hinter html:not(.reduce-motion). Wer in den Einstellungen Bewegung reduziert hat, sieht dieselben Farben, nur still. ============================================================ */ .pl-name { font-weight: 700; } .pl-ava { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .pl-text { display: inline-flex; flex-direction: column; min-width: 0; } .pl-title { font-size: var(--fs-xs); color: var(--text-mute); font-style: italic; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Verlaufsstile --- */ [class*="nm-"] { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 220% 100%; background-position: 0% 50%; } .nm-sonne { background-image: linear-gradient(100deg, #ffd76e, #ff8a3d, #ffd76e); } .nm-eis { background-image: linear-gradient(100deg, #9ddcff, #5e7bff, #9ddcff); } .nm-gift { background-image: linear-gradient(100deg, #a8ff60, #17c964, #a8ff60); } .nm-beere { background-image: linear-gradient(100deg, #ff8ad4, #8b5cf6, #ff8ad4); } .nm-schimmer { background-image: linear-gradient(100deg, #c8a44e, #fff6d8 45%, #c8a44e 60%); } .nm-krone { background-image: linear-gradient(100deg, #d4a017, #fff1b8 45%, #d4a017 60%); } .nm-feuer { background-image: linear-gradient(100deg, #ff4d1c, #ffdd55 50%, #ff4d1c); } .nm-regenbogen { background-image: linear-gradient(100deg, #ff6b6b, #ffd93d, #6bcB77, #4ecdc4, #a66bff, #ff6b6b); } /* Puls und Neon leuchten statt zu wandern, deshalb volle Farbe statt Verlauf. drop-shadow statt text-shadow: text-shadow liegt bei -webkit-text-fill-color: transparent hinter dem Text und ist unsichtbar. */ .nm-puls { background-image: linear-gradient(100deg, #ffe9a8, #ffb347, #ffe9a8); filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.55)); } .nm-neon { background-image: linear-gradient(100deg, #7ef9ff, #22d3ee, #7ef9ff); filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.8)); } .nm-glitch { background-image: linear-gradient(100deg, #ff2e88, #00e5ff, #ff2e88); filter: drop-shadow(1px 0 0 rgba(255, 46, 136, 0.7)) drop-shadow(-1px 0 0 rgba(0, 229, 255, 0.7)); } /* --- Rahmen ums Bild --- */ .pl-ava[class*="fr-"] { width: 1.9em; height: 1.9em; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; } .fr-silber { border-color: #cfd6dd; } .fr-gold { border-color: var(--accent); } .fr-neon { border-color: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, 0.75); } /* Die bunten Ringe liegen als eigene Ebene ueber dem Bild und werden in der Mitte ausgestanzt. Nur so kann sich der Ring drehen, ohne das Emoji mitzudrehen — mit einem echten border haette die Figur auf dem Kopf gestanden. */ .fr-rotierend, .fr-flamme, .fr-sterne { border-color: transparent; position: relative; } .fr-rotierend::before, .fr-flamme::before, .fr-sterne::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .fr-rotierend::before { background: conic-gradient(from 0deg, #22d3ee, #a66bff, #ff6b6b, #22d3ee); } .fr-flamme::before { background: conic-gradient(from 0deg, #ff4d1c, #ffdd55, #ff4d1c); } .fr-sterne::before { background: conic-gradient(from 0deg, var(--accent) 0 8%, transparent 8% 25%, var(--accent) 25% 33%, transparent 33% 50%, var(--accent) 50% 58%, transparent 58% 75%, var(--accent) 75% 83%, transparent 83%); } /* --- Bewegung. Alles hierunter faellt bei "Bewegung reduzieren" weg. --- */ @keyframes pl-sweep { to { background-position: 200% 50%; } } @keyframes pl-breathe { 50% { filter: drop-shadow(0 0 10px rgba(255, 179, 71, 0.95)); } } @keyframes pl-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 50% { opacity: 0.55; } 53% { opacity: 1; } } @keyframes pl-jitter { 0%, 92%, 100% { transform: translateX(0); } 94% { transform: translateX(-1px); } 96% { transform: translateX(1.5px); } 98% { transform: translateX(-0.5px); } } @keyframes pl-spin { to { transform: rotate(360deg); } } html:not(.reduce-motion) .nm-schimmer, html:not(.reduce-motion) .nm-krone { animation: pl-sweep 2.6s linear infinite; } html:not(.reduce-motion) .nm-feuer { animation: pl-sweep 1.8s linear infinite; } html:not(.reduce-motion) .nm-regenbogen { animation: pl-sweep 4s linear infinite; } html:not(.reduce-motion) .nm-puls { animation: pl-breathe 2.2s ease-in-out infinite; } html:not(.reduce-motion) .nm-neon { animation: pl-flicker 3.4s steps(1, end) infinite; } html:not(.reduce-motion) .nm-glitch { animation: pl-sweep 3s linear infinite, pl-jitter 2.4s steps(1, end) infinite; display: inline-block; } /* Der Ring dreht sich, nicht das Emoji darin: sonst steht die Figur auf dem Kopf. */ html:not(.reduce-motion) .fr-rotierend::before, html:not(.reduce-motion) .fr-flamme::before, html:not(.reduce-motion) .fr-sterne::before { animation: pl-spin 6s linear infinite; } /* --- Kosmetik-Shop: Vorschau, Stile, Titel --- */ .cos-preview { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; padding: var(--sp-4); margin-bottom: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); } .cos-preview-label { font-size: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; } .cos-preview-row { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xl); } .cos-preview-row .pl-ava { font-size: 1.6rem; } .cos-preview-row .pl-title { font-size: var(--fs-sm); } /* Stile und Titel brauchen Text statt eines Symbols, deshalb breiter. */ .cos-grid-wide { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .cos-style-demo { font-weight: 800; font-size: var(--fs-lg); } .cos-title-demo { font-size: var(--fs-sm); font-style: italic; text-align: center; line-height: 1.2; } .cos-motion { position: absolute; top: 4px; right: 6px; font-size: var(--fs-xs); opacity: 0.75; } .cos-item { position: relative; } /* Nicht kaeuflich: sichtbar, aber erkennbar unerreichbar. Ausgrauen waere falsch, gerade die Stuecke sollen Lust machen. */ .cos-item.locked { opacity: 0.85; border-style: dashed; } .cos-item.locked small { color: var(--text-mute); } .cos-item .pl-ava { font-size: 1.5rem; } /* ============================================================ Einsatz-Schnellwahl, Mines-Vorwahl und Rundenverlauf ============================================================ */ .bet-quick { display: flex; gap: var(--sp-1); margin-top: var(--sp-1); } .bet-quick button { flex: 1; padding: var(--sp-2) 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-dim); font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; /* 38px: auf dem iPad noch sicher zu treffen, ohne die Zeile aufzublasen. */ min-height: 38px; } .bet-quick button:active { background: var(--surface-2); color: var(--text); } /* Minen als Knopfreihe statt Zahlenfeld. */ .mines-choice { margin-top: var(--sp-3); } .mines-choice-label { display: block; font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: var(--sp-1); } .mines-mine-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .mines-mine { flex: 1 0 44px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-dim); font: inherit; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mines-mine.active { border-color: var(--line-strong); background: var(--accent-soft); color: var(--accent-strong); } /* Auszahlungstabelle: waagerecht scrollbar, damit sie auf jedem Gerät passt. */ .mines-pay { display: flex; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); overflow-x: auto; scrollbar-width: none; } .mines-pay::-webkit-scrollbar { display: none; } .mines-pay-label { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-mute); align-self: center; } .mines-pay-step { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; } .mines-pay-step b { font-family: var(--font-num); color: var(--accent); font-size: var(--fs-sm); } .mines-pay-step small { font-size: var(--fs-xs); color: var(--text-mute); white-space: nowrap; } .mines-target { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-dim); } .mines-target input { width: 80px; margin: 0 var(--sp-1); } .mines-live { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; } .mines-live .chip-btn { flex: 1; min-height: 40px; } /* Rundenverlauf, gleich in Mines und Towers. */ .runden-verlauf { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-3); } .rv-label { font-size: var(--fs-xs); color: var(--text-mute); margin-right: var(--sp-1); } .rv-chip { font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--line-neutral); } .rv-chip.up { color: var(--good-text); border-color: rgba(var(--good-rgb), 0.4); } .rv-chip.down { color: var(--bad); border-color: rgba(255, 122, 110, 0.35); } /* --- Duelle ohne Gleichzeitigkeit --- */ .duell-liste { display: flex; flex-direction: column; gap: var(--sp-2); } .duell-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .duell-eigen { border-color: var(--line-strong); background: var(--accent-soft); } .duell-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .duell-info small { font-size: var(--fs-xs); color: var(--text-dim); } .duell-info small.muted { color: var(--text-mute); } .duell-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: var(--sp-2) var(--sp-3); /* 44px: die iOS-Empfehlung für eine sichere Tap-Fläche. */ min-height: 44px; } .duell-btn span { font-size: var(--fs-xs); font-weight: 700; opacity: 0.8; } .duell-pot { flex: 0 0 auto; font-family: var(--font-num); color: var(--accent); } /* --- Hinweis auf wartende Duelle in der Lobby --- */ .duell-banner { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); margin-bottom: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 56px; } .duell-banner:active { transform: scale(0.995); } .duell-banner-icon { font-size: 1.5rem; } .duell-banner span { display: flex; flex-direction: column; min-width: 0; } .duell-banner b { font-size: var(--fs-md); } .duell-banner small { font-size: var(--fs-xs); color: var(--text-dim); }