/* ========== 1. RESET & BASE ========== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; color: #111318; background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.8), transparent 55%), radial-gradient(circle at 100% 0, rgba(252, 227, 182, 0.7), transparent 55%), radial-gradient(circle at 50% 100%, rgba(248, 187, 208, 0.8), transparent 55%), #f3f1f6; background-attachment: fixed; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: none; background: none; cursor: pointer; } body, button, input, select, textarea, a { transition: all 0.18s ease-out; } /* ========== 2. THEME VARIABLES ========== */ :root { --black: #050505; --black-soft: #111318; --accent-main: #ff7a3c; --accent-main-strong: #ea580c; --gold-main: #ffc857; --card-bg: rgba(255, 255, 255, 0.97); --card-soft: rgba(255, 255, 255, 0.9); --text-main: #111318; --text-soft: #555c6a; --text-subtle: #7c8495; --border-soft: rgba(12, 19, 38, 0.08); --radius-lg: 22px; --radius-pill: 999px; --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.18); } /* Dark theme toggle – class is added to */ .theme-dark body { background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.9), transparent 55%), radial-gradient(circle at 100% 0, rgba(30, 64, 175, 0.9), transparent 55%), radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.9), transparent 55%), #020617; color: #e5e7eb; } .theme-dark :root { --card-bg: rgba(15, 23, 42, 0.96); --card-soft: rgba(15, 23, 42, 0.9); --text-main: #e5e7eb; --text-soft: #cbd5f5; --text-subtle: #9ca3af; --border-soft: rgba(148, 163, 184, 0.4); } /* Layout shell */ .page-shell { max-width: 960px; margin: 0 auto; padding: 90px 24px 80px; /* bottom space for nav */ } /* ========== 3. TOP BAR ========== */ .topbar { position: sticky; top: 0; z-index: 100; min-height: 64px; height: auto; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top, 0px) 16px 0; background: #050505; color: #f9fafb; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } .topbar-inner { width: 100%; max-width: 1120px; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Logo */ .logo { display: flex; align-items: center; gap: 10px; } .logo-mark { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #ffe8a3, #e49a1a); border: 2px solid rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; color: #111318; } .logo-text { font-weight: 700; letter-spacing: 0.18em; font-size: 0.78rem; } /* Nav links */ .nav-links { display: flex; gap: 12px; } .nav-btn { background: transparent; border-radius: 999px; padding: 7px 14px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: #d1d5db; } .nav-btn:hover { background: rgba(249, 250, 251, 0.08); } .nav-btn.active { background: rgba(249, 115, 22, 0.16); color: var(--gold-main); } /* Right side */ .topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; } /* Topbar search */ .topbar-search { position: relative; width: 260px; max-width: 100%; } .topbar-search-input { width: 100%; padding: 8px 34px 8px 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.55); font-size: 0.82rem; background: rgba(15, 23, 42, 0.95); color: #e5e7eb; } .topbar-search-input::placeholder { color: #9ca3af; } .topbar-search-input:focus { outline: none; border-color: var(--accent-main); box-shadow: 0 0 0 1px rgba(248, 113, 22, 0.7); } .topbar-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: #9ca3af; } /* Theme toggle */ .theme-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: linear-gradient(135deg, #ffe8a3, #e49a1a); } /* Icon button (bell) */ .icon-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.7); display: flex; align-items: center; justify-content: center; font-size: 0.86rem; background: rgba(15, 23, 42, 0.95); color: #e5e7eb; } .icon-btn:hover { background: rgba(31, 41, 55, 0.95); } .topbar-bell--active { border-color: var(--accent-main); } /* MP profile button */ .topbar-profile-btn { width: 30px; height: 30px; border-radius: 50%; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #ffe8a3, #f97316); color: #111318; } .topbar-profile-btn--active { box-shadow: 0 0 0 2px var(--accent-main); } /* Auth buttons */ .auth-buttons { display: flex; gap: 8px; } .btn { border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .btn-ghost { background: transparent; color: #e5e7eb; border: 1px solid rgba(229, 231, 235, 0.35); } .btn-ghost:hover { background: rgba(249, 250, 251, 0.1); } .btn-primary { background: var(--accent-main); color: #111318; box-shadow: 0 10px 30px rgba(248, 113, 22, 0.4); } .btn-primary:hover { background: var(--accent-main-strong); } /* Forms / generic primary button (for reels) */ .btn-primary-form, .btn-primary { border-radius: 999px; } /* ========== 4. FEED & CARDS ========== */ .games-main h1 { margin: 0 0 4px; font-size: 1.4rem; text-align: center; } .games-subtitle { margin: 0 0 16px; font-size: 0.86rem; color: var(--text-soft); text-align: center; } /* Hero card */ .games-hero-card { max-width: 640px; margin: 0 auto 18px; padding: 18px 22px; border-radius: 999px; background: var(--card-soft); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16); text-align: center; } .games-hero-card h1 { margin: 0 0 4px; } .games-hero-card p { margin: 0; font-size: 0.85rem; color: var(--text-soft); } /* Art grid / games column */ .art-grid { display: flex; flex-direction: column; gap: 16px; } /* Big post card */ .art-card { background: var(--card-bg); border-radius: 22px; padding: 12px 12px 14px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18); border: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 8px; max-width: 680px; margin: 0 auto; } .art-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Author bits (reused) */ .post-author { display: flex; align-items: center; gap: 10px; } .post-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0f172a, #f97316); color: #f9fafb; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } .post-author-text { font-size: 0.78rem; } .post-author-text span { display: block; } .post-meta { font-size: 0.72rem; color: var(--text-subtle); } /* Big image */ .art-thumb { width: 100%; min-height: 200px; max-height: min(360px, 62vh); aspect-ratio: 16 / 10; height: auto; border-radius: 18px; background: linear-gradient(150deg, #0f172a, #f97316); overflow: hidden; } /* Meta line */ .art-meta-line, .art-meta-line-small { font-size: 0.78rem; color: var(--text-soft); } /* Footer – just icons row */ .art-footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(15, 23, 42, 0.08); display: flex; justify-content: center; } .art-actions-row { display: flex; align-items: center; gap: 10px; } /* Round icon buttons */ .action-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.16); background: rgba(255, 255, 255, 0.96); display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12); } .action-icon i { font-size: 14px; color: #111318; } .action-icon:hover { background: var(--accent-main); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35); } .action-icon.is-liked { background: var(--accent-main); } .action-icon.is-saved { background: #0f172a; color: #ffffff; } /* ========== 5. POSTS & REELS ========== */ .posts-layout, .reels-layout, .notifications-layout { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } /* Post card */ .post-card { background: var(--card-bg); border-radius: 20px; padding: 14px 16px 12px; border: 1px solid var(--border-soft); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); } .post-body { margin-top: 10px; font-size: 0.87rem; line-height: 1.5; } .post-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; } /* Reusable chip button */ .btn-chip { border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.18); padding: 4px 12px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255, 255, 255, 0.9); color: var(--text-main); } .btn-chip:hover { background: rgba(15, 23, 42, 0.9); color: #f9fafb; } .btn-chip.is-liked { background: var(--accent-main); color: #111318; border-color: rgba(249, 115, 22, 0.8); } .btn-chip.is-saved { background: #0f172a; color: #ffffff; } /* Reels */ .reel-card { margin-top: 4px; background: #020617; border-radius: 22px; padding: 14px 16px 14px; color: #f9fafb; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; box-shadow: var(--shadow-soft); } .reel-thumb { border-radius: 18px; background: linear-gradient(180deg, #f97316, #0f172a); } .reel-content h3 { margin: 0 0 6px; font-size: 0.98rem; } .reel-meta { font-size: 0.76rem; color: #e5e7eb; } .reel-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; } /* ========== 6. PROFILE ========== */ .profile-hero { background: linear-gradient(135deg, #111827, #020617); color: #f9fafb; border-radius: 26px; padding: 22px 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; box-shadow: var(--shadow-soft); } .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #ffe8a3, #e49a1a); display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 0.18em; font-size: 0.8rem; color: #111318; } .profile-main h1 { margin: 0 0 4px; font-size: 1.3rem; } .profile-username { font-size: 0.78rem; color: #e5e7eb; } .profile-bio { margin-top: 10px; font-size: 0.8rem; color: #e5e7eb; } .profile-meta-row { margin-top: 12px; display: flex; gap: 10px; font-size: 0.76rem; color: #9ca3af; flex-wrap: wrap; } .profile-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .profile-stats { display: flex; gap: 18px; justify-content: flex-end; font-size: 0.76rem; } .profile-stats span strong { display: block; font-size: 0.9rem; } .section-title-row { margin: 26px 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .section-title-row h2 { margin: 0; font-size: 1rem; } .profile-art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* ========== 7. NOTIFICATIONS ========== */ .notifications-layout h1 { margin: 0 0 4px; font-size: 1.3rem; } .notification-card { display: flex; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border-soft); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); font-size: 0.86rem; } .notification-card--unread { border-color: var(--accent-main); } .notification-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(249, 115, 22, 0.1); color: var(--accent-main-strong); } .notification-meta { font-size: 0.75rem; color: var(--text-subtle); } /* ========== 9. MODALS & TOASTS ========== */ .comment-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 999; font-size: 0.9rem; } .comment-modal.is-open { display: flex; } .comment-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } .comment-modal__panel { position: relative; width: min(420px, 92%); background: var(--card-bg); border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.55); z-index: 1; } .comment-modal__subtitle { margin: 0 0 10px; color: var(--text-soft); font-size: 0.82rem; } .comment-modal__textarea { width: 100%; min-height: 90px; resize: vertical; padding: 8px 10px; border-radius: 12px; border: 1px solid #d4d4d4; font-family: inherit; font-size: 0.87rem; } .comment-modal__textarea:focus { outline: none; border-color: var(--accent-main); box-shadow: 0 0 0 1px rgba(248, 113, 22, 0.7); } .comment-modal__footer { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; font-size: 0.8rem; } .comment-close-btn, .comment-send-btn { border-radius: 999px; padding: 7px 16px; } .comment-close-btn { background: #e5e7eb; } .comment-send-btn { background: var(--accent-main); color: #111318; } /* Share toast */ .share-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(15, 23, 42, 0.92); color: #f9fafb; padding: 10px 18px; border-radius: 999px; font-size: 0.82rem; max-width: 80%; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.22s ease-out, transform 0.22s ease-out; z-index: 9999; } .share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========== 10. ANIMATIONS & HOVERS ========== */ .art-card, .post-card, .reel-card, .profile-hero { transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; } .art-card:hover, .post-card:hover, .reel-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.26); } /* Fade-in */ @keyframes fadeUpSoft { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in-card { opacity: 0; animation: fadeUpSoft 0.4s ease-out forwards; } /* ========== 11. RESPONSIVE ========== */ @media (max-width: 900px) { .page-shell { padding: 80px 16px calc(96px + env(safe-area-inset-bottom, 0px)); } .profile-hero { grid-template-columns: 1fr; row-gap: 14px; } .profile-actions { align-items: flex-start; } .profile-stats { justify-content: flex-start; } .profile-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar-search { width: 190px; } } @media (max-width: 600px) { /* Horizontal clip only — avoid coupling that forces overflow-y: auto and hides long pages */ body { overflow-x: clip; overflow-y: visible; } .page-shell { padding: 76px 12px calc(104px + env(safe-area-inset-bottom, 0px)); min-height: min-content; } .topbar-inner { gap: 6px; } .topbar-right { min-width: 0; } .nav-links { display: none; /* bottom nav handles main nav on phones */ } .auth-buttons { display: none; } .topbar-search { display: none; } .profile-art-grid { grid-template-columns: 1fr 1fr; } .reel-card { grid-template-columns: 100px minmax(0, 1fr); padding: 12px; } .settings-row, .settings-toggle-row { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------- */ /* AUTH PAGES — SIGN IN / SIGN UP */ /* -------------------------------------------------- */ .auth-shell { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 40px 20px; background: var(--bg); } .auth-card { width: 100%; max-width: 420px; background: var(--card-bg); border-radius: 18px; padding: 40px 32px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); animation: fadeUp 0.3s ease-out; } .auth-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; text-align: center; } .auth-subtitle { font-size: 0.9rem; color: var(--text-soft); text-align: center; margin-bottom: 30px; } .auth-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; font-size: 1rem; background: var(--input-bg); color: var(--text); transition: border 0.25s; } .auth-input:focus { border-color: var(--accent); outline: none; } .btn-auth-primary { width: 100%; padding: 14px 16px; background: var(--accent); color: white; border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: background 0.25s; } .btn-auth-primary:hover { background: var(--accent-hover); } .auth-footer { margin-top: 22px; text-align: center; font-size: 0.9rem; color: var(--text-soft); } .auth-footer a { color: var(--accent); font-weight: 600; text-decoration: none; } /* FADE ANIMATION */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* =========================== AUTH PAGES (LOGIN / SIGNUP) =========================== */ .form-shell { min-height: calc(100vh - 64px); padding: 48px 16px 80px; display: flex; align-items: flex-start; justify-content: center; } .form-card { width: 100%; max-width: 420px; background: #ffffff; border-radius: 18px; padding: 28px 26px 24px; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18); } /* Dark mode for auth card */ .theme-dark .form-card { background: #10121a; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.9); } .form-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; } .form-subtitle-auth { font-size: 0.9rem; color: #6b7280; margin-bottom: 20px; } .theme-dark .form-subtitle-auth { color: #9ca3af; } /* Fields */ .form-field { margin-bottom: 14px; } .form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; } .form-input { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid #d1d5db; font-size: 0.9rem; outline: none; background: #f9fafb; } .form-input:focus { border-color: #f97316; box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3); background: #ffffff; } .theme-dark .form-input { background: #070814; border-color: #27324a; color: #e5e7eb; } .theme-dark .form-input:focus { border-color: #f97316; } /* Row: remember + forgot */ .form-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; font-size: 0.8rem; } .form-row-left { display: inline-flex; align-items: center; gap: 6px; } .form-row-left input[type="checkbox"] { width: 14px; height: 14px; } .form-row a { color: #f97316; text-decoration: none; } .form-row a:hover { text-decoration: underline; } /* Primary button reused across app */ .btn-primary-form { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; background: linear-gradient(135deg, #ff8a3d, #ff5c1a); color: #ffffff; width: 100%; margin-bottom: 10px; } .btn-primary-form:hover { filter: brightness(1.05); } /* Form footer links */ .form-footer-text { margin-top: 8px; font-size: 0.8rem; text-align: center; color: #6b7280; } .form-footer-text a { color: #f97316; text-decoration: none; } .form-footer-text a:hover { text-decoration: underline; } .theme-dark .form-footer-text { color: #9ca3af; } /* ================================ MESSAGES / CHAT LAYOUT ================================ */ .messages-layout { max-width: 1100px; margin: 32px auto 96px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; } /* Sidebar */ .messages-sidebar { background: rgba(255, 255, 255, 0.92); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(24px); display: flex; flex-direction: column; min-height: 480px; } .theme-dark .messages-sidebar { background: rgba(13, 16, 25, 0.96); border-color: rgba(255, 255, 255, 0.06); } .messages-sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .messages-sidebar-header h1 { font-size: 1.1rem; } .messages-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; border-radius: 999px; background: rgba(240, 240, 240, 0.9); font-size: 0.85rem; } .theme-dark .messages-search { background: rgba(31, 36, 52, 0.96); } .messages-search input { border: none; outline: none; background: transparent; width: 100%; font-size: 0.85rem; } .messages-list { margin-top: 4px; overflow-y: auto; } .messages-convo { width: 100%; border: none; background: transparent; padding: 10px; border-radius: 12px; display: flex; gap: 10px; text-align: left; cursor: pointer; transition: background 0.15s ease, transform 0.08s ease; } .messages-convo + .messages-convo { margin-top: 2px; } .messages-convo:hover { background: rgba(0, 0, 0, 0.03); transform: translateY(-1px); } .theme-dark .messages-convo:hover { background: rgba(255, 255, 255, 0.03); } .messages-convo.is-active { background: rgba(255, 184, 80, 0.12); } .theme-dark .messages-convo.is-active { background: rgba(255, 184, 80, 0.1); } .messages-convo-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ffb84f, #ff7b54); color: #111; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .messages-convo-main { flex: 1; min-width: 0; } .messages-convo-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 2px; } .messages-convo-top .time { opacity: 0.6; } .messages-convo-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.78rem; opacity: 0.8; } .messages-convo-bottom .preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .messages-convo-bottom .badge { min-width: 18px; padding: 2px 6px; border-radius: 999px; background: #ffb84f; font-size: 0.7rem; font-weight: 600; color: #1a1306; } /* Thread */ .messages-thread { background: rgba(255, 255, 255, 0.95); border-radius: 16px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); display: flex; flex-direction: column; min-height: 480px; } .theme-dark .messages-thread { background: rgba(13, 16, 25, 0.96); border-color: rgba(255, 255, 255, 0.06); } .messages-thread-header { padding: 14px 16px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: space-between; } .theme-dark .messages-thread-header { border-color: rgba(255, 255, 255, 0.06); } .thread-user { display: flex; align-items: center; gap: 10px; } .thread-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ffb84f, #ff7b54); color: #111; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .thread-name { font-size: 0.95rem; font-weight: 600; } .thread-status { font-size: 0.78rem; opacity: 0.7; } .thread-header-actions { display: flex; align-items: center; gap: 6px; } /* messages body */ .messages-thread-body { padding: 14px 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .chat-message { max-width: 70%; display: flex; flex-direction: column; gap: 4px; } .chat-message--me { margin-left: auto; align-items: flex-end; } .chat-bubble { padding: 8px 12px; border-radius: 16px; font-size: 0.86rem; line-height: 1.4; background: #f1f2f6; } .chat-message--me .chat-bubble { background: linear-gradient(135deg, #ffb84f, #ff7b54); color: #201108; } .chat-time { font-size: 0.72rem; opacity: 0.6; } /* input row */ .messages-input-row { padding: 10px 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; gap: 8px; } .theme-dark .messages-input-row { border-color: rgba(255, 255, 255, 0.06); } .messages-input { flex: 1; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.12); padding: 8px 12px; font-size: 0.86rem; outline: none; background: rgba(248, 248, 248, 0.98); } .theme-dark .messages-input { border-color: rgba(255, 255, 255, 0.12); background: rgba(19, 23, 35, 0.98); color: #fff; } .messages-input:focus { border-color: #ffb84f; } /* small icon button used in chat */ .btn-icon { width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(0, 0, 0, 0.04); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.86rem; } .btn-icon i { pointer-events: none; } .btn-icon:hover { background: rgba(0, 0, 0, 0.08); } .theme-dark .btn-icon { background: rgba(255, 255, 255, 0.06); } .theme-dark .btn-icon:hover { background: rgba(255, 255, 255, 0.12); } .messages-send-btn { padding-inline: 14px; } /* Responsive: stack on small screens */ @media (max-width: 900px) { .messages-layout { grid-template-columns: 1fr; } .messages-sidebar { min-height: 0; } .messages-thread { min-height: 380px; } } /* ================================ BOTTOM NAV — PERFECT ALIGNMENT ================================ */ .bottom-nav-wrapper { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 999; max-width: 100%; width: max-content; padding: 0 12px; box-sizing: border-box; pointer-events: none; } .bottom-nav { pointer-events: auto; max-width: min(420px, 100vw - 24px); background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(18px); border-radius: 28px; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 28px); box-shadow: 0 10px 38px rgba(0, 0, 0, 0.35); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: #fff; font-size: 11px; opacity: 0.75; width: clamp(48px, 14vw, 58px); height: clamp(46px, 13vw, 54px); flex: 0 0 auto; transition: all 0.25s ease; } .bottom-nav-item i { font-size: 18px; } .bottom-nav-item:hover { opacity: 1; transform: translateY(-2px); } .bottom-nav-item.is-active { opacity: 1; color: #ffb84f; } .bottom-nav-item.is-active i { color: #ffb84f; } /* =========================================== FINAL DARK MODE – DRILONIX SOCIAL (Override only, keep all your existing styles) =========================================== */ /* Global background & text */ html.theme-dark body { background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.9), transparent 55%), radial-gradient(circle at 100% 0, rgba(30, 64, 175, 0.9), transparent 55%), radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.9), transparent 55%), #020617; color: #e5e7eb; } /* Card + text palette in dark */ html.theme-dark { --card-bg: rgba(15, 23, 42, 0.96); --card-soft: rgba(15, 23, 42, 0.9); --text-main: #e5e7eb; --text-soft: #cbd5f5; --text-subtle: #9ca3af; --border-soft: rgba(148, 163, 184, 0.5); } /* TOP BAR */ html.theme-dark .topbar { background: linear-gradient(90deg, #020617, #050816, #020617); box-shadow: 0 14px 45px rgba(0, 0, 0, 0.9); } html.theme-dark .logo-mark { background: radial-gradient(circle at 30% 20%, #ffe8a3, #f97316); color: #111318; } html.theme-dark .logo-text { color: #f9fafb; } html.theme-dark .nav-btn { color: #e5e7eb; } html.theme-dark .nav-btn.active { color: #facc15; background: rgba(248, 250, 252, 0.08); } /* Search bar in top bar */ html.theme-dark .topbar-search-input { background: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.7); color: #e5e7eb; } html.theme-dark .topbar-search-input::placeholder { color: rgba(148, 163, 184, 0.9); } /* HERO / FEED / CARDS */ html.theme-dark .games-hero-card, html.theme-dark .art-card, html.theme-dark .post-card, html.theme-dark .reel-card, html.theme-dark .profile-hero, html.theme-dark .notification-card, html.theme-dark .messages-sidebar, html.theme-dark .messages-thread, html.theme-dark .form-card { background: radial-gradient(circle at top, #111827 0, #020617 55%); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9); border-color: rgba(148, 163, 184, 0.4); } /* Reel card text contrast */ html.theme-dark .reel-card { color: #e5e7eb; } html.theme-dark .reel-meta { color: #cbd5f5; } /* Post / small meta text */ html.theme-dark .post-meta, html.theme-dark .profile-username, html.theme-dark .profile-bio, html.theme-dark .profile-meta-row, html.theme-dark .notification-meta { color: #cbd5f5; } /* Action icon buttons (like / comment / share / save) */ html.theme-dark .action-icon { background: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.7); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.8); } html.theme-dark .action-icon i { color: #e5e7eb; } html.theme-dark .action-icon:hover { background: var(--accent-main); box-shadow: 0 4px 14px rgba(248, 113, 22, 0.6); } html.theme-dark .action-icon.is-liked { background: var(--accent-main); color: #111318; } html.theme-dark .action-icon.is-saved { background: #0f172a; color: #ffffff; } /* Chips & buttons */ html.theme-dark .btn-chip { background: rgba(15, 23, 42, 0.96); color: #e5e7eb; border-color: rgba(148, 163, 184, 0.7); } html.theme-dark .btn-chip:hover { background: #e5e7eb; color: #020617; } html.theme-dark .btn-primary, html.theme-dark .btn-primary-form { background: linear-gradient(135deg, #facc15, #fb923c); color: #1a1306; box-shadow: 0 12px 32px rgba(248, 113, 22, 0.7); } /* AUTH FORM INPUTS (login / signup) */ html.theme-dark .form-input { background: #020617; border-color: #27324a; color: #e5e7eb; } html.theme-dark .form-input::placeholder { color: #6b7280; } /* MESSAGES / CHAT */ html.theme-dark .messages-search { background: rgba(17, 24, 39, 0.95); } html.theme-dark .messages-convo:hover { background: rgba(255, 255, 255, 0.04); } html.theme-dark .messages-convo.is-active { background: rgba(249, 115, 22, 0.15); } html.theme-dark .chat-bubble { background: #262c3f; color: #e5e7eb; } html.theme-dark .chat-message--me .chat-bubble { background: linear-gradient(135deg, #facc15, #fb923c); color: #1a1306; } /* Input at bottom of chat */ html.theme-dark .messages-input { background: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.7); color: #e5e7eb; } /* BOTTOM NAV stays glassy but brighter icon when dark */ html.theme-dark .bottom-nav { background: rgba(0, 0, 0, 0.85); } html.theme-dark .bottom-nav-item { color: #e5e7eb; } html.theme-dark .bottom-nav-item.is-active { color: #facc15; } html.theme-dark .bottom-nav-item.is-active i { color: #facc15; } /* ========================= TikTok-style Reels Games ========================= */ .reels-games { height: calc(100vh - 140px); /* safe default; your topbar+bottom nav */ overflow-y: auto; scroll-snap-type: y mandatory; border-radius: 18px; position: relative; } .reels-loading { padding: 18px; opacity: 0.8; } .reel { height: calc(100vh - 140px); scroll-snap-align: start; position: relative; border-radius: 18px; overflow: hidden; margin: 0 auto 14px; max-width: 560px; background: #000; } .reel-video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; } .reel-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px; pointer-events: none; background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 55% ); } .reel-meta { max-width: 75%; color: #fff; pointer-events: auto; } .reel-user { font-weight: 700; margin-bottom: 6px; } .reel-caption { opacity: 0.95; line-height: 1.25; } .reel-actions { display: flex; flex-direction: column; gap: 10px; pointer-events: auto; } .reel-action { width: 44px; height: 44px; border-radius: 14px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(10px); } .reel-action.is-on { background: rgba(255,255,255,0.24); } /* ========== TikTok-style Reels ========== */ .reels-stage { height: calc(100vh - 78px); /* adjust if your topbar height is different */ overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; } .reel-screen { height: calc(100vh - 78px); scroll-snap-align: start; display: flex; align-items: center; justify-content: center; position: relative; padding: 10px 0; } .reel-video { width: min(420px, 92vw); height: calc(100vh - 120px); max-height: 780px; border-radius: 18px; background: #000; object-fit: cover; /* THIS fixes the “format” */ display: block; } .reel-overlay { position: absolute; width: min(420px, 92vw); height: calc(100vh - 120px); max-height: 780px; border-radius: 18px; pointer-events: none; } .reel-caption { position: absolute; left: 14px; bottom: 16px; color: #fff; font-size: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.55); max-width: 70%; } .reel-actions-rail { position: absolute; right: 14px; bottom: 16px; display: flex; flex-direction: column; gap: 12px; } .reel-action { pointer-events: auto; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; } .reel-hint { position: absolute; top: 12px; left: 12px; color: rgba(255,255,255,.85); font-size: 12px; background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 999px; } /* ===== POSTS PAGE FIX ===== */ .posts-layout { width: 100%; max-width: 820px; margin: 0 auto; } .post-card { width: 100%; } .post-actions { display: flex; gap: 12px; justify-content: flex-start; } .post-actions .icon-btn { font-size: 14px; } /* DRILONIX POSTS – media scales on small viewports */ .post-media { margin-top: 10px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.12); max-height: min(360px, 62vh); } .post-media img { width: 100%; height: auto; max-height: min(520px, 70vh); object-fit: cover; display: block; } /* ====== POSTS: media auto-fit (square/rectangle) ====== */ .dx-post-media, .post-media, .art-thumb, .art-thumb--large { width: 100%; max-width: 720px; /* controls how wide images can get */ margin: 10px auto 0; /* centers the media */ border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.06); /* nice frame behind images */ border: 1px solid rgba(0,0,0,.08); } /* Dark mode frame */ .theme-dark .dx-post-media, .theme-dark .post-media, .theme-dark .art-thumb, .theme-dark .art-thumb--large { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } /* The important part: auto-fit */ .dx-post-media img, .post-media img, .art-thumb img, .art-thumb--large img { width: 100%; height: auto; /* keeps aspect ratio */ display: block; max-height: 520px; /* stops huge tall images */ object-fit: contain; /* NEVER crops, never overflows */ } /* ===== DRILONIX GOLD BRAND ===== */ :root { --dx-gold: #d4af37; --dx-gold-soft: #e6c65c; --dx-gold-dark: #b8962e; } /* ===== TOP BAR ICONS — GOLD POLISH ===== */ .topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; } .icon-btn, .notif-bell, .theme-toggle, .topbar-profile-btn, .topbar-menu-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: rgba(212, 175, 55, 0.12); border: 1px solid rgba(212, 175, 55, 0.35); backdrop-filter: blur(10px); cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; } /* Icon color */ .icon-btn i, .notif-bell i, .theme-toggle i, .topbar-menu-btn i { color: var(--dx-gold); font-size: 16px; } /* Profile letter (P) */ .topbar-profile-btn { color: var(--dx-gold); font-weight: 700; } /* Hover */ .icon-btn:hover, .notif-bell:hover, .theme-toggle:hover, .topbar-profile-btn:hover, .topbar-menu-btn:hover { background: rgba(212, 175, 55, 0.22); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35); transform: translateY(-1px); } /* Active */ .icon-btn:active, .notif-bell:active, .theme-toggle:active, .topbar-profile-btn:active, .topbar-menu-btn:active { background: rgba(184, 150, 46, 0.25); transform: scale(0.96); } /* ===== DARK MODE ===== */ .theme-dark .icon-btn, .theme-dark .notif-bell, .theme-dark .theme-toggle, .theme-dark .topbar-profile-btn, .theme-dark .topbar-menu-btn { background: rgba(212, 175, 55, 0.18); border-color: rgba(212, 175, 55, 0.45); } .theme-dark .icon-btn:hover, .theme-dark .notif-bell:hover, .theme-dark .theme-toggle:hover, .theme-dark .topbar-profile-btn:hover, .theme-dark .topbar-menu-btn:hover { box-shadow: 0 0 22px rgba(212, 175, 55, 0.45); } /* ===== FIX: Keep topbar icons dark-glass (like reels/posts) + gold icons ===== */ .topbar-right .icon-btn, .topbar-right .notif-bell, .topbar-right .theme-toggle, .topbar-right .topbar-profile-btn, .topbar-right .topbar-menu-btn { background: rgba(0,0,0,.38) !important; border: 1px solid rgba(255,255,255,.14) !important; backdrop-filter: blur(10px); } /* gold icon + text */ .topbar-right .icon-btn i, .topbar-right .notif-bell i, .topbar-right .theme-toggle i, .topbar-right .topbar-menu-btn i, .topbar-right .topbar-profile-btn { color: var(--dx-gold) !important; } /* hover stays nice */ .topbar-right .icon-btn:hover, .topbar-right .notif-bell:hover, .topbar-right .theme-toggle:hover, .topbar-right .topbar-profile-btn:hover, .topbar-right .topbar-menu-btn:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(212,175,55,.45) !important; box-shadow: 0 6px 20px rgba(212,175,55,.22) !important; } /* active press */ .topbar-right .icon-btn:active, .topbar-right .notif-bell:active, .topbar-right .theme-toggle:active, .topbar-right .topbar-profile-btn:active, .topbar-right .topbar-menu-btn:active { transform: scale(0.96); } /* ===== SEARCH BAR — GOLD SHINE ===== */ .topbar-search-input { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(212, 175, 55, 0.35); color: #fff; box-shadow: inset 0 0 0 rgba(212, 175, 55, 0), 0 0 0 rgba(212, 175, 55, 0); transition: border .2s ease, box-shadow .2s ease; } /* placeholder */ .topbar-search-input::placeholder { color: rgba(255, 255, 255, 0.55); } /* hover */ .topbar-search-input:hover { border-color: rgba(212, 175, 55, 0.55); } /* focus shine */ .topbar-search-input:focus { outline: none; border-color: var(--dx-gold); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 0 14px rgba(212, 175, 55, 0.35); background: rgba(0, 0, 0, 0.45); } /* search icon gold */ .topbar-search-icon i { color: var(--dx-gold); } /* Final balance for Profile "P" */ .topbar-profile-btn { font-size: 16px; /* slight bump */ font-weight: 800; line-height: 1; } /* ============================= */ /* TIKTOK-STYLE REELS (PROFILE) */ /* ============================= */ .my-reels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; } @media (max-width: 900px) { .my-reels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .my-reels-grid { grid-template-columns: 1fr; } } .reel-card { position: relative; width: 100%; aspect-ratio: 9 / 16; /* TikTok ratio */ background: #000; border-radius: 14px; overflow: hidden; cursor: pointer; } /* 🔥 THIS IS THE KEY FIX */ .reel-card video { width: 100%; height: 100%; object-fit: cover; /* fills the card properly */ display: block; } /* subtle gradient like TikTok */ .reel-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60% ); pointer-events: none; } .reel-badge { position: absolute; top: 10px; left: 10px; font-size: 12px; background: rgba(0,0,0,.6); color: #fff; padding: 6px 10px; border-radius: 999px; z-index: 2; } .reel-caption { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; font-size: 13px; line-height: 1.3; z-index: 2; } /* ========================= MY PROFILE — REELS GRID (TikTok style) Paste at bottom of styles.css ========================= */ .dx-reels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .dx-reel-card { position: relative; border-radius: 14px; overflow: hidden; background: #e9eef6; border: 1px solid rgba(0,0,0,.08); aspect-ratio: 9 / 16; /* ✅ TikTok ratio */ } .dx-reel-card video, .dx-reel-card img { width: 100%; height: 100%; display: block; object-fit: cover; /* ✅ fills card nicely */ } .dx-reel-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 999px; } /* Small screens */ @media (max-width: 700px) { .dx-reels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #myReelsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .dx-reel-card { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #eaeaea; cursor: pointer; } .dx-reel-video { width: 100%; height: 100%; object-fit: cover; } .dx-reel-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .dx-reel-play { background: rgba(0,0,0,0.6); color: white; padding: 8px 12px; border-radius: 20px; font-size: 14px; } /* ====== MY PROFILE: REELS GRID (BOTTOM) + LIKE BUTTON FIX ====== */ /* Reels grid (TikTok-like tiles) */ .dx-reels-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } .dx-reel-card{ position:relative; border-radius:14px; overflow:hidden; background:#f1f2f6; border:1px solid rgba(0,0,0,.08); aspect-ratio: 9 / 16; /* makes it look like reels/tiktok */ cursor:pointer; } .dx-reel-video{ width:100%; height:100%; object-fit:cover; display:block; } .dx-reel-badge{ position:absolute; top:10px; left:10px; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; display:flex; align-items:center; gap:6px; } .dx-reel-caption{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:12px; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); } /* Small counts next to Like/Comment */ .dx-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; margin-left:8px; border-radius:999px; font-size:12px; background:rgba(0,0,0,.06); } /* Make "Liked" state obvious */ .btn-chip.is-liked{ border-color: rgba(255,0,80,.35) !important; } .btn-chip.is-liked i{ color: #ff0050 !important; } /* Responsive */ @media (max-width: 900px){ .dx-reels-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .dx-reels-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } } /* =========================== Drilonix Profile Reels Grid Paste at END of styles.css =========================== */ .dx-reels-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; align-items: start; } /* smaller on medium screens */ @media (max-width: 980px){ .dx-reels-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* one column on phones */ @media (max-width: 520px){ .dx-reels-grid{ grid-template-columns: 1fr; } } .dx-reel-card{ position: relative; border-radius: 16px; overflow: hidden; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); aspect-ratio: 9 / 16; /* TikTok shape */ } .dx-reel-video{ width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .dx-reel-badge{ position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); z-index: 2; pointer-events: none; } .dx-reel-caption{ position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.15)); color: #fff; font-size: 12px; line-height: 1.25; z-index: 2; pointer-events: none; } .post-tile { position: relative; background: #111; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; } /* TEXT-ONLY POSTS */ .post-tile.text-only { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.4; color: #eaeaea; } /* Optional: subtle text glow */ .post-tile.text-only span { opacity: 0.9; } /* ===== REELS GRID ===== */ #myReelsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* Reel card */ .reel-card { position: relative; width: 100%; aspect-ratio: 9 / 16; /* 🔥 THIS IS CRITICAL */ background: #000; border-radius: 14px; overflow: hidden; cursor: pointer; } /* Video inside reel */ .reel-card video { width: 100%; height: 100%; object-fit: cover; /* 🔥 NO BLACK SCREEN */ display: block; background: #000; } /* Overlay */ .reel-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; color: #fff; pointer-events: none; } /* ========================= REELS FIX (NO BLACK BARS) ========================= */ #myReelsGrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .reel-card{ position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; /* vertical reel */ } .reel-card video{ width: 100%; height: 100%; display: block; object-fit: cover; /* 🔥 THIS removes black bars */ object-position: center; } /* ===== REELS: FORCE FULL COVER (NO BLACK) ===== */ #myReelsGrid .reel-card{ position: relative; overflow: hidden; border-radius: 16px; background: #000; aspect-ratio: 9 / 16; } /* force video to fill card */ #myReelsGrid .reel-card video{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center !important; } /* Reel thumbnails: no black bars */ .reel-card video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; } .post-tile { background: #f5f6f8; border-radius: 14px; overflow: hidden; } .post-tile { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 16px; font-weight: 600; } .post-tile.text-only { min-height: unset; height: auto; padding: 14px 16px; display: block; font-size: 14px; font-weight: 500; line-height: 1.4; } .posts-games { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; } .post-card { background: #f2f3f5; border-radius: 14px; padding: 14px; cursor: pointer; } .post-header { display: flex; justify-content: space-between; font-size: 14px; opacity: 0.8; margin-bottom: 8px; } .post-image { width: 100%; border-radius: 12px; margin: 10px 0; } .post-content { font-size: 16px; line-height: 1.5; white-space: pre-wrap; } .post-actions { display: flex; gap: 12px; margin-top: 10px; } .post-actions .ghost { background: transparent; border: none; cursor: pointer; font-weight: 600; opacity: 0.7; } /* POSTS — vertical games, smaller & clean */ #myPostsGames { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .post-card { background: #f6f6f6; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); } /* images inside posts */ .post-image { max-height: 420px; object-fit: cover; border-radius: 12px; margin: 10px 0; } /* text */ .post-content { font-size: 15px; line-height: 1.5; }/* ===== REELS SIZE REDUCTION (OVERRIDE ONLY) ===== */ /* Make grid cards smaller */ #myReelsGrid { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important; gap: 15px !important; } /* Reduce reel height + keep vertical look */ #myReelsGrid .reel-card { aspect-ratio: 4 / 7 !important; /* narrower vertical */ max-height: 320px !important; /* LIMIT HEIGHT */ } /* Ensure video always fills the card */ #myReelsGrid .reel-card video { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ===== FIX REELS SIZE (PROFILE PAGE ONLY) ===== */ /* Grid: more space, smaller cards */ #myReelsGrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; } /* Reel card: limit height */ #myReelsGrid .reel-card { max-height: 300px !important; aspect-ratio: 9 / 16 !important; border-radius: 14px; overflow: hidden; } /* Video always fits inside card */ #myReelsGrid .reel-card video { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* =============================== PROFILE PAGE — POSTS ALIGNMENT Matches posts.html exactly =============================== */ /* container */ #myPostsGames{ display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; } /* post card */ #myPostsGames .post-card{ background: rgba(255,255,255,.92); border-radius: 18px; border: 1px solid rgba(0,0,0,.10); box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 14px 16px; } /* header */ #myPostsGames .post-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } #myPostsGames .post-author strong{ font-weight: 900; } /* body text */ #myPostsGames .post-body{ line-height: 1.4; font-weight: 600; opacity: .95; white-space: pre-wrap; } /* image wrapper — SAME AS posts.html */ #myPostsGames .dx-post-media{ margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.06); max-height: 520px; } /* image itself */ #myPostsGames .dx-post-media img{ width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; } /* actions */ #myPostsGames .post-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } #myPostsGames .btn-chip{ border-radius: 999px; font-weight: 800; } /* ===== Posts comments modal: match reels look (smaller + cleaner) ===== */ .dx-comment { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .dx-comment-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .dx-comment-user { font-weight: 800; opacity: .95; font-size: 13px; } .dx-comment-time { opacity: .65; font-size: 12px; white-space: nowrap; } .dx-comment-body { opacity: .92; margin-top: 4px; font-size: 13px; line-height: 1.35; } .dx-comment-actions { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; } .dx-mini-btn { border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; } .dx-mini-like.is-active { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); } .dx-replies { margin-top: 10px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.08); } .dx-replying-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(0,0,0,.18); margin-bottom: 10px; font-size: 12px; opacity: .95; } .dx-replying-bar button { border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: #fff; border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 12px; } /* ===== MESSAGES: FIX SCROLL (SCOPED) ===== */ /* Full-height chain for messages only — a global html/body height breaks scroll on other pages */ html.page-messages, html.page-messages body { height: 100%; } /* ONLY messages page gets this behavior */ body.messages-page{ margin: 0; overflow: hidden; /* only on messages page */ display: flex; flex-direction: column; min-height: 100vh; } /* topbar keeps natural height */ body.messages-page .topbar{ flex: 0 0 auto; } /* remove the big global page-shell padding ONLY on messages page */ body.messages-page .page-shell{ flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; padding: 0; /* IMPORTANT */ max-width: none; /* IMPORTANT */ margin: 0; /* IMPORTANT */ } /* messages grid fills the available height */ body.messages-page .messages-layout{ width: min(1320px, 98vw); margin: 0 auto; height: 100%; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 12px; padding: 16px; /* nice spacing inside */ box-sizing: border-box; } /* sidebar fills height */ body.messages-page .messages-sidebar{ min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; } body.messages-page .messages-list{ flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* thread fills height */ body.messages-page .messages-thread{ min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0; } /* ONLY the chat body scrolls */ body.messages-page .messages-thread-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 12px; } /* input stays pinned */ body.messages-page .messages-input-row{ flex: 0 0 auto; padding: 10px 12px; } /* optional: tighter bubbles */ body.messages-page .chat-bubble{ max-width: 420px; } /* ================================ MY PROFILE: Posts look like posts.html (ONLY affects #myPostsGames) ================================ */ /* Dark mode: match posts.html card + text */ html.theme-dark #myPostsGames .post-card{ background: rgba(13,16,25,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 18px 55px rgba(0,0,0,.70) !important; color: #e5e7eb !important; } html.theme-dark #myPostsGames .post-body{ color: #e5e7eb !important; opacity: 1 !important; } html.theme-dark #myPostsGames .post-meta{ color: rgba(229,231,235,.65) !important; } /* Keep the avatar readable too */ html.theme-dark #myPostsGames .post-avatar{ color: #f9fafb !important; } /* Make chips look like the posts page */ html.theme-dark #myPostsGames .btn-chip{ background: rgba(15,23,42,.96) !important; color: #e5e7eb !important; border-color: rgba(148,163,184,.35) !important; } html.theme-dark #myPostsGames .btn-chip:hover{ background: rgba(229,231,235,.12) !important; border-color: rgba(229,231,235,.18) !important; } /* ========================= MESSAGES: Fix name contrast (DARK MODE ONLY) ========================= */ html.theme-dark .messages-convo-top .name, html.theme-dark .messages-thread-header .thread-name, html.theme-dark .messages-thread-header .thread-user { color: #f9fafb !important; opacity: 1 !important; } html.theme-dark .messages-convo-bottom .preview, html.theme-dark .thread-status { color: rgba(249,250,251,.78) !important; opacity: 1 !important; } html.theme-dark .messages-convo-top .time { color: rgba(249,250,251,.55) !important; opacity: 1 !important; } /* ================================ MESSAGES PAGE ONLY — GOLD OUTLINE TOPBAR (paste at VERY END of styles.css) ================================ */ /* topbar icons (bell, messages, theme, profile) */ html.page-messages .topbar-right .icon-btn, html.page-messages .topbar-right .topbar-icon-btn, html.page-messages .topbar-right .theme-toggle, html.page-messages .topbar-right .topbar-profile-btn{ background: rgba(0,0,0,.35) !important; border: 1px solid rgba(212,175,55,.55) !important; box-shadow: 0 0 0 1px rgba(212,175,55,.12) inset !important; border-radius: 999px !important; } /* icon color */ html.page-messages .topbar-right .icon-btn i, html.page-messages .topbar-right .topbar-icon-btn i, html.page-messages .topbar-right .theme-toggle i{ color: rgba(212,175,55,.95) !important; } /* search bar (input + button) */ html.page-messages .topbar-search input{ background: rgba(0,0,0,.30) !important; border: 1px solid rgba(212,175,55,.55) !important; color: #fff !important; border-radius: 999px !important; } html.page-messages .topbar-search input::placeholder{ color: rgba(255,255,255,.60) !important; } html.page-messages .topbar-search button{ border: 1px solid rgba(212,175,55,.55) !important; background: rgba(0,0,0,.20) !important; border-radius: 999px !important; } html.page-messages .topbar-search button i{ color: rgba(212,175,55,.95) !important; } /* ================================ MESSAGES PAGE — TOPBAR POLISH (icons same size + bigger search + gold outline) ================================ */ .page-messages .topbar-right{ gap: 10px; } /* make icons identical size */ .page-messages .topbar-right .icon-btn, .page-messages .topbar-right .theme-toggle, .page-messages .topbar-right .topbar-profile-btn{ width: 40px !important; height: 40px !important; border-radius: 999px !important; display: grid !important; place-items: center !important; /* gold outline */ border: 1px solid rgba(212,175,55,.55) !important; background: rgba(0,0,0,.35) !important; } /* gold icon color */ .page-messages .topbar-right .icon-btn i, .page-messages .topbar-right .theme-toggle i{ color: rgba(212,175,55,.95) !important; font-size: 16px !important; } /* Bigger search bar like your home page */ .page-messages .topbar-search{ width: 340px !important; max-width: 44vw; } .page-messages .topbar-search-input{ width: 100%; height: 40px; padding: 8px 44px 8px 14px; border-radius: 999px; border: 1px solid rgba(212,175,55,.45); background: rgba(0,0,0,.28); color: #fff; } .page-messages .topbar-search-input::placeholder{ color: rgba(255,255,255,.60); } .page-messages .topbar-search-input:focus{ outline: none; border-color: rgba(212,175,55,.85); box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 0 14px rgba(212,175,55,.22); background: rgba(0,0,0,.38); } /* Search icon button on the right */ .page-messages .topbar-search-icon{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(212,175,55,.35); background: rgba(0,0,0,.22); display: grid; place-items: center; } .page-messages .topbar-search-icon i{ color: rgba(212,175,55,.95); font-size: 14px; } /* ========================================== FEED: MENU (3 lines) — FIX DAY + DARK ✅ NO square wrapper (do NOT style .dx-menu) ========================================== */ /* BUTTON (3 lines icon) */ .page-games #menuBtn{ width: 40px !important; height: 40px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; /* ✅ day mode: circle (not square) */ background: rgba(0,0,0,.10) !important; border: 1px solid rgba(0,0,0,.12) !important; } /* icon inside */ .page-games #menuBtn i{ font-size: 16px !important; color: #111318 !important; } /* DROPDOWN PANEL */ .page-games #menuPanel{ background: rgba(255,255,255,.96) !important; border: 1px solid rgba(0,0,0,.10) !important; color: #111318 !important; } .page-games #menuPanel a, .page-games #menuPanel button{ color: #111318 !important; } .page-games #menuPanel a i, .page-games #menuPanel button i{ color: #111318 !important; } .page-games #menuPanel .dx-sep{ background: rgba(0,0,0,.08) !important; } /* ====================== DARK MODE ====================== */ /* (your html has class="theme-dark" on ) */ html.theme-dark.page-games #menuBtn{ background: rgba(0,0,0,.28) !important; border: 1px solid rgba(255,255,255,.14) !important; } html.theme-dark.page-games #menuBtn i{ color: #facc15 !important; /* gold */ } html.theme-dark.page-games #menuPanel{ background: rgba(17,19,24,.96) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #e5e7eb !important; } html.theme-dark.page-games #menuPanel a, html.theme-dark.page-games #menuPanel button{ color: #e5e7eb !important; } html.theme-dark.page-games #menuPanel a i, html.theme-dark.page-games #menuPanel button i{ color: #facc15 !important; } html.theme-dark.page-games #menuPanel .dx-sep{ background: rgba(255,255,255,.10) !important; } /* ========================================== MESSAGES — Smaller send button + bigger input + tighter cards (Messages page only) ========================================== */ /* Target only messages page */ .page-messages .messages-layout, .messages-page .messages-layout { gap: 12px !important; /* a little space, not huge */ } /* Make the "cards" slightly smaller/tighter */ .page-messages .messages-sidebar, .messages-page .messages-sidebar, .page-messages .messages-thread, .messages-page .messages-thread { border-radius: 14px !important; } .page-messages .messages-sidebar, .messages-page .messages-sidebar { padding: 12px 12px 10px !important; } .page-messages .messages-thread, .messages-page .messages-thread { padding: 0 !important; /* header/body/input already have padding */ } /* Header padding slightly smaller */ .page-messages .messages-thread-header, .messages-page .messages-thread-header { padding: 10px 12px !important; } .page-messages .messages-sidebar-header, .messages-page .messages-sidebar-header { margin-bottom: 8px !important; } /* Search bar inside sidebar: better sizing + text visible */ .page-messages .messages-search, .messages-page .messages-search { padding: 7px 10px !important; } .page-messages .messages-search input, .messages-page .messages-search input { color: #111318 !important; } html.theme-dark .page-messages .messages-search input, html.theme-dark .messages-page .messages-search input { color: #e5e7eb !important; } /* ✅ INPUT ROW: input BIG, send SMALL */ .page-messages .messages-input-row, .messages-page .messages-input-row { padding: 8px 10px !important; gap: 8px !important; } /* Keep the input BIG */ .page-messages .messages-input, .messages-page .messages-input { flex: 1 1 auto !important; min-width: 0 !important; height: 40px !important; padding: 8px 12px !important; border-radius: 999px !important; } /* Make the left icon buttons smaller */ .page-messages .messages-input-row .btn-icon, .messages-page .messages-input-row .btn-icon { width: 34px !important; height: 34px !important; } /* ✅ Send button SMALL (about 1/5 of what you have now) */ .page-messages .messages-send-btn, .messages-page .messages-send-btn { width: 44px !important; height: 40px !important; padding: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } /* Make sure the send button DOES NOT become a long bar */ .page-messages .messages-send-btn.btn-primary-form, .messages-page .messages-send-btn.btn-primary-form { width: 44px !important; min-width: 44px !important; max-width: 44px !important; } /* Send icon size */ .page-messages .messages-send-btn i, .messages-page .messages-send-btn i { font-size: 14px !important; } /* Optional: make bubbles slightly smaller/tighter */ .page-messages .chat-bubble, .messages-page .chat-bubble { font-size: 13px !important; padding: 7px 10px !important; } /* ========================================================= MESSAGES PAGE — FINAL FIXES (DARK MODE ICONS + INPUT SIZES) Paste at VERY END of styles.css Targets only messages page (body has: .messages-page) ========================================================= */ /* ---------- Layout slightly tighter (optional but nice) ---------- */ .messages-page .messages-layout{ width: min(1180px, 96vw); gap: 12px; } @media (min-width: 900px){ .messages-page .messages-layout{ grid-template-columns: 300px minmax(0, 1fr); } } /* ---------- Input row: make input bigger + send button smaller ---------- */ .messages-page .messages-input-row{ gap: 8px; } .messages-page .messages-input{ flex: 1 1 auto; min-width: 0; padding: 10px 14px; font-size: 0.9rem; } /* Make the icon buttons smaller and consistent */ .messages-page .messages-input-row .btn-icon{ width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* Send button = small circle (about 1/5 of what it was) */ .messages-page .messages-send-btn{ width: 34px; height: 34px; padding: 0 !important; border-radius: 999px !important; display: inline-flex; align-items: center; justify-content: center; } .messages-page .messages-send-btn i{ font-size: 14px; /* small like you asked */ } /* ---------- DARK MODE VISIBILITY FIXES ---------- */ /* Search chats input: typed text visible in dark mode */ html.theme-dark .messages-page .messages-search input{ color: #e5e7eb !important; } html.theme-dark .messages-page .messages-search input::placeholder{ color: rgba(229,231,235,.65) !important; } /* Pen icon visible in dark mode */ html.theme-dark .messages-page .messages-sidebar-header .btn-icon, html.theme-dark .messages-page #btnNewMessage{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.theme-dark .messages-page .messages-sidebar-header .btn-icon i, html.theme-dark .messages-page #btnNewMessage i{ color: #facc15 !important; /* gold */ } /* Photo + Smiley buttons visible in dark mode */ html.theme-dark .messages-page .messages-input-row .btn-icon{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.theme-dark .messages-page .messages-input-row .btn-icon i{ color: #facc15 !important; /* gold icons */ opacity: .95 !important; } /* Input field in dark mode */ html.theme-dark .messages-page .messages-input{ background: rgba(2,6,23,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #e5e7eb !important; } html.theme-dark .messages-page .messages-input::placeholder{ color: rgba(229,231,235,.55) !important; } /* Send button in dark mode (small but clear) */ html.theme-dark .messages-page .messages-send-btn{ background: linear-gradient(135deg, #facc15, #fb923c) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #111318 !important; } .chat-media { max-width: 62%; } .chat-message--me .chat-media { margin-left: auto; } .chat-media img, .chat-media video { width: 100%; max-width: 320px; border-radius: 14px; display: block; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.06); } html.theme-dark .chat-media img, html.theme-dark .chat-media video{ border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); } /* =========================== MESSAGES: Media size in chat =========================== */ .dx-msg-media{ display: block; width: 100%; max-width: 320px; max-height: 260px; border-radius: 14px; object-fit: cover; cursor: pointer; } .dx-msg-video{ background: #000; object-fit: contain; } @media (min-width: 900px){ .dx-msg-media{ max-width: 360px; max-height: 280px; } } @media (max-width: 520px){ .dx-msg-media{ max-width: 260px; max-height: 220px; } } /* RECEIVER stays normal */ .chat-message .chat-bubble { background: #ffffff; border: 1px solid #ececec; color: #111318; } /* SENDER = same bubble for text, emoji, pictures, videos */ .chat-message--me .chat-bubble { background: #fffdf8; border: 1px solid #ececec; color: #201108; } /* media inside sender bubble */ .chat-message--me .chat-bubble img, .chat-message--me .chat-bubble video { border-radius: 12px; display: block; } /* dark mode */ .theme-dark .chat-message .chat-bubble { background: #1f1f1f; border: 1px solid #2c2c2c; color: #f5f5f5; } .theme-dark .chat-message--me .chat-bubble { background: #2a241d; border: 1px solid #3a3128; color: #fff; } /* ===== MESSAGES: cleaner white sender bubbles ===== */ .chat-message--me .chat-bubble{ background: #ffffff !important; color: #1f2937 !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 10px 14px !important; border-radius: 16px !important; font-size: 0.95rem !important; line-height: 1.45 !important; } /* receiver stays as your normal style */ .chat-message:not(.chat-message--me) .chat-bubble{ border-radius: 16px !important; } /* media inside sender bubble */ .chat-message--me .chat-bubble img, .chat-message--me .chat-bubble video, .chat-message--me .dx-msg-media{ border-radius: 14px !important; display: block; } /* emoji-only messages bigger */ .chat-message .chat-bubble:has(img.emoji), .chat-message .chat-bubble:has(.dx-only-emoji), .chat-message .chat-bubble.emoji-only{ font-size: 1.2rem !important; padding: 10px 14px !important; } /* fallback if emoji is just text and gets wrapped in sender bubble */ .chat-message--me .chat-bubble{ min-height: 40px; } /* time under message a little cleaner */ .chat-time{ font-size: 0.72rem !important; opacity: 0.65 !important; } /* whole thread area */ .thread-body, #threadBody { padding: 10px 12px; } /* each message row */ .chat-message { margin-bottom: 6px; } /* sender / receiver bubble */ .chat-bubble { padding: 7px 12px; border-radius: 16px; max-width: 70%; } /* time under message */ .chat-time { margin-top: 2px; font-size: 0.72rem; } /* date separator */ .chat-date { margin: 8px 0 6px; } /* chat scroll area */ #threadBody, .thread-body { padding: 10px 6px 10px 10px; /* less right padding */ } /* each message row */ .chat-message { width: 100%; display: flex; flex-direction: column; } /* sender messages */ .chat-message--me { align-items: flex-end; } /* bubble */ .chat-bubble { max-width: 82%; /* was probably 70% */ } /* sender bubble can go even closer to edge */ .chat-message--me .chat-bubble { margin-right: 0; } /* ========================= MESSAGES FINAL UPGRADE ========================= */ .chat-reply { cursor: pointer; } .chat-reply:hover { background: rgba(0,0,0,.08); } .theme-dark .chat-reply:hover { background: rgba(255,255,255,.08); } .dx-jump-highlight .chat-bubble { box-shadow: 0 0 0 2px rgba(255,184,79,.65) !important; } #dxReactionMenu .dx-menu-btn { border: 0; background: transparent; cursor: pointer; font-size: 18px; padding: 4px 6px; border-radius: 10px; } #dxReactionMenu .dx-menu-btn:hover { background: rgba(0,0,0,.06); } .reply-preview__text { font-weight: 500; } .chat-reply__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notifications-layout { max-width: 820px; margin: 32px auto 110px; padding: 0 16px; } .notifications-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .notification-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 18px; background: #fff; margin-bottom: 14px; cursor: pointer; transition: 0.2s ease; } .notification-card:hover { transform: translateY(-1px); } .notification-card--unread { border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); } .notification-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.06); font-size: 16px; } .notification-content { flex: 1; min-width: 0; } .notification-content p { margin: 0 0 6px; line-height: 1.45; } .notification-meta { font-size: 13px; opacity: 0.7; } .notification-empty { padding: 26px 18px; border: 1px dashed rgba(0, 0, 0, 0.12); border-radius: 18px; background: #fff; } @media (max-width: 768px) { .notifications-header { flex-direction: column; align-items: flex-start; } .notification-card { padding: 14px; border-radius: 16px; } } /* ========== ARTWORK DETAIL (responsive) ========== */ .artwork-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(18px, 3vw, 32px); align-items: start; } .artwork-media, .artwork-info { min-width: 0; } .artwork-image-wrapper { border-radius: 20px; overflow: hidden; border: 1px solid var(--border-soft); background: rgba(0, 0, 0, 0.04); } .theme-dark .artwork-image-wrapper { background: rgba(255, 255, 255, 0.04); border-color: var(--border-soft); } .artwork-image-placeholder { min-height: min(52vh, 420px); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 0.9rem; color: var(--text-soft); line-height: 1.45; } .artwork-tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .artwork-tag { font-size: 0.78rem; padding: 6px 12px; border-radius: 999px; background: var(--card-soft); border: 1px solid var(--border-soft); color: var(--text-soft); } .artwork-meta-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; font-size: 0.8rem; } .artwork-meta-label { font-size: 0.72rem; color: var(--text-subtle); margin-bottom: 4px; } .artwork-meta-value { color: var(--text-main); font-weight: 600; } .artwork-header h1 { margin: 0 0 8px; font-size: clamp(1.35rem, 4vw, 1.75rem); } .artwork-subtitle { margin: 0; font-size: 0.9rem; color: var(--text-soft); line-height: 1.5; } .artwork-price-row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } .artwork-price-main { font-size: 1.6rem; font-weight: 800; color: var(--text-main); } .artwork-price-note { font-size: 0.82rem; color: var(--text-soft); max-width: 280px; } .artwork-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .artwork-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); } .artwork-section h2 { margin: 0 0 10px; font-size: 1rem; } .artwork-section p, .artwork-specs { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-soft); } .artwork-specs { padding-left: 18px; } .artwork-artist-row { display: flex; gap: 14px; align-items: flex-start; } .artwork-artist-name { font-weight: 700; margin-bottom: 4px; } .artwork-artist-meta { font-size: 0.82rem; color: var(--text-soft); margin-bottom: 10px; } @media (max-width: 900px) { .artwork-layout { grid-template-columns: 1fr; } .artwork-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .artwork-meta-row { grid-template-columns: 1fr; } .artwork-price-row { flex-direction: column; align-items: flex-start; } } /* ========== MESSAGES: stack on narrow viewports ========== */ @media (max-width: 900px) { body.messages-page .messages-layout { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr); width: 100% !important; max-width: none !important; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important; gap: 12px !important; height: 100%; min-height: 0; } body.messages-page .messages-sidebar { max-height: 42vh; min-height: 160px; height: auto; } body.messages-page .messages-thread { min-height: 0; flex: 1 1 auto; } } /* ========== PROFILE / HOME: canonical reel grids (final) ========== */ #myReelsGrid, .dx-reels-grid { display: grid !important; gap: 14px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (max-width: 900px) { #myReelsGrid, .dx-reels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } } @media (max-width: 400px) { #myReelsGrid, .dx-reels-grid { gap: 10px !important; } } /* ===== FORCE FULL WIDTH ON MOBILE (FINAL FIX) ===== */ @media (max-width: 768px) { html, body { width: 100% !important; overflow-x: hidden !important; } .page-shell, .games-main, .games-wrap, .dx-container, main { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; } .topbar, .topbar-inner { width: 100% !important; max-width: 100% !important; } } /* ========================================= FINAL PHONE TOPBAR - DX + DRILONIX on first row - Games / Reels / Posts on left - icons on right - no Logout button on phone ========================================= */ @media (max-width: 600px) { .topbar { padding: env(safe-area-inset-top, 0px) 10px 8px !important; min-height: auto !important; overflow: hidden !important; } .topbar-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 0 !important; } /* row 1 */ .logo { width: 100% !important; display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; order: 1 !important; } .logo-mark { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; font-size: 0.62rem !important; } .logo-text { display: block !important; white-space: nowrap !important; font-size: 0.72rem !important; letter-spacing: 0.14em !important; } /* row 2 left */ .nav-links { width: 58% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; margin: 0 !important; order: 2 !important; } .nav-links .nav-btn { padding: 0 !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; white-space: nowrap !important; } /* row 2 right */ .topbar-right { width: 42% !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; margin-left: 0 !important; flex-wrap: nowrap !important; order: 3 !important; } .topbar-right .theme-toggle, .topbar-right .icon-btn, .topbar-right .topbar-profile-btn { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; } .topbar-right .theme-toggle i, .topbar-right .icon-btn i { font-size: 14px !important; } #logoutBtn { display: none !important; } .topbar-search, .searchbar, .search-box, .search-form, .nav-search, .header-search, .topbar input[type="search"] { display: none !important; } } /* ===== PROFILE STATS — ONE LINE SMALL (PHONE) ===== */ @media (max-width: 600px) { .profile-stats { display: flex !important; justify-content: space-between !important; gap: 6px !important; width: 100% !important; } .stat-box { flex: 1 !important; padding: 6px 4px !important; border-radius: 10px !important; } .stat-num { font-size: 13px !important; } .stat-label { font-size: 10px !important; margin-top: 2px !important; } } /* ========================================= MY PROFILE — PRO PHONE STATS - 4 stats in one clean row - smaller, tighter, premium look ========================================= */ @media (max-width: 600px) { .profile-actionsRight { gap: 10px !important; justify-items: stretch !important; width: 100% !important; } .profile-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin-top: -6px !important; } .stat-box, .stat-box-btn { min-width: 0 !important; min-height: 58px !important; padding: 8px 6px !important; border-radius: 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.10) !important; } .stat-num { font-size: 15px !important; font-weight: 950 !important; line-height: 1 !important; margin: 0 !important; } .stat-label { margin: 4px 0 0 !important; font-size: 10px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: .15px !important; opacity: .82 !important; white-space: nowrap !important; } .stat-box-btn:hover, .stat-box-btn:active { transform: none !important; } } /* ========================================= PRO STATS — CLEAN (NO HEAVY BOX LOOK) ========================================= */ @media (max-width: 600px) { .profile-stats { display: flex !important; justify-content: space-between !important; gap: 6px !important; width: 100% !important; margin-top: -4px !important; } .stat-box, .stat-box-btn { flex: 1 !important; background: transparent !important; border: none !important; padding: 6px 2px !important; border-radius: 0 !important; box-shadow: none !important; } .stat-num { font-size: 15px !important; font-weight: 950 !important; margin: 0 !important; } .stat-label { font-size: 10px !important; margin-top: 2px !important; opacity: 0.7 !important; font-weight: 700 !important; } } /* ========================================= MY PROFILE REELS — PREMIUM SMALLER VERSION ========================================= */ @media (max-width: 600px) { #myReelsGrid, .dx-reels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 8px !important; } .reel-card, .dx-reel-card { aspect-ratio: 9 / 16 !important; max-height: 155px !important; border-radius: 14px !important; overflow: hidden !important; background: #000 !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; } .reel-card video, .dx-reel-card video, .dx-reel-video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .reel-views, .dx-reel-badge { left: 8px !important; bottom: 8px !important; padding: 4px 8px !important; font-size: 10px !important; font-weight: 800 !important; border-radius: 999px !important; background: rgba(0,0,0,.55) !important; border: 1px solid rgba(255,255,255,.12) !important; backdrop-filter: blur(6px) !important; } .section-title { margin: 18px 0 10px !important; font-size: 17px !important; font-weight: 950 !important; } } /* ========================================= MY PROFILE POSTS — FLAT PREMIUM ACTIONS - no boxes - delete on same row - smaller - pinned at bottom ========================================= */ @media (max-width: 600px) { #myPostsGames .post-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 165px !important; padding: 14px 14px 12px !important; } #myPostsGames .post-body, #myPostsGames .post-content { margin-bottom: 12px !important; } #myPostsGames .post-actions { margin-top: auto !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-top: 4px !important; -webkit-overflow-scrolling: touch; } #myPostsGames .post-actions::-webkit-scrollbar { display: none !important; } /* remove all chip/button boxes */ #myPostsGames .post-actions .btn-chip, #myPostsGames .post-actions .icon-btn, #myPostsGames .post-actions button, #myPostsGames .post-actions a { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: auto !important; height: auto !important; border-radius: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; font-size: 13px !important; flex: 0 0 auto !important; color: #111318 !important; } #myPostsGames .post-actions .btn-chip i, #myPostsGames .post-actions .icon-btn i, #myPostsGames .post-actions button i, #myPostsGames .post-actions a i { font-size: 15px !important; } /* keep liked/saved premium but flat */ #myPostsGames .post-actions .btn-chip.is-liked, #myPostsGames .post-actions .btn-chip.is-liked i { color: #ef4444 !important; background: transparent !important; border: 0 !important; } #myPostsGames .post-actions .btn-chip.is-saved, #myPostsGames .post-actions .btn-chip.is-saved i { color: #0f172a !important; background: transparent !important; border: 0 !important; } /* counts without pills */ #myPostsGames .dx-chip-count, #myPostsGames .dx-count { margin-left: 1px !important; font-size: 12px !important; min-width: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; line-height: 1 !important; } /* keep delete on same row */ #myPostsGames .post-actions [data-delete-post], #myPostsGames .post-actions .delete-btn, #myPostsGames .post-actions .btn-delete { order: 10 !important; } } /* ========================================= MY PROFILE MENU — PREMIUM PHONE FINAL FIX ========================================= */ @media (max-width: 600px) { .profile-actionsRight { justify-items: end !important; } .my-profile-menu-wrap { width: auto !important; max-width: none !important; justify-content: flex-end !important; overflow: visible !important; } .my-profile-menu { position: absolute !important; top: calc(100% + 12px) !important; right: 0 !important; left: auto !important; transform: translateX(-18px) !important; /* pulls menu away from edge */ width: 238px !important; min-width: 0 !important; max-width: min(238px, calc(100vw - 44px)) !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(10,12,20,.96) !important; box-shadow: 0 22px 55px rgba(0,0,0,.34) !important; backdrop-filter: blur(14px) !important; overflow: hidden !important; } .my-profile-menu-item { padding: 12px 14px !important; gap: 10px !important; font-size: 14px !important; font-weight: 800 !important; } .my-profile-menu-item i { width: 16px !important; font-size: 15px !important; } .my-profile-menu-item:hover { background: rgba(255,255,255,.06) !important; } } /* ===== Post action icons fix for dark mode ===== */ html.theme-dark .post-actions, html.theme-dark .dx-post-actions, html.theme-dark .games-actions, html.theme-dark .post-card .post-actions, html.theme-dark .post-card .dx-post-actions, html.theme-dark .games-card .post-actions, html.theme-dark .games-card .dx-post-actions { color: rgba(255, 255, 255, 0.88); } html.theme-dark .post-actions i, html.theme-dark .dx-post-actions i, html.theme-dark .games-actions i, html.theme-dark .post-card .post-actions i, html.theme-dark .post-card .dx-post-actions i, html.theme-dark .games-card .post-actions i, html.theme-dark .games-card .dx-post-actions i, html.theme-dark .post-actions button, html.theme-dark .dx-post-actions button, html.theme-dark .games-actions button, html.theme-dark .post-actions a, html.theme-dark .dx-post-actions a, html.theme-dark .games-actions a { color: rgba(255, 255, 255, 0.88) !important; opacity: 1 !important; } html.theme-dark .post-actions button:hover, html.theme-dark .dx-post-actions button:hover, html.theme-dark .games-actions button:hover, html.theme-dark .post-actions a:hover, html.theme-dark .dx-post-actions a:hover, html.theme-dark .games-actions a:hover { color: #ffffff !important; } html.theme-dark .post-actions .count, html.theme-dark .dx-post-actions .count, html.theme-dark .games-actions .count, html.theme-dark .post-actions span, html.theme-dark .dx-post-actions span, html.theme-dark .games-actions span { color: rgba(255, 255, 255, 0.78) !important; } /* PHONE ONLY — perfectly even last row */ @media (max-width: 480px) { .topbar-bottom-row { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-top: 10px !important; padding: 0 4px !important; gap: 0 !important; } .topbar-bottom-row .mobile-nav-links, .topbar-bottom-row .mobile-topbar-right { display: flex !important; align-items: center !important; gap: 0 !important; } .topbar-bottom-row .mobile-nav-links { flex: 1 1 60% !important; justify-content: space-between !important; min-width: 0 !important; padding-right: 18px !important; } .topbar-bottom-row .mobile-topbar-right { flex: 1 1 40% !important; justify-content: space-between !important; min-width: 0 !important; padding-left: 18px !important; } .topbar-bottom-row .nav-btn { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: 1px !important; } .topbar-bottom-row .mobile-topbar-right .icon-btn { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } .topbar-bottom-row .mobile-topbar-right .icon-btn i { font-size: 20px !important; color: #d4a63a !important; } } html.theme-dark .mark-all-read, html.theme-dark .notifications-mark-read, html.theme-dark .notif-mark-read, html.theme-dark .mark-read-btn { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; } /* GLOBAL AUTH BUTTON FLASH FIX */ html:not(.page-signin):not(.page-signup) #loginBtn, html:not(.page-signin):not(.page-signup) #signupBtn, html:not(.page-signin):not(.page-signup) #logoutBtn { display: none !important; } html.page-signin .topbar .nav-links, html.page-signup .topbar .nav-links, html.page-signin .topbar .topbar-search, html.page-signup .topbar .topbar-search, html.page-signin .topbar .topbar-bottom-row, html.page-signup .topbar .topbar-bottom-row, html.page-signin .topbar .mobile-nav-links, html.page-signup .topbar .mobile-nav-links { display: none !important; } html.page-signin .auth-logo, html.page-signup .auth-logo { cursor: default; text-decoration: none; } /* ===== GLOBAL NOTIFICATION BADGE RED GLOW ===== */ .notif-badge, .top-badge { background: #e11d48 !important; color: #fff !important; border: none !important; outline: none !important; box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.18), 0 0 8px rgba(225, 29, 72, 0.45), 0 0 16px rgba(225, 29, 72, 0.28) !important; } /* FORCE REMOVE NIGHT/DAY BUTTON ON AUTH PAGES */ html.page-signin .topbar .theme-toggle, html.page-signup .topbar .theme-toggle, body.signin-page .topbar .theme-toggle, body.signup-page .topbar .theme-toggle, html.page-signin #themeToggle, html.page-signup #themeToggle, body.signin-page #themeToggle, body.signup-page #themeToggle { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }