/* ================================================================ UX FIXES 2026-04-17 - Cursor: smaller precise ring + brighter dot so users know where the click actually happens. - Chat answers panels: re-enable inside game cards so answers are visible on all screen sizes (previous version hid them below 1100px because the left jawlah sidebar was hidden too → nothing was shown at all). - Live chat avatars: guarantee visibility + fallback sizing. - Auth modal open: lighten heavy effects while modal is open. Loaded LAST so it overrides previous CSS. ================================================================ */ /* ---------------------------------------------------------------- 1) CURSOR — precise click target The previous cursor had a 32px ring with the clickable point roughly at its centre BUT the ring animated to 48-50px on hover so users were never sure where the real pointer was. We: - shrink the ring to 22px (was 32px) - shrink the hover size to 32px (was 50px) → +10px only - enlarge the center dot to 8px (was 6px) and brighten it - reduce the trail so it isn't mistaken for the cursor ---------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { #cursor-main { width: 22px !important; height: 22px !important; border-width: 1.5px !important; /* softer glow — the old 36px shadow was visually louder than the ring itself and confused the target point */ box-shadow: 0 0 10px rgba(232, 183, 48, 0.45), 0 0 20px rgba(232, 183, 48, 0.15) !important; } #cursor-dot { width: 8px !important; height: 8px !important; /* brighter centre dot = the real click target */ box-shadow: 0 0 10px rgba(232, 183, 48, 1), 0 0 18px rgba(232, 183, 48, 0.7) !important; } #cursor-trail { width: 34px !important; height: 34px !important; opacity: 0.55 !important; /* mix-blend-mode:screen was causing some text to invert under the trail on certain panels. Switch to normal blend. */ mix-blend-mode: normal !important; } } /* While an auth modal / any modal is open we hide the trail and particles so the form is easier to target (was the reason for "لما اضغط دخول الصفحة بتبقى بطيئة") */ body.modal-open #cursor-trail, body.modal-open .cursor-particle, body.modal-open .cursor-star { display: none !important; } /* ---------------------------------------------------------------- 2) CHAT ANSWERS PANELS — unhide inside game cards games-layout-fix-2026-04-17.css hid these panels to avoid duplication with the jawlah left sidebar. But the jawlah left sidebar is hidden below 1100px → nothing was visible. We invert the rule: show panels again inside .jawlah-game-container on all sizes, but hide them only on very wide screens where the left sidebar IS visible. ---------------------------------------------------------------- */ .jawlah-game-container #qa-chat-answers, .jawlah-game-container #trivia-chat-answers, .jawlah-game-container #eftekasaat-chat-answers, .jawlah-game-container #country-chat-answers, .jawlah-game-container #similar-chat-answers, .jawlah-game-container #flags-chat-answers, .jawlah-game-container #capitals-chat-answers, .jawlah-game-container #brand-chat-answers, #game-container #qa-chat-answers, #game-container #trivia-chat-answers, #game-container #eftekasaat-chat-answers, #game-container #country-chat-answers, #game-container #similar-chat-answers, #game-container #flags-chat-answers, #game-container #capitals-chat-answers, #game-container #brand-chat-answers { display: block !important; /* override the previous !important none */ margin-top: 12px !important; width: 100% !important; } /* On very wide screens where the left jawlah sidebar IS visible, hide the inline panel to avoid duplication. */ @media (min-width: 1400px) { .jawlah-game-container #qa-chat-answers, .jawlah-game-container #trivia-chat-answers, .jawlah-game-container #eftekasaat-chat-answers, .jawlah-game-container #country-chat-answers, .jawlah-game-container #similar-chat-answers, .jawlah-game-container #flags-chat-answers, .jawlah-game-container #capitals-chat-answers, .jawlah-game-container #brand-chat-answers { display: none !important; } } /* Also re-allow the internal grid-cols-3 layout on desktop so the sidebar sits nicely next to the question. Only on narrow screens we force a single column. */ @media (min-width: 1024px) and (max-width: 1399px) { .jawlah-game-container .grid.lg\:grid-cols-3, #game-container .grid.lg\:grid-cols-3 { grid-template-columns: 2fr 1fr !important; } .jawlah-game-container .lg\:col-span-2, #game-container .lg\:col-span-2 { grid-column: span 1 !important; } } /* ---------------------------------------------------------------- 3) CHAT ANSWERS AVATARS — make sure they're visible everywhere ---------------------------------------------------------------- */ .ca-avatar-v7 { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; font-size: 0.85rem !important; flex-shrink: 0 !important; } .ca-avatar-v7 img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; } /* ---------------------------------------------------------------- 4) JAWLAH LIVE CHAT AVATARS — visible and well-sized ---------------------------------------------------------------- */ .jawlah-chat-avatar, .jawlah-player-avatar { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; object-fit: cover !important; flex-shrink: 0 !important; display: inline-block !important; border: 1.5px solid rgba(232, 183, 48, 0.2); background: rgba(255, 255, 255, 0.04); } .jawlah-chat-avatar-fallback, .jawlah-player-avatar-fallback { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; font-size: 0.85rem !important; color: #fff !important; flex-shrink: 0 !important; } .jawlah-chat-msg { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 6px 8px !important; border-radius: 8px !important; margin-bottom: 4px !important; } .jawlah-chat-msg:hover { background: rgba(255, 255, 255, 0.02); } .jawlah-chat-msg.correct { background: rgba(16,185,129,0.08) !important; border-right: 2px solid #10B981; } .jawlah-chat-msg.wrong { background: rgba(239,68,68,0.06) !important; border-right: 2px solid #EF4444; } .jawlah-chat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .jawlah-chat-name { font-weight: 700; font-size: 0.78rem; line-height: 1.1; } .jawlah-chat-text { font-size: 0.82rem; color: #d1d5db; word-break: break-word; } /* ---------------------------------------------------------------- 5) AUTH MODAL — snappier open While the modal is open we lighten the background animations so the form renders without jank. ---------------------------------------------------------------- */ body.modal-open #bg-animation, body.modal-open #ramadan-decorations, body.modal-open #global-mosque, body.modal-open .loading-orbit-particle { animation: none !important; opacity: 0.15 !important; } /* Make sure the modal pops in instantly, no transforms on entrance */ #auth-modal { will-change: opacity; } #auth-modal.flex { animation: authModalFade 0.15s ease-out; } @keyframes authModalFade { from { opacity: 0; } to { opacity: 1; } } /* Prevent body scroll while modal open (avoids layout thrash) */ body.modal-open { overflow: hidden; }