/* ============================================================
UNO Cards Online — الأنماط (CSS)
اتقسم من index.html الأصلي لسهولة الصيانة، بدون أي تغيير في المحتوى.
============================================================ */
:root {
--bg: #0c1520;
--bg2: #111e2e;
--bg3: #18293d;
--surface: #1a2d42;
--surface2: #213550;
--gold: #f0b429;
--gold2: #c88a00;
--gold-glow: rgba(240,180,41,0.35);
--red: #e53935;
--green: #43a047;
--blue: #1e88e5;
--yellow: #fdd835;
--text: #e8f0fe;
--text2: #7a9ab8;
--shadow: 0 8px 32px rgba(0,0,0,0.6);
--card-w: 72px;
--card-h: 108px;
--radius: 14px;
--card-radius: 10px;
--trans: cubic-bezier(.4,0,.2,1);
}
/* ============================================================
LIGHT MODE
============================================================ */
:root[data-theme="light"] {
--bg: #eef2f7;
--bg2: #e4eaf2;
--bg3: #d8e1ec;
--surface: #ffffff;
--surface2: #f4f7fb;
--text: #0d1b2a;
--text2: #4a6080;
--shadow: 0 8px 32px rgba(0,0,0,0.10);
--gold-glow: rgba(240,180,41,0.22);
}
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] #splash {
background: radial-gradient(ellipse at 50% 0%, #c8def5 0%, #e4eef8 50%, #f0f5fb 100%);
}
:root[data-theme="light"] .auth-form-section {
background: rgba(255,255,255,0.88);
border-top-color: rgba(0,0,0,0.07);
}
:root[data-theme="light"] .auth-tabs {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.07);
}
:root[data-theme="light"] .auth-tab.active {
background: rgba(240,180,41,0.12);
border-color: rgba(240,180,41,0.3);
}
:root[data-theme="light"] #home { background: var(--bg); }
:root[data-theme="light"] #room { background: var(--bg); }
:root[data-theme="light"] .home-nav {
background: #fff;
border-bottom-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .home-header-border { display: none; }
:root[data-theme="light"] .home-logo-mini { box-shadow: 0 3px 12px rgba(229,57,53,0.3); }
:root[data-theme="light"] .nav-btn { color: var(--text2); }
:root[data-theme="light"] .auth-box {
background: rgba(255,255,255,0.97);
border-color: rgba(0,0,0,0.07);
box-shadow: 0 24px 80px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .auth-tabs { background: var(--bg3); }
:root[data-theme="light"] .auth-tab { color: var(--text2); }
:root[data-theme="light"] .auth-tab.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
:root[data-theme="light"] .inp {
background: var(--bg3);
border-color: rgba(0,0,0,0.10);
color: var(--text);
}
:root[data-theme="light"] .inp::placeholder { color: var(--text2); }
:root[data-theme="light"] .btn-outline { color: var(--text); border-color: rgba(0,0,0,0.14); }
:root[data-theme="light"] .btn-outline:hover { border-color: rgba(0,0,0,0.30); }
:root[data-theme="light"] .room-card {
background: var(--surface);
border-color: rgba(0,0,0,0.06);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
:root[data-theme="light"] .room-card:hover { background: var(--surface2); border-color: rgba(240,180,41,0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
:root[data-theme="light"] .lb-card { background: var(--surface); border-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .qa-btn-create { background: linear-gradient(145deg, rgba(240,180,41,0.10), rgba(240,180,41,0.04)); border-color: rgba(240,180,41,0.35); box-shadow: none; }
:root[data-theme="light"] .qa-btn-create:hover { background: rgba(240,180,41,0.2); box-shadow: none; }
:root[data-theme="light"] .qa-btn-join { background: linear-gradient(145deg, rgba(30,136,229,0.10), rgba(30,136,229,0.04)); border-color: rgba(30,136,229,0.35); box-shadow: none; }
:root[data-theme="light"] .qa-btn-join:hover { background: rgba(30,136,229,0.2); box-shadow: none; }
:root[data-theme="light"] .filter-chip { background: var(--bg3); border-color: rgba(0,0,0,0.08); color: var(--text2); }
:root[data-theme="light"] .filter-fade-r { background: linear-gradient(to left, transparent, var(--bg)); }
:root[data-theme="light"] .filter-fade-l { background: linear-gradient(to right, transparent, var(--bg)); }
:root[data-theme="light"] .section-count { background: var(--bg3); }
:root[data-theme="light"] .modal { background: var(--surface); border-color: rgba(0,0,0,0.07); }
:root[data-theme="light"] .type-opt { border-color: rgba(0,0,0,0.10); color: var(--text2); }
:root[data-theme="light"] .type-opt.selected { border-color: var(--gold); color: var(--gold); background: rgba(240,180,41,0.07); }
:root[data-theme="light"] .pc-btn { background: var(--bg3); border-color: rgba(0,0,0,0.10); color: var(--text); }
:root[data-theme="light"] .room-header { background: var(--surface); border-bottom-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .game-exit-btn, :root[data-theme="light"] .game-exit-btn-lobby { background: rgba(229,57,53,0.9); }
:root[data-theme="light"] .room-footer { background: var(--surface); border-top-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .back-btn { background: var(--bg3); border-color: rgba(0,0,0,0.10); color: var(--text2); }
:root[data-theme="light"] .icon-btn { background: var(--bg3); border-color: rgba(0,0,0,0.10); color: var(--text2); }
:root[data-theme="light"] .player-slot { background: var(--surface2); border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .player-slot.me { border-color: var(--gold); background: rgba(240,180,41,0.05); }
:root[data-theme="light"] .chat-panel { background: var(--surface); }
:root[data-theme="light"] .chat-header { background: linear-gradient(to bottom, var(--surface2) 0%, var(--surface) 100%); border-bottom-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .chat-msg.me .msg-bubble::before { background: var(--gold); }
:root[data-theme="light"] .chat-inp { background: var(--bg3); color: var(--text); border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .notif { background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(250,247,240,0.98)); border-color: rgba(240,180,41,0.4); color: var(--text); box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.03) inset; }
:root[data-theme="light"] .confirm-box { background: var(--surface); border-color: rgba(0,0,0,0.07); }
:root[data-theme="light"] .win-box { background: var(--surface); border-color: rgba(240,180,41,0.25); }
:root[data-theme="light"] .color-picker-box { background: var(--surface); border-color: rgba(0,0,0,0.07); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bg3); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* منع تحديد النص في كل الموقع — عشان الضغط/التمرير العادي ميحصلش بدله تظليل نص بالغلط
(خصوصًا مع اللمس على الموبايل). مستثنى منها حقول الكتابة الفعلية (input/textarea) عشان
المستخدم يقدر يكتب وينسخ ويحدد فيها عادي. */
html, body, * {
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
-webkit-touch-callout: none;
}
input, textarea {
-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
-webkit-touch-callout: default;
}
body {
font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100dvh;
overflow: hidden;
position: relative;
-webkit-tap-highlight-color: transparent;
}
/* Allow screens to scroll internally where needed */
.screen-scrollable { overflow-y: auto !important; }
/* لما مودال يبقى مفتوح فوق أي شاشة، بنمنع سكرول الشاشة اللي وراه — عشان
سكرول بارها الطويل ميظهرش وراء المودال (كان بيبين كخط رمادي طويل خارج حدوده) */
.screen.modal-open-lock { overflow-y: hidden !important; }
input, button, select { font-family: inherit; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ============================================================
SCREEN TRANSITIONS
============================================================ */
.screen {
display: none; width: 100vw; height: 100dvh; overflow: hidden;
position: absolute; inset: 0;
}
.screen.active {
display: flex; flex-direction: column;
animation: screenIn .35s var(--trans) both;
}
.screen.slide-out {
animation: screenOut .3s var(--trans) both;
}
@keyframes screenIn {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screenOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-12px) scale(.97); }
}
/* ============================================================
SPLASH / AUTH
============================================================ */
#splash {
background: radial-gradient(ellipse at 50% 0%, #1a3a5c 0%, #0c1828 45%, #060e18 100%);
align-items: stretch; justify-content: flex-start;
position: relative; overflow-y: auto !important; overflow-x: hidden;
height: 100dvh;
}
.splash-bg-cards { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.splash-bg-card {
position: absolute; width: 56px; height: 84px;
border-radius: 8px; opacity: 0.06;
animation: floatCard 9s ease-in-out infinite;
}
@keyframes floatCard {
0%,100% { transform: translateY(0) rotate(var(--rot)); }
50% { transform: translateY(-22px) rotate(calc(var(--rot) + 6deg)); }
}
.splash-content {
display: flex; flex-direction: column; align-items: stretch;
z-index: 1; padding: 0;
width: 100%; box-sizing: border-box;
min-height: 100dvh;
}
/* اللوجو الصغير جوه الـ auth-box */
.splash-logo-box {
width: 110px; height: 154px; border-radius: 16px;
background: #1a1a1a;
border: 3.5px solid #f0b429;
box-shadow:
0 0 0 1px #1a1a1a,
0 0 0 5px #f0b429,
0 16px 48px rgba(240,180,41,0.5),
0 0 60px rgba(240,180,41,0.18);
animation: logoBounce 2.5s ease-in-out infinite;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden; flex-shrink: 0;
margin: 0 auto 10px;
}
.uno-card-oval {
position: absolute;
width: 80px; height: 124px;
border-radius: 50%;
background: radial-gradient(ellipse at 38% 38%, #e53535 0%, #c0241c 100%);
border: 2.5px solid rgba(0,0,0,0.25);
transform: rotate(-28deg);
z-index: 1;
box-shadow: inset 0 6px 24px rgba(0,0,0,0.35), 0 4px 20px rgba(229,57,53,0.5);
}
.uno-card-text {
font-size: 48px; font-weight: 900; color: #f0b429; z-index: 2;
font-style: italic; letter-spacing: -2px;
text-shadow: 3px 3px 0 rgba(0,0,0,0.6), -1px -1px 0 rgba(0,0,0,0.3);
}
.uno-card-corner {
position: absolute; font-size: 13px; font-weight: 900; color: #f0b429; z-index: 2;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5); font-style: italic; line-height: 1;
}
.uno-card-corner.tl { top: 7px; left: 10px; }
.uno-card-corner.br { bottom: 7px; right: 10px; transform: rotate(180deg); }
@keyframes logoBounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.splash-title {
font-size: 34px; font-weight: 900; letter-spacing: 2px;
background: linear-gradient(135deg, #f0b429 0%, #fff 50%, #f0b429 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
text-align: center; line-height: 1; margin-bottom: 4px;
}
.splash-subtitle { display: none; }
/* Register avatar picker */
.reg-av-wrap {
position: relative; flex-shrink: 0;
width: 68px; height: 68px;
display: flex; align-items: flex-end; justify-content: center;
}
.reg-av-btn {
width: 52px !important; height: 52px !important;
aspect-ratio: 1 / 1;
border-radius: 50%; padding: 0; overflow: hidden;
cursor: pointer; transition: width .22s var(--trans), height .22s var(--trans), border-color .2s, box-shadow .2s;
border: 3px solid rgba(255,255,255,0.12);
box-shadow: none; background: transparent;
display: block; flex-shrink: 0;
}
.reg-av-btn.selected {
width: 68px !important; height: 68px !important;
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(240,180,41,0.35), 0 6px 18px rgba(240,180,41,0.3) !important;
}
.reg-av-check {
display: none;
position: absolute; bottom: -2px; right: -2px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--gold); color: #12100a;
font-size: 12px; font-weight: 900;
align-items: center; justify-content: center;
border: 2.5px solid var(--bg);
pointer-events: none;
}
.reg-av-btn.selected ~ .reg-av-check { display: flex; }
/* Auth box — full page, no cramped box */
.auth-box {
background: transparent;
border: none;
border-radius: 0; padding: 0; width: 100%;
box-shadow: none; display: flex; flex-direction: column; gap: 0;
flex: 1; min-height: 100dvh;
}
/* Hero top section */
.auth-hero {
display: flex; flex-direction: column; align-items: center;
padding: 52px 24px 32px;
background: radial-gradient(ellipse at 50% 0%, rgba(240,180,41,0.12) 0%, transparent 70%);
position: relative;
}
.auth-hero::after {
content: ''; position: absolute; bottom: 0; left: 5%; right: 5%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(240,180,41,0.25), transparent);
}
/* Form section at bottom — card style */
.auth-form-section {
flex: 1; background: rgba(10,18,32,0.65);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
padding: 28px 24px 40px;
display: flex; flex-direction: column; gap: 16px;
border-radius: 32px 32px 0 0;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: auto;
}
.auth-box h2 {
font-size: 16px; font-weight: 800; text-align: center;
color: var(--text2); margin: 0;
}
.auth-tabs {
display: flex; gap: 0;
background: rgba(255,255,255,0.05);
border-radius: 14px; padding: 4px;
border: 1px solid rgba(255,255,255,0.07);
}
.auth-tab {
flex: 1; padding: 10px; text-align: center; border-radius: 10px;
cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text2);
transition: all .22s var(--trans); border: none; background: none;
}
.auth-tab.active {
background: rgba(240,180,41,0.15);
color: var(--gold);
box-shadow: 0 2px 10px rgba(240,180,41,0.15);
border: 1px solid rgba(240,180,41,0.25);
}
.inp {
width: 100%; padding: 12px 14px; border-radius: 11px;
border: 1.5px solid rgba(255,255,255,0.08); background: var(--bg3);
color: var(--text); font-size: 14px; outline: none; transition: border .2s, box-shadow .2s;
}
.inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,0.15); }
.inp::placeholder { color: var(--text2); }
/* Remove blue selection outline on focus */
.inp:focus-visible { outline: none; }
/* Auth form field — label فوق الخانة، مش placeholder جوّاها */
.af-field { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.af-label {
font-size: 12px; font-weight: 700; color: var(--text2); padding: 0 2px;
display: flex; align-items: center; gap: 5px;
}
.af-label .af-hint { font-weight: 600; color: var(--text2); opacity: .65; font-size: 10.5px; }
.af-input-wrap { position: relative; }
.af-input-wrap .inp { padding-left: 42px; }
.af-toggle-pass {
position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent;
color: var(--text2); display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: color .15s var(--trans), background .15s var(--trans);
}
.af-toggle-pass:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.af-toggle-pass svg { width: 18px; height: 18px; }
.btn {
padding: 12px 20px; border-radius: 11px; border: none; cursor: pointer;
font-size: 14px; font-weight: 700; letter-spacing: .4px;
transition: all .2s var(--trans); outline: none; width: 100%;
}
.btn:disabled { opacity: .55; cursor: default; pointer-events: none; }
.btn-primary {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
color: #12100a; box-shadow: 0 4px 18px var(--gold-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(240,180,41,0.5); }
.btn-primary:active { transform: translateY(0); }
#startBtn { display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; overflow: visible; }
.ic-rocket-wrap {
position: relative; width: 18px; height: 20px; flex-shrink: 0;
display: inline-flex; align-items: flex-end; justify-content: center;
}
.ic-rocket-pad {
position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
width: 14px; height: 4px; border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(18,16,10,0.35), transparent 70%);
animation: rocketPadPulse 1.6s ease-in-out infinite;
}
.ic-rocket-body {
position: relative; display: inline-flex; align-items: flex-end; justify-content: center;
animation: rocketHover 1.6s ease-in-out infinite;
transform-origin: bottom center;
}
.ic-rocket-btn { width: 16px; height: 16px; flex-shrink: 0; position: relative; z-index: 2; transform: rotate(28deg); transform-origin: center; }
.ic-rocket-flame {
position: absolute; left: 50%; top: 60%; transform: translateX(-50%) rotate(28deg);
transform-origin: 50% 0%; width: 6px; height: 9px; z-index: 1;
animation: rocketFlicker .18s ease-in-out infinite alternate;
}
@keyframes rocketHover {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes rocketPadPulse {
0%, 100% { opacity: .5; transform: translateX(-50%) scaleX(1); }
50% { opacity: .9; transform: translateX(-50%) scaleX(.75); }
}
@keyframes rocketFlicker {
0% { transform: translateX(-50%) rotate(28deg) scaleY(1) scaleX(1); opacity: .95; }
100% { transform: translateX(-50%) rotate(28deg) scaleY(1.2) scaleX(.85); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
.ic-rocket-body, .ic-rocket-flame, .ic-rocket-pad { animation: none; }
}
/* أيقونات SVG جوه أزرار وعناوين (بدل الإيموجي) */
.btn-icon { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.pm-header-icon, .cr-title svg { width: 1.05em; height: 1.05em; opacity: 0.9; flex-shrink: 0; }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid rgba(255,255,255,0.14); }
.btn-outline:hover { border-color: rgba(255,255,255,0.35); }
.btn-danger { background: linear-gradient(135deg, #e53935, #b71c1c); color: #fff; box-shadow: 0 4px 16px rgba(229,57,53,0.4); }
.btn-danger:hover { transform: translateY(-1px); }
.auth-err { color: #ef5350; font-size: 12px; text-align: center; min-height: 16px; }
/* ============================================================
HOME
============================================================ */
#home { background: var(--bg); overflow: hidden; }
/* overscroll-behavior اتشالت من هنا عشان سحب الموبايل لأسفل (pull-to-refresh) يرجع يشتغل عادي */
/* ── HEADER — 3-column layout ── */
.home-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 10px 14px;
background: linear-gradient(180deg, #1e3050 0%, var(--surface) 100%);
border-bottom: 2px solid rgba(240,180,41,0.30);
flex-shrink: 0; position: relative; z-index: 20;
box-shadow:
0 4px 24px rgba(0,0,0,0.35),
0 1px 0 rgba(240,180,41,0.18) inset;
min-height: 66px;
}
:root[data-theme="light"] .home-header {
background: linear-gradient(180deg, #dce8f8 0%, #fff 100%);
border-bottom-color: rgba(240,180,41,0.28);
box-shadow: 0 4px 20px rgba(0,0,0,0.09), 0 1px 0 rgba(240,180,41,0.2) inset;
}
/* وسط */
.home-logo-center {
display: flex; align-items: center; gap: 8px;
justify-content: center;
}
.home-logo-text-col {
display: flex; flex-direction: column; gap: 1px;
}
/* يمين (user-menu) يتمحور يمين */
.home-header > .user-menu-wrap {
justify-self: end;
}
/* شمال (theme toggle) يتمحور شمال */
.home-header > .theme-toggle-btn {
justify-self: start;
}
.home-logo-row { display: flex; align-items: center; gap: 10px; }
/* بطاقة UNO mini — نفس ألوان أيقونة الكارت (ICON_CARD) الظاهرة في بطاقة نتيجة المباراة */
.home-logo-mini {
width: 32px; height: 44px; border-radius: 8px;
background: #111e2e;
border: 2px solid #f0b429;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden; flex-shrink: 0;
box-shadow:
0 0 0 1px rgba(0,0,0,0.8),
0 0 0 3px rgba(240,180,41,0.6),
0 6px 20px rgba(240,180,41,0.35);
animation: cardTilt 3s ease-in-out infinite;
transform-origin: center bottom;
cursor: pointer;
transition: box-shadow .25s;
}
.home-logo-mini:hover {
box-shadow:
0 0 0 1px rgba(0,0,0,0.8),
0 0 0 3px rgba(240,180,41,0.85),
0 8px 28px rgba(240,180,41,0.55);
animation-play-state: paused;
}
@keyframes cardTilt {
0% { transform: rotate(4deg) translateY(0px); }
30% { transform: rotate(0deg) translateY(-3px); }
60% { transform: rotate(-4deg) translateY(0px); }
85% { transform: rotate(0deg) translateY(-2px); }
100% { transform: rotate(4deg) translateY(0px); }
}
.home-logo-mini .mini-oval {
position: absolute; width: 23px; height: 35px;
border-radius: 50%;
background: radial-gradient(ellipse at 38% 38%, #3f6f9f 0%, #182636 100%);
transform: rotate(-28deg); z-index: 1;
}
.home-logo-mini .mini-text {
font-size: 10px; font-weight: 900; color: #f0b429; z-index: 2;
font-style: italic; letter-spacing: -0.5px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}
.home-logo-mini .mini-corner {
position: absolute; font-size: 5.5px; font-weight: 900; color: #f0b429; z-index: 2;
text-shadow: 1px 1px 0 rgba(0,0,0,0.7); font-style: italic; line-height: 1;
}
.home-logo-mini .mini-corner.tl { top: 2.5px; left: 3.5px; }
.home-logo-mini .mini-corner.br { bottom: 2.5px; right: 3.5px; transform: rotate(180deg); }
/* اسم اللعبة */
.home-title {
font-size: 17px; font-weight: 900; letter-spacing: .3px; line-height: 1.1;
background: linear-gradient(135deg, #ffe566 0%, #f0b429 45%, #e09000 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
white-space: nowrap;
}
.home-title-sub {
font-size: 8.5px; font-weight: 700; color: var(--text2); letter-spacing: 2px;
text-transform: uppercase; margin-top: 1px; display: block;
-webkit-text-fill-color: var(--text2); opacity: 0.7;
white-space: nowrap;
}
:root[data-theme="light"] .home-logo-center .home-title-sub {
-webkit-text-fill-color: var(--text2);
}
.home-user { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15); }
.home-username { font-size: 13px; font-weight: 700; }
.home-wins { font-size: 11px; color: var(--gold); font-weight: 600; }
/* ── NAV BAR — part of header zone ── */
.home-nav {
display: flex; gap: 0; padding: 0 10px;
background: var(--surface);
border-bottom: 2px solid rgba(240,180,41,0.18);
flex-shrink: 0;
box-shadow: 0 3px 14px rgba(0,0,0,0.18);
position: relative; z-index: 10;
}
.nav-btn {
flex: 1; padding: 10px 0; font-size: 12px; font-weight: 700;
color: var(--text2); cursor: pointer; position: relative;
border: none; background: none; letter-spacing: .3px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
transition: color .2s var(--trans);
}
.nav-btn-icon { font-size: 21px; line-height: 1; transition: transform .2s; display: inline-flex; }
.nav-btn-icon svg { width: 21px; height: 21px; }
.nav-btn-label { font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.nav-btn:hover { color: var(--text); }
.nav-btn.active { color: var(--gold); }
.nav-btn.active .nav-btn-label { margin-top: -4px; }
.nav-btn.active .nav-btn-icon svg { width: 27px; height: 27px; }
.nav-btn.active .nav-btn-icon { animation: navIconTilt 3s ease-in-out infinite; transform-origin: center bottom; }
@keyframes navIconTilt {
0% { transform: scale(1.15) rotate(4deg) translateY(0px); }
30% { transform: scale(1.15) rotate(0deg) translateY(-3px); }
60% { transform: scale(1.15) rotate(-4deg) translateY(0px); }
85% { transform: scale(1.15) rotate(0deg) translateY(-2px); }
100% { transform: scale(1.15) rotate(4deg) translateY(0px); }
}
.nav-btn.active::after {
content: ''; position: absolute; bottom: 0; left: 15%; right: 15%;
height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
border-radius: 3px 3px 0 0;
animation: navUnderline .25s var(--trans) both;
}
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:root[data-theme="light"] .home-nav {
background: #fff;
border-bottom-color: rgba(240,180,41,0.22);
box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
:root[data-theme="light"] .nav-btn { color: var(--text2); }
/* خط فاصل تحت الهيدر */
.home-header-border { display: none; }
.home-body { flex: 1; overflow-y: auto; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.home-body::-webkit-scrollbar { width: 3px; }
.home-body::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 2px; }
.tab-panel { display: none; flex-direction: column; gap: 12px; }
.tab-panel.active { display: flex; animation: panelIn .3s var(--trans) both; flex: 1; min-height: 0; }
@keyframes panelIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
/* Quick actions */
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-btn {
padding: 18px 10px; border-radius: 16px; text-align: center;
cursor: pointer; transition: all .2s var(--trans); border: 1.5px solid;
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: none; width: 100%;
}
.qa-btn-create {
background: linear-gradient(145deg, rgba(240,180,41,0.18), rgba(240,180,41,0.08));
border-color: rgba(240,180,41,0.5);
}
.qa-btn-create:hover { background: rgba(240,180,41,0.28); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,180,41,0.18); }
.qa-btn-join {
background: linear-gradient(145deg, rgba(30,136,229,0.18), rgba(30,136,229,0.08));
border-color: rgba(30,136,229,0.5);
}
.qa-btn-join:hover { background: rgba(30,136,229,0.28); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,136,229,0.18); }
.qa-icon { font-size: 28px; display: inline-flex; color: var(--text); }
.qa-icon svg { width: 28px; height: 28px; }
.qa-label { font-size: 13px; font-weight: 800; color: var(--text); }
.qa-sub { font-size: 11px; color: var(--text2); }
/* Dark mode: bright filled buttons */
:root[data-theme="dark"] .qa-btn-create {
background: linear-gradient(145deg, #f5c842, #e6a800);
border-color: transparent;
box-shadow: 0 4px 18px rgba(240,180,41,0.35);
}
:root[data-theme="dark"] .qa-btn-create:hover {
background: linear-gradient(145deg, #ffd84d, #f0b429);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(240,180,41,0.5);
}
:root[data-theme="dark"] .qa-btn-create .qa-label { color: #12100a; }
:root[data-theme="dark"] .qa-btn-create .qa-sub { color: rgba(18,16,10,0.65); }
:root[data-theme="dark"] .qa-btn-create .qa-icon { filter: none; color: #12100a; }
:root[data-theme="dark"] .qa-btn-join {
background: linear-gradient(145deg, #42a5f5, #1565c0);
border-color: transparent;
box-shadow: 0 4px 18px rgba(30,136,229,0.35);
}
:root[data-theme="dark"] .qa-btn-join:hover {
background: linear-gradient(145deg, #64b5f6, #1e88e5);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(30,136,229,0.5);
}
:root[data-theme="dark"] .qa-btn-join .qa-label { color: #fff; }
:root[data-theme="dark"] .qa-btn-join .qa-sub { color: rgba(255,255,255,0.65); }
:root[data-theme="dark"] .qa-btn-join .qa-icon { color: #fff; }
/* Section headers — شيك ومتقسم */
.section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px; gap: 10px;
}
.section-header-left { display: flex; align-items: center; gap: 8px; }
.section-title {
font-size: 12px; font-weight: 800; color: var(--text);
text-transform: uppercase; letter-spacing: 1.4px;
}
.section-line {
flex: 1; height: 1px;
background: linear-gradient(to left, transparent, rgba(255,255,255,0.07));
}
:root[data-theme="light"] .section-line {
background: linear-gradient(to left, transparent, rgba(0,0,0,0.08));
}
.section-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--gold); flex-shrink: 0;
box-shadow: 0 0 6px rgba(240,180,41,0.5);
}
.section-count {
font-size: 11px; color: var(--text2); background: var(--bg3);
padding: 2px 9px; border-radius: 20px; font-weight: 700;
}
/* زرار "مسح" في هيدر السكشن (ترتيب / سجل مباريات) — أيقونة صغيرة مستقلة
جوه section-header نفسه، بعيدة تمامًا عن صف التابات (filter-row) عشان
ميتضغطش معاها ويبقى شكله وحش لما التابات تزيد */
.section-reset-btn {
flex-shrink: 0;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: rgba(229,57,53,0.12);
border: 1.5px solid rgba(229,57,53,0.35);
color: #ef5350;
border-radius: 50%;
font-size: 13px;
cursor: pointer;
transition: background .18s, transform .12s;
}
.section-reset-btn:hover { background: rgba(229,57,53,0.22); }
.section-reset-btn:active { transform: scale(0.92); }
.section-reset-btn svg { width: 16px; height: 16px; }
/* Filter row with gradient fade */
.filter-wrap { position: relative; }
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-fade-r {
position: absolute; top: 0; left: 0; bottom: 3px; width: 40px;
background: linear-gradient(to left, transparent, var(--bg));
pointer-events: none; border-radius: 0 0 0 4px;
}
.filter-fade-l {
position: absolute; top: 0; right: 0; bottom: 3px; width: 40px;
background: linear-gradient(to right, transparent, var(--bg));
pointer-events: none;
}
.filter-chip {
padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
white-space: nowrap; cursor: pointer; transition: all .2s;
border: 1px solid rgba(255,255,255,0.1); color: var(--text2); background: var(--bg3);
flex-shrink: 0;
}
.filter-chip.active { background: var(--gold); color: #12100a; border-color: var(--gold); }
/* Room cards */
.rooms-section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.room-list { display: flex; flex-direction: column; gap: 8px; }
.room-list.is-empty-list {
display: flex; align-items: center; justify-content: center; padding-top: 6vh;
}
.room-card {
background: var(--surface); border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px; padding: 14px 16px; cursor: pointer;
transition: all .2s var(--trans);
display: flex; align-items: center; gap: 14px;
animation: cardIn .3s var(--trans) both;
}
@keyframes cardIn { from { opacity:0; transform: translateX(-8px); } to { opacity:1; transform: translateX(0); } }
.room-card:hover { background: var(--surface2); border-color: rgba(240,180,41,0.25); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.room-host-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; font-size: 19px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; border: 2px solid rgba(255,255,255,0.12); overflow: visible; }
/* ميني-لوجو UNO بديل لأفاتار صاحب الغرفة — نفس تصميم وحركة اللوجو الرئيسي بالهيدر، بحجم أصغر */
.room-host-av.room-host-logo {
background: #12100d !important; border-radius: 8px;
border: 2px solid #f0b429; position: relative; overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 0 3px rgba(240,180,41,0.6), 0 4px 14px rgba(240,180,41,0.3);
animation: cardTilt 3s ease-in-out infinite; transform-origin: center bottom;
}
.room-host-logo .mini-oval { position: absolute; width: 19px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse at 38% 38%, #e53535 0%, #b01c1c 100%); transform: rotate(-28deg); z-index: 1; }
.room-host-logo .mini-text { font-size: 8.5px; font-weight: 900; color: #f0b429; z-index: 2; font-style: italic; letter-spacing: -0.3px; text-shadow: 1px 1px 0 rgba(0,0,0,0.8); }
.room-host-logo .mini-corner { position: absolute; font-size: 4.5px; font-weight: 900; color: #f0b429; z-index: 2; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); font-style: italic; line-height: 1; }
.room-host-logo .mini-corner.tl { top: 2px; left: 3px; }
.room-host-logo .mini-corner.br { bottom: 2px; right: 3px; transform: rotate(180deg); }
.room-info { flex: 1; min-width: 0; }
.room-host-name {
font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.room-host-name-av { width: 1em; height: 1em; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.room-host-name-av svg { width: 100%; height: 100%; display: block; }
.room-host-name-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
width: fit-content; max-width: 15ch; flex: 0 0 auto;
}
.room-locked-tag {
flex-shrink: 0; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 9px;
white-space: nowrap; line-height: 1.5;
}
.room-locked-tag.is-locked { color: #ef5350; background: rgba(229,57,53,0.14); border: 1px solid rgba(229,57,53,0.4); }
.room-locked-tag.is-opened { color: #66bb6a; background: rgba(67,160,71,0.14); border: 1px solid rgba(67,160,71,0.4); }
.room-id-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.room-id { font-size: 11px; color: var(--text2); }
.room-status-chip { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: 4px; display: inline-block; }
.room-right { text-align: left; flex-shrink: 0; }
.room-players { font-size: 14px; font-weight: 800; }
.chip-waiting { background: rgba(67,160,71,0.18); color: #81c784; }
.chip-ingame { background: rgba(229,57,53,0.18); color: #ef9a9a; }
.chip-private { background: rgba(240,180,41,0.18); color: var(--gold); }
.chip-finished{ background: rgba(158,158,158,0.18); color: #bdbdbd; }
.empty-state { text-align: center; padding: 12px 20px; color: var(--text2); }
.empty-state .es-icon { font-size: 44px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.empty-state .es-icon svg { width: 52px; height: 52px; opacity: 0.55; animation: esIconFloat 3s ease-in-out infinite; transform-origin: center bottom; }
.empty-state p { font-size: 13px; }
@keyframes esIconFloat {
0% { transform: rotate(3deg) translateY(0px); }
30% { transform: rotate(0deg) translateY(-4px); }
60% { transform: rotate(-3deg) translateY(0px); }
85% { transform: rotate(0deg) translateY(-2px); }
100% { transform: rotate(3deg) translateY(0px); }
}
/* Leaderboard */
.leaderboard-list { display: flex; flex-direction: column; gap: 0; transition: opacity .18s ease, transform .18s ease; opacity: 1; transform: translateY(0); }
.leaderboard-list.is-empty-list { display: flex; align-items: center; justify-content: center; padding-top: 18vh; }
.leaderboard-list.lb-fading { opacity: 0; transform: translateY(6px); }
/* ── سجل المباريات (Match History cards) ───────────────────── */
.mh-card {
background: var(--bg2); border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px; padding: 14px; margin-bottom: 10px;
transition: background-color 1.2s ease, opacity .35s ease, transform .35s ease;
}
/* لحظة وصول ماتش جديد عن طريق matches:new — بيدخل بتأثير خفيف ولمعة ذهبية بتخف تدريجيًا */
.mh-card.mh-card-new {
opacity: 0; transform: translateY(-10px);
background: rgba(240,180,41,0.14);
}
:root[data-theme="light"] .mh-card { border-color: rgba(0,0,0,0.08); }
.mh-card-top {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: linear-gradient(135deg, rgba(240,180,41,0.14) 0%, rgba(240,180,41,0.03) 100%);
border: 1px solid rgba(240,180,41,0.25);
border-radius: 14px; padding: 10px 12px;
margin: -2px -2px 2px -2px;
}
:root[data-theme="light"] .mh-card-top {
background: linear-gradient(135deg, rgba(240,180,41,0.12) 0%, rgba(240,180,41,0.02) 100%);
}
.mh-winner-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mh-winner-av {
width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 18px; color: #fff;
border: 2.5px solid rgba(240,180,41,0.8);
box-shadow: 0 0 12px rgba(240,180,41,0.25);
animation: lbGlowGold 1.6s ease-in-out infinite;
}
.mh-winner-info { min-width: 0; }
.mh-winner-name { font-size: 15px; font-weight: 900; color: var(--gold, #f0b429); display: inline-flex; align-items: center; gap: 5px; min-width: 0; animation: mhWinnerNameGlow 1.6s ease-in-out infinite; }
.mh-winner-name .mh-winner-name-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 0; }
.mh-winner-name .ic-crown-lg { width: 16px; height: 16px; flex-shrink: 0; position: relative; top: -1px; }
@keyframes mhWinnerNameGlow {
0%, 100% { filter: drop-shadow(0 0 3px rgba(240,180,41,0.5)); }
50% { filter: drop-shadow(0 0 6px rgba(240,180,41,0.95)); }
}
.mh-meta { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.mh-del-btn {
flex-shrink: 0; background: rgba(229,57,53,0.12); border: 1px solid rgba(229,57,53,0.3);
color: #ef5350; border-radius: 10px; width: 32px; height: 32px; font-size: 14px;
cursor: pointer; transition: background .15s;
display: flex; align-items: center; justify-content: center;
}
.mh-del-btn .ic-trash { width: 15px; height: 15px; vertical-align: 0; }
.mh-del-btn:hover { background: rgba(229,57,53,0.22); }
.mh-card-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text2); font-weight: 600; }
.mh-players-wrap {
margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.1);
display: flex; flex-direction: column; gap: 8px;
}
:root[data-theme="light"] .mh-players-wrap { border-color: rgba(0,0,0,0.1); }
/* نفس ستايل صفوف "الترتيب النهائي" في شاشة انتهت الجولة (win-standing-row) بالمللي،
عشان سجل المباريات يتسق بصريًا مع شاشة الفوز */
.mh-player-row {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
border-inline-start: 3px solid transparent;
border-radius: 14px; padding: 9px 12px;
}
:root[data-theme="light"] .mh-player-row {
background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.07);
}
.mh-player-row-winner {
background: linear-gradient(135deg, rgba(240,180,41,0.16) 0%, rgba(240,180,41,0.05) 100%);
border-color: rgba(240,180,41,0.4);
border-inline-start-color: #f0b429;
}
.mh-player-row.mh-rank-row-2 { border-inline-start-color: rgba(199,210,224,0.65); }
.mh-player-row.mh-rank-row-3 { border-inline-start-color: rgba(205,138,77,0.65); }
.mh-player-medal { width: 20px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mh-player-medal .ic-medal { width: 20px; height: 22px; }
.mh-player-av {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 12px; color: var(--text);
background: rgba(255,255,255,0.08);
}
.mh-player-av.mh-rank-1 { border: 2px solid rgba(240,180,41,0.7); animation: lbGlowGold 1.6s ease-in-out infinite; }
.mh-player-av.mh-rank-2 { border: 2px solid rgba(192,192,192,0.6); animation: lbGlowSilver 1.6s ease-in-out infinite; }
.mh-player-av.mh-rank-3 { border: 2px solid rgba(205,127,50,0.6); animation: lbGlowBronze 1.6s ease-in-out infinite; }
.mh-player-name {
flex: 1; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mh-player-row-winner .mh-player-name { color: var(--gold); }
.mh-player-cards {
flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 10px;
color: var(--text2); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08);
}
.mh-player-row-winner .mh-player-cards {
color: #3a2604; background: linear-gradient(135deg,var(--gold),var(--gold2)); border: none;
/* نفس توهج شارة الفائز في صفحة نتيجة المباراة (win-standing-badge.is-win) —
اتساق بصري بين الصفحتين */
animation: winBadgeGlow 1.6s ease-in-out infinite;
}
/* ── بطاقة ترتيبي الشخصية ── */
.lb-my-rank-card {
background: linear-gradient(135deg, rgba(240,180,41,0.12) 0%, rgba(240,180,41,0.04) 100%);
border: 1.5px solid rgba(240,180,41,0.35);
border-radius: 18px; padding: 14px 16px;
margin-bottom: 16px;
display: flex; flex-direction: column; gap: 12px;
box-shadow: 0 4px 20px rgba(240,180,41,0.1);
}
.lb-my-rank-header {
display: flex; align-items: center; justify-content: space-between;
}
.lb-my-rank-label {
font-size: 10px; font-weight: 800; color: var(--gold);
letter-spacing: 1.5px; text-transform: uppercase;
}
.lb-my-rank-badge {
background: rgba(240,180,41,0.15); border: 1.5px solid rgba(240,180,41,0.4);
color: var(--gold); font-size: 12px; font-weight: 900;
padding: 3px 12px; border-radius: 20px; letter-spacing: .5px;
}
.lb-my-rank-body {
display: flex; align-items: center; gap: 14px;
}
.lb-my-rank-av {
width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
flex-shrink: 0; border: 2.5px solid rgba(240,180,41,0.5);
box-shadow: 0 0 14px rgba(240,180,41,0.2);
}
.lb-my-rank-info {
/* من غير flex:1 عشان الأرقام (.lb-my-rank-stats) متتشدش لأقصى حافة الكارت —
كانت بتسيب فراغ كبير مستفز بين الاسم والأرقام لما الاسم يكون قصير */
min-width: 0;
}
.lb-my-rank-name { font-size: 15px; font-weight: 900; color: var(--text); }
.lb-my-rank-games { font-size: 11px; color: var(--text2); margin-top: 2px; }
.lb-my-rank-stats {
display: flex; flex-direction: column; align-items: center; gap: 2px;
/* بتتحط جنب الاسم مباشرة بمسافة معقولة (بدل الالتصاق بحافة الكارت)، والفراغ
الإضافي (لو الاسم قصير) بيروح بعدها لآخر الكارت بدل ما يفصل بينها وبين الاسم */
margin-inline-start: auto;
}
.lb-my-rank-wins {
font-size: 22px; font-weight: 900; color: var(--gold); line-height: 1;
/* الرقم فوق كلمة "انتصار" بالظبط في المنتصف (عمود واحد متمركز)، مش جنبها أفقيًا */
display: flex; align-items: center; justify-content: center; gap: 4px;
}
.lb-my-rank-winrate { font-size: 11px; font-weight: 700; color: #66bb6a; text-align: center; }
:root[data-theme="light"] .lb-my-rank-card {
background: linear-gradient(135deg, rgba(240,180,41,0.08) 0%, rgba(240,180,41,0.02) 100%);
}
:root[data-theme="light"] .lb-my-rank-winrate { color: #388e3c; }
/* بودييوم — المراكز الثلاثة الأولى */
.lb-podium {
display: flex; align-items: flex-end; justify-content: center;
gap: 0; margin-bottom: 20px; padding: 0 4px;
}
.lb-podium-card {
display: flex; flex-direction: column; align-items: center; gap: 0;
position: relative; flex: 1; text-align: center;
}
.lb-podium-medal {
line-height: 1; margin-bottom: 6px; position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
}
.lb-podium-medal .ic-medal { width: 26px; height: 28px; }
/* ── أيقونات SVG بديلة للإيموجي (كأس/هدف/روبوت/تاج/ميدالية...) ── */
.ic-trophy, .ic-target, .ic-bot, .ic-crown, .ic-people, .ic-clock, .ic-trash {
display: inline-block; vertical-align: -3px; flex-shrink: 0;
}
.ic-trophy { width: 20px; height: 22px; fill: var(--gold); }
.ic-target, .ic-bot, .ic-people, .ic-clock { width: 13px; height: 13px; color: currentColor; }
.ic-crown { width: 13px; height: 13px; fill: var(--gold); }
.ic-trash { width: 15px; height: 15px; color: currentColor; }
.ic-medal-1 { color: #f0b429; }
.ic-medal-2 { color: #b9c4d1; }
.ic-medal-3 { color: #c47a3d; }
.lb-podium-av {
width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 20px; color: #fff;
border: 3px solid rgba(255,255,255,0.18);
position: relative; z-index: 2; margin-bottom: 8px;
}
.lb-podium-card.rank-1 .lb-podium-av {
width: 68px; height: 68px; font-size: 26px;
border-color: rgba(240,180,41,0.7);
animation: lbGlowGold 1.6s ease-in-out infinite;
}
.lb-podium-card.rank-2 .lb-podium-av {
border-color: rgba(192,192,192,0.5);
animation: lbGlowSilver 1.6s ease-in-out infinite;
}
.lb-podium-card.rank-3 .lb-podium-av {
border-color: rgba(205,127,50,0.5);
animation: lbGlowBronze 1.6s ease-in-out infinite;
}
@keyframes lbGlowGold {
0%, 100% { box-shadow: 0 0 0 4px rgba(240,180,41,0.18), 0 0 16px rgba(240,180,41,0.3); }
50% { box-shadow: 0 0 0 6px rgba(240,180,41,0.32), 0 0 30px rgba(240,180,41,0.65); }
}
@keyframes lbGlowSilver {
0%, 100% { box-shadow: 0 0 0 3px rgba(192,192,192,0.16), 0 0 12px rgba(192,192,192,0.25); }
50% { box-shadow: 0 0 0 5px rgba(192,192,192,0.3), 0 0 24px rgba(192,192,192,0.55); }
}
@keyframes lbGlowBronze {
0%, 100% { box-shadow: 0 0 0 3px rgba(205,127,50,0.16), 0 0 12px rgba(205,127,50,0.25); }
50% { box-shadow: 0 0 0 5px rgba(205,127,50,0.3), 0 0 24px rgba(205,127,50,0.55); }
}
/* ── ألوان وتوهج مميز لكل مركز من 4 لـ 10 (مش دهبي/فضي/برونزي زي أول 3 مراكز) ──
كل مركز ليه لون مختلف + أنيميشن توهج خفيف بنفس فكرة lbGlowGold/Silver/Bronze
بس بشدة أهدأ (المراكز دي مش بودييوم)، ومستخدمة موحّدة في: الليدربورد، سجل
المباريات، وصفحة نتيجة المباراة عشان الاتساق البصري بين التلاتة */
:root {
--rk4: #4fc3f7; /* سماوي */
--rk5: #7e57c2; /* بنفسجي */
--rk6: #66bb6a; /* أخضر */
--rk7: #ff8a65; /* برتقالي محروق */
--rk8: #ec407a; /* وردي */
--rk9: #26a69a; /* تركواز */
--rk10: #ffca28; /* أصفر خردلي */
}
@keyframes lbGlowRank4 { 0%,100% { box-shadow: 0 0 0 3px rgba(79,195,247,0.16), 0 0 12px rgba(79,195,247,0.28); } 50% { box-shadow: 0 0 0 5px rgba(79,195,247,0.3), 0 0 22px rgba(79,195,247,0.55); } }
@keyframes lbGlowRank5 { 0%,100% { box-shadow: 0 0 0 3px rgba(126,87,194,0.18), 0 0 12px rgba(126,87,194,0.3); } 50% { box-shadow: 0 0 0 5px rgba(126,87,194,0.32), 0 0 22px rgba(126,87,194,0.58); } }
@keyframes lbGlowRank6 { 0%,100% { box-shadow: 0 0 0 3px rgba(102,187,106,0.16), 0 0 12px rgba(102,187,106,0.28); } 50% { box-shadow: 0 0 0 5px rgba(102,187,106,0.3), 0 0 22px rgba(102,187,106,0.55); } }
@keyframes lbGlowRank7 { 0%,100% { box-shadow: 0 0 0 3px rgba(255,138,101,0.18), 0 0 12px rgba(255,138,101,0.3); } 50% { box-shadow: 0 0 0 5px rgba(255,138,101,0.32), 0 0 22px rgba(255,138,101,0.58); } }
@keyframes lbGlowRank8 { 0%,100% { box-shadow: 0 0 0 3px rgba(236,64,122,0.16), 0 0 12px rgba(236,64,122,0.28); } 50% { box-shadow: 0 0 0 5px rgba(236,64,122,0.3), 0 0 22px rgba(236,64,122,0.55); } }
@keyframes lbGlowRank9 { 0%,100% { box-shadow: 0 0 0 3px rgba(38,166,154,0.18), 0 0 12px rgba(38,166,154,0.3); } 50% { box-shadow: 0 0 0 5px rgba(38,166,154,0.32), 0 0 22px rgba(38,166,154,0.58); } }
@keyframes lbGlowRank10 { 0%,100% { box-shadow: 0 0 0 3px rgba(255,202,40,0.18), 0 0 12px rgba(255,202,40,0.3); } 50% { box-shadow: 0 0 0 5px rgba(255,202,40,0.32), 0 0 22px rgba(255,202,40,0.58); } }
/* أفاتار المركز (دايرة الصورة) — نفس فكرة mh-rank-1/2/3: بوردر ملون + أنيميشن توهج،
شغالة على الأفاتار في أي مكان (ليدربورد lb-av-wrap، سجل مباريات mh-player-av،
صفحة النتيجة win-standing-av) */
.rk4-av { border: 2px solid rgba(79,195,247,0.65) !important; animation: lbGlowRank4 1.6s ease-in-out infinite; }
.rk5-av { border: 2px solid rgba(126,87,194,0.65) !important; animation: lbGlowRank5 1.6s ease-in-out infinite; }
.rk6-av { border: 2px solid rgba(102,187,106,0.65) !important; animation: lbGlowRank6 1.6s ease-in-out infinite; }
.rk7-av { border: 2px solid rgba(255,138,101,0.65) !important; animation: lbGlowRank7 1.6s ease-in-out infinite; }
.rk8-av { border: 2px solid rgba(236,64,122,0.65) !important; animation: lbGlowRank8 1.6s ease-in-out infinite; }
.rk9-av { border: 2px solid rgba(38,166,154,0.65) !important; animation: lbGlowRank9 1.6s ease-in-out infinite; }
.rk10-av { border: 2px solid rgba(255,202,40,0.65) !important; animation: lbGlowRank10 1.6s ease-in-out infinite; }
/* رقم/شارة المركز (نص) بنفس اللون */
.rk4-txt { color: var(--rk4) !important; }
.rk5-txt { color: var(--rk5) !important; }
.rk6-txt { color: var(--rk6) !important; }
.rk7-txt { color: var(--rk7) !important; }
.rk8-txt { color: var(--rk8) !important; }
.rk9-txt { color: var(--rk9) !important; }
.rk10-txt { color: var(--rk10) !important; }
/* خط جانبي (border-inline-start) للصف بنفس اللون — للاستخدام في win-standing-row / mh-player-row */
.rk4-side { border-inline-start-color: rgba(79,195,247,0.65) !important; }
.rk5-side { border-inline-start-color: rgba(126,87,194,0.65) !important; }
.rk6-side { border-inline-start-color: rgba(102,187,106,0.65) !important; }
.rk7-side { border-inline-start-color: rgba(255,138,101,0.65) !important; }
.rk8-side { border-inline-start-color: rgba(236,64,122,0.65) !important; }
.rk9-side { border-inline-start-color: rgba(38,166,154,0.65) !important; }
.rk10-side { border-inline-start-color: rgba(255,202,40,0.65) !important; }
.lb-podium-name {
font-size: 12px; font-weight: 800; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 90%; margin-bottom: 4px; position: relative; z-index: 2;
}
.lb-podium-wins {
font-size: 20px; font-weight: 900; line-height: 1; position: relative; z-index: 2;
}
.lb-podium-wins-lbl { font-size: 9px; color: var(--text2); margin-bottom: 8px; position: relative; z-index: 2; }
/* قاعدة البودييوم */
.lb-podium-stage {
width: 100%; border-radius: 14px 14px 0 0;
display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 900; padding-top: 10px;
}
.lb-podium-card.rank-1 { order: 2; }
.lb-podium-card.rank-2 { order: 1; }
.lb-podium-card.rank-3 { order: 3; }
.lb-podium-card.rank-1 .lb-podium-wins { color: #f0b429; }
.lb-podium-card.rank-2 .lb-podium-wins { color: #b0bec5; }
.lb-podium-card.rank-3 .lb-podium-wins { color: #cd7f32; }
.lb-podium-card.rank-1 .lb-podium-stage {
height: 88px;
background: linear-gradient(180deg, rgba(240,180,41,0.22) 0%, rgba(240,180,41,0.06) 100%);
border: 1px solid rgba(240,180,41,0.35); border-bottom: none;
color: #f0b429;
}
.lb-podium-card.rank-2 .lb-podium-stage {
height: 64px;
background: linear-gradient(180deg, rgba(192,192,192,0.15) 0%, rgba(192,192,192,0.04) 100%);
border: 1px solid rgba(192,192,192,0.25); border-bottom: none;
color: #9e9e9e;
}
.lb-podium-card.rank-3 .lb-podium-stage {
height: 48px;
background: linear-gradient(180deg, rgba(205,127,50,0.15) 0%, rgba(205,127,50,0.04) 100%);
border: 1px solid rgba(205,127,50,0.25); border-bottom: none;
color: #a0673a;
}
/* بقية الترتيب */
.lb-rest-header {
display: grid;
/* لازم نفس أعمدة .lb-card بالظبط (# / أفاتار / معلومات / فوز) عشان "#" و"اللاعب"
و"انتصارات" فوق يتساووا تمامًا مع محتوى الصف تحتهم — قبل كده كان الهيدر بس 3
أعمدة (36px 1fr auto) بينما الصف 4 أعمدة، فكل حاجة كانت زايحة */
grid-template-columns: 32px 34px 1fr 52px;
gap: 10px; padding: 8px 14px;
font-size: 11px; font-weight: 800; color: var(--text2);
text-transform: uppercase; letter-spacing: 1px;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 4px;
}
.lb-rest-header span:first-child { text-align: center; }
.lb-rest-header span:nth-child(2) { text-align: center; white-space: nowrap; overflow: visible; }
.lb-rest-header span:last-child { text-align: center; }
:root[data-theme="light"] .lb-rest-header { border-bottom-color: rgba(0,0,0,0.05); }
.lb-card {
display: grid; grid-template-columns: 32px 34px 1fr 52px;
align-items: center; gap: 10px;
padding: 11px 14px; border-radius: 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background .15s;
animation: cardIn .3s var(--trans) both;
}
.lb-card:last-child { border-bottom: none; border-radius: 0 0 16px 16px; }
.lb-card:first-child { border-radius: 16px 16px 0 0; }
.lb-card:first-child:last-child { border-radius: 16px; }
.lb-card:hover { background: var(--surface2); }
.lb-card.lb-me { background: rgba(240,180,41,0.05); }
.lb-list-wrap {
background: var(--surface); border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px; overflow: hidden;
}
:root[data-theme="light"] .lb-list-wrap { border-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .lb-card { border-bottom-color: rgba(0,0,0,0.04); }
.lb-rank { font-size: 15px; font-weight: 900; text-align: center; color: var(--text2); }
.lb-av-wrap { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #fff; }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-stats { font-size: 11px; color: var(--text2); margin-top: 1px; }
.lb-wins-wrap { text-align: center; }
.lb-wins { font-size: 17px; font-weight: 900; color: var(--gold); line-height: 1.1; }
.lb-wins-label { font-size: 10px; color: var(--text2); }
.lb-winrate { font-size: 10.5px; font-weight: 700; color: #66bb6a; }
:root[data-theme="light"] .lb-winrate { color: #388e3c; }
.lb-card.lb-me {
background: rgba(240,180,41,0.07);
border-right: 2.5px solid var(--gold);
}
:root[data-theme="light"] .lb-card.lb-me { background: rgba(240,180,41,0.06); }
/* ============================================================
MODALS
============================================================ */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.75);
display: none; align-items: center; justify-content: center;
z-index: 100; backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal {
background: var(--surface); border: 1px solid rgba(255,255,255,0.1);
border-radius: 24px; padding: 28px; width: min(320px,92vw);
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
animation: modalIn .25s var(--trans) both;
display: flex; flex-direction: column; gap: 10px;
}
@keyframes modalIn { from { transform: scale(.88) translateY(20px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }
.modal h2 { font-size: 19px; font-weight: 900; text-align: center; margin-bottom: 4px; }
.room-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-opt {
padding: 14px 10px; border-radius: 13px; text-align: center; cursor: pointer;
border: 1.5px solid rgba(255,255,255,0.1); transition: all .2s;
font-size: 12px; font-weight: 700; color: var(--text2);
}
.type-opt.selected { border-color: var(--gold); color: var(--gold); background: rgba(240,180,41,0.1); }
.type-opt .to-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.player-count-row { display: flex; align-items: center; gap: 10px; }
.pc-label { font-size: 13px; color: var(--text2); flex: 1; }
.pc-val { font-size: 17px; font-weight: 900; color: var(--gold); min-width: 28px; text-align: center; }
.pc-btns { display: flex; gap: 6px; }
.pc-btn {
width: 33px; height: 33px; border-radius: 9px;
border: 1px solid rgba(255,255,255,0.14); background: var(--bg3);
color: var(--text); cursor: pointer; font-size: 18px;
display: flex; align-items: center; justify-content: center;
transition: all .15s; line-height: 1;
}
.pc-btn:hover { border-color: var(--gold); color: var(--gold); }
/* ============================================================
ROOM LOBBY
============================================================ */
#room { background: var(--bg); overflow: hidden; }
/* overscroll-behavior اتشالت من هنا برضه لنفس السبب — تفعيل السحب للتحديث */
.room-header {
display: flex; flex-direction: column; gap: 8px;
padding: 10px 16px; background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent), var(--surface);
border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.room-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.back-btn {
width: 38px; height: 38px; border-radius: 11px;
border: 1px solid rgba(255,255,255,0.1); background: var(--bg3);
cursor: pointer; font-size: 16px; display: flex; align-items: center;
justify-content: center; color: var(--text2); transition: all .2s; flex-shrink: 0;
}
.back-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.room-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.room-header-title-row { display: flex; align-items: center; gap: 8px; height: 22px; }
.room-header-title {
font-size: 16px; font-weight: 900; line-height: 1; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.room-header-id-row { display: flex; align-items: center; gap: 8px; }
.room-header-id {
font-size: 11.5px; color: var(--text2); cursor: default;
display: flex; align-items: center; height: 26px; font-weight: 600;
}
/* شريط معلومات الغرفة (النوع/أقصى لاعبين/وقت الدور) — صف واحد مميز تحت الاسم وكود الغرفة
العناصر متجمعة قريبة من بعض في النص، مش متباعدة على عرض الشريط كله */
.room-info-strip {
display: flex; align-items: center; justify-content: center; gap: 14px;
background: rgba(240,180,41,0.07); border: 1px solid rgba(240,180,41,0.22);
border-radius: 20px; padding: 9px 12px; width: 100%; max-width: 100%;
box-sizing: border-box;
}
.ris-item {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap;
line-height: 1; flex: none; min-width: 0;
}
.ris-item-type { color: var(--text); }
.ris-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); }
.ris-icon svg { width: 100%; height: 100%; display: block; }
.ris-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.14); flex-shrink: 0; }
:root[data-theme="light"] .room-info-strip { background: rgba(240,180,41,0.1); border-color: rgba(240,180,41,0.3); }
:root[data-theme="light"] .ris-sep { background: rgba(0,0,0,0.14); }
.rha-share-pill {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
background: rgba(240,180,41,0.12); border: 1px solid rgba(240,180,41,0.35);
color: var(--gold); border-radius: 20px; padding: 0 10px; height: 22px;
font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer;
transition: background .15s, transform .1s; flex-shrink: 0;
}
.rha-share-pill span:first-child { font-size: 10.5px; line-height: 1; display: inline-flex; align-items: center; }
.rha-share-pill span:first-child svg { width: 11px; height: 11px; }
.rha-share-pill:hover { background: rgba(240,180,41,0.2); }
.rha-share-pill:active { transform: scale(.95); }
:root[data-theme="light"] .rha-share-pill { background: rgba(240,180,41,0.15); }
.rha-copy-pill {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
color: var(--text); border-radius: 20px; padding: 0 10px; height: 22px;
font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer;
transition: background .15s, transform .1s; flex-shrink: 0;
font-family: inherit;
}
.rha-copy-pill span:first-child { font-size: 10.5px; line-height: 1; display: inline-flex; align-items: center; }
.rha-copy-pill span:first-child svg { width: 11px; height: 11px; }
.rha-copy-pill:hover { background: rgba(255,255,255,0.12); }
.rha-copy-pill:active { transform: scale(.95); }
:root[data-theme="light"] .rha-copy-pill { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14); }
.room-header-btns { display: flex; gap: 8px; }
/* ── Room header actions (اللاعبين / الشات / نسخ الكود / قفل الغرفة / المطرودين) ──
كل الأزرار دي بترث من نفس القاعدة .rha-btn عشان تتساوى في الارتفاع والخط ومقاس الأيقونة،
سواء كان الصف فيه 3 أزرار أو 2 */
.room-header-actions { display: flex; gap: 8px; }
.rha-btn {
flex: 1; height: 36px; border-radius: 12px;
background: var(--bg3); border: 1px solid rgba(255,255,255,0.09);
display: flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text);
font-family: inherit;
position: relative; transition: all .2s var(--trans);
min-width: 0; padding: 0 6px;
}
.rha-btn span:not(.rha-icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rha-btn:hover { border-color: rgba(240,180,41,0.4); background: var(--surface2); }
.rha-btn:active { transform: translateY(1px); }
.rha-icon { font-size: 16px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; }
.rha-icon svg { width: 16px; height: 16px; }
.rha-btn .chat-badge { position: absolute; top: -6px; left: -4px; }
:root[data-theme="light"] .rha-btn { background: var(--bg3); border-color: rgba(0,0,0,0.09); }
:root[data-theme="light"] .rha-btn:hover { border-color: rgba(240,180,41,0.4); background: var(--surface2); }
.icon-btn {
width: 38px; height: 38px; border-radius: 11px;
border: 1px solid rgba(255,255,255,0.1); background: var(--bg3);
cursor: pointer; font-size: 16px; display: flex; align-items: center;
justify-content: center; color: var(--text2); transition: all .2s;
}
.icon-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.room-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.players-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.player-slot {
background: var(--surface); border: 1.5px solid rgba(255,255,255,0.07);
border-radius: 16px; padding: 14px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 7px; text-align: center; min-height: 115px;
position: relative; transition: all .3s var(--trans);
}
.player-slot.empty { border-style: dashed; opacity: 0.35; justify-content: center; }
.empty-slot-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text2); }
.empty-slot-icon svg { width: 26px; height: 26px; }
.player-slot.me { border-color: var(--gold); background: rgba(240,180,41,0.06); }
.slot-av { width: 48px; height: 48px; border-radius: 50%; font-size: 22px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; border: 2px solid rgba(255,255,255,0.15); }
.slot-name { font-size: 13px; font-weight: 800; }
.inline-bot-ic { display: inline-flex; vertical-align: -0.08em; margin-inline-end: 2px; }
.inline-bot-ic .ic-bot { width: 0.8em; height: 0.8em; }
.status-pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 700; padding: 3px 8px;
border-radius: 20px; white-space: nowrap;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
color: var(--text2); transition: all .3s ease;
}
.status-pill .spill-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
.status-pill.online { color: #66bb6a; border-color: rgba(102,187,106,0.3); background: rgba(102,187,106,0.1); }
.status-pill.online .spill-dot { background: #66bb6a; animation: dotGlow 2s ease-in-out infinite; }
.status-pill.offline { color: var(--text2); }
.status-pill.offline .spill-dot { background: #616161; }
.status-pill.away { color: #ffa726; border-color: rgba(255,167,38,0.3); background: rgba(255,167,38,0.1); }
.status-pill.away .spill-dot { background: #ffa726; animation: dotGlow 1.2s ease-in-out infinite; }
.status-pill.bot { color: #ce93d8; border-color: rgba(142,36,170,0.35); background: rgba(142,36,170,0.12); }
.status-pill.bot .spill-dot { background: #8e24aa; animation: dotGlow 2s ease-in-out infinite; }
.status-pill.bot .ic-bot { width: 11px; height: 11px; flex-shrink: 0; color: #ce93d8; }
@keyframes dotGlow {
0%,100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.12); }
50% { box-shadow: 0 0 0 4px rgba(255,255,255,0.22); }
}
.host-crown { position: absolute; top: 7px; left: 9px; display: inline-flex; align-items: center; gap: 4px; filter: drop-shadow(0 0 3px rgba(240,180,41,0.6)); }
.host-crown .ic-host-crown { width: 17px; height: 17px; }
.host-crown .host-crown-label { font-size: 10.5px; font-weight: 800; color: var(--gold); filter: none; }
.slot-role-badge {
position: absolute; top: 7px; left: 9px; display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 800; color: var(--text2);
}
.slot-role-badge .ic-bot { width: 13px; height: 13px; flex-shrink: 0; }
.slot-role-badge .ic-player-sm { width: 13px; height: 13px; flex-shrink: 0; }
.kick-btn {
position: absolute; top: 6px; right: 8px; font-size: 10px; color: #ef5350;
cursor: pointer; background: rgba(229,57,53,0.15); border: 1px solid rgba(229,57,53,0.3);
border-radius: 7px; padding: 3px 7px; display: block; font-weight: 700; transition: all .2s;
}
.kick-btn:hover { background: rgba(229,57,53,0.3); }
.kick-btn .ic-trash { width: 13px; height: 13px; vertical-align: -2px; display: block; margin: 0 auto; }
.player-slot.is-bot { border-color: rgba(142,36,170,0.35); background: rgba(142,36,170,0.06); }
.add-bot-btn {
cursor: pointer; border: 1.5px solid #8e24aa; background: rgba(142,36,170,0.35);
color: #fff; border-radius: 8px; padding: 4px 9px; font-size: 10px; font-weight: 800;
margin-top: 4px; transition: all .2s; box-shadow: 0 0 10px rgba(142,36,170,0.35);
}
.add-bot-btn:hover, .add-bot-btn:active { background: rgba(142,36,170,0.55); box-shadow: 0 0 14px rgba(142,36,170,0.55); }
.room-footer { padding: 14px 16px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.05); background: var(--surface); }
.waiting-text { text-align: center; color: var(--text2); font-size: 13px; margin-bottom: 10px; font-weight: 600; }
.dots { display: inline-flex; gap: 4px; margin-left: 6px; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text2); animation: dotPulse 1.4s infinite; }
.dot:nth-child(2) { animation-delay: .2s; } .dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse { 0%,80%,100% { opacity:.25; transform: scale(.7); } 40% { opacity:1; transform: scale(1); } }
/* ============================================================
GAME SCREEN
============================================================ */
#game {
--felt-a: #1a5e35; --felt-b: #0d3d20; --felt-c: #082915; --felt-border: #0a2416;
--sun-color: #ffe9a8; --sun-glow: rgba(255,233,168,0.20); --bg-a: #0e2b1f; --bg-b: #071410; --bg-c: #040b09;
background: radial-gradient(ellipse at 50% 45%, var(--bg-a) 0%, var(--bg-b) 55%, var(--bg-c) 100%);
position: relative; overflow: hidden;
transition: background 1.2s ease;
/* الطاولة كلها (كروت، نصوص، أزرار) مينفعش تتحدد بالضغط المطول عشان دوس السحب/اللعب ميعملش تحديد نص */
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* الشمس الزخرفية بتغطي الشاشة كلها كخلفية — مش بتتحدد أبدًا ومش بتاخد أي تفاعل لمس/كليك */
.game-sun-bg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
z-index: 0;
/* مركز الشمس بيتظبط بالـ JS (alignSunBgToTable) بالظبط فوق كوم السحب/الديسكارد،
مش بنسبة ثابتة، عشان يفضل مظبوط مهما اختلف عدد الخصوم أو حجم اليد */
transform: translateY(var(--sun-offset-y, 0px));
transition: transform .25s ease;
}
.game-sun-bg svg {
/* الشمس والأشواك اتكبرت مع بعض بنفس النسبة (×1.383) بداية من الشكل اللي المستخدم وافق عليه —
مش بس الأطراف لوحدها. المرة اللي فاتت غلطت لما كبّرت طول الأشواك بس (rTip) وسبت قاعدتها
(rBase) زي ما هي، فبقت النسبة بين الاتنين كبيرة جدًا وطلعت الشمس شكلها "نجمة ninja" رفيعة
ومسافات فاضية بينها، بدل الشكل الكثيف الناعم الأصلي. دلوقتي كل نصف قطر (الشعاع، القاعدة،
الحلقات، التوهج) اتضرب في نفس رقم التكبير، فالنسب زي ما هي بالظبط والشكل هو نفسه بس أكبر.
الـ viewBox كبرت بنفس النسبة (300→415) عشان الأطراف الجديدة الأطول متتقصش، والـ CSS box هنا
لازم يكبر بنفس النسبة كمان (220vw/1400px الأصلية × 1.383 = 304vw/1937px) وإلا جسم الشمس
هيصغر تاني زي ما حصل قبل كده. */
width: min(1937px, 304vw); height: min(1937px, 304vw);
filter: drop-shadow(0 0 40px var(--sun-glow));
pointer-events: none; user-select: none;
}
.game-table { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; }
/* Opponents row — اللاعبين متوزعين حوالين الطاولة (الشمس) بشكل قوس منحني بدل صف مسطّح،
عشان يحسّوا إنهم قاعدين حوالين ترابيزة دايرية فعلاً: كل لاعب باين لوحده وفيه مسافة كافية
بينه وبين اللي جنبه، ومنحنى بسيط (translateY) بيخليهم شكلهم زي نصف دايرة حوالين المنتصف.
الفجوة والانحناء بيكبروا كل ما عدد اللاعبين زاد عشان محدش يحس بالخنقة. */
.opponents-row {
display: flex; justify-content: center; align-items: flex-start;
gap: var(--opp-gap, 26px);
padding: 66px 14px 4px; flex-shrink: 0; flex-wrap: wrap;
/* بيسمح بمساحة إضافية جنبين عشان اللاعبين الأطراف (لما يكون العدد كبير) ميتقصوش
ولا يضطروا يعملوا wrap قبل الأوان */
max-width: 100%; overflow-x: visible;
}
.opponent-panel {
display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; min-width: 66px;
/* كل لاعب بيتزحزح لفوق أو لتحت شوية حسب مكانه في القوس (متحسوب في JS عن طريق --seat-y)
عشان يدّي إحساس إنهم واقفين على محيط دايرة مش على خط مستقيم */
transform: translateY(var(--seat-y, 0px));
transition: transform .25s ease;
}
.opp-av {
width: 42px; height: 42px; border-radius: 50%; font-size: 17px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 900; position: relative; transition: all .3s;
border: 2.5px solid rgba(255,255,255,0.1);
}
.opp-avatar-emoji { font-size: 22px; line-height: 1; }
.opp-av.active-turn {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(240,180,41,0.25), 0 0 24px rgba(240,180,41,0.5);
animation: activePulse 1.1s ease-in-out infinite;
}
@keyframes activePulse {
0%,100% { box-shadow: 0 0 0 3px rgba(240,180,41,0.25), 0 0 20px rgba(240,180,41,0.4); }
50% { box-shadow: 0 0 0 4px rgba(240,180,41,0.5), 0 0 36px rgba(240,180,41,0.7); }
}
.opp-name-row { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100px; }
.opp-name { font-size: 10px; font-weight: 700; color: var(--text2); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.opp-uno-badge {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
padding: 2px 9px;
font-size: 10px; font-weight: 900; letter-spacing: 0.4px; color: #1a1408;
background: linear-gradient(135deg,#ffd873,#f0b429); border-radius: 16px;
animation: unoBadgePop .35s cubic-bezier(.34,1.56,.64,1) both, unoBadgePulse 1.4s ease-in-out .35s infinite;
}
/* نسخة مصغّرة من شارة UNO مخصوصة لجنب اسم الخصم بس — بتتماشى مع حجم .opp-name
(نفس السطر) بدل ما تبان أكبر منه بصريًا زي الشارة الأصلية الكبيرة */
.opp-uno-badge-small {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
padding: 1px 5px;
font-size: 8px; line-height: 1.4; font-weight: 800; letter-spacing: 0.3px; color: #1a1408;
background: linear-gradient(135deg,#ffd873,#f0b429); border-radius: 6px;
animation: unoBadgePop .35s cubic-bezier(.34,1.56,.64,1) both, unoBadgePulse 1.4s ease-in-out .35s infinite;
}
@keyframes unoBadgePop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes unoBadgePulse { 0%,100% { box-shadow: 0 0 0 rgba(240,180,41,0); } 50% { box-shadow: 0 0 8px rgba(240,180,41,0.7); } }
.opp-cards { display: flex; justify-content: center; align-items: flex-start; }
.opp-card-back {
width: 21px; height: 32px;
margin: 0 -8px;
position: relative;
/* نقطة الدوران بعيدة فوق الكارت (ناحية صورة/اسم اللاعب) عشان كل الكروت تتجمّع عند نقطة واحدة فوق
وتعمل شكل مروحة حقيقي حوالين الاسم والصورة، بدل ما تدور حوالين حافتها بس.
ملحوظة: overflow:hidden متحطش هنا (على العنصر الداير) لأنه بيقطع الـ pseudo-elements
جوّاه في متصفحات موبايل معينة لما نقطة الدوران بعيدة كده — ده كان سبب ظهور كروت فاضية.
الـ overflow اتنقل لعنصر داخلي ثابت (.opp-card-face) بدل كده. */
transform-origin: center -45px;
transform: rotate(var(--angle, 0deg));
}
/* الوش الفعلي للكارت — عنصر داخلي ثابت (مش بيدور بنفس نقطة الدوران البعيدة) بيحمل
الخلفية والحدود والـ overflow:hidden، فبيتقص بشكل طبيعي وميختفيش مع الدوران */
.opp-card-face {
position: absolute; inset: 0; border-radius: 4px;
background: #1a1a1a;
border: 1.5px solid #f0b429;
box-shadow: 0 0 0 0.5px #1a1a1a, 0 0 0 1.5px rgba(240,180,41,0.5), 1px 2px 6px rgba(0,0,0,0.5);
overflow: hidden;
}
/* بيضاوي "UNO" الميني — نفس شكل ظهر ورقة السحب بس بحجم صغير */
.opp-card-face::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 62%; height: 86%;
border-radius: 50%;
background: radial-gradient(ellipse at 38% 38%, #e53535 0%, #c0241c 100%);
border: 1px solid rgba(0,0,0,0.25);
transform: translate(-50%,-50%) rotate(-28deg);
pointer-events: none;
}
.opp-card-face::after {
content: 'UNO';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-size: 6.5px; font-weight: 900; color: #f0b429; font-style: italic;
letter-spacing: -0.4px; white-space: nowrap; z-index: 2;
text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.7);
}
.opp-card-count { font-size: 10px; font-weight: 700; color: var(--text2); text-align: center; }
/* Center table */
.table-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; gap: 8px; z-index: 1; }
.table-info-row { display: none; } /* hidden — no direction/color badges */
.direction-badge { display: none; }
.color-badge { display: none; }
/* الكروت (سحب/ديسكارد) بقت طايرة على الشمس مباشرة من غير أي مربع طاولة حواليها */
.pile-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; }
/* ظل/فصل بصري خفيف تحت كل كوم عشان يفضل واضح وواقف فوق خلفية الشمس المزدحمة */
.draw-pile, .discard-pile {
filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55)) drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
/* Cards */
.card {
width: var(--card-w); height: var(--card-h);
border-radius: var(--card-radius); position: relative;
display: flex; align-items: center; justify-content: center;
flex-direction: column; cursor: pointer;
user-select: none; transition: transform .15s, box-shadow .15s;
font-weight: 900; border: 3px solid rgba(255,255,255,0.88);
overflow: hidden; flex-shrink: 0;
}
/* UNO-style white oval in center of card */
.card::before {
content: ''; position: absolute;
width: 82%; height: 88%;
border-radius: 50%;
background: rgba(255,255,255,0.18);
border: 2.5px solid rgba(255,255,255,0.28);
transform: rotate(-30deg);
pointer-events: none;
}
.card-red { background: linear-gradient(145deg, #ef5350, #c62828); box-shadow: 0 5px 18px rgba(229,57,53,0.55); }
.card-green { background: linear-gradient(145deg, #4caf50, #1b5e20); box-shadow: 0 5px 18px rgba(67,160,71,0.55); }
.card-blue { background: linear-gradient(145deg, #2196f3, #0d47a1); box-shadow: 0 5px 18px rgba(30,136,229,0.55); }
.card-yellow { background: linear-gradient(145deg, #ffee58, #f57f17); box-shadow: 0 5px 18px rgba(253,216,53,0.55); }
.card-wild { background: linear-gradient(145deg, #14142a, #1f1f45); box-shadow: 0 5px 18px rgba(80,80,200,0.5); }
.card-wild4 { box-shadow: 0 5px 20px rgba(80,80,200,0.65), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.card-back { background: linear-gradient(145deg, #1a1a2e, #3a1c5e); box-shadow: 0 5px 18px rgba(0,0,0,0.5); cursor: pointer; }
.card-number { font-size: 40px; color: #fff; text-shadow: 3px 3px 8px rgba(0,0,0,0.6), -1px -1px 0 rgba(0,0,0,0.3); line-height: 1; z-index: 1; font-style: italic; }
.card-number.small { font-size: 26px; }
.card-tl, .card-br { position: absolute; font-size: 13px; color: #fff; font-weight: 900; line-height: 1; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); z-index: 2; }
.card-tl { top: 5px; right: 7px; }
.card-br { bottom: 5px; left: 7px; transform: rotate(180deg); }
.card-symbol { font-size: 24px; z-index: 1; color: #fff; }
/* شكل جديد لكارت الـ WILD والـ +4 — أربع قطاعات ملونة بشكل دائري مائل بدل الدواير الأربعة الجامدة */
.wild-swirl {
position: absolute; inset: 0; z-index: 0;
border-radius: 50%; width: 78%; height: 78%; margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden; transform: rotate(-15deg);
box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.45);
}
.ws-quad { position: absolute; width: 50%; height: 50%; }
.ws-red { top: 0; left: 0; background: var(--red); }
.ws-blue { top: 0; left: 50%; background: var(--blue); }
.ws-yellow { top: 50%; left: 0; background: var(--yellow); }
.ws-green { top: 50%; left: 50%; background: var(--green); }
.wild-badge, .wild4-badge {
position: relative; z-index: 2; color: #fff;
text-shadow: 2px 2px 5px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
letter-spacing: 1px;
}
.wild-badge { font-size: 15px; font-weight: 900; }
.wild4-badge { font-size: 34px; font-weight: 900; font-style: italic; }
/* كارت Wild بعد ما يتحط على الطاولة ويتختار لونه — يتلون بالكامل مع ثبات حرف W */
.card-wild-onboard { position: relative; }
.wild-fixed-badge {
font-size: 44px; font-weight: 900; font-style: italic; color: #fff; z-index: 1;
line-height: 1; text-shadow: 3px 3px 8px rgba(0,0,0,0.55), -1px -1px 0 rgba(0,0,0,0.3);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.wild-fixed-plus { font-size: 13px; font-weight: 900; font-style: normal; letter-spacing: .5px; opacity: .92; }
/* Draw pile */
.draw-pile { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.draw-pile .card { transition: transform .2s; }
.draw-pile:hover .card { transform: scale(1.06) translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.draw-pile:active .card { transform: scale(0.94) translateY(2px); }
/* كارت طائر مؤقت بيتولد عند الضغط على كوم السحب وبيطير لحد إيد اللاعب تحت */
.draw-fly-card.card.card-back {
position: fixed; z-index: 999; pointer-events: none;
border-radius: var(--card-radius);
animation: drawFly .5s cubic-bezier(.25,.7,.35,1) forwards;
}
/* نسخة عامة تنطبق كمان على كارت اللعب الطائر (مالوش card-back) */
.draw-fly-card.card {
position: fixed; z-index: 999; pointer-events: none;
border-radius: var(--card-radius);
}
/* نسخة أصغر من كارت الطيران خاصة بأنيميشن سحب/لعب الخصوم — نفس الفكرة بس بحجم يناسب صورهم الصغيرة */
.opp-fly-card { border-radius: 6px; }
@keyframes drawFly {
0% { transform: translate(var(--fly-x0), var(--fly-y0)) scale(1) rotate(0deg); opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(var(--fly-x1), var(--fly-y1)) scale(0.42) rotate(var(--fly-rot)); opacity: 0; }
}
@keyframes playFly {
0% { transform: translate(var(--fly-x0), var(--fly-y0)) scale(1) rotate(0deg); opacity: 1; }
100% { transform: translate(var(--fly-x1), var(--fly-y1)) scale(0.9) rotate(var(--fly-rot)); opacity: 0.15; }
}
/* نبضة خفيفة على كوم السحب نفسه لحظة السحب عشان تحس إنه "طلّع" كارت */
.draw-pile.drawing .card { animation: drawPilePulse .35s ease; }
@keyframes drawPilePulse {
0% { transform: scale(1); }
35% { transform: scale(0.9) translateY(3px); }
100% { transform: scale(1); }
}
.draw-pile-count { position: absolute; top: -10px; left: -10px; background: var(--gold); color: #12100a; border-radius: 50%; width: 24px; height: 24px; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.pile-label {
font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.4); border-radius: 8px; padding: 2px 10px;
white-space: nowrap; letter-spacing: .3px;
}
/* UNO back card style — real UNO design */
.card-back {
background: #1a1a1a;
border: 3px solid #f0b429 !important;
box-shadow:
0 0 0 1px #1a1a1a,
0 0 0 3px #f0b429,
0 5px 18px rgba(240,180,41,0.4) !important;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
position: relative;
}
/* Red oval behind UNO text on card back */
.card-back::before {
content: '';
position: absolute;
width: 60%; height: 88%;
border-radius: 50%;
background: radial-gradient(ellipse at 38% 38%, #e53535 0%, #c0241c 100%);
border: 2px solid rgba(0,0,0,0.2) !important;
transform: rotate(-28deg);
pointer-events: none;
z-index: 1;
}
.uno-back-text {
font-size: 22px; font-weight: 900; color: #f0b429; font-style: italic;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
letter-spacing: -1px; z-index: 2;
position: relative;
}
/* Discard top */
.discard-pile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* الكارت الجديد اللي بيهبط فوق كوم الديسكارد بيدخل بحركة "هبوط" مع دوران بسيط بدل ما يستبدل فجأة */
.discard-pile .card {
animation: discardLand .32s var(--trans) both;
}
@keyframes discardLand {
0% { transform: scale(1.35) rotate(var(--land-rot, 8deg)); opacity: 0; }
60% { opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.discard-draw-label {
font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.4); border-radius: 8px; padding: 2px 10px;
white-space: nowrap; letter-spacing: .3px;
}
/* Player hand */
.player-area { flex-shrink: 0; padding: 0 0 env(safe-area-inset-bottom); background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%); }
.player-info-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; }
.my-name-row { display: flex; align-items: center; gap: 8px; }
.my-av { width: 34px; height: 34px; border-radius: 50%; font-size: 15px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15); }
.my-av-emoji { font-size: 20px; }
.my-name { font-size: 13px; font-weight: 800; }
.my-card-count { font-size: 11px; color: var(--text2); }
/* زرار UNO — جوه wrapper يحتوي الزرار نفسه + دائرة عد تنازلي حقيقية (SVG circle)
بجانبه، بنفس نظام مؤقت الدور (myTimerCircle) بالظبط، بس بألوان حمراء تناسب
طابع الإنذار. الدائرة الحقيقية بتتحرك بدقة تامة (مش فريم مستطيل متمطط كان
بيدي إحساس غلط إن الوقت أطول من 10 ثواني الحقيقية) */
.uno-btn-wrap { display: none; align-items: center; gap: 8px; }
.uno-btn-wrap.visible { display: flex; animation: unoPop .3s ease; }
.uno-btn {
position: relative; padding: 9px 22px; border-radius: 14px; border: none; cursor: pointer;
font-size: 14px; font-weight: 900; letter-spacing: 1.5px;
background: linear-gradient(135deg, #ff6659, #c62828); color: #fff;
box-shadow: 0 3px 0 #7f0000, 0 5px 14px rgba(229,57,53,0.55);
transition: box-shadow .15s, transform .15s;
animation: unoBtnBlink 1.1s ease-in-out infinite;
}
/* وميض/رعشة مستمرة طول ما الزرار ظاهر — بينور ويطفي زي نبضة تنبيه */
@keyframes unoBtnBlink {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.14); box-shadow: 0 3px 0 #7f0000, 0 6px 20px rgba(239,83,80,0.85); }
}
/* وميض إنذار أسرع وأقوى لما مهلة الـ 10 ثواني تقرب تخلص (آخر 30% من المدة) */
.uno-btn.urgent { animation: unoBtnBlinkUrgent .35s ease-in-out infinite; }
@keyframes unoBtnBlinkUrgent {
0%, 100% { filter: brightness(1); box-shadow: 0 3px 0 #7f0000, 0 5px 16px rgba(229,57,53,0.65); }
50% { filter: brightness(1.32); box-shadow: 0 3px 0 #7f0000, 0 6px 26px rgba(239,83,80,1); }
}
@keyframes unoPop { from { transform: scale(.4); opacity:0; } to { transform: scale(1); opacity:1; } }
.uno-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7f0000, 0 2px 8px rgba(229,57,53,0.5); }
/* دائرة العد التنازلي الحقيقية بتاعة زرار UNO — نفس مقاس ومنطق turn-timer-circle
تماماً (نصف قطر ثابت 14.5 فمحيطها 2π×14.5 ≈ 91.1) عشان الحركة تبقى دقيقة 100% */
.uno-btn-timer { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.uno-btn-timer-svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.uno-btn-timer-track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3; }
.uno-btn-timer-arc {
fill: none; stroke: #ff8a80; stroke-width: 3; stroke-linecap: round;
filter: drop-shadow(0 0 3px rgba(239,83,80,0.7));
transition: stroke-dashoffset .1s linear, stroke .3s;
}
.uno-btn-timer-arc.urgent {
stroke: #ef5350; filter: drop-shadow(0 0 6px rgba(239,83,80,0.95));
animation: unoRingUrgentPulse .5s ease-in-out infinite;
}
@keyframes unoRingUrgentPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.uno-btn-timer-num {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 900; color: #ff8a80;
}
.uno-btn-timer-num.urgent { color: #ef5350; }
.hand-scroll { overflow-x: auto; overflow-y: hidden; padding: 8px 0 16px; display: flex; align-items: flex-end; scrollbar-width: none; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.hand-scroll::-webkit-scrollbar { display: none; }
.hand-cards { display: flex; align-items: flex-end; width: max-content; flex-shrink: 0; margin: 0 auto; padding-top: 24px; box-sizing: content-box; }
.hand-card {
--card-w: 65px; --card-h: 97px; margin: 0 -8px; position: relative;
transform-origin: bottom center;
transform: rotate(var(--angle, 0deg)) translateY(var(--lift, 0px));
transition: transform .2s var(--trans), margin .2s;
cursor: pointer;
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hand-card:hover, .hand-card:focus {
transform: rotate(var(--angle, 0deg)) translateY(calc(var(--lift, 0px) - 20px)) scale(1.06);
z-index: 20 !important; margin: 0 3px; outline: none;
}
.hand-card.selected {
transform: rotate(var(--angle, 0deg)) translateY(calc(var(--lift, 0px) - 30px)) scale(1.08);
z-index: 20 !important; margin: 0 3px;
}
/* كارت جديد اتضاف لإيد اللاعب (سحب/بداية اللعبة) بيدخل بحركة "توزيع" ناعمة بدل ما يظهر فجأة */
.hand-card.card-deal-in {
animation: handCardDealIn .32s var(--trans) both;
}
@keyframes handCardDealIn {
from { transform: rotate(var(--angle, 0deg)) translateY(calc(var(--lift, 0px) + 26px)) scale(.55); opacity: 0; }
to { transform: rotate(var(--angle, 0deg)) translateY(var(--lift, 0px)) scale(1); opacity: 1; }
}
/* كارت بيتلعب من اليد بيختفي بحركة طيران خفيفة قبل ما يتشال من الـ DOM */
.hand-card.card-playing-out {
animation: handCardPlayOut .28s ease-in forwards;
pointer-events: none;
}
@keyframes handCardPlayOut {
0% { transform: rotate(var(--angle, 0deg)) translateY(calc(var(--lift, 0px) - 20px)) scale(1.06); opacity: 1; }
100% { transform: rotate(var(--angle, 0deg)) translateY(calc(var(--lift, 0px) - 90px)) scale(0.8); opacity: 0; }
}
/* Turn banner / timer */
.game-header {
position: absolute; top: 0; left: 0; right: 0; z-index: 15;
display: flex; align-items: center; justify-content: space-between;
height: 56px; padding: 0 12px; box-sizing: border-box;
background: linear-gradient(to bottom, rgba(4,10,8,0.9) 0%, rgba(4,10,8,0.55) 75%, transparent 100%);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.game-header-left { display: flex; gap: 8px; align-items: center; }
/* اللاعبين والشات — كل واحد مستطيله لوحده، مع بعض في نفس الصف */
.game-header-right { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.game-icon-btn { width: 34px; height: 34px; border-radius: 9px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; color: var(--text2); transition: all .2s; }
.game-icon-btn:hover { color: var(--text); }
/* Red exit button — in-game (matches players/chat button size) */
.game-exit-btn {
height: 38px; border-radius: 11px; padding: 0 14px;
background: linear-gradient(160deg, rgba(239,83,80,0.95), rgba(198,40,40,0.95));
border: 1px solid rgba(255,255,255,0.15);
cursor: pointer; font-size: 12.5px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
color: #fff; transition: all .2s; gap: 6px;
box-shadow: 0 4px 14px rgba(198,40,40,0.45); flex-shrink: 0;
}
.game-exit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(198,40,40,0.55); }
.game-exit-btn:active { transform: translateY(0); }
/* Red exit button — waiting lobby (original size) */
.game-exit-btn-lobby {
height: 42px; border-radius: 12px; padding: 0 18px;
background: linear-gradient(160deg, rgba(239,83,80,0.95), rgba(198,40,40,0.95));
border: 1px solid rgba(255,255,255,0.15);
cursor: pointer; font-size: 13px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
color: #fff; transition: all .2s; gap: 6px;
box-shadow: 0 4px 14px rgba(198,40,40,0.45); flex-shrink: 0;
}
.game-exit-btn-lobby:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(198,40,40,0.55); }
.game-exit-btn-lobby:active { transform: translateY(0); }
.room-header-top-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rha-square-btn {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; padding: 0;
background: var(--bg3); border: 1px solid rgba(255,255,255,0.09);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 16px; color: var(--text); transition: all .2s var(--trans);
}
.rha-square-btn:hover { border-color: rgba(240,180,41,0.4); background: var(--surface2); }
.rha-square-btn:active { transform: translateY(1px); }
:root[data-theme="light"] .rha-square-btn { background: var(--bg3); border-color: rgba(0,0,0,0.09); }
.turn-banner { background: rgba(0,0,0,0.65); border: 1px solid rgba(240,180,41,0.4); border-radius: 20px; padding: 5px 18px; font-size: 12px; font-weight: 800; color: var(--gold); white-space: nowrap; backdrop-filter: blur(6px); pointer-events: none; z-index: 20; letter-spacing: .3px; }
/* بانر "دور فلان" — بين الطاولة وايد اللاعب */
.turn-indicator-banner {
display: flex; align-items: center; justify-content: center; gap: 9px;
width: fit-content; max-width: 88%; margin: 2px auto 6px;
padding: 7px 16px; flex-shrink: 0;
background: rgba(0,0,0,0.55); border: 1px solid rgba(240,180,41,0.35);
border-radius: 20px; backdrop-filter: blur(6px);
font-size: 13px; font-weight: 800; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.turn-indicator-banner.mine { border-color: rgba(240,180,41,0.75); color: var(--gold); }
.tib-dot { width: 8px; height: 8px; border-radius: 50%; background: #43a047; flex-shrink: 0; animation: dotGlow 1.4s ease-in-out infinite; }
.tib-dot.urgent { background: #ef5350; }
.tib-time { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 2px 9px; font-size: 12px; color: var(--gold); font-weight: 900; flex-shrink: 0; }
/* Timer — اتنقل جنب اسم اللاعب */
.timer-bar-wrap { display: none; } /* مش محتاجه فوق */
.timer-bar { display: none; }
/* Turn indicator next to player name */
.turn-indicator-row {
display: flex; align-items: center; gap: 6px; min-width: 0;
}
.my-turn-badge {
display: none; align-items: center; gap: 5px;
background: rgba(240,180,41,0.18); border: 1px solid rgba(240,180,41,0.5);
border-radius: 16px; padding: 3px 10px 3px 8px;
font-size: 11px; font-weight: 800; color: var(--gold);
white-space: nowrap; flex-shrink: 0;
}
.my-turn-badge.visible { display: flex; animation: turnBadgePop .25s ease; }
@keyframes turnBadgePop { from { transform: scale(.75); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Circular countdown */
.turn-timer-circle {
position: relative; width: 38px; height: 38px; flex-shrink: 0;
}
.turn-timer-svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 3; }
.timer-arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
transition: stroke-dashoffset 1s linear, stroke .5s; }
.timer-arc.urgent { stroke: #ef5350; }
.turn-timer-num {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900; color: var(--gold);
}
.turn-timer-num.urgent { color: #ef5350; }
/* Opponent turn timer — دائرة حوالين صورة اللاعب نفسها (بدل شريط منفصل بيضيع في خلفية الشمس) */
.opp-timer-ring {
position: absolute; inset: -5px; width: 52px; height: 52px;
pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.opp-timer-ring.active { opacity: 1; }
.opp-timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.opp-timer-ring .ring-track { fill: none; stroke: rgba(0,0,0,0.35); stroke-width: 3; }
.opp-timer-ring .ring-arc {
fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
stroke-dasharray: 138.2; transition: stroke-dashoffset 1s linear, stroke .3s;
filter: drop-shadow(0 0 4px rgba(240,180,41,0.7));
}
.opp-timer-ring .ring-arc.urgent {
stroke: #ef5350; filter: drop-shadow(0 0 6px rgba(239,83,80,0.85));
animation: oppRingUrgentPulse .5s ease-in-out infinite;
}
@keyframes oppRingUrgentPulse {
0%,100% { opacity: 1; } 50% { opacity: .55; }
}
.opp-timer-num {
position: absolute; inset: -5px; width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 3;
}
.opp-timer-num span {
font-size: 9px; font-weight: 900; color: #fff; background: rgba(8,18,28,0.85);
border-radius: 8px; padding: 1px 4px; line-height: 1.3;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
transform: translateY(19px);
}
.opp-timer-num span.urgent { color: #ff8a80; }
/* Draw decision */
.draw-decision-bar { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%); background: rgba(8,18,28,0.94); border: 1px solid rgba(240,180,41,0.4); border-radius: 18px; padding: 14px 20px; z-index: 30; display: none; flex-direction: column; align-items: center; gap: 10px; backdrop-filter: blur(10px); min-width: 255px; }
.draw-decision-bar.visible { display: flex; animation: slideUp .25s ease; }
@keyframes slideUp { from { transform: translateX(-50%) translateY(20px); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } }
.ddb-text { font-size: 13px; font-weight: 700; text-align: center; }
.ddb-card-preview { display: flex; align-items: center; justify-content: center; }
.ddb-card-preview .card { --card-w: 76px; --card-h: 114px; cursor: default; animation: drawnCardPop .3s ease; }
@keyframes drawnCardPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ddb-btns { display: flex; gap: 8px; width: 100%; }
.ddb-btns .btn { flex: 1; padding: 10px; font-size: 13px; width: auto; }
/* Color picker — تصميم شبيه بالكارت المرجعي: أيقونة دائرية + عنوان + شبكة مربعات ملونة */
.color-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.82); display: none; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(8px); }
.color-picker-overlay.open { display: flex; animation: fadeIn .2s ease; }
.color-picker-box {
background: var(--surface); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px;
padding: 30px 26px; text-align: center; width: min(320px, 88vw);
box-shadow: 0 24px 80px rgba(0,0,0,0.8); animation: modalIn .22s ease;
}
.color-picker-icon {
width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 28px;
background: conic-gradient(from 0deg, #ef5350, #ffee58 25%, #66bb6a 50%, #42a5f5 75%, #ef5350 100%);
box-shadow: 0 6px 22px rgba(0,0,0,0.4);
}
.color-picker-box h3 { font-size: 19px; font-weight: 900; margin-bottom: 6px; letter-spacing: .3px; }
.color-picker-sub { font-size: 12.5px; color: var(--text2); margin-bottom: 22px; line-height: 1.5; }
.color-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-pick-btn {
height: 96px; border-radius: 18px; border: 1.5px solid rgba(255,255,255,0.16);
cursor: pointer; transition: all .18s var(--trans);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .3px;
text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.color-pick-btn .cpb-icon { font-size: 25px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.color-pick-btn:hover { transform: translateY(-3px) scale(1.03); border-color: rgba(255,255,255,0.7); }
.color-pick-btn:active { transform: translateY(0) scale(0.98); }
.cpb-red { background: linear-gradient(155deg, #ef5350, #c62828); box-shadow: 0 8px 22px rgba(229,57,53,0.4); }
.cpb-green { background: linear-gradient(155deg, #66bb6a, #2e7d32); box-shadow: 0 8px 22px rgba(67,160,71,0.4); }
.cpb-blue { background: linear-gradient(155deg, #42a5f5, #1565c0); box-shadow: 0 8px 22px rgba(30,136,229,0.4); }
.cpb-yellow { background: linear-gradient(155deg, #ffee58, #f9a825); box-shadow: 0 8px 22px rgba(253,216,53,0.4); }
.color-pick-btn.cpb-red:hover { box-shadow: 0 10px 30px rgba(229,57,53,0.65); }
.color-pick-btn.cpb-green:hover { box-shadow: 0 10px 30px rgba(67,160,71,0.65); }
.color-pick-btn.cpb-blue:hover { box-shadow: 0 10px 30px rgba(30,136,229,0.65); }
.color-pick-btn.cpb-yellow:hover { box-shadow: 0 10px 30px rgba(253,216,53,0.65); }
/* ============================================================
CHAT
============================================================ */
.chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 40; display: none; flex-direction: column; justify-content: flex-end; backdrop-filter: blur(3px); }
.chat-overlay.open { display: flex; animation: fadeIn .2s ease; }
.chat-panel { background: var(--surface); border-radius: 24px 24px 0 0; height: 62vh; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.09); border-bottom: none; animation: chatIn .28s var(--trans) both; }
@keyframes chatIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.chat-header { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent), linear-gradient(to bottom, var(--surface2) 0%, var(--surface) 100%); border-radius: 24px 24px 0 0; }
.chat-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.chat-title-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(240,180,41,0.15); border: 1px solid rgba(240,180,41,0.3); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--gold); }
.chat-title-icon svg { width: 16px; height: 16px; }
.chat-close svg { display: block; }
.chat-close { font-size: 20px; cursor: pointer; color: var(--text2); line-height: 1; background: none; border: none; transition: color .2s; }
.chat-close:hover { color: var(--text); }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--surface2); }
.chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.chat-msg.sys-wrap { max-width: 100%; align-self: center; width: 100%; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }
.msg-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.msg-avatar-svg { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.18); background: var(--surface2); }
.msg-avatar-svg svg { display: block; width: 100%; height: 100%; }
.msg-sender { font-size: 12px; color: var(--text); font-weight: 800; letter-spacing: 0.3px; }
.msg-meta-wrap { display: flex; flex-direction: column; gap: 1px; }
.msg-me-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; justify-content: flex-end; }
.msg-me-meta .msg-avatar-svg { border-color: rgba(240,180,41,0.4); }
.msg-me-meta .msg-sender { color: var(--gold); font-size: 11px; }
.msg-bubble { position: relative; padding: 9px 13px; border-radius: 14px; font-size: 13px; max-width: 100%; line-height: 1.4; animation: bubbleIn .2s var(--trans) both; }
@keyframes bubbleIn { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }
.chat-msg.me .msg-bubble { background: var(--gold); color: #12100a; border-radius: 14px; font-weight: 600; }
.chat-msg.other .msg-bubble { background: #2a4361; color: var(--text); border-radius: 14px; border: 1px solid rgba(240,180,41,0.14); }
/* iMessage-style tail: bubble stays fully rounded (no squared corner) and a
single smooth teardrop curve is drawn with an SVG mask, pointing up
toward the avatar/name row that sits above the bubble in this layout.
Positioned to tuck closely against the bubble's rounded corner (slight
overlap) so it reads as part of the shape rather than floating past it. */
.msg-bubble { border-radius: 18px !important; overflow: visible; position: relative; z-index: 0; }
.msg-bubble::after {
content: ""; position: absolute; top: -5px; width: 20px; height: 15px; z-index: -1;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,100 C55,100 15,65 5,15 C35,50 65,62 100,62 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,100 C55,100 15,65 5,15 C35,50 65,62 100,62 Z'/%3E%3C/svg%3E");
}
.chat-msg.me .msg-bubble::after {
left: -4px; background: var(--gold);
}
.chat-msg.other .msg-bubble::after {
right: -4px; background: #2a4361;
transform: scaleX(-1);
}
:root[data-theme="light"] .chat-msg.other .msg-bubble { background: #dbe6f2; border-color: rgba(30,136,229,0.15); }
:root[data-theme="light"] .chat-msg.other .msg-bubble::after { background: #dbe6f2; }
.chat-system {
align-self: center; width: 100%; text-align: center;
display: flex; align-items: center; gap: 8px;
padding: 4px 0; margin: 4px 0;
}
.chat-system-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.chat-system-text {
font-size: 11.5px; font-weight: 700; color: var(--text2);
background: var(--surface2); border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px; padding: 4px 12px; white-space: nowrap;
letter-spacing: .2px;
display: inline-flex; align-items: center; gap: 5px;
}
.chat-system-text .ic-sys {
width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor;
vertical-align: -2.5px;
}
/* أيقونة الصاروخ (بدء اللعبة) طولها أكبر من عرضها (فيها جسم + شعلة تحته)،
فبتاخد عرض أضيق وارتفاع أطول شوية عشان الشكل يفضل متناسب ومايتمططش */
.chat-system-text .ic-sys-rocket {
width: 11px; height: 14px;
}
/* زوج الصواريخ في رسالة "اللعبة بدأت" — واحد على يمين النص وواحد على شمالّه،
كل واحد مايل بزاوية عكس التاني (مرآة لبعض) عشان يبانوا زوج متماثل بصريًا
بدل ما يكونوا نفس الشكل مكرر بالظبط */
.chat-system-text .ic-sys-rocket-r { transform: rotate(24deg); }
.chat-system-text .ic-sys-rocket-l { transform: rotate(-24deg) scaleX(-1); }
:root[data-theme="light"] .chat-system-line {
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}
:root[data-theme="light"] .chat-system-text {
background: var(--bg3); border-color: rgba(0,0,0,0.07);
}
/* رسائل النظام المميزة بالألوان: خروج/طرد أحمر، انضمام أصفر، بدء اللعبة أخضر */
.chat-system.sys-leave .chat-system-text {
color: #ff8a80; background: rgba(229,57,53,0.14); border-color: rgba(229,57,53,0.35);
}
.chat-system.sys-leave .chat-system-line {
background: linear-gradient(90deg, transparent, rgba(229,57,53,0.35), transparent);
}
.chat-system.sys-join .chat-system-text {
color: #ffd54f; background: rgba(240,180,41,0.14); border-color: rgba(240,180,41,0.4);
}
.chat-system.sys-join .chat-system-line {
background: linear-gradient(90deg, transparent, rgba(240,180,41,0.4), transparent);
}
.chat-system.sys-start .chat-system-text {
color: #69f0ae; background: rgba(67,160,71,0.14); border-color: rgba(67,160,71,0.4);
}
.chat-system.sys-start .chat-system-line {
background: linear-gradient(90deg, transparent, rgba(67,160,71,0.4), transparent);
}
:root[data-theme="light"] .chat-system.sys-leave .chat-system-text {
color: #c62828; background: rgba(229,57,53,0.1); border-color: rgba(229,57,53,0.3);
}
:root[data-theme="light"] .chat-system.sys-join .chat-system-text {
color: #b8860b; background: rgba(240,180,41,0.14); border-color: rgba(240,180,41,0.45);
}
:root[data-theme="light"] .chat-system.sys-start .chat-system-text {
color: #2e7d32; background: rgba(67,160,71,0.1); border-color: rgba(67,160,71,0.35);
}
.chat-input-row { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 8px; align-items: center; }
.chat-inp { flex: 1; padding: 10px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: var(--bg3); color: var(--text); font-size: 13px; outline: none; transition: border .2s; }
.chat-inp:focus { border-color: var(--gold); }
.chat-send {
width: 42px; height: 42px; border-radius: 50%; border: none;
background: linear-gradient(150deg, #f7ca57, var(--gold));
color: #12100a; cursor: pointer; display: flex; align-items: center;
justify-content: center; flex-shrink: 0;
box-shadow: 0 4px 14px rgba(240,180,41,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
transition: transform .15s var(--trans), box-shadow .15s ease, filter .15s ease;
}
.chat-send svg { display: block; }
.chat-send:hover { filter: brightness(1.06); box-shadow: 0 5px 18px rgba(240,180,41,0.5), 0 0 0 1px rgba(255,255,255,0.12) inset; }
.chat-send:active { transform: scale(.88); box-shadow: 0 2px 8px rgba(240,180,41,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset; }
/* Sticker toggle + panel */
.chat-sticker-btn {
width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
background: var(--bg3); color: var(--text); cursor: pointer; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; line-height: 1;
transition: background .15s, border-color .15s, transform .15s var(--trans);
}
.chat-sticker-btn svg { display: block; }
.chat-sticker-btn:hover { background: rgba(240,180,41,0.15); border-color: rgba(240,180,41,0.4); }
.chat-sticker-btn:active { transform: scale(.88); }
.chat-sticker-btn.active { background: rgba(240,180,41,0.22); border-color: var(--gold); color: var(--gold); }
.sticker-panel {
display: none; grid-template-columns: repeat(5, 1fr); gap: 8px;
padding: 12px 14px; max-height: 220px; overflow-y: auto;
border-top: 1px solid rgba(255,255,255,0.06); background: var(--surface);
}
.sticker-panel.open { display: grid; }
.sticker-panel::-webkit-scrollbar { width: 3px; }
.sticker-panel::-webkit-scrollbar-thumb { background: var(--surface2); }
.sticker-pick-btn {
border: 1px solid rgba(255,255,255,0.08); background: var(--bg3); border-radius: 10px;
padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;
aspect-ratio: 1; transition: transform .12s var(--trans), border-color .15s, background .15s;
}
.sticker-pick-btn img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.sticker-pick-btn:hover { border-color: rgba(240,180,41,0.4); background: rgba(240,180,41,0.1); }
.sticker-pick-btn:active { transform: scale(.9); }
.msg-bubble.sticker-bubble {
padding: 4px !important; line-height: 0; display: inline-block;
}
.msg-bubble.sticker-bubble img { max-width: 190px; max-height: 190px; width: auto; height: auto; display: block; border-radius: 8px; }
/* ============================================================
FLOATING STICKER BUBBLES — فقاقيع الاستيكرات العائمة فوق الأفاتار
بتظهر في اللوبي والجيم لمدة ٤ ثواني وتختفي، بدون نص، استيكرات بس.
============================================================ */
.floating-sticker-layer {
position: fixed; inset: 0; pointer-events: none; z-index: 35;
}
.floating-sticker-bubble {
position: fixed; pointer-events: none;
display: flex; flex-direction: column; align-items: center;
opacity: 0; transform: translate(-50%, 6px) scale(.82);
transition: opacity .22s var(--trans, ease), transform .22s var(--trans, ease);
will-change: transform, opacity, top, left;
}
.floating-sticker-bubble.show {
opacity: 1; transform: translate(-50%, 0) scale(1);
}
.floating-sticker-bubble.leaving {
opacity: 0; transform: translate(-50%, -8px) scale(.9);
transition: opacity .28s ease, transform .28s ease;
}
.fsb-box {
position: relative;
line-height: 0;
display: inline-block;
background: var(--gold);
border-radius: 12px;
padding: 4px;
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.fsb-box img {
display: block; max-width: 54px; max-height: 54px; width: auto; height: auto; position: relative; z-index: 1; border-radius: 8px;
}
/* نفس ذيل فقاعة الشات (iMessage-style) بس متجه لتحت ناحية الأفاتار
بدل فوق، لأن الفقاعة العائمة واقفة فوق الأفاتار */
.fsb-tail {
width: 14px; height: 10px; margin-top: -4px; align-self: flex-start; margin-inline-start: 14px;
position: relative; z-index: -1;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,100 C55,100 15,65 5,15 C35,50 65,62 100,62 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,100 C55,100 15,65 5,15 C35,50 65,62 100,62 Z'/%3E%3C/svg%3E");
transform: scaleY(-1);
background: var(--gold);
}
/* Chat badge (unread counter) */
.chat-btn-wrap { position: relative; display: inline-flex; }
.chat-badge {
display: none; position: absolute; top: -5px; right: -5px;
background: #ef5350; color: #fff; border-radius: 50%;
width: 18px; height: 18px; font-size: 10px; font-weight: 900;
align-items: center; justify-content: center;
border: 2px solid var(--bg); pointer-events: none; z-index: 5;
}
/* Quick replies */
.quick-replies-row {
display: flex; gap: 6px; padding: 6px 14px 10px;
overflow-x: auto; scrollbar-width: none;
position: relative; z-index: 3;
background: var(--surface);
box-shadow: 0 8px 14px -6px rgba(0,0,0,0.55);
}
.quick-replies-row::-webkit-scrollbar { display: none; }
.quick-reply-btn {
flex-shrink: 0; padding: 5px 11px; border-radius: 20px;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07);
color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap;
transition: background .15s, border-color .15s;
}
.quick-reply-btn:hover { background: rgba(240,180,41,0.15); border-color: rgba(240,180,41,0.4); }
/* UNO flash — fixed فوق الشاشة كلها، وبتتمركز رأسيًا مع مكان الكروت (tableCenter) بالظبط
عبر top المحسوب بـ JS (flashUno) + transform لتوسيط دقيق حول تلك النقطة، مش وسط الشاشة الكامل */
.uno-flash {
position: fixed; left: 0; right: 0; top: 50%; bottom: auto;
transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
z-index: 200; pointer-events: none; padding: 0 12px;
}
.uno-flash-text {
font-size: 88px; font-weight: 900; color: var(--red);
text-shadow: 0 0 60px rgba(229,57,53,0.95), 0 0 24px rgba(229,57,53,0.8), 4px 4px 0 #000;
display: none; letter-spacing: 1px; -webkit-text-stroke: 2px rgba(255,255,255,0.15);
text-align: center; line-height: 1.1;
}
.uno-flash-text.show { display: block; animation: unoFlash 3s ease forwards; }
/* نداء لاعب تاني — بيبان بحجم قريب من اسم اللاعب، مش خط ضخم يغطي الشاشة */
.uno-flash-text.long-text {
font-size: 14px; font-weight: 800; letter-spacing: 0.3px;
-webkit-text-stroke: 0; text-shadow: 0 1px 6px rgba(229,57,53,0.6), 0 1px 2px rgba(0,0,0,0.8);
background: rgba(10,10,10,0.72); padding: 5px 12px; border-radius: 20px;
border: 1px solid rgba(229,57,53,0.5);
}
@keyframes unoFlash {
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
8% { transform: scale(1.35) rotate(4deg); opacity: 1; }
14% { transform: scale(1) rotate(0); opacity: 1; }
85% { transform: scale(1) rotate(0); opacity: 1; }
100% { transform: scale(0.9) rotate(0); opacity: 0; }
}
/* Win / lose screen */
.win-overlay {
position: fixed; inset: 0; z-index: 150; display: none;
align-items: center; justify-content: center;
background: radial-gradient(ellipse at 50% 30%, rgba(240,180,41,0.10) 0%, rgba(0,0,0,0.92) 62%);
backdrop-filter: blur(10px);
/* .win-box بقى هو نفسه اللي بيسكرول جوّاه (زي .pm-modal بالظبط) — الـ overlay
بقى ثابت بيتوسط بس، مش بيسكرول هو نفسه */
overflow: hidden;
}
.win-overlay.open { display: flex; animation: fadeIn .25s ease; }
.win-box {
position: relative;
/* نفس فكرة .pm-modal/.pm-scroll بالظبط: .win-box بقت بس الإطار الخارجي
(border-radius + overflow:hidden)، والسكرول الفعلي بقى جوه .win-box-scroll —
عشان سكرول بار المتصفح (زوايا مربّعة دايمًا) ميقطعش زوايا الصندوق المستديرة */
overflow: hidden;
background: linear-gradient(180deg, #182338 0%, #0e1626 100%);
border: 1px solid rgba(240,180,41,0.35);
border-radius: 22px;
text-align: center;
box-shadow: 0 4px 20px rgba(240,180,41,0.1);
animation: modalIn .35s ease;
width: min(380px, 96vw);
max-height: 90dvh;
margin: auto;
}
.win-box-scroll {
overflow-y: auto;
max-height: 90dvh;
padding: 30px 26px 26px;
position: relative; z-index: 1;
}
.win-box::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
border-radius: 26px; z-index: 0;
background:
radial-gradient(circle at 15% 8%, rgba(240,180,41,0.16) 0%, transparent 40%),
radial-gradient(circle at 85% 4%, rgba(240,180,41,0.12) 0%, transparent 35%);
}
.win-box.is-lose {
border-color: rgba(148,163,184,0.28);
box-shadow: 0 4px 20px rgba(80,110,150,0.1);
}
.win-box.is-lose::before {
background:
radial-gradient(circle at 15% 8%, rgba(120,150,190,0.14) 0%, transparent 40%),
radial-gradient(circle at 85% 4%, rgba(120,150,190,0.10) 0%, transparent 35%);
}
.win-ribbon {
position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0 auto 4px;
font-size: 11px; font-weight: 900; letter-spacing: 1px;
color: #1a1408; background: linear-gradient(135deg,#ffd873,#f0b429);
padding: 4px 16px; border-radius: 20px;
box-shadow: 0 4px 14px rgba(240,180,41,0.4);
}
.win-ribbon svg { width: 14px; height: 14px; flex-shrink: 0; color: #1a1408; fill: #1a1408; stroke: #1a1408; }
.win-box.is-lose .win-ribbon {
color: #0e1626; background: linear-gradient(135deg,#cfd8e6,#8fa1b8);
box-shadow: 0 4px 14px rgba(120,140,165,0.35);
}
.win-box.is-lose .win-ribbon svg { color: #0e1626; fill: #0e1626; stroke: #0e1626; }
.win-box:not(.is-lose) .win-ribbon {
background-size: 220% 100%;
animation: ribbonShimmer 2.4s ease-in-out infinite;
}
@keyframes ribbonShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.win-badge-wrap {
position: relative; margin: 14px auto 6px; width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center;
}
.win-badge-wrap::after {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
background: radial-gradient(circle, rgba(240,180,41,0.55) 0%, rgba(240,180,41,0) 70%);
/* حلقة التوهج حوالين صورة الفائز نفسه — تفضل دهبية دايمًا (فوز كان أو خسارة عندك)،
لأن اللي في النص هو أفاتار الفائز دايمًا مش أفاتارك إنت */
animation: winRingGlow 1.6s ease-in-out infinite;
z-index: 0;
}
@keyframes winRingGlow {
0%, 100% { opacity: .55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
.win-emoji {
position: relative; z-index: 1; font-size: 56px; line-height: 100px;
width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center;
animation: winBounce 1.6s ease-in-out infinite;
}
.win-emoji .ic-win-trophy { width: 76px; height: 76px; filter: drop-shadow(0 4px 10px rgba(240,180,41,0.5)); }
.win-emoji .ic-win-sad { width: 72px; height: 72px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }
@keyframes winBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* لما جوه winEmoji بيتحط أفاتار SVG (مش إيموجي نصي) — بيتوسط تمام جوه الدايرة اللي بتلف */
.win-emoji .win-avatar-disc {
width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
border: 4px solid rgba(240,180,41,0.85);
flex-shrink: 0; display: block; box-sizing: border-box;
background: transparent;
/* الصورة هنا هي دايمًا صورة الفائز نفسه (سواء إنت اللي فزت أو بتشوف مين فاز) —
لازم تاخد نفس قوة التوهج الدهبي بتاعة المركز الأول في البودييوم (lbGlowGold)
بالظبط، مكبّرة بنفس نسبة تكبير حجم الصورة (80px بدل 68px) عشان تحس بنفس
"القوة" فعليًا مش بس بالأرقام.
ملحوظة مهمة: كان فيه clip-path: circle(50%) هنا زيادة عن border-radius —
الـ clip-path (على عكس overflow:hidden) بيقص أي box-shadow طالع برا شكل
العنصر تمامًا، فكان بيلغي التوهج كله فعليًا مهما كانت قوته في الأرقام.
شلناه؛ overflow:hidden لوحدها كفاية عشان تقص حواف الصورة المربعة، وهي
مش بتأثر على box-shadow خالص (زي ما هو الحال في lb-podium-av بالظبط). */
animation: winAvatarGlowGoldBig 1.6s ease-in-out infinite;
}
.win-emoji .win-avatar-disc img {
display: block; width: 100%; height: 100%; object-fit: cover;
border-radius: 50%;
}
@keyframes winAvatarGlowGoldBig {
0%, 100% { box-shadow: 0 0 0 5px rgba(240,180,41,0.24), 0 0 22px rgba(240,180,41,0.4); }
50% { box-shadow: 0 0 0 8px rgba(240,180,41,0.4), 0 0 42px rgba(240,180,41,0.85); }
}
/* شارة التاج على أفاتار الفائز — عنصر مستقل جنب الأفاتار (مش جواه) عشان دايرة الأفاتار
المقصوصة (overflow:hidden) متقصوش نصها زي ما كان بيحصل قبل كده */
.win-avatar-crown {
position: absolute; z-index: 2; right: -2px; bottom: -2px;
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; background: linear-gradient(135deg,#ffd873,#f0b429);
border: 3px solid #0e1626; box-shadow: 0 3px 10px rgba(240,180,41,0.5);
animation: crownPop .4s cubic-bezier(.34,1.56,.64,1) .5s both;
}
:root[data-theme="light"] .win-avatar-crown { border-color: var(--surface); }
.win-avatar-crown .ic-trophy { width: 16px; height: 17px; fill: #7a4a00; }
@keyframes crownPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
/* كونفيتي احتفالي بسيط بيظهر لحظة الفوز بس، وبيمسح نفسه — مفيش تكرار مزعج */
.win-confetti-layer {
position: absolute; inset: 0; overflow: hidden; pointer-events: none;
border-radius: 26px; z-index: 4;
}
.win-confetti-piece {
position: absolute; top: -12px; width: 7px; height: 13px; border-radius: 2px;
opacity: .95; animation: confettiFall 1.7s cubic-bezier(.21,.6,.35,1) forwards;
}
@keyframes confettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(320px) rotate(600deg); opacity: 0; }
}
.win-title { position: relative; font-size: 26px; font-weight: 900; color: var(--gold); margin: 4px 0 4px; text-shadow: 0 0 18px rgba(240,180,41,0.35); }
.win-box.is-lose .win-title { color: #c3cfdf; text-shadow: none; }
.win-sub { position: relative; font-size: 13.5px; color: var(--text2); margin-bottom: 20px; }
.win-stats {
position: relative; display: flex; align-items: center; justify-content: center;
gap: 0; margin-bottom: 22px; background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 12px 8px;
}
.win-stat { flex: 1; text-align: center; }
.win-stat-val { font-size: 21px; font-weight: 900; color: var(--gold); }
.win-box.is-lose .win-stat-val { color: #c3cfdf; }
.win-stat-lbl { font-size: 10.5px; color: var(--text2); margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; }
.win-stat-lbl .ic-card { width: 11px; height: 11px; flex-shrink: 0; }
.win-stat-lbl .ic-clock { width: 11px; height: 11px; flex-shrink: 0; color: var(--text2); }
.win-stat-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.08); }
.win-standings { position: relative; text-align: right; margin-bottom: 20px; }
.win-standings-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px; padding: 0 2px;
}
.win-standings-title { font-size: 12px; font-weight: 800; color: var(--text2); letter-spacing: .3px; display: inline-flex; align-items: center; gap: 4px; }
.win-standings-title .ic-flag { width: 12px; height: 12px; flex-shrink: 0; color: var(--text2); }
.win-standings-count { font-size: 11px; font-weight: 700; color: var(--text2); opacity: .7; }
.win-standings-list { display: flex; flex-direction: column; gap: 8px; }
.win-standing-row {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
border-inline-start: 3px solid transparent;
border-radius: 14px; padding: 9px 12px;
}
.win-standing-row.is-winner {
background: linear-gradient(135deg, rgba(240,180,41,0.16) 0%, rgba(240,180,41,0.05) 100%);
border-color: rgba(240,180,41,0.4);
border-inline-start-color: #f0b429;
}
.win-standing-row.tier-2 { border-inline-start-color: rgba(199,210,224,0.65); }
.win-standing-row.tier-3 { border-inline-start-color: rgba(205,138,77,0.65); }
.win-standing-row.is-me { border-color: rgba(255,255,255,0.34); }
.win-standing-medal { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.win-standing-medal .ic-medal { width: 18px; height: 19.5px; }
.win-standing-av {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
overflow: hidden; background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; color: var(--text);
}
.win-standing-av > svg, .win-standing-av > div { width: 100%; height: 100%; }
/* نفس أنيميشن أفاتارات سجل المباريات (mh-rank-1/2/3) عشان الاتساق البصري بين الصفحتين */
.win-standing-av.mh-rank-1 { border: 2px solid rgba(240,180,41,0.7); animation: lbGlowGold 1.6s ease-in-out infinite; }
.win-standing-av.mh-rank-2 { border: 2px solid rgba(192,192,192,0.6); animation: lbGlowSilver 1.6s ease-in-out infinite; }
.win-standing-av.mh-rank-3 { border: 2px solid rgba(205,127,50,0.6); animation: lbGlowBronze 1.6s ease-in-out infinite; }
.win-standing-name {
flex: 1; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-standing-row.is-winner .win-standing-name { color: var(--gold); }
.win-standing-badge {
flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 10px;
}
.win-standing-badge.is-win {
color: #3a2604; background: linear-gradient(135deg,var(--gold),var(--gold2));
/* توهج ناعم نابض حوالين شارة "فائز" — نفس فلسفة نبضة زرار UNO الأحمر
(unoBtnBlink) بس بالدهبي بدل الأحمر، لأن شارة الفائز دهبية */
animation: winBadgeGlow 1.6s ease-in-out infinite;
}
@keyframes winBadgeGlow {
0%, 100% { box-shadow: 0 0 0 rgba(240,180,41,0); }
50% { box-shadow: 0 0 10px 2px rgba(240,180,41,0.6); }
}
.win-standing-badge.is-cards {
color: var(--text2); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08);
}
.win-actions { position: relative; display: flex; flex-direction: column; gap: 10px; }
.win-btn {
border: none; border-radius: 16px; padding: 13px 16px;
font-size: 14px; font-weight: 800; cursor: pointer; transition: all .15s;
display: flex; align-items: center; justify-content: center; gap: 7px;
}
.win-btn .ic-replay, .win-btn .ic-home { width: 15px; height: 15px; flex-shrink: 0; }
.win-btn-primary {
color: #1a1408; background: linear-gradient(135deg,#ffd873,#f0b429);
box-shadow: 0 8px 22px rgba(240,180,41,0.35);
}
.win-btn-primary:active { transform: scale(.97); }
.win-btn-secondary {
color: var(--text); background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
}
.win-btn-secondary:active { transform: scale(.97); }
.win-btn-share {
color: var(--gold); background: rgba(240,180,41,0.08);
border: 1px solid rgba(240,180,41,0.3);
}
.win-btn-share:active { transform: scale(.97); }
/* Notifications */
.notif-area { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: 100%; padding: 0 20px; box-sizing: border-box; }
/* لما أي popup/modal مهم يبقى مفتوح فوق الجيم (شاشة الفوز، تأكيد الخروج، اختيار
اللون، الشات)، أي توست عادي (زي "كارت مش مسموح" أو "بوت سحب بطاقة") المفروض
يفضل تحته، مش فوقه — عشان الإشعارات متغطيش أزرار التأكيد أو تحجب محتوى الـ modal.
كل شرط بيتفعّل بس وقت ما الـ overlay المعني فعلاً .open (:has بيراقب أي مكان في
الصفحة)، وبيحط الإشعارات تحت الـ overlay ده مباشرة (رقمه ناقص 1). لما مفيش أي
overlay مفتوح، الإشعارات ترجع تلقائيًا لترتيبها الطبيعي (999) فوق كل حاجة. */
body:has(.win-overlay.open) .notif-area { z-index: 149; }
body:has(.confirm-overlay.open) .notif-area { z-index: 199; }
body:has(.color-picker-overlay.open) .notif-area { z-index: 49; }
body:has(.chat-overlay.open) .notif-area { z-index: 39; }
/* نفس المبدأ ينطبق على كارت السحب/اللعب الطائر (.draw-fly-card) — لو حصل توقيت
نادر وهو لسه بيطير في نفس اللحظة اللي فيها الـ popup اتفتح، متطلعش فوقه هي كمان. */
body:has(.confirm-overlay.open) .draw-fly-card { z-index: 199; }
body:has(.win-overlay.open) .draw-fly-card { z-index: 149; }
body:has(.color-picker-overlay.open) .draw-fly-card { z-index: 49; }
body:has(.chat-overlay.open) .draw-fly-card { z-index: 39; }
.notif {
max-width: 320px;
background: linear-gradient(155deg, rgba(20,32,50,0.97), rgba(10,18,30,0.97));
border: 1px solid rgba(240,180,41,0.35);
border-radius: 16px;
padding: 11px 18px;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
color: #f3f0e8;
text-align: center;
backdrop-filter: blur(14px);
box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 1px 0 rgba(255,255,255,0.06) inset;
white-space: normal;
word-break: break-word;
animation: notifIn .35s var(--trans);
transition: opacity .25s ease, transform .25s ease, filter .25s ease;
pointer-events: auto;
touch-action: none;
user-select: none;
cursor: grab;
will-change: transform, opacity;
}
/* لو فيه أكتر من رسالة في نفس الوقت: الأقدم (مش آخر واحد) تتصغّر وتخف شوية عشان التركيز يبقى على الأحدث تحت */
.notif-area .notif:not(:last-child) { opacity: 0.72; transform: scale(0.96); filter: saturate(0.85); }
@keyframes notifIn { from { transform: translateY(-14px) scale(.94); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }
.notif.fade-out { animation: notifOut .35s ease forwards !important; }
@keyframes notifOut { to { transform: translateY(-10px) scale(.9); opacity:0; } }
/* السحب اليدوي (سواب) لقفل الإشعار — بيتشال الترانزيشن وقت السحب عشان يتحرك مع الإصبع فورًا */
.notif.notif-dragging { transition: none; animation: none; }
@keyframes notifSwipeOutR { to { transform: translateX(140%) scale(.92); opacity:0; } }
@keyframes notifSwipeOutL { to { transform: translateX(-140%) scale(.92); opacity:0; } }
@keyframes notifSwipeOutU { to { transform: translateY(-160%) scale(.92); opacity:0; } }
.notif.notif-swipe-out-r { animation: notifSwipeOutR .3s ease forwards !important; }
.notif.notif-swipe-out-l { animation: notifSwipeOutL .3s ease forwards !important; }
.notif.notif-swipe-out-u { animation: notifSwipeOutU .3s ease forwards !important; }
/* إشعار "ثابت" (Sticky) — لحالة مستمرة زي عقوبة السحب المتراكمة: بيفضل ظاهر بلا تايمر
لحد ما الحالة تنتهي فعليًا (dismissSticky)، مش بعد مدة معينة */
.notif-sticky {
border-color: rgba(240,180,41,0.6);
box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,180,41,0.12) inset, 0 0 18px rgba(240,180,41,0.18);
}
.notif-sticky.notif-pulse { animation: notifPulse .4s var(--trans); }
@keyframes notifPulse { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* Confirm */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.78); display: none; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(6px); padding: 20px; }
.confirm-overlay.open { display: flex; animation: fadeIn .15s ease; }
.confirm-box {
background: var(--surface); border: 1px solid rgba(239,83,80,0.22); border-radius: 26px;
padding: 32px 26px 24px; width: min(320px,92vw); box-shadow: 0 30px 90px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.2);
animation: aeIn .3s var(--trans); text-align: center; position: relative; overflow: hidden;
}
.confirm-box::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, transparent, #ef5350, #ff8a80, #ef5350, transparent);
}
/* ============================================================
STATUS ICON CIRCLE — دايرة أيقونة قابلة لإعادة الاستخدام،
بتتلون تلقائي (توهج + حدود + خلفية) حسب اللون: gold/red/green/orange/…
استخدام:
============================================================ */
.status-icon-wrap {
width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
animation: aeIconPop .4s var(--trans) .05s both;
border: 1.5px solid var(--si-border);
background: radial-gradient(circle at 34% 28%, var(--si-bg-1), var(--si-bg-2));
box-shadow: 0 0 26px var(--si-glow), inset 0 0 14px var(--si-glow-in);
}
.status-icon-wrap svg {
width: 27px; height: 27px; color: var(--si-icon);
filter: drop-shadow(0 0 7px var(--si-glow-icon));
}
.status-icon-wrap.si-red {
--si-border: rgba(239,83,80,0.4); --si-bg-1: rgba(239,83,80,0.26); --si-bg-2: rgba(239,83,80,0.06);
--si-glow: rgba(239,83,80,0.32); --si-glow-in: rgba(239,83,80,0.12);
--si-icon: #ff8a80; --si-glow-icon: rgba(239,83,80,0.65);
}
.status-icon-wrap.si-gold {
--si-border: rgba(240,180,41,0.4); --si-bg-1: rgba(240,180,41,0.26); --si-bg-2: rgba(240,180,41,0.06);
--si-glow: rgba(240,180,41,0.3); --si-glow-in: rgba(240,180,41,0.12);
--si-icon: var(--gold); --si-glow-icon: rgba(240,180,41,0.6);
}
.status-icon-wrap.si-green {
--si-border: rgba(102,187,106,0.42); --si-bg-1: rgba(102,187,106,0.26); --si-bg-2: rgba(102,187,106,0.06);
--si-glow: rgba(102,187,106,0.3); --si-glow-in: rgba(102,187,106,0.12);
--si-icon: #81c784; --si-glow-icon: rgba(102,187,106,0.6);
}
.status-icon-wrap.si-orange {
--si-border: rgba(255,152,0,0.42); --si-bg-1: rgba(255,152,0,0.26); --si-bg-2: rgba(255,152,0,0.06);
--si-glow: rgba(255,152,0,0.3); --si-glow-in: rgba(255,152,0,0.12);
--si-icon: #ffb74d; --si-glow-icon: rgba(255,152,0,0.6);
}
.confirm-icon-wrap { width: 60px; height: 60px; margin: 0 auto 16px; }
.confirm-box h3 { font-size: 17.5px; font-weight: 900; margin-bottom: 7px; letter-spacing: .2px; }
.confirm-box p { font-size: 13.5px; color: var(--text2); margin-bottom: 24px; line-height: 1.6; }
.confirm-btns { display: flex; gap: 10px; }
.confirm-btns .btn {
flex: 1; padding: 0; width: auto; height: 46px; border-radius: 15px;
font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.confirm-btns .btn-outline {
background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.12);
color: var(--text2); font-weight: 700;
}
.confirm-btns .btn-outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: var(--text); }
:root[data-theme="light"] .confirm-btns .btn-outline { background: rgba(0,0,0,0.02); }
.confirm-btns .btn-danger {
background: linear-gradient(160deg, #ef5350, #c62828);
box-shadow: 0 6px 20px rgba(198,40,40,0.4);
font-weight: 800;
}
.confirm-btns .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(198,40,40,0.5); }
.confirm-btns .btn-danger:active, .confirm-btns .btn-outline:active { transform: translateY(1px); }
/* Auth error popup — بديل جميل لرسالة التحذير الصغيرة تحت الحقول */
.ae-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: none;
align-items: center; justify-content: center; z-index: 210; backdrop-filter: blur(5px);
padding: 20px;
}
.ae-overlay.open { display: flex; animation: fadeIn .15s ease; }
.ae-box {
background: var(--surface); border: 1px solid rgba(239,83,80,0.25); border-radius: 24px;
padding: 30px 26px 24px; width: min(320px,92vw); box-shadow: 0 24px 80px rgba(0,0,0,0.7);
animation: aeIn .28s var(--trans); text-align: center; position: relative; overflow: hidden;
}
.ae-box::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
background: linear-gradient(90deg, var(--ae-c1,#ef5350), var(--ae-c2,#ff8a80), var(--ae-c1,#ef5350));
}
@keyframes aeIn {
0% { transform: scale(.85) translateY(14px); opacity: 0; }
60% { transform: scale(1.03) translateY(-2px); opacity: 1; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ae-icon-wrap {
width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
background: var(--ae-c1-bg, rgba(239,83,80,0.12)); display: flex; align-items: center; justify-content: center;
animation: aeIconPop .4s var(--trans) .05s both;
}
@keyframes aeIconPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ae-icon-wrap svg { width: 28px; height: 28px; }
.ae-icon-wrap svg { stroke: var(--ae-c1,#ef5350) !important; }
.ae-title { font-size: 17px; font-weight: 900; margin-bottom: 6px; }
.ae-msg { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-bottom: 22px; }
.ae-ok-btn {
width: 100%; padding: 13px; border-radius: 13px; border: none; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .3px;
background: linear-gradient(135deg, var(--ae-c1,var(--gold)) 0%, var(--ae-c2,var(--gold2)) 100%); color: #12100a;
box-shadow: 0 4px 18px var(--ae-c1-glow, var(--gold-glow)); transition: all .2s var(--trans);
}
.ae-ok-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--ae-c1-glow, rgba(240,180,41,0.5)); }
.ae-ok-btn:active { transform: translateY(0); }
/* ألوان موحّدة: الشريط فوق + الدايرة + الزرار كلهم بنفس لون النوع */
.ae-box.ae-red { --ae-c1:#ef5350; --ae-c2:#ff8a80; --ae-c1-bg:rgba(239,83,80,0.14); --ae-c1-glow:rgba(239,83,80,0.5); }
.ae-box.ae-orange { --ae-c1:#ff9800; --ae-c2:#ffc947; --ae-c1-bg:rgba(255,152,0,0.14); --ae-c1-glow:rgba(255,152,0,0.5); }
.ae-box.ae-yellow { --ae-c1:#fdd835; --ae-c2:#fff59d; --ae-c1-bg:rgba(253,216,53,0.16); --ae-c1-glow:rgba(253,216,53,0.5); }
.ae-box.ae-green { --ae-c1:#43a047; --ae-c2:#81c784; --ae-c1-bg:rgba(67,160,71,0.14); --ae-c1-glow:rgba(67,160,71,0.5); }
.ae-box.ae-blue { --ae-c1:#2196f3; --ae-c2:#64b5f6; --ae-c1-bg:rgba(33,150,243,0.14); --ae-c1-glow:rgba(33,150,243,0.5); }
/* اللون الافتراضي (ذهبي) لو مفيش نوع محدد */
.ae-box:not(.ae-red):not(.ae-orange):not(.ae-yellow):not(.ae-green):not(.ae-blue) { --ae-c1: var(--gold); --ae-c2: var(--gold2); --ae-c1-bg: var(--gold-glow); --ae-c1-glow: var(--gold-glow); }
/* اهتزاز خفيف للحقل اللي فيه المشكلة، بيتحرك مع ظهور البوب أب */
@keyframes aeShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(3px); }
}
.af-field.ae-shake .inp { animation: aeShake .4s var(--trans); border-color: #ef5350 !important; }
/* Players / chat buttons — كل واحد مستطيل مستقل بذاته */
.game-players-btn {
height: 38px; border-radius: 11px; padding: 0 14px;
background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14);
cursor: pointer; font-size: 12.5px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
color: var(--text); transition: all .2s; gap: 6px;
position: relative; backdrop-filter: blur(6px);
}
.game-players-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
.game-players-btn:active { transform: scale(0.96); }
.game-players-btn > span:first-child { display: inline-flex; align-items: center; }
.game-players-btn > span:first-child svg { width: 15px; height: 15px; }
/* الحاوية اللي بتجمع صف الخصوم مع زرار المشاركة جنبهم في نفس المستوى الأفقي تقريبًا،
بدل ما الزرار ياخد صف مستقل كامل العرض */
.opponents-row-wrap {
position: relative; display: flex; align-items: flex-start;
}
.opponents-row-wrap .opponents-row { flex: 1; }
/* زرار "مشاركة الشاشة" — صغير، متمركز رأسيًا مع صف أفاتارات الخصوم، تحت "اللاعبين" (يمين الشاشة
بصريًا في RTL) مش تحت "خروج"، وبعيد عن اسم/كروت أي لاعب */
.share-screen-row {
/* right: 12px عشان يتساوى بالظبط مع حافة زرار "اللاعبين" اليمنى (اللي عندها padding: 12px) —
يعني الاتنين يبدأوا من نفس العمود الرأسي.
top: 62px عشان ينزل تحت .game-header (ارتفاعه 56px) — لو كان فوقها كان بيستخبى وراها */
position: absolute; top: 62px; right: 12px; z-index: 16;
display: flex;
}
.share-screen-btn {
pointer-events: auto;
height: 26px; border-radius: 8px; padding: 0 10px;
background: linear-gradient(160deg, rgba(240,180,41,0.22), rgba(240,180,41,0.10));
border: 1px solid rgba(240,180,41,0.4);
cursor: pointer; font-size: 10.5px; font-weight: 800;
display: flex; align-items: center; justify-content: center; gap: 4px;
color: #ffd873; transition: all .2s; backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(0,0,0,0.25); white-space: nowrap;
}
.share-screen-btn:hover { background: linear-gradient(160deg, rgba(240,180,41,0.32), rgba(240,180,41,0.16)); border-color: rgba(240,180,41,0.6); }
.share-screen-btn:active { transform: scale(0.96); }
.share-screen-btn:disabled { opacity: 0.6; cursor: default; }
/* أوفرلي بسيط بيظهر لحظة التقاط الصورة (spinner صغير) */
.share-capture-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(4,10,8,0.55); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .15s;
}
.share-capture-overlay.open { opacity: 1; pointer-events: auto; }
.share-capture-spinner {
width: 42px; height: 42px; border-radius: 50%;
border: 3px solid rgba(255,255,255,0.15); border-top-color: #f0b429;
animation: shareSpin .7s linear infinite;
}
@keyframes shareSpin { to { transform: rotate(360deg); } }
/* Players panel overlay */
.players-panel-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
z-index: 60; display: none; align-items: flex-end;
backdrop-filter: blur(4px);
}
.players-panel-overlay.open { display: flex; animation: fadeIn .2s ease; }
.players-panel {
width: 100%; max-height: 72dvh;
background: var(--surface);
border-radius: 24px 24px 0 0;
border: 1px solid rgba(255,255,255,0.09); border-bottom: none;
display: flex; flex-direction: column;
animation: chatIn .28s var(--trans) both;
overflow: hidden;
}
.players-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent), linear-gradient(to bottom, var(--surface2) 0%, var(--surface) 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
border-radius: 24px 24px 0 0;
flex-shrink: 0;
}
.players-panel-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.players-panel-title svg { flex-shrink: 0; }
.players-panel-close {
font-size: 18px; cursor: pointer; color: var(--text2);
background: none; border: none; line-height: 1; transition: color .2s;
}
.players-panel-close:hover { color: var(--text); }
.players-panel-list {
overflow-y: auto; padding: 12px 14px;
display: flex; flex-direction: column; gap: 10px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.players-panel-list::-webkit-scrollbar { width: 3px; }
.players-panel-list::-webkit-scrollbar-thumb { background: var(--surface2); }
/* Individual player card */
.pp-card {
display: flex; align-items: center; gap: 13px;
background: var(--bg3); border-radius: 16px;
padding: 13px 14px; border: 1.5px solid rgba(255,255,255,0.05);
position: relative; transition: border-color .2s;
}
.pp-card.pp-me { border-color: rgba(240,180,41,0.35); background: rgba(240,180,41,0.05); }
.pp-card.pp-active { border-color: rgba(240,180,41,0.6); }
.pp-av-wrap { position: relative; flex-shrink: 0; align-self: flex-start; }
.pp-av {
width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 20px; color: #fff;
border: 2px solid rgba(255,255,255,0.12);
}
.pp-av.pp-av-active {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(240,180,41,0.35), 0 0 16px rgba(240,180,41,0.4);
}
.pp-status-dot {
position: absolute; bottom: 1px; right: 1px;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid var(--bg3);
}
.pp-status-dot.online { background: #43a047; }
.pp-status-dot.offline { background: #9e9e9e; }
.pp-info { flex: 1; min-width: 0; }
.pp-name {
font-size: 14px; font-weight: 800;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pp-tag {
font-size: 9px; font-weight: 800; padding: 2px 7px;
border-radius: 10px; white-space: nowrap;
display: inline-flex; align-items: center; gap: 3px;
}
.pp-tag-me { background: rgba(240,180,41,0.18); color: var(--gold); border: 1px solid rgba(240,180,41,0.35); }
.pp-tag-host { background: rgba(255,193,7,0.15); color: #ffc107; border: 1px solid rgba(255,193,7,0.3); }
.pp-tag-turn { background: rgba(67,160,71,0.18); color: #81c784; border: 1px solid rgba(67,160,71,0.35); animation: turnTagPulse 1.2s ease-in-out infinite; }
.pp-tag .ic-crown, .pp-tag .ic-bolt { width: 10px; height: 10px; flex-shrink: 0; }
@keyframes turnTagPulse { 0%,100% { opacity:.75; } 50% { opacity:1; } }
.pp-status-pill-wrap { margin-top: 5px; }
.pp-stats {
display: flex; gap: 14px; margin-top: 5px;
}
.pp-stat { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2); font-weight: 600; }
.pp-stat-val { font-size: 13px; font-weight: 900; color: var(--text); }
.pp-cards-count {
font-size: 11px; color: var(--text2); font-weight: 700; margin-top: 3px;
display: flex; align-items: center; gap: 4px;
}
.pp-cards-count .ic-card { width: 1em; height: 1em; flex-shrink: 0; }
.pp-cards-count .ic-hourglass { width: 1em; height: 1em; flex-shrink: 0; animation: hourglassPulse 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes hourglassPulse {
0%, 100% { opacity: .6; transform: scale(.92); }
50% { opacity: 1; transform: scale(1); }
}
.pp-kick-btn {
height: 30px; padding: 0 12px; border-radius: 9px;
border: 1px solid rgba(229,57,53,0.45);
background: rgba(229,57,53,0.12);
color: #ef5350; cursor: pointer; font-size: 12px; font-weight: 800;
font-family: inherit; transition: all .18s; flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
}
.pp-kick-btn:hover { background: rgba(229,57,53,0.28); border-color: rgba(229,57,53,0.7); }
.pp-kick-btn .ic-ban { width: 12px; height: 12px; flex-shrink: 0; }
.pp-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pp-host-btn {
height: 30px; padding: 0 12px; border-radius: 9px;
border: 1px solid rgba(240,180,41,0.45);
background: rgba(240,180,41,0.12);
color: var(--gold); cursor: pointer; font-size: 12px; font-weight: 800;
font-family: inherit; transition: all .18s; flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
}
.pp-host-btn:hover { background: rgba(240,180,41,0.26); border-color: rgba(240,180,41,0.75); }
.pp-host-btn .ic-crown { width: 12px; height: 12px; flex-shrink: 0; }
/* ── قفل/فتح الغرفة + قائمة المطرودين ── */
.room-lock-badge {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
border-radius: 20px; padding: 0 12px; height: 22px;
font-size: 11px; font-weight: 700; line-height: 1;
white-space: nowrap; flex-shrink: 0;
}
.room-lock-badge span:first-child { display: inline-flex; align-items: center; }
.room-lock-badge span:first-child svg { width: 12px; height: 12px; }
.room-lock-badge.locked { color: #ef5350; background: rgba(229,57,53,0.14); border: 1px solid rgba(229,57,53,0.4); }
.room-lock-badge.opened { color: #66bb6a; background: rgba(67,160,71,0.14); border: 1px solid rgba(67,160,71,0.4); }
.host-only-row { margin: 0; }
.rha-lock-pill, .rha-banned-pill {
flex: 1; height: 36px; border-radius: 12px;
display: flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; font-size: 13px; font-weight: 800;
font-family: inherit; transition: all .18s var(--trans);
position: relative; min-width: 0; padding: 0 6px;
}
.rha-lock-pill span, .rha-banned-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rha-lock-pill span:first-child, .rha-banned-pill span:first-child { font-size: 16px; flex-shrink: 0; overflow: visible; display: inline-flex; align-items: center; }
.rha-lock-pill span:first-child svg, .rha-banned-pill span:first-child svg { width: 16px; height: 16px; }
.rha-lock-pill {
border: 1px solid rgba(229,57,53,0.4); background: rgba(229,57,53,0.12); color: #ef5350;
}
.rha-lock-pill:hover { background: rgba(229,57,53,0.22); }
.rha-lock-pill.is-locked {
border-color: rgba(67,160,71,0.45); background: rgba(67,160,71,0.14); color: #66bb6a;
}
.rha-lock-pill.is-locked:hover { background: rgba(67,160,71,0.24); }
.rha-banned-pill {
border: 1px solid rgba(255,255,255,0.09); background: var(--bg3); color: var(--text);
}
.rha-banned-pill:hover { border-color: rgba(240,180,41,0.4); background: var(--surface2); }
:root[data-theme="light"] .rha-banned-pill { background: var(--bg3); border-color: rgba(0,0,0,0.09); }
.banned-badge {
position: absolute; top: -6px; left: -4px;
background: #ef5350; color: #fff; font-size: 10px; font-weight: 800;
min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--surface);
}
.pp-unban-btn {
height: 30px; padding: 0 12px; border-radius: 9px;
border: 1px solid rgba(67,160,71,0.45);
background: rgba(67,160,71,0.12);
color: #66bb6a; cursor: pointer; font-size: 12px; font-weight: 800;
font-family: inherit; transition: all .18s; flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
}
.pp-unban-btn:hover { background: rgba(67,160,71,0.26); border-color: rgba(67,160,71,0.7); }
.pp-banned-empty {
text-align: center; color: var(--text2); font-size: 13px; font-weight: 600;
padding: 30px 10px;
}
/* light mode */
:root[data-theme="light"] .players-panel { background: var(--surface); border-color: rgba(0,0,0,0.07); }
:root[data-theme="light"] .players-panel-header { background: linear-gradient(to bottom, var(--surface2) 0%, var(--surface) 100%); border-bottom-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .pp-card { background: var(--bg3); border-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .pp-card.pp-me { border-color: rgba(240,180,41,0.3); }
:root[data-theme="light"] .pp-status-dot { border-color: var(--bg3); }
:root[data-theme="light"] .status-pill { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
:root[data-theme="light"] .status-pill.online { background: rgba(102,187,106,0.12); border-color: rgba(102,187,106,0.35); }
:root[data-theme="light"] .status-pill.away { background: rgba(255,167,38,0.12); border-color: rgba(255,167,38,0.35); }
/* ============================================================
PLAYERS PANEL BUTTON + PANEL END
============================================================ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 2px; }
* { scrollbar-width: thin; }
/* ============================================================
EXPLICIT HEADING COLORS (prevent browser black defaults)
============================================================ */
h1, h2, h3, h4, h5, h6 { color: var(--text); }
.modal h2 { color: var(--text); }
.confirm-box h3 { color: var(--text); }
.auth-box h2 { color: var(--text); }
/* ============================================================
THEME TOGGLE BUTTON — matches the account pill on the right
============================================================ */
.theme-toggle-btn {
width: 60px; height: 44px; border-radius: 50px;
border: 1.5px solid rgba(255,255,255,0.08); background: var(--bg3);
cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: all .25s var(--trans);
flex-shrink: 0; line-height: 1; box-sizing: border-box;
padding: 0; position: relative; overflow: hidden;
}
.theme-toggle-btn .icon-wrap {
position: relative; width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
}
.theme-toggle-btn svg {
width: 22px; height: 22px; display: block;
position: absolute; inset: 0; margin: auto;
transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.theme-toggle-btn .icon-sun {
color: #ffb400;
filter: drop-shadow(0 0 5px rgba(255,180,0,0.65));
opacity: 0; transform: rotate(-90deg) scale(.4);
}
.theme-toggle-btn .icon-moon {
color: var(--gold);
filter: drop-shadow(0 0 4px rgba(240,180,41,0.55));
opacity: 1; transform: rotate(0deg) scale(1);
}
/* light mode: show sun, hide moon */
:root[data-theme="light"] .theme-toggle-btn .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle-btn .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme-toggle-btn:hover {
border-color: rgba(240,180,41,0.45);
background: rgba(240,180,41,0.08);
box-shadow: 0 3px 14px rgba(240,180,41,0.16);
}
.theme-toggle-btn:active { transform: scale(0.94); }
:root[data-theme="light"] .theme-toggle-btn { border-color: rgba(0,0,0,0.1); background: var(--bg3); }
:root[data-theme="light"] .theme-toggle-btn:hover { border-color: var(--gold); background: rgba(240,180,41,0.08); }
/* ============================================================
USER MENU — avatar + hamburger + dropdown
============================================================ */
.header-actions { display: flex; align-items: center; gap: 8px; }
.user-menu-wrap { position: relative; }
.user-menu-trigger {
display: flex; align-items: center; justify-content: center; gap: 7px;
cursor: pointer;
padding: 4px 8px;
border-radius: 50px;
background: var(--bg3);
border: 1.5px solid rgba(255,255,255,0.08);
transition: all .2s var(--trans);
height: 44px;
box-sizing: border-box;
}
.user-menu-trigger .avatar {
width: 34px !important; height: 34px !important;
font-size: 18px !important;
flex-shrink: 0;
}
.user-menu-trigger:hover {
border-color: rgba(240,180,41,0.45);
background: rgba(240,180,41,0.07);
box-shadow: 0 3px 14px rgba(240,180,41,0.12);
}
.user-menu-wrap.open .user-menu-trigger {
border-color: var(--gold);
background: rgba(240,180,41,0.1);
box-shadow: 0 0 0 2.5px rgba(240,180,41,0.22);
}
/* Hamburger 3 lines */
.hamburger-lines {
display: flex; flex-direction: column; gap: 5px; width: 18px; flex-shrink: 0;
}
.hamburger-lines span {
display: block; width: 100%; height: 2.5px; border-radius: 2px;
background: var(--gold); transition: all .32s var(--trans); transform-origin: center;
}
/* X animation when open */
.user-menu-wrap.open .hamburger-lines span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.user-menu-wrap.open .hamburger-lines span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.user-menu-wrap.open .hamburger-lines span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Dropdown panel — مصمم عشان يحس إنه طالع فعليًا من الكبسولة البيضاوية اللي فوقه
(مؤشر مثلث متصل + نفس نصف قطر الكبسولة في الركن القريب منها) */
.user-dropdown {
position: absolute; top: calc(100% + 14px); left: 4px;
min-width: 226px;
background: rgba(18,32,52,0.98);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(240,180,41,0.22);
border-radius: 20px;
padding: 7px 7px 9px;
box-shadow:
0 28px 70px rgba(0,0,0,0.75),
inset 0 1px 0 rgba(240,180,41,0.35),
0 0 0 1px rgba(240,180,41,0.08);
z-index: 80;
opacity: 0; transform: translateY(-6px) scale(0.94);
pointer-events: none;
transition: opacity .22s var(--trans), transform .22s var(--trans);
transform-origin: top left;
}
/* المؤشر المثلثي اللي بيوصل الكبسولة بالقايمة بصريًا */
.user-dropdown::before {
content: ''; position: absolute; top: -7px; left: 22px;
width: 16px; height: 16px;
background: rgba(18,32,52,0.98);
border-top: 1px solid rgba(240,180,41,0.22);
border-left: 1px solid rgba(240,180,41,0.22);
border-radius: 4px 0 0 0;
transform: rotate(45deg);
box-shadow: -2px -2px 6px rgba(0,0,0,0.12);
}
.user-menu-wrap.open .user-dropdown {
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
/* Dropdown user info row */
.dropdown-user-info {
display: flex; align-items: center; gap: 11px; padding: 12px 13px 11px;
}
.dropdown-av {
width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
border: 2px solid rgba(240,180,41,0.5);
box-shadow: 0 0 12px rgba(240,180,41,0.25);
}
.dropdown-name { font-size: 14px; font-weight: 900; color: var(--text); }
/* زرار "معلومات الحساب" جنب اسم الحساب في القايمة المنسدلة — نفس شكل شارة
"مقفولة/مفتوحة" (.room-lock-badge) وزرار "مشاركة" (.rha-share-pill) بالظبط
عشان يبقى متسق بصريًا مع باقي شارات/كبسولات الموقع الصغيرة */
.dropdown-info-badge {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
background: rgba(240,180,41,0.12); border: 1px solid rgba(240,180,41,0.35);
color: var(--gold); border-radius: 20px; padding: 0 10px; height: 22px;
font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
font-family: inherit; margin-top: 4px;
transition: background .15s, transform .1s;
}
.dropdown-info-badge span:first-child { font-size: 11px; line-height: 1; display: inline-flex; align-items: center; }
.dropdown-info-badge span:first-child svg { width: 12px; height: 12px; }
.dropdown-info-badge:hover { background: rgba(240,180,41,0.2); }
.dropdown-info-badge:active { transform: scale(.95); }
:root[data-theme="light"] .dropdown-info-badge { background: rgba(240,180,41,0.15); }
.dropdown-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 5px 9px; }
.dropdown-item {
display: flex; align-items: center; gap: 11px; direction: rtl;
width: 100%; padding: 10px 11px; border: none; background: transparent;
color: var(--text); font-size: 13px; font-weight: 700; font-family: inherit;
border-radius: 13px; cursor: pointer; text-align: right;
transition: background .18s var(--trans), transform .12s;
}
.dropdown-item:hover { background: rgba(240,180,41,0.09); }
.dropdown-item:hover .di-icon { background: rgba(240,180,41,0.18); color: var(--gold); transform: scale(1.05); }
.dropdown-item:hover .di-chev { opacity: .8; transform: translateX(-2px); }
.dropdown-item:active { transform: scale(.98); }
.dropdown-item-danger { color: #ef5350; }
.dropdown-item-danger:hover { background: rgba(229,57,53,0.13); }
.dropdown-item-danger:hover .di-icon { background: rgba(229,57,53,0.22); color: #ef5350; }
.di-icon {
flex-shrink: 0; color: var(--text2);
width: 30px; height: 30px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06);
transition: background .18s var(--trans), color .18s var(--trans), transform .18s var(--trans);
}
.di-icon svg { width: 16px; height: 16px; flex-shrink: 0; }
.dropdown-item-danger .di-icon { background: rgba(229,57,53,0.13); color: #ef5350; }
.dropdown-item > span:not(.di-icon) { flex: 1; }
.di-chev {
width: 13px; height: 13px; flex-shrink: 0; opacity: 0;
color: var(--text2); transition: opacity .18s var(--trans), transform .18s var(--trans);
}
/* عنصر "لوحة التحكم" — لمسة ذهبية مميزة لأنه إداري */
.dropdown-item-owner .di-icon { background: rgba(240,180,41,0.16); color: var(--gold); }
.dropdown-item-owner:hover { background: rgba(240,180,41,0.14); }
.dropdown-item-owner:hover .di-icon { background: rgba(240,180,41,0.26); }
/* Light mode overrides */
:root[data-theme="light"] .user-menu-trigger { background: var(--bg3); border-color: rgba(0,0,0,0.1); }
:root[data-theme="light"] .user-menu-trigger:hover { border-color: var(--gold); background: rgba(240,180,41,0.07); }
:root[data-theme="light"] .user-menu-wrap.open .user-menu-trigger { border-color: var(--gold); background: rgba(240,180,41,0.07); }
:root[data-theme="light"] .user-dropdown { background: rgba(255,255,255,0.98); border-color: rgba(0,0,0,0.09); box-shadow: 0 18px 50px rgba(0,0,0,0.18), inset 0 1px 0 rgba(240,180,41,0.4); }
:root[data-theme="light"] .user-dropdown::before { background: rgba(255,255,255,0.98); border-color: rgba(0,0,0,0.09); }
:root[data-theme="light"] .dropdown-divider { background: rgba(0,0,0,0.07); }
:root[data-theme="light"] .dropdown-item { color: var(--text); }
:root[data-theme="light"] .dropdown-item:hover { background: rgba(0,0,0,0.05); }
:root[data-theme="light"] .di-icon { background: rgba(0,0,0,0.04); }
/* ============================================================
CREATE ROOM REDESIGN
============================================================ */
.cr-modal {
width: min(390px, 96vw) !important;
max-height: 92dvh !important;
overflow: hidden;
gap: 0 !important;
padding: 0 !important;
border-radius: 20px !important;
display: flex !important;
flex-direction: column !important;
}
/* نفس فكرة .pm-modal/.pm-scroll بالظبط: .cr-modal بقت بس الإطار الخارجي
(border-radius + overflow:hidden)، والسكرول الفعلي بقى جوه .cr-scroll —
عشان سكرول بار المتصفح ميقطعش زوايا المودال المستديرة */
.cr-scroll {
overflow-y: auto;
width: 100%;
max-height: 92dvh;
display: flex;
flex-direction: column;
gap: 0;
}
.cr-header {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
position: sticky; top: 0; background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent), var(--surface); z-index: 5;
border-radius: 20px 20px 0 0;
}
:root[data-theme="light"] .cr-header { border-bottom-color: rgba(0,0,0,0.06); }
.cr-close-btn {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
color: var(--text2); cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: all .2s; flex-shrink: 0;
}
.cr-close-btn:hover {
background: rgba(229,57,53,0.15);
border-color: rgba(229,57,53,0.35);
color: #ef5350;
transform: scale(1.08);
}
:root[data-theme="light"] .cr-close-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
.cr-modal .cr-title { flex: 1; display: flex; align-items: center; gap: 8px; text-align: right; font-size: 18px; font-weight: 800; letter-spacing: .3px; margin-bottom: 0; line-height: 1; }
.cr-section { padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); }
:root[data-theme="light"] .cr-section { border-bottom-color: rgba(0,0,0,0.04); }
.cr-section-title { font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.cr-section-sub { font-size: 12px; color: var(--text2); margin-bottom: 14px; }
.cr-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-type-grid.has-trial { grid-template-columns: 1fr 1fr 1fr; }
.cr-type-grid.has-trial .cr-type-card { padding: 12px 8px; }
.cr-type-grid.has-trial .cr-type-icon { font-size: 22px; margin-bottom: 4px; }
.cr-type-grid.has-trial .cr-type-icon svg { width: 22px; height: 22px; }
.cr-type-grid.has-trial .cr-type-name { font-size: 12.5px; }
.cr-type-grid.has-trial .cr-type-desc { font-size: 9.5px; }
.cr-type-card {
border: 2px solid rgba(255,255,255,0.08); border-radius: 14px;
padding: 16px 14px; cursor: pointer; transition: all .2s;
text-align: center; background: var(--bg3);
}
:root[data-theme="light"] .cr-type-card { background: var(--surface2); border-color: rgba(0,0,0,0.08); }
.cr-type-card:hover { border-color: rgba(30,136,229,0.4); }
.cr-type-card.selected {
border-color: var(--blue); background: rgba(30,136,229,0.12);
box-shadow: 0 0 0 1px rgba(30,136,229,0.3);
}
.cr-type-card.trial-card { border-color: rgba(171,71,188,0.25); }
.cr-type-card.trial-card:hover { border-color: rgba(171,71,188,0.5); }
.cr-type-card.trial-card.selected {
border-color: #ab47bc; background: rgba(171,71,188,0.14);
box-shadow: 0 0 0 1px rgba(171,71,188,0.35);
}
.cr-type-icon { font-size: 26px; margin-bottom: 6px; }
.cr-type-icon svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
.cr-type-name { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.cr-type-desc { font-size: 11px; color: var(--text2); }
/* في مودال "تعديل التفضيلات" بس — نفس كارت النوع بس بلون أصفر بدل الأزرق + علامة صح */
.pref-type-card { position: relative; }
.pref-type-card:hover { border-color: rgba(240,180,41,0.4); }
.pref-type-card.selected {
border-color: var(--gold) !important; background: rgba(240,180,41,0.12) !important;
box-shadow: 0 0 0 1px rgba(240,180,41,0.3) !important;
}
.pref-type-check {
display: none;
position: absolute; top: -7px; left: -7px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--gold); color: #12100a;
font-size: 11px; font-weight: 900;
align-items: center; justify-content: center;
border: 2px solid var(--surface);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.pref-type-card.selected .pref-type-check { display: flex; }
.cr-players-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-player-btn {
padding: 12px 10px; border-radius: 12px;
border: 1.5px solid rgba(255,255,255,0.08);
background: var(--bg3); color: var(--text2);
font-size: 13px; font-weight: 700; cursor: pointer;
transition: all .2s; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
:root[data-theme="light"] .cr-player-btn { border-color: rgba(0,0,0,0.08); }
.cr-player-btn:hover { border-color: rgba(30,136,229,0.35); color: var(--text); }
.cr-player-btn.selected {
background: var(--blue); color: #fff; border-color: transparent;
box-shadow: 0 4px 14px rgba(30,136,229,0.4);
}
/* ── Timer range-slider (سحب حقيقي بـ input[type=range]) ──── */
.timer-slider-current {
text-align: center; font-size: 15px; font-weight: 900; color: var(--gold);
margin-bottom: 14px;
}
.timer-slider-wrap { padding: 4px 0 0; direction: ltr; }
.timer-slider-track-wrap { position: relative; height: 26px; display: flex; align-items: center; }
.timer-slider-track-bg {
position: absolute; right: 0; left: 0; top: 50%; transform: translateY(-50%);
height: 6px; border-radius: 4px; background: rgba(255,255,255,0.1);
}
:root[data-theme="light"] .timer-slider-track-bg { background: rgba(0,0,0,0.08); }
.timer-slider-fill { display: none; }
/* كل "وقفة" = عمود بعرض متساوٍ (1fr)، النقطة في نصه بالظبط، واللابل المقابلة تتمركز تحته بنفس العرض بالظبط */
.timer-slider-dots {
position: absolute; right: 0; left: 0; top: 50%; transform: translateY(-50%);
display: flex; pointer-events: none;
}
.timer-slider-dot-col {
flex: 1 0 0; display: flex; justify-content: center; align-items: center;
}
.timer-slider-dot {
width: 11px; height: 11px; border-radius: 50%;
background: var(--bg3); border: 2px solid rgba(255,255,255,0.18);
transition: all .12s ease; flex-shrink: 0;
}
:root[data-theme="light"] .timer-slider-dot { border-color: rgba(0,0,0,0.15); }
.timer-slider-dot.active { opacity: 0; } /* مكانها بياخده الـ thumb المرسوم يدويًا */
/* الكرة الذهبية الحقيقية — مرسومة يدويًا وموضعها محسوب بـ JS ليطابق مركز عمود النقطة النشطة تمامًا */
.timer-slider-thumb {
position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--gold2) 0%, var(--gold) 60%, var(--gold2) 100%);
border: 3px solid #7a5410;
box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 0 5px var(--gold-glow), inset 0 1px 1px rgba(255,255,255,0.35);
transform: translate(-50%, -50%); transition: left .15s cubic-bezier(.34,1.4,.64,1);
pointer-events: none; z-index: 2;
}
/* الشريط الفعلي القابل للسحب — شفاف بصريًا بالكامل (حتى الـ thumb الأصلي)، بس هو اللي بياخد اللمس/السحب فعليًا */
.timer-range-input {
position: relative; z-index: 3; width: 100%; height: 26px; margin: 0;
appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.timer-range-input::-webkit-slider-runnable-track { background: transparent; height: 26px; }
.timer-range-input::-moz-range-track { background: transparent; height: 26px; }
.timer-range-input::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
background: transparent; border: none; box-shadow: none;
cursor: grab;
}
.timer-range-input::-webkit-slider-thumb:active { cursor: grabbing; }
.timer-range-input::-moz-range-thumb {
width: 24px; height: 24px; border-radius: 50%;
background: transparent; border: none; box-shadow: none;
cursor: grab;
}
.timer-slider-labels {
display: flex; margin-top: 5px;
direction: ltr;
}
.timer-slider-label {
font-size: 10px; line-height: 1.35; color: var(--text2); font-weight: 700;
cursor: pointer; text-align: center; flex: 1 0 0;
transition: color .15s ease;
}
.timer-slider-label.active { color: var(--gold); font-weight: 900; }
.cr-summary {
margin: 14px 20px; background: var(--bg3); border-radius: 14px;
padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
:root[data-theme="light"] .cr-summary { background: var(--surface2); }
.cr-summary-title {
font-size: 10px; font-weight: 800; color: var(--text2);
text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px;
}
.cr-summary-row { display: flex; align-items: center; gap: 10px; }
.cr-sum-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.cr-sum-icon svg { width: 15px; height: 15px; }
.cr-sum-lbl { font-size: 13px; color: var(--text2); flex: 1; }
.cr-sum-val { font-size: 13px; font-weight: 800; color: var(--text); }
.cr-modal > .btn { margin: 0 20px 20px; width: calc(100% - 40px) !important; }
/* ============================================================
PROFILE EDIT MODAL
============================================================ */
/* ── Profile Modal Redesign ─────────────── */
.pm-modal {
width: min(380px, 96vw) !important;
max-height: 90dvh !important;
overflow: hidden;
padding: 0 !important;
gap: 0 !important;
border-radius: 22px !important;
position: relative;
display: flex !important;
flex-direction: column !important;
}
/* العنصر اللي بيسكرول فعليًا — منفصل عن .pm-modal (اللي شايلة الـ border-radius)
عشان سكرول بار المتصفح (اللي زوايا مربّعة دايمًا) ميقطعش زوايا المودال
المستديرة. كان ده هو سبب ظهور جزء من شريط السكرول برة حدود القايمة. */
.pm-scroll {
overflow-y: auto;
width: 100%;
max-height: 90dvh;
display: flex;
flex-direction: column;
}
.pm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
position: sticky; top: 0; background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent), var(--surface); z-index: 10;
border-radius: 22px 22px 0 0;
}
:root[data-theme="light"] .pm-header { border-bottom-color: rgba(0,0,0,0.06); }
.pm-header-title { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; line-height: 1; }
.pm-header-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.pm-close-btn {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
color: var(--text2); cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: all .2s; flex-shrink: 0;
}
.pm-close-btn:hover {
background: rgba(229,57,53,0.15);
border-color: rgba(229,57,53,0.35);
color: #ef5350;
transform: scale(1.08);
}
:root[data-theme="light"] .pm-close-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
/* ── Join-by-code modal redesign ─────────────── */
.jc-modal {
width: min(320px, 92vw) !important;
padding: 0 !important; gap: 0 !important;
border-radius: 22px !important;
overflow: hidden;
/* فيد دهبي واحد متصل بيغطي الهيدر والهيرو مع بعض (٢٢٠ بكسل تقريباً ارتفاعهم مجمّعين)
— بدل ما يبقى في تدرّجين منفصلين على عنصرين مختلفين وده بيعمل خط فاصل واضح بينهم */
background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent 220px), var(--surface);
}
.jc-header { display: flex; justify-content: flex-end; padding: 14px 14px 0; }
.jc-hero { text-align: center; padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
:root[data-theme="light"] .jc-hero { border-bottom-color: rgba(0,0,0,0.06); }
.jc-icon-badge {
width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 12px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, rgba(240,180,41,0.35), rgba(240,180,41,0.08) 60%, transparent 75%), rgba(240,180,41,0.08);
border: 1.5px solid rgba(240,180,41,0.35);
color: var(--gold);
box-shadow: 0 0 22px rgba(240,180,41,0.22), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.jc-header-title { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.jc-hero-sub { font-size: 12px; color: var(--text2); }
.jc-body { padding: 22px 20px 4px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jc-code-boxes { display: flex; gap: 7px; }
.jc-box {
width: 40px; height: 52px; text-align: center; font-size: 20px; font-weight: 900;
border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.1);
background: var(--bg3); color: var(--text); outline: none;
text-transform: uppercase; transition: border .2s, box-shadow .2s, transform .15s;
}
.jc-box:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,0.18); transform: translateY(-2px); }
.jc-box.jc-box-filled { border-color: rgba(240,180,41,0.4); }
.jc-footer { padding: 18px 20px 20px; }
.jc-footer .btn { width: 100%; }
/* Section */
.pm-section { padding: 18px 20px; }
.pm-section-header {
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.pm-section-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
box-shadow: 0 0 6px rgba(240,180,41,0.5);
}
.pm-section-title { font-size: 12px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 1px; }
.pm-section-badge {
font-size: 10px; font-weight: 700; color: var(--text2);
background: var(--bg3); border-radius: 20px; padding: 2px 8px;
}
.pm-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 0 20px; }
:root[data-theme="light"] .pm-divider { background: rgba(0,0,0,0.05); }
.pm-inline-err { padding: 0 20px; }
.pm-inline-err:empty { display: none; }
/* ============================================================
ACCOUNT INFO MODAL — بطاقة هوية اللاعب + مشاركة
============================================================ */
.ai-modal { width: min(380px, 96vw) !important; }
/* .ai-card هي بالظبط العنصر اللي بيتلقط وقت المشاركة (نفس فلسفة #winBox) —
تصميم جديد كليًا: شريط علوي مضغوط (أفتار + اسم + تاريخ الانضمام في صف
واحد أفقي بدل هيرو ضخم بمساحة فاضية)، وتحته صف إحصائيات أفقي واحد
(٤ أعمدة بفواصل رفيعة) بدل شبكة ٢×٢ اللي كانت بتسيب حواف ومسافات زيادة.
الكارت بيستخدم var(--surface)/var(--text)/var(--gold) بالكامل عشان
يتلوّن صح تلقائيًا في الوضع الفاتح والغامق (بدل ما يفضل غامق ثابت). */
.ai-card {
position: relative; margin: 4px 20px 4px;
border-radius: 20px; overflow: hidden;
background: var(--surface);
border: 1px solid rgba(240,180,41,0.28);
box-shadow: 0 14px 34px rgba(0,0,0,0.22), 0 2px 14px rgba(240,180,41,0.08);
}
:root[data-theme="dark"] .ai-card { box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 2px 16px rgba(240,180,41,0.1); }
/* ── شريط الهوية العلوي — أفقي ومضغوط ── */
.ai-hero {
position: relative; z-index: 1; overflow: hidden;
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 26px 18px 18px; text-align: center;
background:
radial-gradient(circle at 14% -20%, rgba(240,180,41,0.22) 0%, transparent 55%),
radial-gradient(circle at 100% 120%, rgba(240,180,41,0.12) 0%, transparent 50%);
border-bottom: 1px solid rgba(240,180,41,0.16);
}
.ai-hero-av {
position: relative; z-index: 1; width: 76px; height: 76px; flex-shrink: 0;
border-radius: 50%; padding: 3px;
background: linear-gradient(135deg, #fff6d8 0%, var(--gold) 45%, #b8811f 100%);
box-shadow: 0 0 0 3px rgba(240,180,41,0.14);
}
.ai-hero-av-inner {
width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
border: 2px solid var(--surface);
background: var(--bg3);
}
.ai-hero-av-inner > svg, .ai-hero-av-inner > div, .ai-hero-av-inner > img { width: 100%; height: 100%; display: block; }
.ai-hero-text { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ai-hero-name {
font-size: 19px; font-weight: 900; color: var(--text);
letter-spacing: .2px; display: flex; align-items: center; gap: 6px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ai-hero-join {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 8px; padding: 4px 11px; border-radius: 20px;
background: rgba(240,180,41,0.1);
border: 1px solid rgba(240,180,41,0.3);
color: var(--gold2); font-size: 11px; font-weight: 800;
}
:root[data-theme="dark"] .ai-hero-join { color: var(--gold); }
.ai-hero-join svg { width: 12px; height: 12px; flex-shrink: 0; }
/* ── صف الإحصائيات — أفقي بفواصل بدل شبكة ٢×٢ بمسافات فاضية ── */
.ai-stats-grid {
position: relative; z-index: 2; display: flex; align-items: stretch;
padding: 16px 6px;
}
.ai-stat {
position: relative; flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: center;
padding: 4px 4px; text-align: center;
}
.ai-stat + .ai-stat::before {
content: ''; position: absolute; inset-inline-end: 100%; top: 6%; bottom: 6%; width: 1.5px;
background: linear-gradient(180deg, transparent, rgba(127,127,127,0.55), transparent);
}
.ai-stat-icon {
width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: rgba(240,180,41,0.12); flex-shrink: 0;
}
.ai-stat-icon svg { width: 18px; height: 18px; }
.ai-stat.win .ai-stat-icon { background: rgba(102,187,106,0.15); }
.ai-stat.lose .ai-stat-icon { background: rgba(239,83,80,0.15); }
.ai-stat.time .ai-stat-icon { background: rgba(30,136,229,0.15); }
/* الترتيب: أيقونة → تسمية (عنوان) → رقم — العنوان فوق والرقم تحته، مطابق
لترتيب كارت نتيجة المباراة (win-stat). القيمة أهم بصريًا فبتاخد خط أكبر
وتيجي في الآخر تحت العنوان مباشرة. */
.ai-stat-lbl { margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--text2); letter-spacing: .1px; line-height: 1.35; }
.ai-stat-val {
margin-top: 4px;
font-size: 18px; font-weight: 900; color: var(--gold);
line-height: 1.15; letter-spacing: .2px;
max-width: 100%;
}
:root[data-theme="light"] .ai-stat-val { color: var(--gold2); }
.ai-stat.win .ai-stat-val { color: #43a047; }
.ai-stat.lose .ai-stat-val { color: #e53935; }
.ai-stat.time .ai-stat-val { font-size: 15px; color: #1e88e5; }
/* شريط سفلي رفيع — رابط الموقع بدل توقيع "UNO Cards · Official" */
.ai-card-foot {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 16px; border-top: 1px solid rgba(127,127,127,0.14);
background: rgba(240,180,41,0.04);
}
.ai-card-foot svg { width: 12px; height: 12px; color: var(--gold2); flex-shrink: 0; }
:root[data-theme="dark"] .ai-card-foot svg { color: var(--gold); }
.ai-card-foot span { font-size: 11px; font-weight: 800; letter-spacing: .3px; color: var(--text2); direction: ltr; }
/* Avatar section — "you" preview on its own row, picker row below */
.pm-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.pm-avatar-preview-wrap { position: relative; flex-shrink: 0; }
.pm-avatar-preview {
width: 98px; height: 98px; border-radius: 50%; overflow: hidden;
border: 3px solid var(--gold); box-shadow: 0 0 18px var(--gold-glow);
}
.pm-avatar-badge {
position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
background: var(--gold); color: #12100a;
font-size: 10px; font-weight: 900; border-radius: 20px; padding: 2px 10px;
white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.pm-av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; justify-items: center; width: 100%; margin: 0 auto; }
/* Avatar picker item wrapper — square slot, no distortion, no growth-jump */
.pm-av-item-wrap {
position: relative; flex-shrink: 0;
width: 53px; height: 53px;
display: flex; align-items: center; justify-content: center;
}
.pm-av-item-wrap button {
width: 46px !important; height: 46px !important;
aspect-ratio: 1 / 1;
border-radius: 50%; padding: 0; overflow: hidden;
cursor: pointer; transition: width .22s var(--trans), height .22s var(--trans), border-color .2s, box-shadow .2s;
border: 3px solid rgba(255,255,255,0.12);
box-shadow: none; background: transparent;
display: block; flex-shrink: 0;
}
.pm-av-item-wrap button.selected {
width: 53px !important; height: 53px !important;
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(240,180,41,0.35), 0 6px 16px rgba(240,180,41,0.28) !important;
}
/* Checkmark badge on selected avatar in picker */
.pm-av-check {
display: none;
position: absolute; bottom: -2px; right: -2px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--gold); color: #12100a;
font-size: 10px; font-weight: 900;
align-items: center; justify-content: center;
border: 2px solid var(--surface);
pointer-events: none;
}
.pm-av-item-wrap button.selected ~ .pm-av-check { display: flex; }
/* Inputs always active — no lock state */
.pm-inp:disabled { opacity: 1; cursor: text; }
.pm-inp:not(:disabled) { opacity: 1; cursor: text; }
.pm-pass-fields { display: flex; flex-direction: column; gap: 8px; }
/* Footer */
.pm-footer {
display: flex; gap: 10px; padding: 14px 20px 20px;
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: 8px;
}
:root[data-theme="light"] .pm-footer { border-top-color: rgba(0,0,0,0.05); }
.pm-footer-btn { flex: 1; }
.pm-save-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
/* ============================================================
PREFERENCES MODAL — color grid
============================================================ */
.pref-color-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.pref-color-card {
border: 2px solid rgba(255,255,255,0.08); border-radius: 14px;
padding: 8px 6px 10px; cursor: pointer; transition: all .2s;
text-align: center; background: var(--bg3); display: flex; flex-direction: column; align-items: center; gap: 6px;
}
:root[data-theme="light"] .pref-color-card { background: var(--surface2); border-color: rgba(0,0,0,0.08); }
.pref-color-card:hover { border-color: rgba(240,180,41,0.4); transform: translateY(-1px); }
.pref-color-card.selected {
border-color: var(--gold); background: rgba(240,180,41,0.1);
box-shadow: 0 0 0 1px rgba(240,180,41,0.3);
}
.pref-color-swatch {
/* نفس أبعاد الصورة المرجعية بالظبط (704×1000 ≈ 0.704) — مستطيل رأسي مش مربع،
عشان يبان فراغ واضح حوالين الشمس زي المرجع تمامًا. */
width: 100%; aspect-ratio: 0.704/1; border-radius: 10px; overflow: hidden;
position: relative; border: 1px solid rgba(255,255,255,0.08);
}
.pref-color-swatch-bg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
/* الشمس مش هتملا الإطار — بتاخد ~68% من عرض المستطيل وتفضل في النص بالظبط، زي
الصورة المرجعية اللي فيها فراغ غامق واضح حواليها من كل الاتجاهات، من غير أي تكبير (zoom). */
.pref-color-swatch-bg svg { width: 98%; height: auto; flex-shrink: 0; }
.pref-color-check {
display: none;
position: absolute; top: 5px; left: 5px; z-index: 2;
width: 17px; height: 17px; border-radius: 50%;
background: var(--gold); color: #12100a;
font-size: 9.5px; font-weight: 900;
align-items: center; justify-content: center;
border: 2px solid var(--surface);
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.pref-color-card.selected .pref-color-check { display: flex; }
.pref-color-name { font-size: 10.5px; font-weight: 700; color: var(--text2); line-height: 1.25; }
.pref-color-card.selected .pref-color-name { color: var(--gold); font-weight: 800; }
/* Legacy classes kept for JS compatibility */
.profile-av-preview-wrap { display: none; }
.profile-section { display: none; }
.profile-section-lbl { display: none; }
.profile-av-grid {
display: flex; gap: 8px; justify-content: flex-start;
flex-wrap: wrap; padding: 2px 0;
}
.profile-divider { display: none; }
/* ===================== قسم أنماط إضافي (كان بلوك