/* ============================================================ نظام ألوان ألعاب ساو — رموز دلالية موحّدة (مصدر واحد · قاعدة ثابتة) نأخذ «أسلوب» كيو (رموز دلالية ثابتة) لا «لوحته». أي لعبة تشتق ألوانها من هنا؛ تقدر تتميّز بلون هوية عبر override لـ --accent فقط. ============================================================ */ :root { /* — الأساس والهوية (بنفسجي ساو) — */ --bg: #060312; --panel: #0c081c; --line: rgba(255, 255, 255, 0.09); --accent: #8b6cff; /* لون الهوية الأساسي */ --accent-2: #6248e0; /* درجة أغمق للتدرّجات */ --accent-soft: #c7b7ff; /* درجة فاتحة للتدرّجات واللمعات */ --accent-rgb: 139, 108, 255; /* نفس الهوية كـRGB — للتوهّجات rgba(var(--accent-rgb),α) */ /* — باليت العناصر المتعدّدة (شرائح العجلة · بطاقات اللاعبين · الأيقونات) — في هويّتنا: درجات بنفسجية ⇒ أحادي أنيق. في Tailwind: ألوان كيو الحيّة ⇒ متعدّد. */ --pal-1: #8b6cff; --pal-2: #a78bfa; --pal-3: #7a5cf0; --pal-4: #b9a5ff; --pal-5: #6248e0; --pal-6: #9d7bff; /* — الدلالات (نفس أسلوب كيو، بألواننا) — */ --success: #34d399; /* نجاح · نجاة · أمان */ --danger: #be123c; /* خطر · إقصاء · خطأ */ --danger-2: #ff5252; /* توهّج/تحذير الخطر */ --info: #7dd3fc; /* معلومة · تمييز ثانوي */ /* — أسطح زجاجية — */ --glass: rgba(20, 14, 40, 0.6); --glass-line: rgba(185, 165, 255, 0.18); /* — النصوص — */ --text: #f8f7fd; --muted: #a9a3c4; } /* ============================================================ ثيم بديل: لوحة Tailwind (ألوان كيو) — يُفعَّل بـ نفس أسماء الرموز، قيم مختلفة ⇒ كل الصفحات تتبدّل من مكان واحد. الافتراضي دائمًا هويّتنا البنفسجية أعلاه. ============================================================ */ :root[data-theme="tailwind"] { --bg: #020617; /* Slate 950 */ --panel: #0f172a; /* Slate 900 */ --line: rgba(255, 255, 255, 0.06); --accent: #3b82f6; /* Blue 500 */ --accent-2: #2563eb; /* Blue 600 */ --accent-soft: #93c5fd; /* Blue 300 */ --accent-rgb: 59, 130, 246; /* باليت كيو الحيّة — متعدّد الألوان */ --pal-1: #3b82f6; /* Blue */ --pal-2: #10b981; /* Emerald */ --pal-3: #f43f5e; /* Rose */ --pal-4: #f59e0b; /* Amber */ --pal-5: #a78bfa; /* Violet */ --pal-6: #06b6d4; /* Cyan */ --success: #10b981; /* Emerald 500 */ --danger: #f43f5e; /* Rose 500 */ --danger-2: #fb7185; /* Rose 400 */ --info: #38bdf8; /* Sky 400 */ --glass: rgba(15, 23, 42, 0.6); --glass-line: rgba(255, 255, 255, 0.08); --text: #f1f5f9; --muted: #94a3b8; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); } /* زر تبديل الثيم (تحت زر الرئيسية/المكتبة) — يلبس الرموز فيتبدّل مع الثيم */ .topbar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .theme-toggle { cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text); font-family: 'Cairo', system-ui, sans-serif; font-weight: 800; font-size: 12.5px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; } .theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent); color: #fff; box-shadow: 0 0 20px rgba(var(--accent-rgb), .25); } .theme-toggle:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; } body { font-family: 'Cairo', system-ui, Tahoma, Arial, sans-serif; color: var(--text); overflow-x: hidden; } a { color: inherit; text-decoration: none; } .hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, rgba(0,0,0,.18), rgba(0,0,0,.54)), radial-gradient(circle at 78% 12%, rgba(124, 92, 246, .14), transparent 30%), #060312; } .grid-layer { position: absolute; inset: 0; z-index: -8; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%); opacity: .9; } .hidden-shape { position: absolute; z-index: -7; pointer-events: none; filter: blur(.2px); opacity: .8; } .hidden-shape span { position: absolute; display: block; background: linear-gradient(90deg, transparent, var(--accent), #cabdff); box-shadow: 0 0 28px rgba(var(--accent-rgb), .45); clip-path: polygon(0 42%, 76% 0, 100% 18%, 22% 100%); } .hidden-shape--left { left: -10vw; top: 9vh; width: 46vw; height: 74vh; transform: rotate(-9deg); } .hidden-shape--left span:nth-child(1){ width: 55%; height: 16px; top: 17%; left: 11%; transform: rotate(50deg); } .hidden-shape--left span:nth-child(2){ width: 74%; height: 18px; top: 43%; left: 0; transform: rotate(-10deg); } .hidden-shape--left span:nth-child(3){ width: 60%; height: 12px; top: 58%; left: 21%; transform: rotate(29deg); } .hidden-shape--left span:nth-child(4){ width: 36%; height: 10px; top: 11%; left: 46%; transform: rotate(78deg); } .hidden-shape--right { right: -3vw; top: -6vh; width: 42vw; height: 42vh; opacity: .27; transform: rotate(-8deg); } .hidden-shape--right span:nth-child(1){ width: 78%; height: 48px; top: 14%; left: 5%; transform: rotate(13deg); } .hidden-shape--right span:nth-child(2){ width: 56%; height: 24px; top: 34%; left: 21%; transform: rotate(-24deg); } .hidden-shape--right span:nth-child(3){ width: 40%; height: 18px; top: 51%; left: 42%; transform: rotate(36deg); } .glow { position: absolute; z-index: -6; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; pointer-events: none; } .glow--top { width: 42vw; height: 28vw; right: 5vw; top: -16vw; background: rgba(var(--accent-rgb), .52); animation: pulseGlow 6s ease-in-out infinite alternate; } .glow--bottom { width: 45vw; height: 18vw; left: -8vw; bottom: -10vw; background: rgba(90, 62, 220, .2); } .fog { position: absolute; z-index: -4; inset: auto; pointer-events: none; background: radial-gradient(ellipse, rgba(var(--accent-rgb), .14), rgba(16, 12, 34, .18) 45%, transparent 72%); filter: blur(34px); opacity: .85; animation: drift 12s ease-in-out infinite alternate; } .fog--one { width: 62vw; height: 33vh; right: 0; top: 4vh; transform: rotate(-8deg); } .fog--two { width: 70vw; height: 30vh; left: -10vw; bottom: 5vh; opacity: .48; animation-delay: -3s; } .vignette { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.12) 58%, rgba(0,0,0,.7)), radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.5) 100%); } .topbar { position: relative; z-index: 3; height: 128px; padding: 28px clamp(24px, 5vw, 76px); display: flex; align-items: flex-start; justify-content: space-between; direction: ltr; } .brand-logo { display: block; width: 82px; height: 82px; background: linear-gradient(200deg, #e7e0ff 0%, #a88fff 38%, #7c5cf6 68%, #4d34c8 100%); -webkit-mask: url("/assets/icon-logo.png") center / contain no-repeat; mask: url("/assets/icon-logo.png") center / contain no-repeat; filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .38)); } .live-pill { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; color: #0c0722; font-weight: 900; letter-spacing: .2px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-soft), var(--accent)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 0 28px rgba(var(--accent-rgb), .25); } .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #0c0722; box-shadow: 0 0 0 5px rgba(10,6,26,.1); } .content { position: relative; z-index: 2; width: min(760px, 74vw); margin-right: clamp(30px, 16vw, 280px); margin-top: clamp(20px, 7vh, 80px); text-align: right; } .eyebrow { font-family: 'Baloo Bhaijaan 2', 'Cairo', sans-serif; font-size: clamp(38px, 6vw, 88px); line-height: 1.1; font-weight: 1000; letter-spacing: normal; color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.4); } .content h1 { margin: -4px 0 0; font-family: 'Baloo Bhaijaan 2', 'Cairo', sans-serif; font-size: clamp(96px, 18vw, 260px); line-height: 1; letter-spacing: normal; color: var(--accent); /* درجة «ساو» الأصلية — أول نسخة بنفسجية */ text-shadow: 0 10px 0 rgba(70, 45, 170, .35), 0 22px 50px rgba(0,0,0,.48), 0 0 32px rgba(var(--accent-rgb), .18); } .content p { margin: 28px 4px 0; color: #d6d0e8; font-size: clamp(14px, 1.7vw, 24px); font-weight: 800; word-spacing: 8px; } .cta { position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 17px 34px; border-radius: 999px; color: #8b85a8; font-family: 'Baloo Bhaijaan 2', 'Cairo', sans-serif; font-weight: 800; font-size: clamp(18px, 2vw, 25px); letter-spacing: .2px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #1a1530, #0d0a1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -5px 0 rgba(0, 0, 0, .4), 0 12px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .26s cubic-bezier(.2, .9, .3, 1.25), box-shadow .3s ease, color .3s ease; } /* teal "energized" fill — fades in on hover/focus */ .cta::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 48%, #6a4de6 100%); opacity: 0; transition: opacity .3s ease; } .cta__icon { position: relative; z-index: 2; width: 27px; height: 27px; flex: none; } .cta__label { position: relative; z-index: 2; } .cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .cta:hover, .cta:focus-visible { color: #0c0722; transform: translateY(-4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -6px 0 rgba(38, 20, 105, .3), 0 22px 48px rgba(0, 0, 0, .5), 0 0 0 1px rgba(185, 165, 255, .7), 0 0 46px rgba(var(--accent-rgb), .62); } .cta:hover::before, .cta:focus-visible::before { opacity: 1; } .cta:hover::after { animation: ctaSheen .9s ease; } .cta:active { transform: translateY(-1px) scale(.985); } .cta:focus-visible { outline: 3px solid #ded5ff; outline-offset: 4px; } @keyframes ctaSheen { from { left: -60%; opacity: .9; } to { left: 130%; opacity: 0; } } .edge-line { position: absolute; right: 22px; top: 17%; height: 68%; width: 2px; background: linear-gradient(transparent, var(--accent) 18%, var(--accent) 84%, transparent); box-shadow: 0 0 16px rgba(var(--accent-rgb), .5); } .footer { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 78px; padding: 0 clamp(24px, 5vw, 76px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(12,8,24,.65), rgba(6,3,18,.94)); backdrop-filter: blur(12px); direction: ltr; } .footer > span { font-weight: 1000; color: var(--accent); font-size: 18px; } .socials { display: flex; gap: clamp(18px, 4vw, 64px); color: #c5bce6; font-weight: 800; } .socials a { opacity: .88; transition: opacity .2s ease, color .2s ease; } .socials a:hover { color: #fff; opacity: 1; } .mini-mark { font-family: 'Baloo Bhaijaan 2', sans-serif; font-weight: 800; color: var(--accent); font-size: 30px; transform: skew(-10deg); } /* ===== login modal — same identity: dark panel + teal accents ===== */ .live-pill { border: 0; cursor: pointer; font-family: inherit; font-size: inherit; transition: transform .2s ease, box-shadow .2s ease; } .live-pill:hover { transform: translateY(-2px); box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 0 38px rgba(var(--accent-rgb), .45); } .live-pill:focus-visible { outline: 3px solid #ded5ff; outline-offset: 3px; } .login-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-modal[hidden] { display: none; } .login-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 2, 12, .72); backdrop-filter: blur(10px); animation: lmFade .25s ease; } .login-modal__card { position: relative; width: min(430px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; padding: 30px 28px 26px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, #120d26, #0b0719); border: 1px solid rgba(185, 165, 255, .18); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 44px rgba(var(--accent-rgb), .12); animation: lmIn .3s cubic-bezier(.2, .9, .3, 1.2); } /* teal top edge — the hero's edge-line, carried into the card */ .login-modal__card::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 16px rgba(var(--accent-rgb), .5); } .login-modal__close { position: absolute; top: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.04); color: var(--muted); font-size: 15px; cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s ease; } .login-modal__close:hover { color: #fff; border-color: rgba(126,255,247,.4); transform: rotate(90deg); } .login-modal__close:focus-visible { outline: 3px solid #ded5ff; outline-offset: 2px; } .login-modal__logo { display: block; width: 58px; height: 58px; margin: 2px auto 6px; background: linear-gradient(200deg, #e7e0ff 0%, #a88fff 38%, #7c5cf6 68%, #4d34c8 100%); -webkit-mask: url("/assets/icon-logo.png") center / contain no-repeat; mask: url("/assets/icon-logo.png") center / contain no-repeat; filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .35)); } .login-modal__card h2 { margin: 0 0 12px; font-family: 'Baloo Bhaijaan 2', 'Cairo', sans-serif; font-weight: 800; font-size: 27px; color: #fff; } .login-modal__note { margin: 0 0 20px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .22); color: #c5bce6; font-size: 13.5px; font-weight: 700; line-height: 1.8; } .login-modal__note b { color: var(--accent); } .lm-field { display: block; margin-bottom: 14px; text-align: right; } .lm-field[hidden] { display: none; } .lm-field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; font-weight: 800; } .lm-field input { width: 100%; padding: 13px 15px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .11); background: #0d0a1f; color: var(--text); font-family: 'Cairo', system-ui, sans-serif; font-size: 15px; font-weight: 600; transition: border-color .2s ease, box-shadow .2s ease; } .lm-field input::placeholder { color: #5c5580; } .lm-field input:focus { outline: none; border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); } .lm-sent { margin: 0 0 14px; color: #c5bce6; font-size: 13px; font-weight: 700; line-height: 1.8; } .lm-sent b { color: var(--accent); font-weight: 800; word-break: break-all; } .lm-field input.lm-code { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 10px; } .lm-field input.lm-code::placeholder { letter-spacing: 6px; } .lm-resend { margin: 14px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; } .lm-resend button { border: 0; padding: 4px 2px; background: none; color: var(--accent); font-family: 'Cairo', system-ui, sans-serif; font-size: 13px; font-weight: 800; cursor: pointer; } .lm-resend button:hover { text-decoration: underline; } .lm-resend button:disabled { color: var(--muted); cursor: default; text-decoration: none; } .lm-resend button:focus-visible { outline: 2px solid #ded5ff; outline-offset: 2px; border-radius: 6px; } .lm-error { margin: 0 0 14px; padding: 10px 13px; border-radius: 12px; background: rgba(255, 82, 82, .09); border: 1px solid rgba(255, 82, 82, .3); color: #ff9d9d; font-size: 13px; font-weight: 700; } /* the site button, energized by default (submit must read enabled) */ .cta--on { color: #0c0722; } .cta--on::before { opacity: 1; } .lm-submit { width: 100%; justify-content: center; margin-top: 4px; padding: 14px 24px; font-size: 19px; } .lm-submit[disabled] { opacity: .6; pointer-events: none; } .lm-alt { margin: 18px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; } .lm-alt a { color: var(--accent); font-weight: 800; } .lm-alt a:hover { text-decoration: underline; } .lm-success { padding: 18px 0 8px; } .lm-success__check { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-soft), #6a4de6); color: #0c0722; font-size: 30px; font-weight: 900; box-shadow: 0 0 34px rgba(var(--accent-rgb), .45); } .lm-success__text { margin: 16px 0 0; color: #fff; font-family: 'Baloo Bhaijaan 2', 'Cairo', sans-serif; font-weight: 800; font-size: 20px; } @keyframes lmFade { from { opacity: 0; } } @keyframes lmIn { from { opacity: 0; transform: translateY(16px) scale(.96); } } /* cinematic teal wipe → the library page */ .page-wipe { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%), var(--accent-soft), #6a4de6 45%, #1d1145 100%); clip-path: circle(0px at var(--wx, 50%) var(--wy, 50%)); transition: clip-path .55s cubic-bezier(.6, .05, .3, 1); pointer-events: none; } .page-wipe.on { clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); pointer-events: auto; } @keyframes pulseGlow { from { transform: scale(.92) translate3d(0, 0, 0); opacity: .72; } to { transform: scale(1.08) translate3d(-2vw, 1vw, 0); opacity: 1; } } @keyframes drift { from { transform: translate3d(-2vw, -1vh, 0) rotate(-8deg) scale(.96); } to { transform: translate3d(2vw, 2vh, 0) rotate(-4deg) scale(1.06); } } @media (max-width: 820px) { .topbar { height: 105px; padding-top: 20px; } .brand-logo { width: 64px; height: 64px; } .live-pill { padding: 10px 15px; font-size: 13px; } .content { width: calc(100% - 44px); margin: 10vh 22px 120px; text-align: center; } .eyebrow { letter-spacing: normal; } .content h1 { letter-spacing: normal; } .content p { word-spacing: 3px; } .footer { min-height: 92px; grid-template-columns: 1fr auto; gap: 10px 18px; } .footer > span { display: none; } .socials { gap: 18px; font-size: 13px; flex-wrap: wrap; } .hidden-shape--left { width: 76vw; left: -28vw; opacity: .55; } .hidden-shape--right { width: 70vw; right: -22vw; } .edge-line { right: 10px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ شريط بث تيك توك الموحّد لكل الألعاب (يبنيه games/live-bridge.js) خانة اليوزر + حالة الاتصال — قاعدة واحدة لكل لعبة، بألوان الرموز. ============================================================ */ .lv-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lv-field__label { color: var(--text); font-weight: 900; font-size: 13.5px; white-space: nowrap; } .lv-input { flex: 1 1 190px; min-width: 0; padding: 11px 14px; border-radius: 12px; direction: ltr; text-align: left; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(0, 0, 0, .35); color: var(--text); font-family: 'Cairo', system-ui, sans-serif; font-weight: 800; font-size: 14.5px; } .lv-input:focus { outline: none; border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); } .lv-input::placeholder { color: var(--muted); font-weight: 700; } /* خانة كلمة الانضمام بجانب اليوزر — عرض ثابت واتجاه عربي */ .lv-input--word { flex: 0 0 auto; width: 130px; max-width: 130px; direction: rtl; text-align: right; } .lv-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; color: var(--muted); min-height: 20px; } .lv-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #6a6486; flex: none; } .lv-status.is-connecting { color: #ffd76a; } .lv-status.is-connecting::before { background: #ffd76a; animation: lvBlink 1s ease-in-out infinite alternate; } .lv-status.is-connected { color: var(--success); } .lv-status.is-connected::before { background: var(--success); box-shadow: 0 0 10px var(--success); } .lv-status.is-error { color: var(--danger-2); } .lv-status.is-error::before { background: var(--danger-2); } @keyframes lvBlink { to { opacity: .3; } }