/* ============================================================ FORZZA UI POLISH — Premium Glassmorphic 3D + Performance Loaded LAST so it overrides legacy theme rules. UI/UX only. Does NOT touch wallet, games, or /api logic. ============================================================ */ /* ---- Base: prevent horizontal overflow, GPU-smooth ---- */ html, body { background: #ffffff !important; color: #111111 !important; max-width: 100vw !important; overflow-x: hidden !important; -webkit-tap-highlight-color: transparent !important; } .fz-app { max-width: 100vw !important; overflow-x: hidden !important; } /* ---- 1. Header: solid black ---- */ .fz-topbar { height: 48px !important; background: #000000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid #000000 !important; box-shadow: none !important; position: sticky !important; top: 0 !important; z-index: 50 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; } .fz-topbar .fz-title { color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; text-shadow: 0 1px 3px rgba(0,0,0,.4) !important; } .fz-topbar .fz-menu span { background: #ffffff !important; box-shadow: 0 1px 2px rgba(0,0,0,.3) !important; } /* ---- 2. Game cards: touch feedback + GPU (home tiles stay FIXED) ---- */ .oro-card, .sp-card, .lm-event { will-change: transform; transform: translateZ(0); transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.12s ease, filter 0.12s ease !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .oro-card:active, .sp-card:active, .lm-event:active { transform: scale(0.955) translateZ(0) !important; filter: brightness(0.93) !important; } /* Home tiles: completely fixed — never move on touch */ .fz-tile { will-change: auto !important; transform: none !important; transition: none !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; touch-action: manipulation !important; user-select: none !important; -webkit-user-select: none !important; -webkit-user-drag: none !important; user-drag: none !important; } .fz-tile:active { transform: none !important; filter: none !important; } .fz-tile:hover { transform: none !important; } /* Glassmorphic game cards */ .oro-card { background: rgba(255, 255, 255, 0.66) !important; backdrop-filter: blur(12px) saturate(150%) !important; -webkit-backdrop-filter: blur(12px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(0, 60, 120, 0.14), 0 1px 0 rgba(255,255,255,.4) inset !important; } .oro-card .oro-thumb { background: #eaf2f9 !important; } /* ---- 3. Glassmorphic Drawer (side menu) ---- */ .fz-drawer { position: fixed !important; top: 0 !important; right: -280px !important; width: 280px !important; height: 100% !important; background: rgba(255, 255, 255, 0.66) !important; backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; border-left: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: -8px 0 30px rgba(0, 20, 60, 0.18) !important; color: #111 !important; z-index: 50 !important; transition: right 0.22s ease !important; } .fz-drawer.open { right: 0 !important; } .fz-drawer .drawer-head { background: rgba(0, 0, 0, 0.88) !important; color: #fff !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .fz-drawer .drawer-head button { color: #fff !important; } .fz-drawer a { color: #111 !important; border-bottom: 1px solid rgba(0,0,0,.06) !important; } /* ---- 4. Emerald balance badge (#navAccountBadge) ---- */ .fz-badge.green, #navAccountBadge { background: linear-gradient(135deg, #05c03a 0%, #008f23 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-radius: 12px !important; box-shadow: 0 0 14px rgba(5, 192, 58, 0.55), 0 2px 8px rgba(0, 143, 35, 0.45), 0 0 1px rgba(255, 255, 255, 0.7) inset !important; text-shadow: 0 1px 2px rgba(0, 60, 15, 0.4) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* ---- 5. Account balance amount (#accBalanceAmount) ---- */ #accBalanceAmount, .acc-balance-emerald { color: #00a826 !important; font-weight: bold !important; text-shadow: 0 1px 4px rgba(0, 168, 38, 0.3) !important; } /* ---- Footer: subtle glass, keeps classic dark ---- */ .fz-footer { background: linear-gradient(to bottom, rgba(51,51,51,.96) 0%, rgba(7,7,7,.97) 52%, #000000 100%) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .fz-foot { color: #ffffff !important; } .fz-foot.active { background: linear-gradient(to bottom, #555 0%, #232323 50%, #111 100%) !important; } .fz-foot-ico { filter: none !important; } /* ---- Home grid (original 3-col size, visible borders) ---- */ .fz-home-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; padding: 4px !important; background: #ffffff !important; } .fz-tile { position: relative !important; aspect-ratio: 1 / 1 !important; background: linear-gradient(180deg, #1c86ce 0%, #1374b8 55%, #0f68a8 100%) !important; border: 2px solid #0f68a8 !important; border-top: 3px solid #5aa6dd !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 6px 16px rgba(19, 116, 184, 0.28), 0 0 10px rgba(120, 190, 240, 0.25) inset !important; color: #fff !important; } .fz-tile .tile-icon { position: absolute !important; left: 50% !important; top: 45% !important; transform: translate(-50%,-50%) !important; width: 62% !important; height: 62% !important; display: grid !important; place-items: center !important; } .fz-tile .tile-icon svg { stroke: #fff !important; } .fz-tile .tile-icon svg.fill, .fz-tile .tile-icon svg.solid { fill: #fff !important; } .fz-tile .tile-label { position: absolute !important; left: 5px !important; right: 3px !important; bottom: 4px !important; color: #ffffff !important; font-weight: 400 !important; font-size: clamp(13px,3.6vw,16px) !important; line-height: 1.1 !important; text-shadow: 0 1px 1px rgba(0,0,0,.3) !important; letter-spacing: 0 !important; } /* ---- Splash: bright blue ---- */ .fz-splash { background: linear-gradient(180deg, #0d7ac7 0%, #005b96 100%) !important; } /* ---- My bets (Mes paris) footer icon: match reference, 28x28 ---- */ .fz-footer .fz-foot-ico[data-icon="mybets"], .fz-foot-ico.ico-mybets { background-image: url("data:image/svg+xml;utf8,") !important; background-size: 28px 28px !important; width: 42px !important; height: 32px !important; } /* ---- Performance: reduced motion ---- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }