/* ================================================================ APP SHELL — sidebar + topbar Shared across all logged pages of fenobicho. Tokens: --jogo-* design tokens used by shell + page CSS. ================================================================ */ /* ---- Tokens estruturais (cores em colors.css) ---- */ :root { --jogo-sidebar-w: 248px; --jogo-cupom-w: 380px; --jogo-topbar-h: 64px; --jogo-r: 16px; --jogo-r-sm: 12px; --jogo-r-xs: 8px; --jogo-font: 'Plus Jakarta Sans', system-ui, sans-serif; --jogo-mono: 'JetBrains Mono', 'Courier New', monospace; } /* ================================================================ BODY RESET — applies to any logged page using Cancels the inline.css `body { padding-top: var(--header-height) }` used by public pages with fixed header. ================================================================ */ .jogo-body { margin: 0; padding: 0; font-family: var(--jogo-font); background: var(--jogo-bg); color: var(--jogo-ink); overflow: hidden; height: 100dvh; } .jogo-body *, .jogo-body *::before, .jogo-body *::after { box-sizing: border-box; } /* ================================================================ APP SHELL ================================================================ */ .game-app { display: grid; grid-template-columns: var(--jogo-sidebar-w) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; height: 100dvh; overflow: hidden; min-width: 0; } /* ================================================================ SIDEBAR ================================================================ */ .jogo-sidebar { grid-area: sidebar; background: var(--jogo-surface); border-right: 1px solid var(--jogo-line); display: flex; flex-direction: column; overflow: hidden; height: 100dvh; position: sticky; top: 0; min-width: 0; } /* Header (logo + close button) */ .sidebar-header { display: flex; align-items: center; justify-content: center; padding: 20px 16px 12px; flex-shrink: 0; position: relative; } .sidebar-close-btn { display: none; position: absolute; top: 16px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--jogo-line); background: var(--jogo-bg); color: var(--jogo-ink-60); cursor: pointer; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .sidebar-close-btn:hover { background: var(--jogo-line); color: var(--jogo-ink); } .sidebar-close-btn .icon { width: 18px; height: 18px; } /* Logo */ .sidebar-logo { display: flex; align-items: center; justify-content: center; text-decoration: none; } .sidebar-logo__img { display: block; height: 56px; } .sidebar-logo__img img { width: auto; height: 100%; object-fit: contain; display: block; } /* Wallet card */ .sidebar-wallet { margin: 0 12px 10px; border-radius: var(--jogo-r-sm); background: radial-gradient(120% 80% at 0% 0%, rgba(27, 158, 27, 0.18) 0%, transparent 55%), linear-gradient(160deg, #0E1B14 0%, #152720 100%); padding: 14px 14px 12px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.06); } .wallet-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .wallet-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .wallet-toggle { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; flex-shrink: 0; } .wallet-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .wallet-toggle .icon { width: 14px; height: 14px; } .wallet-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; min-height: 30px; } .wallet-currency { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.65); } .wallet-value { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; transition: filter 0.18s ease, color 0.18s ease; } .wallet-value.is-hidden { filter: blur(8px); user-select: none; } .wallet-deposit-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 16px; border-radius: 100px; background: var(--jogo-primary); color: #fff; font-family: var(--jogo-font); font-size: 13px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; box-shadow: 0 4px 14px rgba(27, 158, 27, 0.28); } .wallet-deposit-btn:hover { background: var(--jogo-primary-d); } .wallet-deposit-btn:active { transform: scale(0.98); } .wallet-extract-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 6px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.55); font-family: var(--jogo-font); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.12s, color 0.12s; } .wallet-extract-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .wallet-extract-link .icon { width: 13px; height: 13px; } /* Guest */ .sidebar-guest { margin: 0 12px 8px; padding: 14px 16px; border-radius: var(--jogo-r-sm); border: 1px solid var(--jogo-line); background: var(--jogo-bg); flex-shrink: 0; } .guest-text { font-size: 12px; color: var(--jogo-ink-60); margin: 0 0 10px; line-height: 1.5; } .sidebar-register-link { display: block; text-align: center; font-size: 12px; color: var(--jogo-primary); text-decoration: none; font-weight: 600; margin-top: 8px; } /* Nav */ .sidebar-nav-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .sidebar-nav-wrap::before, .sidebar-nav-wrap::after { content: ''; position: absolute; left: 0; right: 0; height: 24px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; z-index: 1; } .sidebar-nav-wrap::before { top: 0; background: linear-gradient(to bottom, var(--jogo-surface) 0%, transparent 100%); } .sidebar-nav-wrap::after { bottom: 0; background: linear-gradient(to top, var(--jogo-surface) 0%, transparent 100%); } .sidebar-nav-wrap.has-scroll-top::before { opacity: 1; } .sidebar-nav-wrap.has-scroll-bottom::after { opacity: 1; } .sidebar-nav { padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--jogo-line) transparent; } .sidebar-nav__group-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jogo-ink-60); padding: 14px 12px 4px; margin-top: 4px; } .sidebar-nav__group-title:first-child { padding-top: 6px; margin-top: 0; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--jogo-r-xs); text-decoration: none; color: var(--jogo-ink-60); font-size: 13.5px; font-weight: 500; transition: background 0.12s, color 0.12s; position: relative; min-width: 0; } .nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; } .nav-item > span:not(.nav-badge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item--button { border: none; background: transparent; width: 100%; text-align: left; font-family: var(--jogo-font); cursor: pointer; } .nav-item:hover { background: var(--jogo-ink-10); color: var(--jogo-ink); } .nav-item--active, .nav-item[aria-current="page"] { background: var(--jogo-primary-soft); color: var(--jogo-primary); font-weight: 600; } /* Base — etiqueta neutra "soft tint": fundo translúcido + texto, sem peso de alerta */ .nav-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; padding: 3px 7px; border-radius: 6px; background: var(--jogo-ink-10); color: var(--jogo-ink-60); flex-shrink: 0; text-transform: uppercase; } /* Contador de mensagens — bolha sólida circular */ .nav-badge--count { background: var(--jogo-primary); color: #fff; font-size: 11px; letter-spacing: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; justify-content: center; } /* Destaque dourado — sinaliza o jogo principal sem competir com os alertas */ .nav-badge--gold { background: var(--color-secondary-light); color: #8A6400; } /* Novidade — tom de marca, calmo */ .nav-badge--new { background: var(--jogo-primary-soft); color: var(--jogo-primary); } /* Ao vivo — vermelho suave com ponto pulsante */ .nav-badge--live { background: rgba(224, 34, 22, 0.12); color: #CC2018; } .nav-badge--live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: nav-badge-pulse 1.6s ease-in-out infinite; } @keyframes nav-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .nav-badge--live::before { animation: none; } } /* Banco — mini-CTA da ação de dinheiro: pílula verde com glow, o destaque "clicável" do menu */ .nav-badge--bank { background: linear-gradient(135deg, var(--jogo-primary) 0%, var(--jogo-primary-d) 100%); color: #fff; padding: 3px 9px 3px 6px; box-shadow: 0 2px 8px rgba(27, 158, 27, 0.30); transition: box-shadow 0.15s, transform 0.1s; } .nav-badge--bank .nav-badge__icon { width: 11px; height: 11px; stroke-width: 2.5; } .nav-item:hover .nav-badge--bank { box-shadow: 0 3px 12px rgba(27, 158, 27, 0.45); transform: translateY(-1px); } /* Spacer + footer */ .sidebar-spacer { min-height: 8px; flex-shrink: 0; } .sidebar-footer { display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--jogo-line); flex-shrink: 0; } .sidebar-footer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jogo-primary); margin-top: 3px; flex-shrink: 0; } .sidebar-footer > div { font-size: 11px; color: var(--jogo-ink-60); line-height: 1.5; } .sidebar-footer strong { font-weight: 700; color: var(--jogo-ink); } /* ================================================================ MAIN WRAPPER ================================================================ */ .jogo-main { grid-area: main; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; } /* ================================================================ TOPBAR ================================================================ */ .jogo-topbar { grid-area: topbar; height: var(--jogo-topbar-h); background: var(--jogo-surface); border-bottom: 1px solid var(--jogo-line); display: flex; align-items: center; gap: 12px; padding: 0 24px; flex-shrink: 0; z-index: 20; } .topbar-menu-btn { display: none; width: 36px; height: 36px; border-radius: var(--jogo-r-xs); background: transparent; border: none; cursor: pointer; align-items: center; justify-content: center; color: var(--jogo-ink); flex-shrink: 0; } .topbar-menu-btn .icon { width: 20px; height: 20px; } .topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .topbar-title { font-size: 15px; font-weight: 700; color: var(--jogo-ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-next-draw { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; background: var(--jogo-primary-soft); font-size: 12px; font-weight: 600; color: var(--jogo-primary); white-space: nowrap; flex-shrink: 0; } .next-draw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jogo-primary); animation: sidebar-pulse 1.6s ease infinite; flex-shrink: 0; } @keyframes sidebar-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .topbar-action-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--jogo-bg); border: 1px solid var(--jogo-line); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--jogo-ink-60); transition: background 0.12s; flex-shrink: 0; text-decoration: none; } .topbar-action-btn:hover { background: var(--jogo-line); color: var(--jogo-ink); } .topbar-action-btn .icon { width: 17px; height: 17px; } .topbar-action-btn__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--jogo-surface); pointer-events: none; } .topbar-action-btn__badge[hidden] { display: none; } /* Topbar deposit button */ .topbar-deposit-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 100px; background: var(--jogo-primary); color: #fff; border: none; font-family: var(--jogo-font); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; flex-shrink: 0; } .topbar-deposit-btn:hover { background: var(--jogo-primary-d); } .topbar-deposit-btn .icon { width: 16px; height: 16px; } .topbar-user { position: relative; display: flex; align-items: center; } .topbar-user__trigger { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 100px; background: transparent; border: 1px solid transparent; cursor: pointer; font-family: var(--jogo-font); transition: background 0.12s, border-color 0.12s; } .topbar-user__trigger:hover, .topbar-user__trigger[aria-expanded="true"] { background: var(--jogo-bg); border-color: var(--jogo-line); } .topbar-user__chevron { width: 14px; height: 14px; color: var(--jogo-ink-60); transition: transform 0.18s ease; flex-shrink: 0; } .topbar-user__trigger[aria-expanded="true"] .topbar-user__chevron { transform: rotate(180deg); } .topbar-user__dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; padding: 6px; background: var(--jogo-surface); border: 1px solid var(--jogo-line); border-radius: var(--jogo-r-sm); box-shadow: var(--jogo-shadow-md); display: flex; flex-direction: column; gap: 2px; z-index: 50; animation: topbar-dropdown-in 0.14s ease; } .topbar-user__dropdown[hidden] { display: none; } @keyframes topbar-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: transparent; border-radius: var(--jogo-r-xs); text-decoration: none; color: var(--jogo-ink); font-family: var(--jogo-font); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: background 0.12s, color 0.12s; } .user-menu-item:hover { background: var(--jogo-ink-10); } .user-menu-item .icon { width: 16px; height: 16px; color: var(--jogo-ink-60); flex-shrink: 0; } .user-menu-item--danger { color: #ff3b30; } .user-menu-item--danger:hover { background: rgba(255, 59, 48, 0.10); } .user-menu-item--danger .icon { color: #ff3b30; } .user-menu-divider { height: 1px; background: var(--jogo-line); margin: 4px 6px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--jogo-primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-info { display: flex; flex-direction: column; } .user-name { font-size: 13px; font-weight: 600; color: var(--jogo-ink); line-height: 1.2; } .user-sub { font-size: 11px; color: var(--jogo-ink-60); } .topbar-login-btn { padding: 7px 16px; border-radius: 100px; background: var(--jogo-primary); color: #fff; font-family: var(--jogo-font); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s; } .topbar-login-btn:hover { background: var(--jogo-primary-d); } /* ================================================================ RESPONSIVE — tablet / mobile (≤ 1023px) ================================================================ */ @media (max-width: 1023px) { /* Off-canvas sidebar — always rendered, translated off-screen when closed */ .jogo-sidebar { display: flex; position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--jogo-sidebar-w)); z-index: 200; box-shadow: var(--jogo-shadow-md); transform: translateX(-100%); visibility: hidden; transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.24s; will-change: transform; } .jogo-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } /* Close button visible only inside the drawer */ .sidebar-close-btn { display: inline-flex; } /* Tighter nav spacing inside the drawer */ .sidebar-nav { padding: 4px 6px 12px; gap: 1px; } .sidebar-nav__group-title { padding: 12px 10px 4px; } .nav-item { padding: 11px 10px; font-size: 14px; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(14, 27, 20, 0.50); z-index: 199; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .sidebar-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce) { .jogo-sidebar, .sidebar-overlay { transition: none; } } /* Full-width app — sidebar becomes off-canvas (fixed) */ .game-app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "topbar" "main"; } /* Show hamburger */ .topbar-menu-btn { display: flex; } /* Topbar */ .jogo-topbar { padding: 0 12px; } .topbar-title { font-size: 14px; } .topbar-next-draw { display: none; } .user-info { display: none; } .topbar-user__chevron { display: none; } .topbar-user__trigger { padding: 4px; gap: 0; } .topbar-user__dropdown { min-width: 200px; } } /* ================================================================ RESPONSIVE — mobile (≤ 599px) ================================================================ */ @media (max-width: 599px) { .jogo-topbar { padding: 0 10px; gap: 8px; } .topbar-login-btn { padding: 7px 12px; font-size: 12px; } .topbar-deposit-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; } .topbar-deposit-btn__label { display: none; } } /* ================================================================ RESPONSIVE — very small (≤ 374px) Tighten topbar so title keeps room and action cluster stops crowding. ================================================================ */ @media (max-width: 374px) { .jogo-topbar { padding: 0 8px; gap: 6px; } .topbar-title { font-size: 13px; } .topbar-right { gap: 6px; } .topbar-action-btn, .topbar-deposit-btn { width: 32px; height: 32px; } .topbar-action-btn .icon { width: 16px; height: 16px; } .topbar-deposit-btn .icon { width: 15px; height: 15px; } .user-avatar { width: 30px; height: 30px; font-size: 12px; } } /* ================================================================ SIDEBAR — Share referral link button ================================================================ */ .sidebar-share-btn { display: flex; align-items: center; gap: 12px; margin: 0 12px 12px; padding: 12px 14px; background: linear-gradient(135deg, rgba(27, 158, 27, 0.10), rgba(245, 184, 0, 0.10)); border: 1px solid rgba(27, 158, 27, 0.22); border-radius: var(--jogo-r-sm); font-family: var(--jogo-font); cursor: pointer; text-align: left; width: auto; min-width: 0; max-width: 100%; overflow: hidden; transition: transform 0.1s ease, box-shadow 0.18s ease, background 0.18s ease; } .sidebar-share-btn:hover { background: linear-gradient(135deg, rgba(27, 158, 27, 0.16), rgba(245, 184, 0, 0.16)); box-shadow: 0 2px 10px rgba(27, 158, 27, 0.18); } .sidebar-share-btn:active { transform: scale(0.98); } .sidebar-share-btn__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--jogo-primary); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(27, 158, 27, 0.30); } .sidebar-share-btn__icon .icon { width: 18px; height: 18px; } .sidebar-share-btn__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sidebar-share-btn__title { font-size: 13px; font-weight: 700; color: var(--jogo-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-share-btn__sub { font-size: 11px; font-weight: 500; color: var(--jogo-ink-60); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-share-btn__sub strong { color: var(--jogo-primary); font-weight: 800; } /* ================================================================ MODAL — Share referral link Triggered by .sidebar-share-btn; markup in partials/modal-share-link.ejs. ================================================================ */ .share-link-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .share-link-modal[aria-hidden="false"] { display: flex; animation: share-modal-in 0.18s ease; } @keyframes share-modal-in { from { opacity: 0; } to { opacity: 1; } } .share-link-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 27, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .share-link-modal__card { position: relative; background: var(--jogo-surface); border-radius: 20px; width: 100%; max-width: 540px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 32px 28px 24px; box-shadow: 0 24px 80px rgba(14, 27, 20, 0.25); animation: share-card-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes share-card-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .share-link-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--jogo-bg); color: var(--jogo-ink-60); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .share-link-modal__close:hover { background: var(--jogo-line); color: var(--jogo-ink); } .share-link-modal__close .icon { width: 18px; height: 18px; } /* Header */ .share-link-modal__header { text-align: center; margin-bottom: 22px; } .share-link-modal__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--jogo-primary-soft); color: var(--jogo-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .share-link-modal__icon .icon { width: 28px; height: 28px; } .share-link-modal__title { font-size: 22px; font-weight: 800; color: var(--jogo-ink); margin: 0 0 6px; letter-spacing: -0.02em; } .share-link-modal__subtitle { font-size: 14px; color: var(--jogo-ink-60); margin: 0; line-height: 1.5; } /* Commission highlight */ .share-link-modal__commission { margin-bottom: 20px; } .commission-pill { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--jogo-r-sm); background: linear-gradient(135deg, var(--jogo-primary-soft) 0%, rgba(245, 184, 0, 0.16) 100%); border: 1px solid rgba(27, 158, 27, 0.30); } .commission-pill__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--jogo-primary); } .commission-pill__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .commission-pill__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jogo-ink-60); } .commission-pill__value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .commission-pill__value strong { font-family: var(--jogo-mono); font-size: 28px; font-weight: 800; color: var(--jogo-primary); letter-spacing: -0.02em; line-height: 1; } .commission-pill__hint { font-size: 13px; font-weight: 600; color: var(--jogo-ink); } /* Link block */ .share-link-modal__link-block { margin-bottom: 20px; } .share-link-modal__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jogo-ink-60); margin-bottom: 8px; } .share-link-input-wrap { display: flex; align-items: stretch; gap: 4px; border: 1.5px solid var(--jogo-line); border-radius: var(--jogo-r-sm); padding: 4px 4px 4px 14px; background: var(--jogo-bg); transition: border-color 0.15s ease; } .share-link-input-wrap:focus-within { border-color: var(--jogo-primary); } .share-link-input__icon { width: 18px; height: 18px; color: var(--jogo-ink-60); align-self: center; flex-shrink: 0; margin-right: 6px; } .share-link-input { flex: 1; min-width: 0; height: 44px; border: none; background: transparent; font-family: var(--jogo-mono); font-size: 13px; font-weight: 600; color: var(--jogo-ink); outline: none; } .share-link-copy { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 40px; margin: auto 0; border: none; border-radius: var(--jogo-r-xs); background: var(--jogo-primary); color: #FFFFFF; font-family: var(--jogo-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; } .share-link-copy:hover { background: var(--jogo-primary-d); } .share-link-copy .icon { width: 14px; height: 14px; } .share-link-copy--copied { background: var(--jogo-primary-d); } /* QR */ .share-link-modal__qr-block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; } .share-link-qr { width: 180px; height: 180px; background: #FFFFFF; border: 1px solid var(--jogo-line); border-radius: var(--jogo-r-sm); display: flex; align-items: center; justify-content: center; padding: 8px; box-shadow: var(--jogo-shadow); } .share-link-qr svg { width: 100%; height: 100%; display: block; } .share-link-qr__placeholder { color: var(--jogo-ink-30); } .share-link-qr__placeholder .icon { width: 64px; height: 64px; } .share-link-qr__spin { animation: share-qr-spin 0.8s linear infinite; } @keyframes share-qr-spin { to { transform: rotate(360deg); } } .share-link-qr__hint { font-size: 12px; color: var(--jogo-ink-60); margin: 0; } /* Share buttons */ .share-link-modal__share-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jogo-ink-60); margin-bottom: 10px; } .share-link-modal__share-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .share-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--jogo-line); border-radius: var(--jogo-r-sm); background: var(--jogo-surface); cursor: pointer; font-family: var(--jogo-font); font-size: 11px; font-weight: 600; color: var(--jogo-ink); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .share-btn:hover { transform: translateY(-2px); box-shadow: var(--jogo-shadow); border-color: var(--jogo-ink-30); } .share-btn:active { transform: translateY(0); } .share-btn__icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; flex-shrink: 0; } .share-btn__icon svg, .share-btn__icon .icon { width: 18px; height: 18px; } .share-btn--whatsapp .share-btn__icon { background: #25D366; } .share-btn--telegram .share-btn__icon { background: #2AABEE; } .share-btn--x .share-btn__icon { background: #0F1419; } .share-btn--facebook .share-btn__icon { background: #1877F2; } .share-btn--email .share-btn__icon { background: var(--jogo-ink); } .share-link-native { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 16px; border: 1px solid var(--jogo-line); border-radius: var(--jogo-r-xs); background: transparent; color: var(--jogo-ink); font-family: var(--jogo-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .share-link-native:hover { background: var(--jogo-bg); } .share-link-native .icon { width: 14px; height: 14px; } /* Modal — mobile bottom-sheet */ @media (max-width: 599px) { .share-link-modal { padding: 0; align-items: flex-end; } .share-link-modal__card { border-radius: 16px 16px 0 0; max-height: 92dvh; padding: 24px 18px 20px; width: 100%; max-width: 100%; } .share-link-modal__title { font-size: 20px; } .share-link-input { font-size: 12px; } .share-link-copy span { display: none; } .share-link-copy { padding: 0 12px; } .share-btn { padding: 10px 2px; font-size: 10px; } .share-btn__icon { width: 32px; height: 32px; } }