/* جلسة — Games V2 Hub brand alignment. Brings the persistent chrome and the pre-game selection surfaces (Hub home, group-games grid, Challenge category browser + its info modal) onto the approved Jalsa identity (navy canvas, couch orange, red/blue/yellow dot signature — see /brand-tokens.css). Scope discipline, confirmed before writing a line of this file: - Setup, Gameplay, Host, and Controller stylesheets keep their existing per-mode identity untouched, per CLAUDE.md and the brand-tokens.css header comment. - Native game overlays (mafia-native-view.js, wassif.js, sammi-native.js, dakhil-native-view.js, reverse-native-view.js — the .ng-app elements) are appended straight to , entirely outside .topbar/.hub-view/ [data-view="modes"]/[data-view="challenge"], so nothing here can reach them even through shared classes like .btn. - [data-view="setup"] rules in jalsa-challenge.css (team/scoring cards, .jalsa-section-num, .jalsa-scoring-*) are intentionally left alone. Load this file last so it wins the cascade over styles.css, design-system.css, hub.css and jalsa-challenge.css without editing them directly — keeps the diff reviewable and the rollback trivial. */ :is(.topbar, .hub-view, [data-view="modes"], [data-view="challenge"]) { --purple: #D05531; --pink: #DD6239; --teal: #1DB0E6; --gold: #FBCF3E; --bg: #0C1322; --muted: #9DAEC6; --line: rgba(255, 255, 255, .09); --text: #F3F7FC; --jz-purple: #D05531; --jz-gold: #FBCF3E; --jz-teal: #1DB0E6; --jz-text: #F3F7FC; --jz-text-2: #9DAEC6; --jz-text-3: #63779A; --jz-line: rgba(255, 255, 255, .09); --jz-line-strong: rgba(255, 255, 255, .2); --jz-surface-1: #17243A; --jz-surface-2: rgba(255, 255, 255, .06); --jz-danger: #E83D3E; } .topbar { background: rgba(12, 19, 34, .82); } /* ── جلسة dot-wordmark — exact match to the marketing landing's mark ─── */ .wordmark { display: inline-flex; align-items: center; text-decoration: none; } .wordmark .letter { font-family: 'Tajawal', sans-serif; font-weight: 900; color: #fff; line-height: 1; font-size: 21px; margin: 0 2px; text-shadow: 0 3px 10px rgba(0, 0, 0, .32); } .wordmark .l-j { transform: rotate(-3deg); } .wordmark .l-l { transform: rotate(4deg); } .wordmark .l-s { transform: rotate(-2deg); } .wordmark .l-t { transform: rotate(3deg); } .wordmark .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 0 1px; transform: translateY(-4px); } .wordmark .d-red { background: #E83D3E; } .wordmark .d-blue { background: #1DB0E6; } .wordmark .d-yellow { background: #FBCF3E; } .wordmark.xl .letter { font-size: clamp(38px, 6vw, 60px); margin: 0 4px; } .wordmark.xl .dot { width: clamp(7px, 1.2vw, 11px); height: clamp(7px, 1.2vw, 11px); margin: 0 3px; transform: translateY(-6px); } /* ── Category browser: hardcoded gold/purple accents → brand equivalents */ .jalsa-kicker { border-color: rgba(29, 176, 230, .28); background: rgba(29, 176, 230, .08); color: #8fe0f7; } .jalsa-poster-state { background: rgba(251, 207, 62, .95); color: #2a1d00; } .jalsa-poster.is-selected .jalsa-poster-select { box-shadow: 0 0 0 3px rgba(251, 207, 62, .28), var(--jz-shadow-1); } .jalsa-poster-check { color: #2a1d00; } .jalsa-poster-info:hover, .jalsa-poster-info:focus-visible { background: rgba(208, 85, 49, .8); } .jalsa-selection-dock { background: rgba(8, 12, 22, .88); } .jalsa-selection-dock.is-complete { border-top-color: rgba(251, 207, 62, .45); } .jalsa-info-difficulty { border-color: rgba(251, 207, 62, .32); background: rgba(251, 207, 62, .1); color: #ffe38c; } @media (prefers-reduced-motion: reduce) { .jsel-card, .jalsa-poster-select { transition: none; } }