/* ============================================================ FRANKTALK REVAMP — chat re-skin to match franklist.info homepage Loaded LAST in base.html, so it overrides styles.css / frontend.css / color_css / theme-*.css. Pure visual layer — no markup or JS changes. Design language lifted from the homepage: teal/mint/amber dark theme · Bricolage Grotesque + Instrument Sans + JetBrains Mono · gradient panels · mint hairlines · glass bars · soft curves · subtle motion. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap'); :root{ --ft-ink:#0c1512; --ft-ink-2:#0f1c18; --ft-panel:#13241f; --ft-panel-2:#173029; --ft-line:rgba(94,234,212,.14); --ft-line-2:rgba(94,234,212,.26); --ft-teal:#15a097; --ft-mint:#5eead4; --ft-amber:#e8b04b; --ft-amber-deep:#caa24a; --ft-text:#e9fff8; --ft-muted:#8aa79d; --ft-danger:#f0857a; --ft-grad-panel:linear-gradient(180deg,var(--ft-panel),var(--ft-ink-2)); --ft-glass:rgba(12,21,18,.82); --ft-radius:16px; --ft-radius-sm:11px; --ft-shadow:0 18px 48px -16px rgba(0,0,0,.7); --ft-ease:cubic-bezier(.22,.61,.36,1); } /* ---------- base surfaces ---------- */ html, body{ background:var(--ft-ink) !important; color:var(--ft-text) !important; font-family:'Instrument Sans',system-ui,-apple-system,sans-serif !important; -webkit-font-smoothing:antialiased; } /* a faint top-left glow on the whole chat, like the homepage hero */ #wrapper{ position:relative; } #wrapper::before{ content:""; position:fixed; inset:0; background:radial-gradient(1100px 420px at 16% -8%,rgba(21,160,151,.16),transparent 60%); pointer-events:none; z-index:0; } /* lift normal wrapper content above the background glow — but NOT modals: Bootstrap modals are direct children of #wrapper, and forcing them to position:relative/z-index:1 dropped them under the modal-backdrop (which is appended to ), freezing the whole page. Leave modals to Bootstrap. */ #wrapper > *:not(.modal):not(.modal-backdrop){ position:relative; z-index:1; } .modal{ z-index:1050 !important; } .modal-backdrop{ z-index:1040 !important; } /* ---------- columns ---------- */ .chat-list-col, .chat-list-col[class]{ background:var(--ft-grad-panel) !important; border-right:1px solid var(--ft-line) !important; } .chat-messages-col, .chat-messages-col[class]{ background:var(--ft-ink) !important; background-image:radial-gradient(900px 360px at 80% 120%,rgba(21,160,151,.07),transparent 60%) !important; } .selected-chat-col, .selected-chat, .selected-chat-col[class], .selected-chat[class]{ background:var(--ft-grad-panel) !important; border-left:1px solid var(--ft-line) !important; } /* ---------- top bars (glassy) ---------- */ nav.navbar.topbar, nav.navbar.navbar-expand.navbar-light.topbar.static-top.lite-shadow, nav.navbar.navbar-expand.navbar-light.topbar.static-top.medium-shadow, .chat-nav, .navbar-profile{ background:var(--ft-glass) !important; background-image:none !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--ft-line) !important; box-shadow:none !important; } .chat-title{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--ft-text) !important; } .chat-slug, .new-date{ color:var(--ft-muted) !important; } /* ---------- sidebar nav pills ---------- */ ul.nav.nav-pills.nav-justified.nav-sidebar, ul.nav.nav-pills.nav-justified.nav-sidebar.nav-ol{ background:transparent !important; padding:10px 10px 4px !important; gap:6px; } .nav-sidebar .nav-link, .chat-list-col .nav-link{ color:var(--ft-muted) !important; border-radius:11px !important; border:1px solid transparent !important; transition:background .18s var(--ft-ease),color .18s,border-color .18s; } .nav-sidebar .nav-link:hover{ color:var(--ft-text) !important; background:var(--ft-panel-2) !important; } .nav-sidebar .nav-link.active, .chat-list-col .nav-link.active{ color:var(--ft-ink) !important; background:var(--ft-mint) !important; border-color:var(--ft-mint) !important; font-weight:600 !important; } .nav-sidebar .nav-link.active i{ color:var(--ft-ink) !important; } /* ---------- search inputs ---------- */ .nav-search .form-control, .room-user-search, #search-query, .room-sel-search, #search_chatroom{ background:var(--ft-ink) !important; border:1px solid var(--ft-line-2) !important; color:var(--ft-text) !important; border-radius:11px !important; } .nav-search .form-control:focus, .room-user-search:focus, #search-query:focus{ border-color:var(--ft-mint) !important; box-shadow:0 0 0 3px rgba(94,234,212,.15) !important; } /* search buttons — must outrank frontend.css `.nav-search button{border-radius:0!important}` (a class+element selector), so use two-class selectors here. */ .btn.btn-room-user-search, .btn.search-init, .btn.room-sel-search-btn, .nav-search button.btn-room-user-search{ background:var(--ft-panel-2) !important; border:1px solid var(--ft-line-2) !important; color:var(--ft-mint) !important; border-radius:11px !important; margin-left:6px; } .btn.btn-room-user-search:hover, .btn.search-init:hover{ border-color:var(--ft-mint) !important; } /* ---------- online / recent rows ---------- */ .recent-chat, li.recent-chat{ border-radius:12px !important; transition:background .16s var(--ft-ease),transform .16s var(--ft-ease); } .recent-chat:hover, li.recent-chat:hover{ background:var(--ft-panel-2) !important; border:1px solid var(--ft-line) !important; transform:translateX(2px); } .chat-name{ color:var(--ft-text) !important; font-weight:600 !important; } .chat-preview{ color:var(--ft-muted) !important; } /* ================= MESSAGE BUBBLES ================= */ .messages ul li .message-data{ max-width:min(74%,560px) !important; border-radius:18px !important; line-height:1.45 !important; } .chat-txt, .chat-code{ border-radius:18px !important; padding:9px 14px !important; font-size:.94rem; } .message-html, .chat-img, .chat-txt, .chat-gif, .chat-sticker{ border-radius:18px; } .chat-img img, .chat-gif img{ border-radius:14px !important; } /* received bubbles — panel gradient + mint hairline, soft tail */ .replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .message-data small, .replies .chat-fwd, .replies .link-meta, .replies .file-section, .replies .video-section{ background:linear-gradient(180deg,var(--ft-panel-2),var(--ft-panel)) !important; border:1px solid var(--ft-line) !important; color:var(--ft-text) !important; } .replies .chat-txt{ border-bottom-left-radius:6px !important; } .messages ul li.replies .message-data, .replies .video-link, .replies .link-meta{ color:var(--ft-text) !important; } /* sent bubbles — teal-tinted */ .sent .chat-img-sgl, .sent .chat-img-duo, .sent .chat-img-grp, .sent .chat-gif, .sent .chat-txt, .sent .chat-code, .chat-fwd, .sent .link-meta, .sent .file-section, .sent .video-section{ background:linear-gradient(180deg,#1a4a44,#123c37) !important; border:1px solid var(--ft-line-2) !important; color:#eafff8 !important; } .sent .chat-txt{ border-bottom-right-radius:6px !important; } .messages ul li.sent .message-data, .sent .video-link, .sent .link-meta{ color:#eafff8 !important; } /* bubble tails removed — no pointed triangle at the corner of messages */ .replies .message-data:after, .sent .message-data:before, .rtl .replies .message-data:after, .rtl .sent .message-data:before{ display:none !important; content:none !important; border:0 !important; } /* sender name — plain text above the bubble (no filled bar = not Discord) */ .replies .message-data small{ background:transparent !important; border:none !important; border-radius:0 !important; } .messages ul li.replies .message-data small{ color:var(--ft-mint) !important; font-family:'JetBrains Mono',monospace !important; font-weight:700 !important; font-size:.72rem !important; letter-spacing:.02em; padding:0 4px 5px !important; } /* avatars — slightly larger with a ring */ .messages ul li .avatar{ width:36px !important; height:36px !important; border-radius:50% !important; border:1.5px solid var(--ft-line-2) !important; box-shadow:0 2px 8px rgba(0,0,0,.35); } /* time / status */ .message-time{ color:var(--ft-muted) !important; font-family:'JetBrains Mono',monospace; font-size:.68rem; } /* read receipts: clearly dim when unread, bright mint once seen (obvious grey→mint jump) */ .message-status{ color:var(--ft-muted) !important; font-size:11px !important; transition:color .2s ease; opacity:.7; } .message-status i{ color:inherit !important; } .message-status.read{ color:var(--ft-mint) !important; opacity:1; } .message-status.read i{ color:var(--ft-mint) !important; } /* date divider → centered pill with hairlines */ .new-date{ text-align:center; margin:18px 0 !important; position:relative; } .new-date p{ display:inline-block; background:var(--ft-panel) !important; border:1px solid var(--ft-line) !important; color:var(--ft-muted) !important; font-family:'JetBrains Mono',monospace !important; font-size:.7rem !important; letter-spacing:.04em; padding:4px 14px !important; border-radius:999px !important; } /* deleted message */ .chat-txt.deleted{ background:transparent !important; border:1px dashed var(--ft-line-2) !important; color:var(--ft-muted) !important; font-style:italic; } /* new-message entrance animation */ @keyframes ftMsgIn{ from{opacity:0; transform:translateY(8px) scale(.99);} to{opacity:1; transform:none;} } .messages ul li.cht{ animation:ftMsgIn .26s var(--ft-ease) both; } /* ---------- chat actions / reactions ---------- */ /* three-dot message menu must always stack above other messages. Each is position:relative with no z-index, so its absolutely- positioned dropdown got painted under later messages. Lift the owning message while its menu is open (JS adds .ft-menu-open; :has() is the pure-CSS fallback for modern browsers). */ .chat-actions .dropdown-menu{ z-index:1100 !important; } .messages ul li.cht.ft-menu-open, .messages ul li.cht:has(.dropdown-menu.show){ z-index:1000 !important; } .messages ul li.cht.ft-menu-open .chat-actions, .messages ul li.cht:has(.dropdown-menu.show) .chat-actions{ opacity:1 !important; } .chat-actions i, .reaction-btn i{ color:var(--ft-muted) !important; transition:color .15s,transform .15s; } .chat-actions i:hover, .reaction-btn:hover i{ color:var(--ft-mint) !important; transform:scale(1.12); } .reaction-box{ background:var(--ft-grad-panel) !important; border:1px solid var(--ft-line-2) !important; border-radius:999px !important; box-shadow:var(--ft-shadow) !important; } .current-chat-reactions .filter-reaction{ background:var(--ft-panel-2) !important; border:1px solid var(--ft-line) !important; border-radius:999px !important; } /* ================= INPUT BAR ================= */ .input-message-write{ background:var(--ft-glass) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--ft-line) !important; border-left:none !important; border-right:none !important; padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 6px) !important; /* lift off the bottom edge / home indicator */ } .chat-box{ background:var(--ft-ink) !important; border:1px solid var(--ft-line-2) !important; border-radius:16px !important; box-shadow:none !important; transition:border-color .18s; /* no overflow:hidden — it was clipping the emoji picker popup */ } .chat-box:focus-within{ border-color:var(--ft-mint) !important; box-shadow:none !important; /* no glow halo */ } .chat-box textarea.form-control, #message_content, .emojionearea-editor, .emojionearea.form-control, .emojionearea>.emojionearea-editor{ background:transparent !important; border:none !important; color:var(--ft-text) !important; } /* kill any glow/shadow on the emoji inner container (the box that spans the text field to the emoji button) — including the focused state */ .emojionearea.form-control, .emojionearea.form-control:focus, .emojionearea-editor:focus, .emojionearea>.emojionearea-editor:focus{ box-shadow:none !important; } .emojionearea .emojionearea-editor:empty:before{ color:var(--ft-muted) !important; } .btn-send{ background:var(--ft-teal) !important; color:#04130f !important; border:none !important; border-radius:11px !important; /* rounded square, not a circle */ width:auto !important; min-width:48px !important; flex:0 0 auto !important; height:auto !important; align-self:stretch !important; /* fill the input height, within the box lines */ padding:0 14px !important; margin:4px 4px 4px 8px !important; /* snug to the right edge, tiny inset so the box border shows */ display:inline-flex !important; align-items:center; justify-content:center; font-size:1.05rem !important; transition:background .18s var(--ft-ease),transform .12s var(--ft-ease); } .btn-send:hover{ background:var(--ft-mint) !important; } .btn-send:active{ transform:scale(.97); } .btn-send .clickable{ display:inline-flex; align-items:center; justify-content:center; } /* keep the input region (and its popped-up emoji picker) above the message list */ .input-message-write{ position:relative; z-index:30; } /* emoji picker — skin to franklist on ANY theme + ensure it isn't clipped/buried */ .emojionearea .emojionearea-picker{ background:var(--ft-ink-2) !important; border:1px solid var(--ft-line-2) !important; border-radius:14px !important; box-shadow:var(--ft-shadow) !important; z-index:200 !important; } .emojionearea .emojionearea-picker .emojionearea-filters{ background:var(--ft-panel) !important; } .emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{ background:var(--ft-panel-2) !important; } .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title{ color:var(--ft-muted) !important; background:var(--ft-ink-2) !important; } .emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{ filter:invert(90%); } /* the smiley toggle button */ .emojionearea .emojionearea-button>div{ opacity:.8; } .emojionearea .emojionearea-button:hover>div{ opacity:1; } .btn-send .clickable{ display:inline-flex; align-items:center; justify-content:center; } /* attach / emoji / gif tray buttons */ .act-more-btn, .act-btn, .message-audio, .btn-msg{ border-radius:50% !important; transition:transform .15s var(--ft-ease),background .15s; } .act-more-btn{ background:var(--ft-panel-2) !important; color:var(--ft-mint) !important; border:1px solid var(--ft-line-2) !important; } .act-more-btn:hover, .act-btn:hover{ transform:scale(1.08); } .act-icon img{ filter:saturate(.6) brightness(1.05); } /* reply preview row */ .reply-msg-row .replied-to, .replied-content{ background:var(--ft-panel) !important; border-radius:12px !important; } .replied-border{ background:var(--ft-mint) !important; } .replied-user{ color:var(--ft-mint) !important; } /* ---------- right panel: section headers / vendor list ---------- */ /* extend the side panel to the very top: the fixed center chat-nav only covers the message column (75% width), never this panel, so its 60px clearance gap was just dead space at the top of the side panel. */ /* extend the side panel to fill top AND bottom. The fixed center chat-nav only covers the message column, never this panel, so the panel needs no top/bottom clearance — make it full viewport height (scoped to the side panel only, so the message column's height-fix is untouched). */ .selected-chat-col .panel-content-right{ margin-top:0 !important; height:100vh !important; height:calc(var(--vh,1vh) * 100) !important; height:100dvh !important; } .selected-chat-col .selected-chat.height-fix{ height:100vh !important; height:calc(var(--vh,1vh) * 100) !important; height:100dvh !important; } /* read-aloud removed: hide any leftover speaker button from cached messages */ .overlay-button{ display:none !important; } /* mobile side-panel close button — hidden on desktop, shown when the panel is open as an overlay on mobile (≤768px). */ .ft-panel-close{ display:none; position:absolute; top:12px; right:12px; z-index:60; width:40px; height:40px; padding:0; border-radius:50%; background:var(--ft-glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--ft-line-2); color:var(--ft-text); font-size:1rem; line-height:1; cursor:pointer; box-shadow:var(--ft-shadow); transition:background .15s var(--ft-ease),color .15s,transform .15s var(--ft-ease); } .ft-panel-close:hover{ background:var(--ft-panel-2); color:var(--ft-danger); transform:scale(1.06); } .ft-panel-close:active{ transform:scale(.96); } @media screen and (max-width:768px){ .selected-chat-col .ft-panel-close{ display:flex; align-items:center; justify-content:center; } } .chat-data-header{ background:var(--ft-glass) !important; border:1px solid var(--ft-line) !important; border-radius:12px !important; margin:8px 10px !important; color:var(--ft-text) !important; transition:border-color .18s,background .18s; } .chat-data-header:hover{ border-color:var(--ft-line-2) !important; } .chat-data-header h6{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--ft-text) !important; margin:0 !important; } .chat-data-header .fa-angle-down{ color:var(--ft-mint) !important; } .selected-chat-name, .active-group-users, .selected-chat-profile{ color:var(--ft-text) !important; } /* recent media/links pills */ .nav-recent .nav-link, .nav-recent-max .nav-link{ color:var(--ft-muted) !important; border-radius:10px !important; } .nav-recent .nav-link.active, .nav-recent-max .nav-link.active{ color:var(--ft-ink) !important; background:var(--ft-mint) !important; font-weight:600 !important; } /* ---------- bottom user dropdown / status ---------- */ .bottom-login-section{ border-top:1px solid var(--ft-line) !important; } .bottom-username{ color:var(--ft-text) !important; font-weight:600; } .user-avatar .img-profile{ border:1.5px solid var(--ft-line-2); } .online-status.online i, .change-status .online{ color:var(--ft-mint) !important; } /* ================= BUTTONS (bootstrap remaps) ================= */ .btn-primary, .btn-success{ background:var(--ft-teal) !important; border:none !important; color:#04130f !important; border-radius:10px !important; font-weight:600 !important; transition:background .18s var(--ft-ease),transform .15s; } .btn-primary:hover, .btn-success:hover{ background:var(--ft-mint) !important; transform:translateY(-1px); } .btn-secondary{ background:var(--ft-panel-2) !important; border:1px solid var(--ft-line-2) !important; color:var(--ft-text) !important; border-radius:10px !important; } .btn-secondary:hover{ border-color:var(--ft-mint) !important; color:var(--ft-mint) !important; } .btn-danger{ background:var(--ft-danger) !important; border:none !important; color:#1a0a08 !important; border-radius:10px !important; } .btn-circle{ border-radius:50% !important; } .chat-list-toggle.btn-success{ background:var(--ft-teal) !important; } /* the custom "LIST +/-" weed button */ #weed-button{ background:var(--ft-amber) !important; color:#1a1205 !important; border-radius:999px !important; font-weight:700 !important; transition:transform .15s var(--ft-ease),filter .15s; } #weed-button:hover{ transform:translateY(-1px); filter:brightness(1.05); } /* bot command center select + button */ #commands{ background:var(--ft-ink) !important; color:var(--ft-text) !important; border:1px solid var(--ft-line-2) !important; border-radius:10px !important; padding:8px 10px !important; } #commands + button, .vendor-info1 + #commands + button{ background:var(--ft-teal) !important; color:#04130f !important; border:none !important; border-radius:10px !important; font-weight:600; } /* ---------- dropdown menus ---------- */ .dropdown-menu, .dropdown-menu.show, .scrollable-menu{ background:var(--ft-ink-2) !important; border:1px solid var(--ft-line-2) !important; border-radius:14px !important; box-shadow:var(--ft-shadow) !important; padding:6px !important; animation:ftPop .16s var(--ft-ease); } @keyframes ftPop{ from{opacity:0; transform:translateY(-6px) scale(.985);} to{opacity:1; transform:none;} } .dropdown-item, .scrollable-menu a{ color:var(--ft-text) !important; border-radius:9px !important; } .dropdown-item:hover, .dropdown-item:focus, .scrollable-menu a:hover{ background:var(--ft-panel-2) !important; color:var(--ft-mint) !important; } .dropdown-item i{ color:var(--ft-muted) !important; } .dropdown-item:hover i{ color:var(--ft-mint) !important; } .dropdown-divider{ border-top:1px solid var(--ft-line) !important; } /* ================= MODALS ================= */ .modal-content{ background:var(--ft-grad-panel) !important; border:1px solid var(--ft-line-2) !important; border-radius:18px !important; color:var(--ft-text) !important; box-shadow:var(--ft-shadow) !important; overflow:hidden; } .modal-header, .modal-footer{ border-color:var(--ft-line) !important; } .modal-title{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; color:var(--ft-text) !important; } .modal .close{ color:var(--ft-muted) !important; text-shadow:none !important; opacity:1; transition:color .15s; } .modal .close:hover{ color:var(--ft-danger) !important; } .modal-backdrop.show{ background:rgba(6,11,9,.78) !important; } /* generic form controls inside chat/modals */ .form-control{ background:var(--ft-ink) !important; border:1px solid var(--ft-line-2) !important; color:var(--ft-text) !important; border-radius:10px !important; } .form-control:focus{ border-color:var(--ft-mint) !important; box-shadow:0 0 0 3px rgba(94,234,212,.14) !important; color:#fff !important; } .input-group-text{ background:var(--ft-panel-2) !important; border:1px solid var(--ft-line-2) !important; color:var(--ft-muted) !important; } /* links */ a{ color:var(--ft-mint); } a:hover{ color:var(--ft-text); } /* ---------- notices / alerts ---------- */ .chat-notice.alert, .cookiealert{ border-radius:14px !important; border:1px solid var(--ft-line-2) !important; background:var(--ft-grad-panel) !important; color:var(--ft-text) !important; } /* ---------- gif / sticker trays ---------- */ .gif-content, .sticker-content{ background:var(--ft-grad-panel) !important; border-top:1px solid var(--ft-line-2) !important; border-radius:16px 16px 0 0 !important; } .sticker-tab-content .tab-pane{ background:var(--ft-ink-2) !important; border-radius:12px; } .sticker-nav .nav-link.active{ background:var(--ft-mint) !important; color:var(--ft-ink) !important; } /* ---------- scrollbars ---------- */ *{ scrollbar-width:thin; scrollbar-color:var(--ft-line-2) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--ft-line-2); border-radius:8px; border:3px solid var(--ft-ink); } ::-webkit-scrollbar-thumb:hover{ background:var(--ft-teal); } /* ---------- context menu (right-click search) ---------- */ #custom-context-menu, #custom-context-menu .sub-menu{ background:var(--ft-ink-2) !important; border:1px solid var(--ft-line-2) !important; border-radius:12px !important; box-shadow:var(--ft-shadow) !important; color:var(--ft-text) !important; overflow:hidden; } #custom-context-menu .menu-item, #custom-context-menu .sub-menu-item{ border-radius:8px; transition:background .14s; } #custom-context-menu .menu-item:hover, #custom-context-menu .sub-menu-item:hover{ background:var(--ft-panel-2) !important; color:var(--ft-mint) !important; } #custom-context-menu .line{ border-color:var(--ft-line) !important; } /* ---------- misc text colors ---------- */ .text-gray-400, .text-white-50{ color:var(--ft-muted) !important; } label{ color:var(--ft-muted) !important; } .card, .card-header{ background:var(--ft-grad-panel) !important; border:1px solid var(--ft-line) !important; color:var(--ft-text) !important; } .card-header h6{ color:var(--ft-text) !important; } /* theme toggle / lang buttons */ .btn-thm, .btn-lang{ color:var(--ft-muted) !important; background:transparent !important; } .btn-thm:hover, .btn-lang:hover{ color:var(--ft-mint) !important; } /* badges */ .badge-danger, .badge-counter{ background:var(--ft-danger) !important; color:#1a0a08 !important; } /* reduce motion */ @media (prefers-reduced-motion:reduce){ .messages ul li.cht, .dropdown-menu, .scrollable-menu{ animation:none !important; } *{ transition:none !important; } } /* ============ 4:20 mode (automatic) ============ */ .ft420{ position:fixed; inset:0; z-index:2147482000; pointer-events:none; overflow:hidden; opacity:1; transition:opacity 1.1s ease; } .ft420.ft420-out{ opacity:0; } .ft420-haze{ position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 100%, rgba(21,160,151,.28), transparent 70%), radial-gradient(40% 40% at 20% 90%, rgba(94,234,212,.18), transparent 70%); animation:ft420haze 7s ease both; } @keyframes ft420haze{ 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:0} } .ft420-banner{ position:absolute; left:50%; top:16%; transform:translateX(-50%); font-family:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-weight:800; font-size:clamp(1.6rem,5vw,3rem); letter-spacing:-.02em; color:#eafff8; text-shadow:0 2px 24px rgba(21,160,151,.7),0 0 2px rgba(0,0,0,.5); white-space:nowrap; animation:ft420banner 7s cubic-bezier(.22,.61,.36,1) both; } @keyframes ft420banner{ 0%{opacity:0; transform:translateX(-50%) translateY(14px) scale(.9)} 12%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)} 82%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)} 100%{opacity:0; transform:translateX(-50%) translateY(-10px) scale(1.04)} } .ft420-smoke{ position:absolute; bottom:-60px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle, rgba(120,160,150,.5), rgba(120,160,150,.18) 45%, transparent 70%); filter:blur(6px); animation:ft420rise 6.5s ease-in forwards; } @keyframes ft420rise{ 0%{opacity:0; transform:translateY(0) scale(.5)} 15%{opacity:.65} 100%{opacity:0; transform:translateY(-105vh) scale(2.2)} } .ft420-smoke.s0{ left:6%; animation-delay:0s } .ft420-smoke.s1{ left:18%; animation-delay:.7s; width:70px;height:70px } .ft420-smoke.s2{ left:30%; animation-delay:.3s } .ft420-smoke.s3{ left:44%; animation-delay:1.1s; width:110px;height:110px } .ft420-smoke.s4{ left:57%; animation-delay:.2s } .ft420-smoke.s5{ left:69%; animation-delay:.9s; width:80px;height:80px } .ft420-smoke.s6{ left:82%; animation-delay:.5s; width:120px;height:120px } .ft420-smoke.s7{ left:92%; animation-delay:1.3s } /* ============ roached delete — smoke dissolve ============ */ @keyframes ftRoach{ 0%{opacity:0; filter:blur(7px); transform:translateY(4px) scale(.97)} 55%{opacity:.9; filter:blur(1.5px)} 100%{opacity:1; filter:blur(0); transform:none} } .chat-txt.deleted{ animation:ftRoach .6s ease both; position:relative; } .chat-txt.deleted::after{ content:""; position:absolute; right:16px; top:-4px; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle, rgba(190,190,185,.55), transparent 70%); pointer-events:none; filter:blur(1px); animation:ftRoachSmoke .95s ease-out both; } @keyframes ftRoachSmoke{ 0%{opacity:0; transform:translateY(0) scale(.4)} 30%{opacity:.75} 100%{opacity:0; transform:translateY(-26px) translateX(6px) scale(1.7)} } @media (prefers-reduced-motion:reduce){ .ft420-haze,.ft420-banner,.ft420-smoke,.chat-txt.deleted,.chat-txt.deleted::after{ animation:none !important; } } /* ============ roached message — mod/admin reveal + undelete tools ============ */ .roach-tools{ display:flex; gap:14px; margin-top:5px; padding-left:2px; align-items:center; } .roach-tools a{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ft-muted); text-decoration:none; opacity:.85; transition:color .15s,opacity .15s; cursor:pointer; } .roach-tools a i{ margin-right:4px; } .roach-tools .roach-reveal:hover{ color:var(--ft-mint); opacity:1; } .roach-tools .roach-undelete:hover{ color:var(--ft-amber); opacity:1; } .roach-original{ margin-top:3px; } /* ============ Vendor @mention (links to franklist brand page) ============ */ .vendor-mention{ color: var(--ft-amber, #e8b04b); font-weight: 600; text-decoration: none; background: rgba(232,176,75,.10); border: 1px solid rgba(232,176,75,.30); border-radius: 7px; padding: 0 5px; white-space: nowrap; transition: background .15s var(--ft-ease, ease), border-color .15s var(--ft-ease, ease); } .vendor-mention:hover, .vendor-mention:focus{ color: var(--ft-amber, #e8b04b); background: rgba(232,176,75,.20); border-color: rgba(232,176,75,.5); text-decoration: none; } /* Brand entries inside the shared @mention dropdown (users + brands unified) */ .textcomplete-dropdown .tc-brand{ color: var(--ft-amber,#e8b04b); font-weight:600; } .textcomplete-dropdown .tc-brand-at{ color: var(--ft-amber,#e8b04b); font-weight:700; } .textcomplete-dropdown .tc-brand-alias{ color: var(--ft-muted,#8aa79d); font-size:12px; font-family:'JetBrains Mono',ui-monospace,monospace; } /* Side panel cleanup: drop room name under the logo, tighten the action row to the image, and pull the (now non-collapsible) vendor section up */ .selected-chat-info .selected-chat-name{ display:none !important; } .selected-chat-info{ margin-bottom:0 !important; padding-bottom:0 !important; } .selected-chat-info .active-group-cover{ margin-bottom:0 !important; } .selected-chat-actions{ margin-top:8px !important; } #list.ft-vendor-list{ display:block !important; height:auto !important; margin-top:4px; } #list.ft-vendor-list > p{ margin-top:6px; } /* Profile dropup (bottom-left bar): its menu overflows over the chat room and was painted under it (both columns are #wrapper children pinned to z-index:1). Lift the column while the menu is open. JS toggles .ft-profile-open; :has() is a no-JS fallback. */ #wrapper > .chat-list-col.ft-profile-open{ z-index:1205 !important; } #wrapper > .chat-list-col:has(.bottom-login-section .dropdown-menu.show){ z-index:1205 !important; } .bottom-login-section .dropup .dropdown-menu{ z-index:1210 !important; } /* Name badges on posts: reuse admin/mod chips + a user-settable custom badge (max 12 chars) */ /* keep the name + badges on ONE line: the sender is display:block by default, which was pushing the chip onto the next row */ .messages ul li.replies .message-data small.sender-name{ display:inline-block !important; width:auto !important; } .message-data .user-type-badge{ display:inline-block; vertical-align:middle; } .sender-name + .user-type-badge, .user-type-badge + .user-type-badge{ margin-left:4px; } .user-type-badge.user-badge-custom{ background:var(--ft-teal,#15a097) !important; color:#fff !important; text-transform:none; letter-spacing:.02em; max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; } /* unified "DM's" directory: sort (online/recent) + favourite/unread filter chips */ .dm-controls{ display:flex; align-items:center; gap:6px; padding:6px 12px 2px; flex-wrap:wrap; } .dm-controls .dm-ctrl-spacer{ flex:1 1 auto; } .dm-controls button{ background:transparent; border:1px solid var(--ft-line,rgba(94,234,212,.14)); color:var(--ft-muted,#8aa79d); border-radius:999px; padding:3px 10px; font-size:.7rem; font-family:'JetBrains Mono',ui-monospace,monospace; cursor:pointer; line-height:1.4; transition:background .15s var(--ft-ease,ease),color .15s,border-color .15s; } .dm-controls button:hover{ color:var(--ft-text,#e9fff8); border-color:var(--ft-line-2,rgba(94,234,212,.26)); } .dm-controls .dm-sort.active{ background:var(--ft-teal,#15a097); color:#fff; border-color:transparent; } .dm-controls .dm-filter{ width:32px; padding:3px 0; text-align:center; } .dm-controls .dm-filter.active{ background:var(--ft-mint,#5eead4); color:var(--ft-ink,#0c1512); border-color:transparent; } /* total-unread count now lives on the unread filter chip */ .dm-controls .dm-filter[data-filter="unread"]{ width:auto; padding:3px 9px; } .dm-controls .dm-filter .dm-all-unread{ margin-left:5px; font-size:.62rem; font-weight:700; padding:1px 5px; border-radius:999px; background:var(--ft-danger,#f0857a); color:#2a0d0a; line-height:1; vertical-align:middle; display:inline-block; } .dm-controls .dm-filter.active .dm-all-unread{ background:var(--ft-ink,#0c1512); color:var(--ft-mint,#5eead4); } /* === DM directory controls: bulletproof styling + mobile visibility (overrides UA/bootstrap) === */ .chat-list-col .dm-controls{ display:flex; align-items:center; gap:6px; padding:6px 12px 2px; flex-wrap:wrap; } .chat-list-col .dm-controls .dm-ctrl-spacer{ flex:1 1 auto; } .chat-list-col .dm-controls > button{ -webkit-appearance:none !important; appearance:none !important; background:transparent !important; border:1px solid var(--ft-line-2,rgba(94,234,212,.26)) !important; color:var(--ft-muted,#8aa79d) !important; border-radius:999px !important; padding:3px 10px !important; font-size:.7rem !important; font-family:'JetBrains Mono',ui-monospace,monospace !important; line-height:1.4 !important; box-shadow:none !important; min-width:0 !important; min-height:0 !important; height:auto !important; cursor:pointer; white-space:nowrap; } .chat-list-col .dm-controls > button:hover{ color:var(--ft-text,#e9fff8) !important; } .chat-list-col .dm-controls .dm-sort.active{ background:var(--ft-teal,#15a097) !important; color:#fff !important; border-color:transparent !important; } .chat-list-col .dm-controls .dm-filter{ width:34px !important; padding:3px 0 !important; text-align:center !important; } .chat-list-col .dm-controls .dm-filter[data-filter="unread"]{ width:auto !important; padding:3px 9px !important; } .chat-list-col .dm-controls .dm-filter.active{ background:var(--ft-mint,#5eead4) !important; color:var(--ft-ink,#0c1512) !important; border-color:transparent !important; } .chat-list-col .dm-controls .dm-filter .dm-all-unread{ margin-left:5px; font-size:.62rem; font-weight:700; padding:1px 5px; border-radius:999px; background:var(--ft-danger,#f0857a); color:#2a0d0a; line-height:1; display:inline-block; vertical-align:middle; } .chat-list-col .dm-controls .dm-filter.active .dm-all-unread{ background:var(--ft-ink,#0c1512) !important; color:var(--ft-mint,#5eead4) !important; } /* the controls belong with the search box: hide them in the collapsed mini-strip, show when the sidebar is expanded — mirroring how .nav-search is handled on mobile */ /* collapsed mini-strip (avatars only) must NOT show the filter/sort row — only chat heads. The strip is .mini-user-list; the expanded mobile list is .mobile-mini-user-list. */ .chat-list-col.mini-user-list .dm-controls{ display:none !important; } /* collapsed mini-strip = avatars only: never show badges / tags / titles / extras next to names */ .chat-list-col.mini-user-list .ft-cos-sb-extra, .chat-list-col.mini-user-list .ft-cos-extra, .chat-list-col.mini-user-list .ft-cos-pill, .chat-list-col.mini-user-list .ft-cos-title, .chat-list-col.mini-user-list .user-type-badge, .chat-list-col.mini-user-list .ft-lvl-badge, .chat-list-col.mini-user-list .user-badge-custom, .chat-list-col.mini-user-list .ft-smoke{ display:none !important; } /* collapsed mini-strip: the bottom profile chip shows only the avatar thumbnail; name, smoke icon, cosmetic badge/title and the dropdown caret reveal when expanded */ .chat-list-col.mini-user-list .bottom-login-section .bottom-username, .chat-list-col.mini-user-list .bottom-login-section .ft-smoke-self, .chat-list-col.mini-user-list .bottom-login-section .ft-cos-self-extra, .chat-list-col.mini-user-list .bottom-login-section .dropdown-toggle-split::after{ display:none !important; } .chat-list-col.mini-user-list .bottom-login-section .user-avatar{ margin-right:0 !important; } @media (max-width:768px){ .dm-controls{ display:none !important; } .chat-list-col.mobile-mini-user-list:not(.mini-user-list) .dm-controls{ display:flex !important; } } /* ---------- reaction picker stacking ---------- */ /* The emoji picker (.reaction-box-show) is absolutely positioned inside its message. Its own z-index only applies within that message's stacking context, so a later message bubble paints over it. Lift the whole message that holds an open picker above its siblings (mirrors the .dropdown-menu.show rule above). */ .messages ul li:has(.reaction-box-show){ position:relative; z-index:1000 !important; } .messages ul li:has(.reaction-box-show) .reaction-box{ z-index:10000 !important; } /* ---------- What I'm Smoking ---------- */ .ft-smoke{ cursor:pointer; font-size:.95em; line-height:1; margin-left:3px; vertical-align:middle; display:inline-block; transition:transform .15s ease; } .ft-smoke:hover{ transform:scale(1.25) translateY(-1px); } .ft-smoking-modal .ft-smk-label{ display:block; margin:.7rem 0 .3rem; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ft-muted); } .ft-smoking-modal .ft-smk-note{ margin-top:.85rem; font-size:.78rem; color:var(--ft-muted); } .ft-smoking-modal .ft-smk-current{ background:var(--ft-panel-2); border:1px solid var(--ft-line); border-radius:10px; padding:.5rem .7rem; margin-bottom:.7rem; font-size:.85rem; color:var(--ft-mint); } .ft-smk-h-emoji{ display:inline-block; } /* info popup + puff animation */ .ft-smk-info-content{ position:relative; overflow:hidden; text-align:center; } .ft-smk-info-body{ position:relative; z-index:2; padding:1.4rem 1rem 1.6rem; } .ft-smk-emoji-big{ font-size:2.6rem; line-height:1; } .ft-smk-who{ font-weight:700; margin-top:.4rem; font-size:1.05rem; } .ft-smk-strain-line{ margin-top:.4rem; font-size:1.05rem; } .ft-smk-vendor-line{ margin-top:.25rem; color:var(--ft-muted); font-size:.9rem; } .ft-smk-vendor-line a{ color:var(--ft-mint); text-decoration:underline; } .ft-smk-time{ margin-top:.65rem; font-size:.74rem; color:var(--ft-muted); text-transform:uppercase; letter-spacing:.05em; } .ft-smk-puff{ position:absolute; left:50%; bottom:16%; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(222,238,232,.55), rgba(222,238,232,0) 70%); transform:translate(-50%,10px) scale(.3); opacity:0; pointer-events:none; z-index:1; } .ft-puffing .ft-smk-puff{ animation:ftPuff 1.15s ease-out forwards; } .ft-puffing .ft-smk-puff.puff2{ animation-delay:.12s; left:42%; } .ft-puffing .ft-smk-puff.puff3{ animation-delay:.22s; left:58%; } @keyframes ftPuff{ 0%{ transform:translate(-50%,10px) scale(.3); opacity:0; } 25%{ opacity:.7; } 100%{ transform:translate(-50%,-48px) scale(2.3); opacity:0; } } .ft-puffing .ft-smk-emoji-big{ animation:ftPuffEmoji .6s ease-out; } @keyframes ftPuffEmoji{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } } .ft-smoke-self{ cursor:pointer; font-size:1em; line-height:1; margin-left:4px; vertical-align:middle; display:none; transition:transform .15s ease; } .ft-smoke-self:hover{ transform:scale(1.25); } /* back-to-room button (shown only inside a DM) */ .ft-dm-back{ margin-right:8px; flex:0 0 auto; } /* ---------- Economy / Rewards ---------- */ .ft-daily-btn{ position:relative; } .ft-daily-dot{ position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:var(--ft-amber,#e8b04b); box-shadow:0 0 0 2px var(--ft-panel,#13241f); animation:ftDailyPulse 1.6s ease-in-out infinite; } @keyframes ftDailyPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.4); opacity:.55; } } .ft-rewards-body{ overflow-x:hidden; overflow-y:auto; max-height:74vh; } .ft-rw-tabs{ display:block !important; white-space:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; margin-bottom:14px; width:100%; max-width:100%; box-sizing:border-box; font-size:0; scrollbar-width:thin; scrollbar-color:var(--ft-teal,#15a097) transparent; padding-bottom:6px; } .ft-rw-tabs::-webkit-scrollbar{ height:6px; } .ft-rw-tabs::-webkit-scrollbar-track{ background:transparent; } .ft-rw-tabs::-webkit-scrollbar-thumb{ background:var(--ft-teal,#15a097); border-radius:3px; } .ft-rw-board-toggle{ display:flex; gap:6px; margin-bottom:14px; } .ft-rw-tab, .ft-rw-bt{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); color:var(--ft-muted,#8aa79d); border-radius:10px; font-size:.85rem; cursor:pointer; } .ft-rw-tab{ display:inline-block !important; vertical-align:top; white-space:nowrap; padding:8px 14px; margin-right:6px; } .ft-rw-tab:last-child{ margin-right:0; } .ft-rw-bt{ flex:1; padding:8px 6px; } .ft-rw-tab.active, .ft-rw-bt.active{ background:var(--ft-teal,#15a097); color:#fff; border-color:var(--ft-teal,#15a097); } .ft-rw-level-num{ font-size:1.5rem; font-weight:800; text-align:center; color:var(--ft-mint,#5eead4); } .ft-rw-bar{ height:14px; border-radius:8px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); overflow:hidden; margin:10px 0 6px; } .ft-rw-bar-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--ft-teal,#15a097),var(--ft-mint,#5eead4)); transition:width .5s ease; } .ft-rw-xp-line{ text-align:center; font-size:.8rem; color:var(--ft-muted,#8aa79d); } .ft-rw-rank{ text-align:center; font-size:.78rem; color:var(--ft-muted,#8aa79d); margin-top:8px; } .ft-rw-balance{ font-size:1.4rem; font-weight:800; text-align:center; margin-bottom:14px; } .ft-rw-bloops{ color:var(--ft-amber,#e8b04b); } .ft-rw-actions{ display:flex; gap:8px; justify-content:center; } .ft-rw-wallet-msg{ text-align:center; margin-top:12px; font-size:.85rem; color:var(--ft-mint,#5eead4); min-height:1.1em; } .ft-rw-board-list{ list-style:none; margin:0; padding:0; counter-reset:bd; } .ft-rw-board-list li{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:8px; } .ft-rw-board-list li:nth-child(odd){ background:var(--ft-panel-2,#0f1f1a); } .ft-rw-board-list li::before{ counter-increment:bd; content:counter(bd); width:1.6em; color:var(--ft-muted,#8aa79d); font-weight:700; } .ft-rw-board-list .ft-bd-name{ flex:1; margin-left:4px; } .ft-rw-board-list .ft-bd-val{ color:var(--ft-mint,#5eead4); font-weight:600; font-size:.85rem; } .ft-rw-board-list .ft-bd-empty{ justify-content:center; color:var(--ft-muted,#8aa79d); } .ft-rw-board-list .ft-bd-empty::before{ content:""; width:0; } .ft-rw-admin label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-muted,#8aa79d); margin:.5rem 0 .2rem; } .ft-rw-admin input{ width:100%; } .ft-rw-admin .ft-rw-admin-row{ display:flex; gap:8px; } .ft-rw-admin .ft-rw-admin-msg{ margin-top:10px; font-size:.82rem; color:var(--ft-mint,#5eead4); } .ft-eco-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ft-panel,#13241f); color:var(--ft-text,#e9fff8); border:1px solid var(--ft-teal,#15a097); padding:10px 18px; border-radius:24px; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.4); opacity:0; transition:all .3s ease; z-index:20000; pointer-events:none; } .ft-eco-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ---------- Giveaways (user) ---------- */ .ft-gw-balance{ text-align:center; margin-bottom:12px; color:var(--ft-muted,#8aa79d); } .ft-gw-card{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); border-radius:12px; padding:14px; margin-bottom:12px; } .ft-gw-card-title{ font-weight:800; font-size:1.05rem; color:var(--ft-mint,#5eead4); } .ft-gw-card-desc{ font-size:.85rem; color:var(--ft-muted,#8aa79d); margin:4px 0 8px; } .ft-gw-prizelist{ list-style:none; margin:0 0 8px; padding:0; } .ft-gw-prizelist li{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:.9rem; } .ft-gw-prize-img{ width:34px; height:34px; object-fit:cover; border-radius:6px; flex:0 0 auto; } .ft-gw-val{ color:var(--ft-amber,#e8b04b); font-size:.8rem; } .ft-gw-rules{ font-size:.72rem; color:var(--ft-muted,#8aa79d); border-top:1px dashed var(--ft-line,#1f3a32); padding-top:6px; margin-bottom:6px; } .ft-gw-meta{ font-size:.76rem; color:var(--ft-muted,#8aa79d); margin-bottom:8px; } .ft-gw-card-actions{ display:flex; gap:8px; flex-wrap:wrap; } .ft-gw-empty{ text-align:center; color:var(--ft-muted,#8aa79d); padding:20px; } /* ---------- Giveaway manager (admin) ---------- */ .ft-gwmgr-modal .modal-lg{ max-width:760px; } .ft-gw-mrow{ border:1px solid var(--ft-line,#1f3a32); border-radius:10px; padding:10px 12px; margin-bottom:10px; } .ft-gw-mrow-top{ font-size:.95rem; } .ft-gw-mrow-sub{ font-size:.74rem; color:var(--ft-muted,#8aa79d); margin:3px 0 7px; } .ft-gw-mrow-ctl{ display:flex; gap:5px; flex-wrap:wrap; align-items:center; } .btn-xs{ padding:2px 8px; font-size:.72rem; line-height:1.5; border-radius:6px; } .ft-gw-status{ display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; padding:1px 7px; border-radius:10px; font-weight:700; } .ft-gw-st-draft{ background:#3a3a3a; color:#ddd; } .ft-gw-st-active{ background:var(--ft-teal,#15a097); color:#fff; } .ft-gw-st-paused{ background:var(--ft-amber,#e8b04b); color:#2a1c00; } .ft-gw-st-ended{ background:#444; color:#ccc; } .ft-gw-st-drawn{ background:var(--ft-mint,#5eead4); color:#04201b; } .ft-gw-st-cancelled{ background:var(--ft-danger,#c0506a); color:#fff; } .ft-gw-manual input{ width:78px; display:inline-block; margin-right:3px; padding:2px 6px; font-size:.74rem; border-radius:6px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); color:var(--ft-text,#e9fff8); } .ft-gw-manual .gw-me-user{ width:90px; } .ft-gw-mgr-edit label{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ft-muted,#8aa79d); margin:.5rem 0 .15rem; } .ft-gw-row{ display:flex; gap:10px; } .ft-gw-row > div{ flex:1; } .ft-gw-check{ display:inline-flex !important; align-items:center; gap:5px; text-transform:none !important; margin-right:14px !important; } .ft-gw-prow{ display:flex; gap:5px; margin-bottom:6px; align-items:center; flex-wrap:wrap; } .ft-gw-prow input{ padding:4px 7px; font-size:.8rem; border-radius:6px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); color:var(--ft-text,#e9fff8); } .ft-gw-prow .pz-name{ flex:2; } .ft-gw-prow .pz-vendor{ flex:1.4; } .ft-gw-prow .pz-url{ flex:1.6; } .ft-gw-prow .pz-image{ flex:1.6; } .ft-gw-prow .pz-value{ width:70px; } .ft-gw-prow .pz-rank{ width:54px; } .ft-gw-edit-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; } .ft-gw-mgr-msg{ text-align:right; font-size:.8rem; color:var(--ft-mint,#5eead4); min-height:1.1em; margin-top:6px; } /* ---------- Gambling (Bloops casino) ---------- */ .ft-cz-balance{ text-align:center; margin-bottom:10px; color:var(--ft-muted,#8aa79d); } .ft-cz-betrow{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .ft-cz-betrow label{ margin:0; font-size:.8rem; color:var(--ft-muted,#8aa79d); } .ft-cz-betrow .ft-cz-bet{ width:110px; } .ft-cz-limits{ font-size:.72rem; color:var(--ft-muted,#8aa79d); } .ft-cz-game{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); border-radius:12px; padding:12px; margin-bottom:10px; } .ft-cz-gtitle{ font-weight:700; margin-bottom:8px; color:var(--ft-mint,#5eead4); } .ft-cz-gtitle small{ color:var(--ft-amber,#e8b04b); font-weight:600; } .ft-cz-reels{ font-size:1.8rem; letter-spacing:.2em; text-align:center; margin-bottom:8px; min-height:2.2rem; } .ft-cz-result{ text-align:center; font-weight:800; font-size:1.05rem; min-height:1.4em; margin-top:6px; padding:8px; border-radius:10px; } .ft-cz-result.win{ color:var(--ft-mint,#5eead4); background:rgba(94,234,212,.08); } .ft-cz-result.lose{ color:var(--ft-danger,#c0506a); background:rgba(192,80,106,.08); } /* ---------- Casino glow-ups ---------- */ .ft-cz-risk{ background:var(--ft-panel-2,#0f1f1a); color:var(--ft-text,#e9fff8); border:1px solid var(--ft-line,#1f3a32); border-radius:6px; font-size:.78rem; padding:2px 6px; float:right; } .ft-cz-btns{ margin-top:8px; } /* slots */ .ft-slots{ display:flex; gap:8px; justify-content:center; margin:6px 0 10px; } .ft-reel{ width:60px; height:60px; border-radius:10px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); display:flex; align-items:center; justify-content:center; font-size:2rem; overflow:hidden; } .ft-reel.spin{ filter:blur(1px); animation:ftReel .12s linear infinite; } @keyframes ftReel{ from{ transform:translateY(-4px);} to{ transform:translateY(4px);} } /* plinko */ .ft-plinko-stage{ display:flex; flex-direction:column; align-items:center; } .ft-plinko-canvas{ display:block; margin:0 auto; } .ft-plinko-buckets{ display:flex; gap:2px; justify-content:center; margin:4px 0 8px; flex-wrap:nowrap; } .ft-bucket{ font-size:.62rem; font-weight:700; padding:3px 0; width:30px; text-align:center; border-radius:4px; color:#06231d; } .ft-bucket.cold{ background:#3a6b63; color:#cfeee7; } .ft-bucket.mid{ background:var(--ft-mint,#5eead4); } .ft-bucket.hot{ background:var(--ft-amber,#e8b04b); } .ft-bucket.hi{ outline:2px solid #fff; transform:scale(1.12); transition:transform .2s; } /* ---------- Shop ---------- */ .ft-shop-balance{ text-align:center; margin-bottom:12px; color:var(--ft-muted,#8aa79d); } .ft-shop-card{ display:flex; align-items:center; gap:12px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); border-radius:12px; padding:10px 12px; margin-bottom:10px; } .ft-shop-img{ width:48px; height:48px; border-radius:8px; object-fit:cover; flex:0 0 auto; } .ft-shop-img-ph{ display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:var(--ft-panel,#13241f); } .ft-shop-info{ flex:1; min-width:0; } .ft-shop-name{ font-weight:700; color:var(--ft-mint,#5eead4); } .ft-shop-desc{ font-size:.82rem; color:var(--ft-muted,#8aa79d); } .ft-shop-meta{ font-size:.72rem; color:var(--ft-muted,#8aa79d); margin-top:2px; } .ft-shop-act{ flex:0 0 auto; } .ft-shop-empty{ text-align:center; color:var(--ft-muted,#8aa79d); padding:20px; } .ft-shop-prow{ font-size:.8rem; padding:4px 0; border-bottom:1px solid var(--ft-line,#1f3a32); } .ft-shop-prow span{ color:var(--ft-muted,#8aa79d); } .ft-shop-mgr-edit label{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ft-muted,#8aa79d); margin:.5rem 0 .15rem; } .ft-shop-mgr-msg{ text-align:right; font-size:.8rem; color:var(--ft-mint,#5eead4); min-height:1.1em; margin-top:6px; } /* ---------- Help / how it works ---------- */ .ft-help-body h6{ color:var(--ft-mint,#5eead4); margin:14px 0 4px; font-weight:800; } .ft-help-body p{ font-size:.86rem; color:var(--ft-text,#e9fff8); margin:0 0 6px; } .ft-help-list{ margin:0 0 6px; padding-left:18px; } .ft-help-list li{ font-size:.85rem; margin-bottom:3px; } .ft-help-note{ margin-top:14px !important; font-size:.76rem !important; color:var(--ft-muted,#8aa79d) !important; border-top:1px dashed var(--ft-line,#1f3a32); padding-top:8px; } .ft-rw-intro{ font-size:.8rem; color:var(--ft-muted,#8aa79d); background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:8px; padding:8px 10px; margin-bottom:12px; } /* ---------- Rewards pill (top bar) ---------- */ .ft-rewards-pill{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:20px; padding:4px 12px; cursor:pointer; color:var(--ft-text,#e9fff8); font-weight:700; font-size:.82rem; white-space:nowrap; } .ft-rewards-pill:hover{ border-color:var(--ft-teal,#15a097); } .ft-rewards-pill .ft-pill-lvl{ color:var(--ft-mint,#5eead4); } .ft-rewards-pill .ft-pill-lvl i{ color:var(--ft-amber,#e8b04b); } .ft-rewards-pill .ft-pill-bloops{ color:var(--ft-amber,#e8b04b); } @media (max-width:600px){ .ft-rewards-pill{ padding:3px 9px; font-size:.74rem; gap:5px; } } /* ---------- earn floater ---------- */ .ft-earn-float{ position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(0); background:var(--ft-panel,#13241f); border:1px solid var(--ft-mint,#5eead4); color:var(--ft-mint,#5eead4); font-weight:800; padding:6px 14px; border-radius:18px; font-size:.85rem; z-index:20000; pointer-events:none; opacity:1; transition:transform .9s ease-out, opacity .9s ease-out; box-shadow:0 6px 20px rgba(0,0,0,.35); } .ft-earn-float.go{ opacity:0; transform:translateX(-50%) translateY(-46px); } /* ---------- level badge next to names ---------- */ .ft-lvl-badge{ display:inline-block; font-size:.6rem; font-weight:800; line-height:1; padding:2px 5px; border-radius:8px; background:linear-gradient(135deg,var(--ft-teal,#15a097),var(--ft-mint,#5eead4)); color:#04201b; vertical-align:middle; margin-left:2px; } /* ---------- wallet history ---------- */ .ft-rw-history-wrap{ margin-top:16px; } .ft-rw-history-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ft-muted,#8aa79d); margin-bottom:6px; } .ft-rw-hrow{ display:flex; justify-content:space-between; align-items:center; padding:5px 2px; border-bottom:1px solid var(--ft-line,#1f3a32); font-size:.83rem; } .ft-rw-hlabel{ color:var(--ft-text,#e9fff8); } .ft-rw-hval{ font-weight:700; } .ft-rw-hval.pos{ color:var(--ft-mint,#5eead4); } .ft-rw-hval.neg{ color:var(--ft-danger,#c0506a); } .ft-rw-hist-empty{ text-align:center; color:var(--ft-muted,#8aa79d); padding:14px; font-size:.85rem; } /* ---------- Achievements ---------- */ .ft-rw-ach-wrap{ margin-top:18px; } .ft-rw-ach-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ft-muted,#8aa79d); margin-bottom:8px; } .ft-rw-ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; } .ft-ach{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; border:1px solid var(--ft-line,#1f3a32); border-radius:10px; background:var(--ft-panel-2,#0f1f1a); opacity:.4; text-align:center; } .ft-ach.earned{ opacity:1; border-color:var(--ft-teal,#15a097); } .ft-ach i{ font-size:1.1rem; color:var(--ft-muted,#8aa79d); } .ft-ach.earned i{ color:var(--ft-amber,#e8b04b); } .ft-ach-name{ font-size:.62rem; line-height:1.1; color:var(--ft-text,#e9fff8); } /* ---------- Send Bloops ---------- */ .ft-rw-send{ margin-top:12px; padding:10px; border:1px solid var(--ft-line,#1f3a32); border-radius:10px; background:var(--ft-panel-2,#0f1f1a); } .ft-rw-send-title{ font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-muted,#8aa79d); margin-bottom:6px; } .ft-rw-send-row{ display:flex; gap:6px; } .ft-rw-send-row .ft-send-to{ flex:1.4; } .ft-rw-send-row .ft-send-amt{ flex:1; } /* ---------- Board period ---------- */ .ft-rw-board-period{ display:flex; gap:6px; margin-bottom:8px; } .ft-rw-bp{ flex:1; background:transparent; border:1px solid var(--ft-line,#1f3a32); color:var(--ft-muted,#8aa79d); border-radius:8px; padding:4px 0; font-size:.78rem; font-weight:700; cursor:pointer; } .ft-rw-bp.active{ background:var(--ft-teal,#15a097); color:#04201b; border-color:var(--ft-teal,#15a097); } .ft-board-empty{ color:var(--ft-muted,#8aa79d); font-size:.85rem; list-style:none; padding:10px 0; } /* ---------- Level rewards ---------- */ .ft-lvlrw-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:5px 0; border-bottom:1px solid var(--ft-line,#1f3a32); font-size:.85rem; } .ft-lvlrw-msg{ text-align:right; font-size:.8rem; color:var(--ft-mint,#5eead4); min-height:1.1em; margin-top:6px; } .ft-lvlrw-modal label,.ft-health-modal label{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ft-muted,#8aa79d); margin:.5rem 0 .15rem; } /* ---------- Economy health ---------- */ .ft-health-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .ft-health-stat{ border:1px solid var(--ft-line,#1f3a32); border-radius:10px; padding:10px; background:var(--ft-panel-2,#0f1f1a); } .ft-health-val{ font-size:1.1rem; font-weight:800; color:var(--ft-mint,#5eead4); } .ft-health-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-muted,#8aa79d); } .ft-health-top{ list-style:none; padding:0; margin:6px 0 0; } .ft-health-top li,.ft-rw-board-list li{ display:flex; justify-content:space-between; padding:4px 2px; border-bottom:1px solid var(--ft-line,#1f3a32); font-size:.85rem; } .ft-board-val{ font-weight:700; color:var(--ft-amber,#e8b04b); } /* ====================================================================== CASINO v2 — card launcher + polished games (overrides earlier rules) ====================================================================== */ .ft-rw-games .ft-rw-intro{ font-size:.8rem; color:var(--ft-muted,#8aa79d); margin-bottom:10px; } .ft-cz-balance{ text-align:center; font-size:1.05rem; margin:4px 0 14px; color:var(--ft-text,#e9fff8); } .ft-cz-balance b{ color:var(--ft-mint,#5eead4); } /* --- launcher grid --- */ .ft-cz-menu{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ft-cz-card{ position:relative; overflow:hidden; cursor:pointer; text-align:center; padding:20px 12px 16px; border-radius:18px; border:1px solid var(--ft-line,#1f3a32); background: radial-gradient(120% 90% at 50% -10%, rgba(94,234,212,.16), transparent 60%), linear-gradient(160deg,#143029,#0a1814); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.4); color:var(--ft-text,#e9fff8); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .ft-cz-card:hover{ transform:translateY(-4px); border-color:var(--ft-teal,#15a097); box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(94,234,212,.35); } .ft-cz-card:active{ transform:translateY(-1px) scale(.99); } .ft-cz-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s ease; } .ft-cz-card:hover::after{ transform:translateX(120%); } .ft-cz-card-ico{ display:block; font-size:2.5rem; line-height:1; margin-bottom:8px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .ft-cz-card-name{ display:block; font-weight:800; letter-spacing:.02em; } .ft-cz-card-sub{ display:block; font-size:.68rem; color:var(--ft-muted,#8aa79d); margin-top:3px; } /* --- stage / back / bet --- */ .ft-cz-stage{ animation:ftFade .25s ease; } @keyframes ftFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} } .ft-cz-back{ background:transparent; border:none; color:var(--ft-mint,#5eead4); font-weight:700; font-size:.85rem; padding:2px 0 10px; cursor:pointer; } .ft-cz-back:hover{ text-decoration:underline; } .ft-cz-betrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .ft-cz-betrow > label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ft-muted,#8aa79d); margin:0; } .ft-cz-bet-wrap{ display:flex; align-items:center; gap:0; border:1px solid var(--ft-line,#1f3a32); border-radius:12px; overflow:hidden; background:var(--ft-panel-2,#0f1f1a); } .ft-cz-bet-step{ width:38px; height:40px; border:none; background:transparent; color:var(--ft-mint,#5eead4); font-size:1.3rem; line-height:1; cursor:pointer; transition:background .15s; } .ft-cz-bet-step:hover{ background:rgba(94,234,212,.12); } .ft-cz-bet-wrap .ft-cz-bet{ width:84px; height:40px; text-align:center; border:none; border-left:1px solid var(--ft-line,#1f3a32); border-right:1px solid var(--ft-line,#1f3a32); border-radius:0; background:transparent; color:var(--ft-text,#e9fff8); font-weight:800; font-size:1rem; box-shadow:none; } .ft-cz-limits{ font-size:.7rem; color:var(--ft-muted,#8aa79d); } .ft-cz-gtitle{ display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:1.05rem; margin-bottom:8px; color:var(--ft-text,#e9fff8); } .ft-cz-gtitle small,.ft-cz-pay-tag{ font-size:.72rem; font-weight:800; color:#04201b; background:var(--ft-amber,#e8b04b); padding:2px 8px; border-radius:999px; } /* --- shared play buttons --- */ .ft-cz-play,.ft-cz-choice{ display:block; width:100%; margin-top:14px; padding:13px; border:none; border-radius:13px; cursor:pointer; font-weight:800; letter-spacing:.02em; font-size:.98rem; color:#04201b; background:linear-gradient(180deg,#7ff3e1,#15a097); box-shadow:0 8px 18px rgba(21,160,151,.4), inset 0 1px 0 rgba(255,255,255,.4); transition:transform .12s ease, box-shadow .12s ease, filter .12s; } .ft-cz-play:hover,.ft-cz-choice:hover{ transform:translateY(-2px); filter:brightness(1.06); } .ft-cz-play:active,.ft-cz-choice:active{ transform:translateY(0); } .ft-cz-play:disabled,.ft-cz-choice:disabled{ opacity:.55; cursor:default; transform:none; } .ft-cz-btns{ display:flex; gap:10px; } .ft-cz-btns .ft-cz-choice{ margin-top:18px; } /* --- slots --- */ .ft-slots-machine{ position:relative; margin:6px auto 0; padding:18px; max-width:280px; border-radius:18px; background:linear-gradient(160deg,#1a3a32,#08130f); border:1px solid var(--ft-line,#1f3a32); box-shadow:inset 0 2px 10px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.45); } .ft-slots-machine::before{ content:""; position:absolute; inset:8px; border-radius:12px; border:1px dashed rgba(232,176,75,.25); pointer-events:none; } .ft-slots{ display:flex; gap:8px; justify-content:center; } .ft-reel{ width:68px; height:84px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:2.4rem; background:linear-gradient(#02110d,#123028,#02110d); border:1px solid rgba(94,234,212,.28); box-shadow:inset 0 10px 16px rgba(0,0,0,.65), inset 0 -10px 16px rgba(0,0,0,.65); overflow:hidden; } .ft-reel.spin{ animation:ftReelBlur .1s linear infinite; } @keyframes ftReelBlur{ 0%{ transform:translateY(-4px); filter:blur(1px);} 50%{ transform:translateY(4px); filter:blur(2.5px);} 100%{ transform:translateY(-4px); filter:blur(1px);} } /* --- plinko --- */ .ft-plinko-stage{ position:relative; padding:12px 10px 8px; border-radius:16px; background:radial-gradient(120% 80% at 50% 0%, #16332c, #060f0c 72%); border:1px solid var(--ft-line,#1f3a32); box-shadow:inset 0 6px 18px rgba(0,0,0,.55); } .ft-plinko-canvas{ display:block; width:100%; max-width:340px; margin:0 auto; } .ft-plinko-buckets{ display:flex; gap:3px; justify-content:center; margin-top:8px; } .ft-bucket{ flex:1; text-align:center; font-size:.62rem; font-weight:800; padding:6px 0; border-radius:7px; color:#04201b; transition:transform .15s, box-shadow .15s; } .ft-bucket.cold{ background:#2b4d44; color:#bfe9df; } .ft-bucket.mid{ background:var(--ft-teal,#15a097); } .ft-bucket.hot{ background:linear-gradient(180deg,#ffd479,#e8b04b); } .ft-bucket.hi{ transform:translateY(-4px) scale(1.12); box-shadow:0 0 0 2px #fff, 0 6px 14px rgba(232,176,75,.6); } .ft-cz-risk{ background:var(--ft-panel-2,#0f1f1a); color:var(--ft-text,#e9fff8); border:1px solid var(--ft-line,#1f3a32); border-radius:8px; padding:3px 8px; font-size:.78rem; } /* --- result --- */ .ft-cz-result{ text-align:center; font-weight:800; font-size:1rem; margin-top:14px; min-height:1.4em; transition:color .2s; } .ft-cz-result.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 16px rgba(94,234,212,.5); animation:ftPop .4s ease; } .ft-cz-result.lose{ color:var(--ft-danger,#e87b7b); } @keyframes ftPop{ 0%{ transform:scale(.7); opacity:0;} 60%{ transform:scale(1.12);} 100%{ transform:scale(1); opacity:1;} } /* ====================================================================== LIVE GIVEAWAY — countdown + fireworks reveal ====================================================================== */ .ft-gwlive-content{ position:relative; overflow:hidden; background:linear-gradient(165deg,#0f241e,#081511); border:1px solid var(--ft-line,#1f3a32); color:var(--ft-text,#e9fff8); } .ft-fireworks{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; } .ft-gwlive-close{ position:absolute; top:8px; right:12px; z-index:3; color:var(--ft-text,#e9fff8); opacity:.8; text-shadow:none; } .ft-gwlive-body{ position:relative; z-index:1; padding:22px 20px; text-align:center; } .ft-gwlive-status{ margin-bottom:6px; } .ft-gwlive-badge{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 11px; border-radius:999px; } .ft-gwlive-badge.live{ background:#e8553b; color:#fff; animation:ftLivePulse 1.4s ease-in-out infinite; } .ft-gwlive-badge.paused{ background:#6b7d77; color:#fff; } .ft-gwlive-badge.ended,.ft-gwlive-badge.draft{ background:#33524a; color:#bfe9df; } .ft-gwlive-badge.drawn{ background:linear-gradient(180deg,#ffd479,#e8b04b); color:#04201b; } .ft-gwlive-badge.cancelled{ background:#5a2a2a; color:#f2c7c7; } @keyframes ftLivePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,85,59,.6);} 50%{ box-shadow:0 0 0 7px rgba(232,85,59,0);} } .ft-gwlive-title{ font-weight:800; margin:2px 0 4px; } .ft-gwlive-desc{ font-size:.85rem; color:var(--ft-muted,#8aa79d); margin-bottom:12px; } .ft-gwlive-countdown{ margin:8px auto 14px; } .ft-cd-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ft-muted,#8aa79d); margin-bottom:6px; } .ft-cd-clock{ display:flex; justify-content:center; gap:10px; } .ft-cd-unit{ min-width:58px; padding:10px 6px; border-radius:12px; background:rgba(0,0,0,.3); border:1px solid var(--ft-line,#1f3a32); } .ft-cd-unit span{ display:block; font-size:1.7rem; font-weight:800; line-height:1; color:var(--ft-mint,#5eead4); font-variant-numeric:tabular-nums; } .ft-cd-unit label{ display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ft-muted,#8aa79d); margin:5px 0 0; } .ft-gwlive-prizes ul{ list-style:none; padding:0; margin:8px 0; text-align:left; } .ft-gwlive-prizes li{ display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--ft-line,#1f3a32); font-size:.9rem; } .ft-gwlive-prizes img{ width:34px; height:34px; object-fit:cover; border-radius:7px; } .ft-prize-winner{ color:var(--ft-amber,#e8b04b); font-weight:700; } .ft-gwlive-meta{ font-size:.74rem; color:var(--ft-muted,#8aa79d); margin:8px 0; } .ft-gwlive-entry{ margin-top:8px; } .ft-gw-gate{ font-size:.82rem; color:var(--ft-amber,#e8b04b); padding:8px; border:1px dashed rgba(232,176,75,.4); border-radius:10px; } .ft-gwlive-drawing{ padding:18px 0; } .ft-drawing-spin{ width:46px; height:46px; margin:0 auto 10px; border-radius:50%; border:4px solid rgba(94,234,212,.2); border-top-color:var(--ft-mint,#5eead4); animation:ftSpin .8s linear infinite; } @keyframes ftSpin{ to{ transform:rotate(360deg);} } .ft-drawing-text{ font-size:.85rem; color:var(--ft-muted,#8aa79d); } .ft-gwlive-winners{ margin-top:10px; } .ft-winners-head{ font-size:1.1rem; font-weight:800; color:var(--ft-amber,#e8b04b); margin-bottom:10px; } .ft-winner-row{ display:flex; flex-direction:column; gap:2px; padding:10px; margin:8px 0; border-radius:12px; background:linear-gradient(180deg, rgba(232,176,75,.16), rgba(232,176,75,.05)); border:1px solid rgba(232,176,75,.35); } .ft-winner-prize{ font-size:.82rem; color:var(--ft-text,#e9fff8); } .ft-winner-name{ font-size:1.05rem; font-weight:800; color:var(--ft-amber,#e8b04b); } .ft-winner-row.ft-pop{ animation:ftWinPop .55s cubic-bezier(.2,1.3,.4,1) both; } @keyframes ftWinPop{ 0%{ transform:scale(.5) translateY(10px); opacity:0;} 70%{ transform:scale(1.06);} 100%{ transform:scale(1); opacity:1;} } /* ====================================================================== ADMIN — clearer sections ====================================================================== */ .ft-admin-section{ padding:14px; margin-bottom:12px; border-radius:14px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); } .ft-admin-h{ font-weight:800; font-size:.95rem; color:var(--ft-mint,#5eead4); margin-bottom:4px; } .ft-admin-hint{ font-size:.74rem; line-height:1.4; color:var(--ft-muted,#8aa79d); margin-bottom:10px; } .ft-admin-field{ flex:1; display:flex; flex-direction:column; } .ft-admin-field label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ft-muted,#8aa79d); margin:0 0 3px; } .ft-admin-flabel{ display:block; font-size:.78rem; font-weight:700; color:var(--ft-text,#e9fff8); margin-bottom:2px; } .ft-admin-toggles{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; } .ft-admin-toggles label{ display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ft-text,#e9fff8); margin:0; cursor:pointer; } .ft-admin-roombox{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:10px; margin-top:6px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--ft-line,#1f3a32); max-height:160px; overflow:auto; } .ft-noxp-room{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ft-text,#e9fff8); margin:0; cursor:pointer; } /* ====================================================================== SEND BLOOPS — username autocomplete ====================================================================== */ .ft-send-to-wrap{ position:relative; flex:1.4; } .ft-send-suggest, .ft-adj-suggest{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; max-height:210px; overflow:auto; background:var(--ft-panel,#0c1a16); border:1px solid var(--ft-line,#1f3a32); border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.5); } .ft-send-opt, .ft-adj-opt{ display:flex; align-items:center; gap:9px; padding:8px 10px; cursor:pointer; font-size:.88rem; color:var(--ft-text,#e9fff8); } .ft-send-opt:hover, .ft-adj-opt:hover{ background:rgba(94,234,212,.12); } .ft-send-opt img, .ft-adj-opt img{ width:26px; height:26px; border-radius:50%; object-fit:cover; } /* ====================================================================== SIDEBAR — level badge next to names ====================================================================== */ .chat-name .ft-lvl-badge{ display:inline-flex; align-items:center; font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:999px; background:linear-gradient(180deg,#1d4f47,#123a34); color:var(--ft-mint,#5eead4); border:1px solid rgba(94,234,212,.3); vertical-align:middle; } /* ====================================================================== MOBILE FIXES — compact top-bar badge + scrollable rewards tabs ====================================================================== */ @media (max-width:768px){ /* Collapse the rewards pill to a single tappable badge (full level + points are shown inside the popup anyway), freeing room for the title & buttons. */ .ft-rewards-pill{ width:36px; height:36px; padding:0; gap:0; border-radius:50%; justify-content:center; } .ft-rewards-pill .ft-pill-lvl-n, .ft-rewards-pill .ft-pill-bloops{ display:none !important; } .ft-rewards-pill .ft-pill-lvl{ display:inline-flex; } .ft-rewards-pill .ft-pill-lvl i{ font-size:1.05rem; margin:0; } /* Rewards modal nav: scroll sideways instead of squishing / clipping tabs. */ .ft-rw-tabs{ display:block; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:thin; } .ft-rw-tabs::-webkit-scrollbar{ height:5px; } .ft-rw-tabs::-webkit-scrollbar-thumb{ background:var(--ft-teal,#15a097); border-radius:3px; } .ft-rw-tabs .ft-rw-tab{ display:inline-block; white-space:nowrap; padding:8px 15px; } } /* ====================================================================== BLACKJACK — card table, dealt-card animation, action buttons ====================================================================== */ .ft-cz-blackjack .ft-cz-pay-tag{ background:rgba(232,176,75,.16); color:var(--ft-amber,#e8b04b); border:1px solid rgba(232,176,75,.4); padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; } .ft-bj-table{ margin:10px 0; padding:16px 14px; border-radius:16px; background:radial-gradient(120% 90% at 50% 0%, #14463a 0%, #0c2b24 60%, #08201b 100%); border:1px solid #1f5346; box-shadow:inset 0 2px 18px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.35); } .ft-bj-divider{ height:1px; margin:14px 6px; background:linear-gradient(90deg,transparent,rgba(94,234,212,.28),transparent); } .ft-bj-label{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ft-mint,#5eead4); font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:8px; } .ft-bj-label span{ color:var(--ft-text,#e9fff8); font-weight:700; text-transform:none; letter-spacing:0; opacity:.85; } .ft-bj-hand{ display:flex; flex-wrap:wrap; gap:7px; min-height:70px; align-items:center; } .ft-card{ position:relative; width:48px; height:68px; border-radius:7px; background:linear-gradient(160deg,#ffffff,#eef3f1); box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06); flex:0 0 auto; transform-origin:center bottom; animation:ftCardDeal .42s cubic-bezier(.2,.85,.3,1) backwards; animation-delay:calc(var(--i,0) * .09s); } .ft-card-tl,.ft-card-br{ position:absolute; font-size:.62rem; font-weight:800; line-height:.9; text-align:center; } .ft-card-tl{ top:5px; left:5px; } .ft-card-br{ bottom:5px; right:5px; transform:rotate(180deg); } .ft-card-mid{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; opacity:.92; } .ft-card-red{ color:#d63a4a; } .ft-card-black{ color:#1a2b27; } .ft-card-back{ background: repeating-linear-gradient(45deg, #15a097 0 6px, #0e7c75 6px 12px); box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 0 0 2px rgba(230,255,248,.5); } .ft-card-back span{ position:absolute; inset:6px; border-radius:4px; border:1px dashed rgba(230,255,248,.55); } @keyframes ftCardDeal{ 0%{ opacity:0; transform:translateY(-34px) rotate(-12deg) scale(.86); } 100%{ opacity:1; transform:translateY(0) rotate(0) scale(1); } } .ft-bj-msg{ text-align:center; margin:12px 0 10px; font-weight:800; font-size:1rem; min-height:1.2em; color:var(--ft-muted,#8aa79d); } .ft-bj-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 14px rgba(94,234,212,.45); } .ft-bj-msg.lose{ color:var(--ft-danger,#e2556b); } .ft-bj-msg.push{ color:var(--ft-amber,#e8b04b); } .ft-bj-controls{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; } .ft-bj-act{ flex:1 1 auto; min-width:92px; padding:11px 14px; border-radius:12px; border:1px solid var(--ft-line,#1f3a32); font-weight:800; font-size:.92rem; cursor:pointer; color:var(--ft-text,#e9fff8); background:var(--ft-panel-2,#0f1f1a); transition:transform .12s, box-shadow .12s, filter .12s; } .ft-bj-act:hover{ transform:translateY(-1px); } .ft-bj-act:disabled{ opacity:.5; cursor:default; transform:none; } .ft-bj-hit{ background:linear-gradient(135deg,#15a097,#0e7c75); border-color:#15a097; } .ft-bj-stand{ background:linear-gradient(135deg,#2a3d37,#1b2a25); } .ft-bj-double{ background:linear-gradient(135deg,#e8b04b,#c98f2e); border-color:#e8b04b; color:#1a130a; } .ft-bj-hit:hover{ box-shadow:0 6px 16px rgba(21,160,151,.4); } .ft-bj-double:hover{ box-shadow:0 6px 16px rgba(232,176,75,.4); } @media (max-width:768px){ .ft-card{ width:42px; height:60px; } .ft-card-mid{ font-size:1.3rem; } .ft-bj-act{ min-width:0; } } /* ====================================================================== ROULETTE — spinning wheel + bet chips ====================================================================== */ /* ---------- Roulette (production wheel + full board) ---------- */ .ft-roul-top{ display:flex; gap:14px; align-items:center; justify-content:center; margin:10px 0; flex-wrap:wrap; } .ft-roul-wheelwrap{ position:relative; width:200px; height:200px; flex:0 0 auto; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); } .ft-roul-wheel{ position:absolute; inset:0; } .ft-roul-wheel svg{ display:block; width:100%; height:100%; } .ft-roul-balltrack{ position:absolute; inset:0; pointer-events:none; } .ft-roul-ball{ position:absolute; top:4px; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#c8cfca); box-shadow:0 1px 3px rgba(0,0,0,.7); } .ft-roul-pointer{ position:absolute; top:-4px; left:50%; margin-left:-8px; width:0; height:0; z-index:6; border-left:8px solid transparent; border-right:8px solid transparent; border-top:15px solid #e8b04b; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); } .ft-roul-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; z-index:5; display:flex; align-items:center; justify-content:center; background:#0a1f1b; border:2px solid #caa24a; box-shadow:inset 0 0 10px rgba(0,0,0,.6); } .ft-roul-result-num{ font-size:1.5rem; font-weight:900; color:#fff; } .ft-roul-result-num.red{ color:#ff7a7a; } .ft-roul-result-num.black{ color:#fff; } .ft-roul-result-num.green{ color:#5eead4; } .ft-roul-side{ min-width:120px; } .ft-roul-history-title{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ft-muted,#8aa79d); margin-bottom:6px; } .ft-roul-history{ display:flex; flex-wrap:wrap; gap:4px; max-width:148px; } .ft-roul-hchip{ width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; font-size:.62rem; font-weight:800; color:#fff; } .ft-roul-hchip.red{ background:#c0392b; } .ft-roul-hchip.black{ background:#222; } .ft-roul-hchip.green{ background:#1f9e6e; } .ft-roul-board{ display:grid; grid-template-columns:0.8fr repeat(12,1fr) 0.8fr; grid-auto-rows:minmax(28px,auto); gap:3px; margin:10px 0; } .ft-roul-cell{ position:relative; border:1px solid rgba(255,255,255,.12); border-radius:5px; color:#fff; font-weight:700; font-size:.7rem; cursor:pointer; padding:5px 2px; display:flex; align-items:center; justify-content:center; min-height:28px; transition:filter .1s, transform .1s; } .ft-roul-cell:hover{ filter:brightness(1.18); } .ft-roul-cell.bumped{ transform:scale(.93); } .ft-roul-cell.red{ background:linear-gradient(160deg,#c0392b,#8f291f); } .ft-roul-cell.black{ background:linear-gradient(160deg,#2c2c2c,#131313); } .ft-roul-cell.green{ background:linear-gradient(160deg,#1f9e6e,#13724f); } .ft-roul-cell.zero{ writing-mode:vertical-rl; text-orientation:upright; font-size:.9rem; } .ft-roul-cell.outside{ background:rgba(20,40,34,.72); font-size:.62rem; letter-spacing:.02em; } .ft-roul-cell.outside.red{ background:linear-gradient(160deg,#c0392b,#8f291f); } .ft-roul-cell.outside.black{ background:linear-gradient(160deg,#2c2c2c,#131313); } .ft-roul-cell.col2to1{ background:rgba(20,40,34,.72); font-size:.6rem; } .ft-roul-cell.win{ animation:ftRoulWinCell 1.5s ease; z-index:2; } @keyframes ftRoulWinCell{ 0%,100%{ box-shadow:0 0 0 2px #ffe27a, 0 0 14px rgba(255,210,80,.7); } 50%{ box-shadow:0 0 0 3px #fff, 0 0 22px rgba(255,210,80,.95); } } .ft-roul-cchip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:none; min-width:21px; height:21px; line-height:17px; padding:0 3px; border-radius:11px; background:#e8b04b; color:#1a130a; font-size:.6rem; font-weight:800; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.5); z-index:3; } .ft-roul-chiptray{ display:flex; gap:9px; justify-content:center; margin:6px 0 12px; flex-wrap:wrap; } .ft-roul-chipbtn{ width:46px; height:46px; border-radius:50%; border:3px dashed rgba(255,255,255,.72); color:#fff; font-weight:800; font-size:.72rem; cursor:pointer; box-shadow:inset 0 0 0 3px rgba(255,255,255,.12), 0 4px 8px rgba(0,0,0,.42); transition:transform .12s, filter .12s; } .ft-roul-chipbtn:hover{ transform:translateY(-2px); filter:brightness(1.1); } .ft-roul-chipbtn.active{ outline:2px solid #fff; transform:translateY(-3px); } .ft-roul-chipbtn.c1{ background:radial-gradient(circle at 50% 35%,#8fa6a0,#5a6b66); } .ft-roul-chipbtn.c5{ background:radial-gradient(circle at 50% 35%,#e8625f,#c0322f); } .ft-roul-chipbtn.c25{ background:radial-gradient(circle at 50% 35%,#36b06a,#1f7d49); } .ft-roul-chipbtn.c100{ background:radial-gradient(circle at 50% 35%,#3a3f46,#16191d); } .ft-roul-chipbtn.c500{ background:radial-gradient(circle at 50% 35%,#9a5ec8,#6a35a0); } .ft-roul-foot{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px; flex-wrap:wrap; } .ft-roul-stake{ font-size:.82rem; color:var(--ft-muted,#8aa79d); } .ft-roul-stake b{ color:var(--ft-amber,#e8b04b); font-size:1rem; } .ft-roul-actions{ display:flex; gap:6px; } .ft-roul-act{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#16252a); color:var(--ft-text,#e9fff8); border-radius:8px; padding:5px 12px; font-size:.74rem; font-weight:700; cursor:pointer; } .ft-roul-act:hover{ filter:brightness(1.12); } .ft-roul-act:disabled{ opacity:.5; cursor:default; } .ft-roul-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:8px; color:var(--ft-muted,#8aa79d); } .ft-roul-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-roul-msg.lose{ color:var(--ft-danger,#e2556b); } @media (max-width:520px){ .ft-roul-wheelwrap{ width:168px; height:168px; } .ft-roul-cell{ font-size:.6rem; min-height:24px; padding:3px 1px; } .ft-roul-cchip{ min-width:18px; height:18px; line-height:14px; font-size:.54rem; } } .ft-roul-num-in{ width:120px; flex:0 0 auto; } .ft-roul-straight-btn{ flex:1; background:linear-gradient(135deg,#e8b04b,#c98f2e); color:#1a130a; border-color:#e8b04b; } /* ====================================================================== SCRATCH CARD — peel-away covers + win glow ====================================================================== */ .ft-cz-scratch .ft-scratch-card{ display:flex; gap:10px; justify-content:center; margin:14px 0 6px; } .ft-scratch-cell{ position:relative; width:76px; height:92px; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 35%, #14463a, #08201b); border:1px solid #1f5346; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 14px rgba(0,0,0,.6); } .ft-scratch-sym{ font-size:2.1rem; line-height:1; user-select:none; -webkit-user-select:none; } .ft-scratch-cell.revealed .ft-scratch-sym{ animation:ftScrPop .4s ease; } .ft-scratch-canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; cursor:crosshair; touch-action:none; -ms-touch-action:none; z-index:2; } @keyframes ftScrPop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } } .ft-scratch-cell.win{ border-color:var(--ft-mint,#5eead4); box-shadow:0 0 18px rgba(94,234,212,.55), inset 0 0 14px rgba(0,0,0,.5); animation:ftScrWin .5s ease; } @keyframes ftScrWin{ 0%{ transform:scale(1); } 50%{ transform:scale(1.09); } 100%{ transform:scale(1); } } .ft-scratch-hint{ text-align:center; color:var(--ft-muted,#8aa79d); font-size:.8rem; margin:6px 0 10px; } @media (max-width:768px){ .ft-roul-wheel{ width:128px; height:128px; } .ft-roul-num{ font-size:1.6rem; } .ft-scratch-cell{ width:64px; height:80px; } .ft-scratch-sym{ font-size:1.8rem; } } /* ====================================================================== SMOKING — hide self indicator on mobile; smoke-announcement post puffs ====================================================================== */ @media (max-width:768px){ .ft-smoke-self{ display:none !important; } } /* smoke-announcement message bubble (type 11) */ .chat-txt.ft-smoke-post{ position:relative; overflow:visible; background:linear-gradient(180deg, rgba(94,234,212,.10), rgba(94,234,212,.03)); border:1px solid rgba(94,234,212,.22); border-radius:12px; } .ft-smoke-post-txt{ position:relative; z-index:1; } .ft-smoke-post .ft-puff{ position:absolute; bottom:4px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle, rgba(233,255,248,.55), rgba(94,234,212,.18) 60%, rgba(94,234,212,0) 72%); filter:blur(3px); opacity:0; pointer-events:none; z-index:2; animation:ftMsgPuff 2.6s ease-out 3 both; } .ft-smoke-post .ft-puff.p0{ left:8%; animation-delay:0s; } .ft-smoke-post .ft-puff.p1{ left:27%; animation-delay:.5s; width:15px; height:15px; } .ft-smoke-post .ft-puff.p2{ left:48%; animation-delay:.2s; width:24px; height:24px; } .ft-smoke-post .ft-puff.p3{ left:67%; animation-delay:.8s; } .ft-smoke-post .ft-puff.p4{ left:85%; animation-delay:.35s; width:16px; height:16px; } @keyframes ftMsgPuff{ 0%{ opacity:0; transform:translateY(6px) scale(.45); } 20%{ opacity:.7; } 100%{ opacity:0; transform:translateY(-48px) scale(1.9); } } @media (prefers-reduced-motion: reduce){ .ft-smoke-post .ft-puff{ animation:none; opacity:0; } } /* ====================================================================== GIVEAWAY MANAGER — prize line wrap, per-prize winners, photo upload ====================================================================== */ /* prize list on cards: let long names wrap instead of getting cut off */ .ft-gw-prizelist li{ align-items:flex-start; } .ft-gw-prizelist li > span{ min-width:0; flex:1 1 auto; white-space:normal; word-break:break-word; overflow-wrap:anywhere; } .ft-gw-nw{ display:inline-block; margin-left:4px; font-size:.72rem; font-weight:700; color:var(--ft-amber,#e8b04b); background:rgba(232,176,75,.14); border:1px solid rgba(232,176,75,.4); border-radius:999px; padding:0 7px; white-space:nowrap; } /* editor row widths for the new fields */ .ft-gw-prow .pz-winners{ width:64px; flex:0 0 auto; } .ft-gw-prow .pz-file{ display:none; } .pz-upload-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:32px; margin:0; cursor:pointer; border-radius:6px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); font-size:1rem; flex:0 0 auto; transition:border-color .12s, opacity .12s; } .pz-upload-btn:hover{ border-color:var(--ft-teal,#15a097); } .pz-upload-btn.uploading{ opacity:.5; pointer-events:none; } .pz-thumb{ width:32px; height:32px; object-fit:cover; border-radius:6px; flex:0 0 auto; border:1px solid var(--ft-line,#1f3a32); } /* giveaway manager — entries panel */ .ft-gw-entries-panel{ margin-top:8px; padding:8px 10px; border:1px solid var(--ft-line,#1f3a32); border-radius:8px; background:rgba(0,0,0,.18); } .ft-gw-entries-tbl{ width:100%; font-size:.82rem; border-collapse:collapse; } .ft-gw-entries-tbl th{ text-align:left; color:var(--ft-muted,#8aa79d); font-weight:700; padding:3px 6px; border-bottom:1px solid var(--ft-line,#1f3a32); } .ft-gw-entries-tbl td{ padding:4px 6px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--ft-text,#e9fff8); } .ft-gw-entries-tbl td:last-child, .ft-gw-entries-tbl th:last-child{ text-align:right; } /* ====================================================================== BLOOPS DROP — claimable post + admin composer ====================================================================== */ .chat-txt.ft-drop{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:linear-gradient(135deg, rgba(232,176,75,.16), rgba(232,176,75,.05)); border:1px solid rgba(232,176,75,.45); } .ft-drop-ico{ font-size:1.7rem; line-height:1; flex:0 0 auto; } .ft-drop-body{ display:flex; flex-direction:column; min-width:0; } .ft-drop-title{ font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ft-amber,#e8b04b); font-weight:800; } .ft-drop-amt{ font-size:1.05rem; font-weight:800; color:var(--ft-text,#e9fff8); } .ft-drop-claim{ margin-left:auto; flex:0 0 auto; padding:9px 16px; border-radius:999px; border:0; cursor:pointer; font-weight:800; font-size:.9rem; color:#1a130a; background:linear-gradient(135deg,#f0c869,#e8b04b); box-shadow:0 3px 12px rgba(232,176,75,.4); animation:ftDropPulse 1.6s ease-in-out infinite; } .ft-drop-claim:hover{ filter:brightness(1.06); } .ft-drop-claim:disabled{ opacity:.6; cursor:default; animation:none; } @keyframes ftDropPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } } .ft-drop.claimed{ background:rgba(255,255,255,.04); border-color:var(--ft-line,#1f3a32); opacity:.9; } .ft-drop.won{ border-color:var(--ft-mint,#5eead4); box-shadow:0 0 16px rgba(94,234,212,.4); } .ft-drop-result{ margin-left:auto; flex:0 0 auto; font-weight:800; font-size:.9rem; color:var(--ft-muted,#8aa79d); } .ft-drop-result.won{ color:var(--ft-mint,#5eead4); } .ft-drop-admin{ display:flex; gap:8px; align-items:center; } .ft-drop-admin .ft-drop-amount{ flex:1; } @media (prefers-reduced-motion: reduce){ .ft-drop-claim{ animation:none; } } /* Bloops gift message bubble (type 14) + announce toggle */ .chat-txt.ft-gift{ display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border-radius:14px; background:linear-gradient(135deg, rgba(94,234,212,.14), rgba(212,83,126,.10)); border:1px solid rgba(94,234,212,.4); } .ft-gift-ico{ font-size:1.4rem; line-height:1; flex:0 0 auto; } .ft-gift-txt{ font-weight:700; color:var(--ft-text,#e9fff8); } .ft-send-announce-lbl{ display:flex; align-items:center; gap:7px; margin:8px 2px 0; font-size:.82rem; color:var(--ft-muted,#8aa79d); cursor:pointer; } .ft-send-announce-lbl input{ width:auto; margin:0; } /* drop-claimed announcement line (type 15) */ .chat-txt.ft-dropwon{ display:inline-block; padding:7px 12px; border-radius:12px; font-weight:700; color:var(--ft-amber,#e8b04b); background:rgba(232,176,75,.12); border:1px solid rgba(232,176,75,.35); } /* ====================================================================== VENDOR MARKET ====================================================================== */ .ft-mkt-closed{ text-align:center; color:var(--ft-amber,#e8b04b); font-weight:700; padding:8px; } .ft-mkt-summary{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; } .ft-mkt-stat{ flex:1 1 90px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; } .ft-mkt-stat span{ font-size:.72rem; color:var(--ft-muted,#8aa79d); text-transform:uppercase; letter-spacing:.03em; } .ft-mkt-stat b{ font-size:1rem; color:var(--ft-text,#e9fff8); } .ft-mkt-events{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .ft-mkt-ev{ font-size:.74rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--ft-line,#1f3a32); } .ft-mkt-ev.up,.up{ color:var(--ft-mint,#5eead4); } .ft-mkt-ev.down,.down{ color:var(--ft-danger,#e2556b); } .flat{ color:var(--ft-muted,#8aa79d); } .ft-mkt-section-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-mint,#5eead4); font-weight:800; margin:14px 0 6px; } .ft-mkt-v{ background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:12px; padding:9px 11px; margin-bottom:7px; } .ft-mkt-v-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .ft-mkt-v-name{ font-weight:700; color:var(--ft-text,#e9fff8); } .ft-mkt-v-price{ font-weight:800; color:var(--ft-text,#e9fff8); white-space:nowrap; } .ft-mkt-chg{ font-style:normal; font-size:.8rem; font-weight:700; margin-left:4px; } .ft-mkt-chg.up{ color:var(--ft-mint,#5eead4); } .ft-mkt-chg.down{ color:var(--ft-danger,#e2556b); } .ft-mkt-chg.flat{ color:var(--ft-muted,#8aa79d); } .ft-mkt-vev{ margin-left:5px; font-size:.85rem; } .ft-mkt-v-you{ font-size:.78rem; color:var(--ft-muted,#8aa79d); margin:4px 0; } .ft-mkt-v-act{ display:flex; gap:6px; align-items:center; margin-top:6px; } .ft-mkt-v-act .mkt-buy-amt{ flex:1; min-width:0; height:32px; border-radius:8px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel,#0b1714); color:var(--ft-text,#e9fff8); padding:0 8px; } .ft-mkt-pf,.ft-mkt-lrow{ display:flex; justify-content:space-between; gap:8px; padding:4px 2px; font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.05); } .ft-mkt-leaders{ list-style:none; padding:0; margin:0; counter-reset:mklead; } .ft-mkt-leaders li{ display:flex; justify-content:space-between; gap:8px; padding:4px 2px; font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.05); } .ft-mkt-leaders li::before{ counter-increment:mklead; content:counter(mklead) "."; color:var(--ft-muted,#8aa79d); margin-right:6px; } .ft-mkt-leaders li span{ flex:1; } .ft-mkt-empty{ color:var(--ft-muted,#8aa79d); font-size:.82rem; padding:4px 2px; } .ft-mkt-admin{ margin-top:16px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); } .ft-mkt-admin-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; font-size:.85rem; } .ft-mkt-admin-msg{ font-size:.82rem; color:var(--ft-muted,#8aa79d); } /* ---- Vendor Market: trading-terminal chart UI ---- */ .ft-mkt-chart-card{ background:#0a1512; border:1px solid #14302a; border-radius:14px; padding:12px 12px 10px; margin:10px 0 4px; } .ft-mkt-chart-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; } .ft-mkt-chart-id{ display:flex; flex-direction:column; } .ft-mkt-chart-name{ font-weight:800; font-size:1.02rem; color:var(--ft-text,#e9fff8); } .ft-mkt-chart-slug{ font-size:.72rem; color:var(--ft-muted,#8aa79d); font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-chart-quote{ text-align:right; } .ft-mkt-chart-price{ display:block; font-size:1.22rem; font-weight:800; color:var(--ft-text,#e9fff8); font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-chart-chg{ font-size:.82rem; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-chart-chg.up,.ft-mkt-chg.up{ color:#23d18b; } .ft-mkt-chart-chg.down,.ft-mkt-chg.down{ color:#ff5c6c; } .ft-mkt-chart-chg.flat,.ft-mkt-chg.flat{ color:var(--ft-muted,#8aa79d); } .ft-mkt-chart-body{ width:100%; height:200px; } .ft-mkt-chart{ width:100%; height:200px; display:block; } .ft-mkt-grid{ stroke:rgba(255,255,255,.06); stroke-width:1; } .ft-mkt-dot{ animation:ftMktPulse 1.4s ease-in-out infinite; } @keyframes ftMktPulse{ 0%,100%{ r:3.5; opacity:1; } 50%{ r:5; opacity:.55; } } .ft-mkt-chart-act{ display:flex; gap:6px; align-items:center; margin-top:8px; } .ft-mkt-chart-act .ft-mkt-chart-amt{ flex:1; min-width:0; height:34px; border-radius:8px; border:1px solid #14302a; background:#07100e; color:var(--ft-text,#e9fff8); padding:0 10px; font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-chart-act .btn{ padding:6px 14px; } /* vendor rows as a quote board */ .ft-mkt-v{ cursor:pointer; } .ft-mkt-v.sel{ border-color:var(--ft-mint,#5eead4); box-shadow:inset 0 0 0 1px rgba(94,234,212,.25); } .ft-mkt-v-main{ display:flex; align-items:center; gap:10px; } .ft-mkt-v-id{ flex:1 1 34%; min-width:0; display:flex; flex-direction:column; } .ft-mkt-v-id .ft-mkt-v-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ft-mkt-v-you{ font-size:.72rem; color:var(--ft-muted,#8aa79d); font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-v-spark{ flex:1 1 30%; min-width:60px; height:32px; } .ft-mkt-spark{ width:100%; height:32px; display:block; } .ft-mkt-v-q{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; } .ft-mkt-v-q .ft-mkt-v-price{ font-weight:800; color:var(--ft-text,#e9fff8); font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-v-q .ft-mkt-chg{ font-size:.74rem; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; } .ft-mkt-pf .up,.ft-mkt-lrow .up,.ft-mkt-stat b.up{ color:#23d18b; } .ft-mkt-pf .down,.ft-mkt-lrow .down,.ft-mkt-stat b.down{ color:#ff5c6c; } @media (prefers-reduced-motion: reduce){ .ft-mkt-dot{ animation:none; } } /* market: single-vendor dropdown + holding line on the chart card */ .ft-mkt-select{ margin:8px 0 10px; width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; } .ft-mkt-chart-you{ font-size:.8rem; color:var(--ft-muted,#8aa79d); margin-top:8px; font-family:ui-monospace,Menlo,Consolas,monospace; } /* ============================================================ COSMETICS — name effects, badges, titles, banners + store ============================================================ */ .ft-cos-name{ font-weight:700; } /* --- name colors (solid; gradient-clip text proved invisible in some layouts) --- */ .ft-namegrad-sunset,.ft-namegrad-ocean,.ft-namegrad-forest,.ft-namegrad-candy, .ft-namegrad-neon,.ft-namegrad-lava,.ft-namegrad-galaxy,.ft-namegrad-goldgrad{ background:none!important; -webkit-text-fill-color:currentColor!important; } .ft-namegrad-sunset{ color:#ff6f91!important; } .ft-namegrad-ocean{ color:#3b82f6!important; } .ft-namegrad-forest{ color:#22c55e!important; } .ft-namegrad-candy{ color:#c084fc!important; } .ft-namegrad-neon{ color:#22d3ee!important; } .ft-namegrad-lava{ color:#ef4444!important; } .ft-namegrad-galaxy{ color:#818cf8!important; } .ft-namegrad-goldgrad{ color:#f0b429!important; } /* --- animated effects --- */ .ft-fx-glow{ text-shadow:0 0 4px currentColor; animation:ftGlow 2s ease-in-out infinite; } @keyframes ftGlow{ 0%,100%{ text-shadow:0 0 1px currentColor; } 50%{ text-shadow:0 0 5px currentColor; } } .ft-fx-pulse{ display:inline-block; animation:ftPulse 1.3s ease-in-out infinite; } @keyframes ftPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } } .ft-fx-matrix{ color:#39ff14!important; text-shadow:0 0 6px #39ff14; animation:ftMatrix 1.6s steps(2) infinite; } @keyframes ftMatrix{ 0%,100%{ opacity:1; } 50%{ opacity:.65; text-shadow:0 0 10px #39ff14; } } .ft-fx-neon{ color:#fff!important; text-shadow:0 0 4px #22d3ee,0 0 10px #22d3ee,0 0 18px #0ea5e9; animation:ftNeon 2.4s ease-in-out infinite; } @keyframes ftNeon{ 0%,19%,21%,100%{ opacity:1; } 20%{ opacity:.55; } } .ft-fx-glitch{ animation:ftGlitch .9s steps(2) infinite; } @keyframes ftGlitch{ 0%,100%{ text-shadow:none; transform:translate(0); } 25%{ text-shadow:-1.5px 0 #ff003c,1.5px 0 #00e5ff; transform:translate(1px,-1px); } 50%{ text-shadow:1.5px 0 #ff003c,-1.5px 0 #00e5ff; transform:translate(-1px,1px); } } .ft-fx-shimmer,.ft-fx-rainbow,.ft-fx-fire,.ft-fx-aurora,.ft-fx-holo,.ft-fx-goldfoil{ display:inline-block!important; background:none!important; -webkit-text-fill-color:currentColor!important; } .ft-fx-shimmer{ color:#dbeee7!important; animation:ftShine 2.2s ease-in-out infinite; } .ft-fx-rainbow{ color:#ff5f6d!important; animation:ftHue 5s linear infinite; } .ft-fx-fire{ color:#fb923c!important; text-shadow:0 0 6px rgba(239,68,68,.45); animation:ftShine 1.8s ease-in-out infinite; } .ft-fx-aurora{ color:#5eead4!important; animation:ftHue 7s linear infinite; } .ft-fx-holo{ color:#c4b5fd!important; animation:ftHue 6s linear infinite; } .ft-fx-goldfoil{ color:#e8b04b!important; text-shadow:0 0 5px rgba(232,176,75,.4); animation:ftShine 2.4s ease-in-out infinite; } @keyframes ftHue{ to{ filter:hue-rotate(360deg); } } @keyframes ftShine{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.4); } } .ft-fx-sparkle{ position:relative; text-shadow:0 0 6px rgba(255,255,255,.5); animation:ftGlow 1.8s ease-in-out infinite; } .ft-fx-sparkle::after{ content:"\2728"; position:absolute; right:-1.1em; top:-.4em; font-size:.7em; animation:ftTwinkle 1.4s ease-in-out infinite; } @keyframes ftTwinkle{ 0%,100%{ opacity:.3; transform:scale(.7) rotate(0); } 50%{ opacity:1; transform:scale(1.1) rotate(20deg); } } /* --- badge pills --- */ .ft-cos-pill{ display:inline-block; font-size:.68rem; font-weight:800; padding:1px 7px; border-radius:999px; margin-left:5px; vertical-align:middle; border:1px solid transparent; white-space:nowrap; } .ft-pill-green{ background:rgba(34,197,94,.16); color:#86efac; border-color:rgba(34,197,94,.4); } .ft-pill-amber{ background:rgba(232,176,75,.16); color:#e8b04b; border-color:rgba(232,176,75,.4); } .ft-pill-slate{ background:rgba(148,163,184,.16); color:#cbd5e1; border-color:rgba(148,163,184,.4); } .ft-pill-violet{ background:rgba(167,139,250,.16); color:#c4b5fd; border-color:rgba(167,139,250,.4); } .ft-pill-blue{ background:rgba(91,155,213,.16); color:#93c5fd; border-color:rgba(91,155,213,.4); } .ft-pill-orange{ background:rgba(251,146,60,.18); color:#fdba74; border-color:rgba(251,146,60,.45); } .ft-pill-cyan{ background:rgba(34,211,238,.16); color:#67e8f9; border-color:rgba(34,211,238,.4); } .ft-pill-danger{ background:rgba(226,85,107,.16); color:#fda4af; border-color:rgba(226,85,107,.45); } .ft-pill-gold{ background:linear-gradient(90deg,rgba(253,224,71,.25),rgba(245,158,11,.25)); color:#fde68a; border-color:rgba(245,158,11,.6); box-shadow:0 0 8px rgba(245,158,11,.35); } /* --- title chips --- */ .ft-cos-title{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:5px; margin-right:5px; vertical-align:middle; } .ft-title-mute{ background:rgba(138,167,157,.14); color:#8aa79d; } .ft-title-mint{ background:rgba(94,234,212,.14); color:#5eead4; } .ft-title-teal{ background:rgba(21,160,151,.16); color:#2dd4bf; } .ft-title-green{ background:rgba(34,197,94,.16); color:#86efac; } .ft-title-rose{ background:rgba(251,113,133,.16); color:#fda4af; } .ft-title-violet{ background:rgba(167,139,250,.16); color:#c4b5fd; } .ft-title-amber{ background:rgba(232,176,75,.16); color:#e8b04b; } .ft-title-cyan{ background:rgba(34,211,238,.16); color:#67e8f9; } .ft-title-gold{ background:linear-gradient(90deg,rgba(253,224,71,.22),rgba(245,158,11,.22)); color:#fde68a; box-shadow:0 0 6px rgba(245,158,11,.3); } .ft-title-grad{ background:linear-gradient(90deg,#a78bfa,#22d3ee); color:#0b1714; } /* --- banners --- */ .ft-cos-pp-banner{ height:0; border-radius:10px 10px 0 0; transition:height .2s; } .ft-cos-pp-banner[class*="ft-banner-"]{ height:54px; } .ft-banner-teal{ background:linear-gradient(120deg,#0f1f1a,#15a097); } .ft-banner-mint{ background:linear-gradient(120deg,#0f1f1a,#0f1f1a 60%,#5eead4); background-size:14px 14px,auto; } .ft-banner-sunset{ background:linear-gradient(120deg,#ff8a4b,#ff5f8f,#a855f7); } .ft-banner-ocean{ background:linear-gradient(120deg,#22d3ee,#3b82f6,#1e3a8a); } .ft-banner-fire{ background:linear-gradient(120deg,#fde68a,#fb923c,#ef4444); background-size:200% 200%; animation:ftBannerShift 6s ease infinite; } .ft-banner-gold{ background:linear-gradient(120deg,#fff7cc,#f59e0b,#d97706,#fff7cc); background-size:200% 200%; animation:ftBannerShift 5s linear infinite; } .ft-banner-aurora{ background:linear-gradient(120deg,#5eead4,#a78bfa,#22d3ee,#86efac); background-size:240% 240%; animation:ftBannerShift 8s ease infinite; } .ft-banner-galaxy{ background:radial-gradient(circle at 20% 30%,#a78bfa,transparent 40%),radial-gradient(circle at 80% 60%,#22d3ee,transparent 40%),linear-gradient(120deg,#1e1b4b,#312e81); background-size:200% 200%; animation:ftBannerShift 10s ease infinite; } @keyframes ftBannerShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } /* --- store layout --- */ .ft-cos-wrap{ margin-top:18px; } .ft-cos-intro{ font-size:.84rem; color:var(--ft-muted,#8aa79d); margin:4px 0 12px; } .ft-cos-preview-card{ background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:12px; overflow:hidden; margin-bottom:16px; } .ft-cos-pp-row{ display:flex; align-items:center; justify-content:center; gap:2px; padding:14px 12px 4px; font-size:1.15rem; flex-wrap:wrap; } .ft-cos-pp-name{ font-size:1.15rem; } .ft-cos-pp-label{ text-align:center; font-size:.72rem; color:var(--ft-muted,#8aa79d); padding:0 0 12px; } .ft-cos-group{ margin-bottom:18px; } .ft-cos-group-h{ font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ft-mint,#5eead4); margin:0 0 8px; } .ft-cos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; } .ft-cos-card{ background:var(--ft-panel-2,#0f1f1a); border:1.5px solid var(--ft-line,#1f3a32); border-radius:11px; padding:10px; display:flex; flex-direction:column; gap:7px; transition:transform .1s,box-shadow .15s; } .ft-cos-card:hover{ transform:translateY(-2px); } .ft-cos-card.owned{ box-shadow:inset 0 0 0 1px rgba(94,234,212,.25); } .ft-cos-card.rar-rare{ border-color:#3b82f6; } .ft-cos-card.rar-epic{ border-color:#a855f7; box-shadow:0 0 10px rgba(168,85,247,.18); } .ft-cos-card.rar-legendary{ border-color:#f59e0b; box-shadow:0 0 12px rgba(245,158,11,.28); } .ft-cos-card-prev{ min-height:34px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.18); border-radius:8px; padding:6px; } .ft-cos-swatch-name{ font-weight:800; font-size:1.02rem; color:#e9fff8; } .ft-cos-swatch-banner{ display:block; width:100%; height:26px; border-radius:6px; } .ft-cos-card-name{ font-size:.8rem; font-weight:700; color:var(--ft-text,#e9fff8); text-align:center; } .ft-cos-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; } .ft-cos-rar{ font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ft-muted,#8aa79d); } .ft-cos-btn{ border:0; border-radius:7px; padding:5px 10px; font-size:.74rem; font-weight:800; cursor:pointer; background:var(--ft-teal,#15a097); color:#04110d; } .ft-cos-btn.buy::before{ content:"\f51e"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:4px; opacity:.7; } .ft-cos-btn.equip{ background:rgba(94,234,212,.16); color:#5eead4; border:1px solid rgba(94,234,212,.4); } .ft-cos-btn.equipped{ background:rgba(232,176,75,.18); color:#e8b04b; border:1px solid rgba(232,176,75,.5); } .ft-cos-btn:disabled{ opacity:.5; cursor:default; } /* ============================================================ COMMUNITY — pin bar + daily recap ============================================================ */ .ft-pin-bar{ display:flex; align-items:center; gap:8px; background:linear-gradient(90deg,rgba(232,176,75,.14),rgba(21,160,151,.10)); border:1px solid rgba(232,176,75,.35); border-radius:9px; padding:6px 10px; margin:6px 8px 2px; font-size:.84rem; color:var(--ft-text,#e9fff8); } .ft-pin-bar .ft-pin-ico{ color:#e8b04b; flex:0 0 auto; } .ft-pin-bar .ft-pin-body{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ft-pin-bar .ft-pin-unpin{ flex:0 0 auto; background:rgba(226,85,107,.14); border:1px solid rgba(226,85,107,.45); color:var(--ft-danger,#e2556b); font-size:.78rem; font-weight:600; line-height:1; cursor:pointer; padding:5px 9px; border-radius:7px; white-space:nowrap; } .ft-pin-bar .ft-pin-unpin:hover{ background:rgba(226,85,107,.26); color:#fff; } .ft-pin-tag{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#e8b04b; background:rgba(232,176,75,.16); border-radius:5px; padding:1px 5px; margin-left:6px; } .ft-rw-section-title{ font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ft-mint,#5eead4); margin:2px 0 10px; } .ft-recap-day{ font-size:.78rem; color:var(--ft-muted,#8aa79d); margin-bottom:10px; } .ft-recap-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .ft-recap-card{ background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:11px; padding:11px 12px; } .ft-recap-card-h{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ft-muted,#8aa79d); margin-bottom:5px; } .ft-recap-card-b{ font-size:.92rem; font-weight:700; color:var(--ft-text,#e9fff8); } .ft-recap-v{ display:inline-block; font-weight:800; color:var(--ft-mint,#5eead4); margin-left:4px; } .ft-recap-v.up{ color:#4ade80; } .ft-recap-v.down{ color:var(--ft-danger,#e2556b); } .ft-recap-snip{ font-size:.78rem; font-weight:400; color:var(--ft-muted,#8aa79d); margin-top:4px; font-style:italic; } .ft-recap-empty{ grid-column:1 / -1; text-align:center; color:var(--ft-muted,#8aa79d); padding:18px 8px; } .ft-recap-row{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ft-text,#e9fff8); margin:7px 0; } @media (max-width:520px){ .ft-recap-cards{ grid-template-columns:1fr; } } /* system announcement posts (welcome / daily recap) */ .ft-sys-post{ background:linear-gradient(90deg,rgba(21,160,151,.12),rgba(94,234,212,.06)); border:1px solid rgba(94,234,212,.28); border-radius:10px; padding:8px 11px; line-height:1.5; } .ft-recap-post{ background:linear-gradient(90deg,rgba(232,176,75,.12),rgba(21,160,151,.06)); border-color:rgba(232,176,75,.3); } /* cosmetics buy-preview modal */ .ft-cos-card{ cursor:pointer; } .ft-cosm-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:20000; display:flex; align-items:center; justify-content:center; padding:18px; } .ft-cosm-modal{ position:relative; width:100%; max-width:380px; background:var(--ft-panel,#0b1714); border:1px solid var(--ft-line,#1f3a32); border-radius:16px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.55); } .ft-cosm-close{ position:absolute; top:6px; right:10px; background:none; border:none; color:var(--ft-muted,#8aa79d); font-size:24px; line-height:1; cursor:pointer; } .ft-cosm-close:hover{ color:var(--ft-text,#e9fff8); } .ft-cosm-preview{ border:1px solid var(--ft-line,#1f3a32); border-radius:12px; padding:24px 14px; text-align:center; background:var(--ft-panel-2,#0f1f1a); margin-bottom:14px; overflow:hidden; background-size:cover; background-position:center; } .ft-cosm-nameline{ font-size:1.4rem; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .ft-cosm-prevlabel{ margin-top:10px; font-size:.74rem; color:var(--ft-muted,#8aa79d); } .ft-cosm-info{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .ft-cosm-itemname{ font-weight:700; color:var(--ft-text,#e9fff8); } .ft-cosm-rar{ font-size:.72rem; text-transform:capitalize; color:var(--ft-muted,#8aa79d); } .ft-cosm-bal{ font-size:.78rem; color:var(--ft-muted,#8aa79d); margin-bottom:12px; } .ft-cosm-actions{ display:flex; gap:10px; margin-top:8px; } .ft-cosm-btn{ flex:1; padding:11px 12px; border-radius:10px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#0f1f1a); color:var(--ft-text,#e9fff8); font-weight:700; cursor:pointer; font-size:.9rem; } .ft-cosm-btn.buy{ background:var(--ft-teal,#15a097); border-color:var(--ft-teal,#15a097); color:#04110e; } .ft-cosm-btn.buy:hover{ filter:brightness(1.08); } .ft-cosm-btn.buy.off{ opacity:.5; cursor:not-allowed; } .ft-cosm-btn.equip{ background:var(--ft-mint,#5eead4); border-color:var(--ft-mint,#5eead4); color:#04110e; } .ft-cosm-btn.equipped{ background:transparent; color:var(--ft-mint,#5eead4); cursor:default; } .ft-cosm-btn.cancel{ background:transparent; color:var(--ft-muted,#8aa79d); flex:0 0 auto; padding-left:18px; padding-right:18px; } .ft-cosm-btn.cancel:hover{ color:var(--ft-text,#e9fff8); } /* equipped badge/title shown on the bottom username chip (confirmation) */ .ft-cos-self-extra{ margin-left:5px; display:inline-flex; gap:5px; align-items:center; vertical-align:middle; } .ft-cos-self-extra .ft-cos-title{ font-size:.66rem; } /* cosmetic badge/title shown next to names in the sidebar */ .ft-cos-sb-extra{ margin-left:4px; display:inline-flex; gap:4px; align-items:center; vertical-align:middle; } .ft-cos-sb-extra .ft-cos-title{ font-size:.62rem; } /* profile card modal */ .ft-pf-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:20001; display:flex; align-items:center; justify-content:center; padding:18px; } .ft-pf-modal{ position:relative; width:100%; max-width:420px; max-height:86vh; overflow-y:auto; background:var(--ft-panel,#0b1714); border:1px solid var(--ft-line,#1f3a32); border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.55); } .ft-pf-close{ position:absolute; top:8px; right:12px; background:none; border:none; color:var(--ft-muted,#8aa79d); font-size:24px; line-height:1; cursor:pointer; } .ft-pf-close:hover{ color:var(--ft-text,#e9fff8); } .ft-pf-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .ft-pf-avatar{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--ft-teal,#15a097); } .ft-pf-name{ font-size:1.2rem; font-weight:800; color:var(--ft-text,#e9fff8); } .ft-pf-stats{ display:flex; gap:10px; margin-bottom:12px; } .ft-pf-stat{ flex:1; text-align:center; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:12px; padding:12px 6px; } .ft-pf-stat-n{ font-size:1.25rem; font-weight:800; color:var(--ft-mint,#5eead4); } .ft-pf-stat-l{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-muted,#8aa79d); margin-top:2px; } .ft-pf-xpbar{ height:8px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:6px; overflow:hidden; } .ft-pf-xpfill{ height:100%; background:linear-gradient(90deg,var(--ft-teal,#15a097),var(--ft-mint,#5eead4)); } .ft-pf-xptext{ font-size:.72rem; color:var(--ft-muted,#8aa79d); margin:4px 0 4px; text-align:right; } .ft-pf-sec-title{ font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-muted,#8aa79d); margin:16px 0 8px; font-weight:700; } .ft-pf-chips, .ft-pf-badges{ display:flex; flex-wrap:wrap; gap:6px; } .ft-pf-chip{ font-size:.78rem; padding:4px 9px; border-radius:8px; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); color:var(--ft-text,#e9fff8); } .ft-pf-chip.rar-rare{ border-color:#4fc3f7; } .ft-pf-chip.rar-epic{ border-color:#a78bfa; } .ft-pf-chip.rar-legendary{ border-color:var(--ft-amber,#e8b04b); } .ft-pf-badge{ font-size:.78rem; padding:4px 9px; border-radius:8px; background:rgba(232,176,75,.12); border:1px solid rgba(232,176,75,.32); color:var(--ft-text,#e9fff8); } .ft-pf-badge .fa{ color:var(--ft-amber,#e8b04b); margin-right:3px; } .ft-pf-empty{ font-size:.8rem; color:var(--ft-muted,#8aa79d); } .ft-pf-admin{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--ft-line,#1f3a32); } .ft-pf-adminrow{ display:flex; gap:10px; } .ft-pf-adminrow label{ flex:1; display:flex; flex-direction:column; font-size:.72rem; color:var(--ft-muted,#8aa79d); gap:4px; } .ft-pf-adminrow input{ background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:8px; padding:8px; color:var(--ft-text,#e9fff8); } .ft-pf-hint{ font-size:.68rem; color:var(--ft-muted,#8aa79d); margin:6px 0; } .ft-pf-reason{ width:100%; background:var(--ft-panel-2,#0f1f1a); border:1px solid var(--ft-line,#1f3a32); border-radius:8px; padding:8px; color:var(--ft-text,#e9fff8); margin-bottom:8px; box-sizing:border-box; } .ft-pf-notify{ display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ft-text,#e9fff8); margin-bottom:10px; } .ft-pf-apply{ width:100%; padding:11px; border-radius:10px; border:1px solid var(--ft-teal,#15a097); background:var(--ft-teal,#15a097); color:#04110e; font-weight:700; cursor:pointer; } .ft-pf-apply:hover{ filter:brightness(1.08); } /* profile stats injected into the DM right-side panel */ .ft-pf-panelbox{ padding:4px 14px 16px; } .ft-pf-panelbox .ft-pf-stat-n{ font-size:1.05rem; } .ft-pf-panelbox .ft-pf-sec-title{ margin-top:12px; } .ft-pf-panelname{ font-size:1.05rem; font-weight:700; color:var(--ft-text); text-align:center; margin:2px 0 10px; } /* ===================== SOCIAL: follow / gifts / trades ===================== */ .ft-rar-common{ color:var(--ft-text,#e8eef0); } .ft-rar-uncommon{ color:#5eead4; } .ft-rar-rare{ color:#4fc3f7; } .ft-rar-epic{ color:#a78bfa; } .ft-rar-legendary{ color:var(--ft-amber,#e8b04b); font-weight:600; } /* profile action strip */ .ft-soc-actions{ margin-top:10px; } .ft-soc-counts{ display:flex; gap:14px; justify-content:center; font-size:.74rem; color:var(--ft-muted,#9fb0b3); margin-bottom:8px; } .ft-soc-counts b{ color:var(--ft-text,#e8eef0); font-size:.9rem; } .ft-soc-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .ft-soc-btn{ border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); color:var(--ft-text,#e8eef0); border-radius:var(--ft-radius-sm,8px); padding:7px 14px; font-size:.8rem; font-weight:600; cursor:pointer; transition:filter .15s ease, background .15s ease; } .ft-soc-btn:hover{ filter:brightness(1.12); } .ft-soc-btn.sm{ padding:4px 10px; font-size:.72rem; } .ft-soc-btn.ghost{ background:transparent; color:var(--ft-muted,#9fb0b3); } .ft-soc-btn.following{ background:transparent; border-color:var(--ft-teal,#15a097); color:var(--ft-teal,#15a097); } .ft-soc-btn:disabled{ opacity:.55; cursor:default; } .ft-soc-gift, .ft-soc-trade{ background:linear-gradient(180deg,var(--ft-teal,#15a097),#0f7f78); border-color:transparent; color:#fff; } /* badges on tabs */ .ft-soc-badge{ display:inline-block; min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:9px; background:var(--ft-danger,#e0564f); color:#fff; font-size:.62rem; font-weight:700; text-align:center; vertical-align:top; margin-left:2px; } /* overlay modal (sits above profile overlay) */ .ft-soc-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:20002; display:flex; align-items:center; justify-content:center; padding:18px; } .ft-soc-modal{ width:100%; max-width:440px; background:var(--ft-panel,#0f1c20); border:1px solid var(--ft-line,#2a3a3d); border-radius:var(--ft-radius,14px); box-shadow:var(--ft-shadow,0 18px 50px rgba(0,0,0,.5)); padding:18px; position:relative; max-height:86vh; overflow:auto; } .ft-soc-x{ position:absolute; top:10px; right:12px; background:none; border:none; color:var(--ft-muted,#9fb0b3); font-size:1.4rem; line-height:1; cursor:pointer; } .ft-soc-h{ font-weight:700; font-size:1rem; margin-bottom:12px; color:var(--ft-text,#e8eef0); } .ft-soc-msg{ font-size:.76rem; color:var(--ft-amber,#e8b04b); margin-top:8px; min-height:1em; } .ft-soc-sub{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ft-muted,#9fb0b3); margin:4px 0 6px; } /* gift modal tabs */ .ft-soc-tabs{ display:flex; gap:6px; margin-bottom:12px; } .ft-soc-gtab{ flex:1; border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); color:var(--ft-muted,#9fb0b3); border-radius:var(--ft-radius-sm,8px); padding:7px; font-size:.78rem; font-weight:600; cursor:pointer; } .ft-soc-gtab.active{ background:var(--ft-teal,#15a097); color:#fff; border-color:transparent; } .ft-soc-cos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:240px; overflow:auto; } .ft-soc-cos{ display:flex; justify-content:space-between; align-items:center; gap:6px; text-align:left; border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); color:var(--ft-text,#e8eef0); border-radius:var(--ft-radius-sm,8px); padding:8px 10px; font-size:.76rem; cursor:pointer; } .ft-soc-cos:hover{ filter:brightness(1.12); } .ft-soc-cos.sel{ border-color:var(--ft-teal,#15a097); box-shadow:0 0 0 1px var(--ft-teal,#15a097) inset; } .ft-soc-cos-p{ color:var(--ft-amber,#e8b04b); font-weight:700; white-space:nowrap; } /* trade builder */ .ft-soc-trade-col{ display:inline-block; width:calc(50% - 5px); vertical-align:top; } .ft-soc-trade-col:first-of-type{ margin-right:8px; } .ft-soc-trade-card{ border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); border-radius:var(--ft-radius-sm,8px); padding:10px 12px; margin-bottom:8px; } .ft-soc-trade-line{ font-size:.82rem; color:var(--ft-text,#e8eef0); } .ft-soc-trade-acts{ display:flex; gap:8px; margin-top:8px; } .ft-soc-trade-hist{ font-size:.76rem; color:var(--ft-muted,#9fb0b3); padding:5px 0; border-bottom:1px solid var(--ft-line,#2a3a3d); } /* friends list */ .ft-soc-friends-tabs{ display:flex; gap:6px; margin-bottom:10px; } .ft-soc-ftab{ flex:1; border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); color:var(--ft-muted,#9fb0b3); border-radius:var(--ft-radius-sm,8px); padding:6px; font-size:.74rem; font-weight:600; cursor:pointer; } .ft-soc-ftab.active{ background:var(--ft-teal,#15a097); color:#fff; border-color:transparent; } .ft-soc-row{ display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--ft-line,#2a3a3d); } .ft-soc-av{ width:30px; height:30px; border-radius:50%; object-fit:cover; } .ft-soc-rn{ flex:1; font-size:.84rem; color:var(--ft-text,#e8eef0); cursor:pointer; } .ft-soc-rn:hover{ text-decoration:underline; } /* gifts inbox */ .ft-soc-gift-row{ border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); border-radius:var(--ft-radius-sm,8px); padding:10px 12px; margin-bottom:8px; font-size:.82rem; color:var(--ft-text,#e8eef0); position:relative; } .ft-soc-gift-row.unopened{ border-color:var(--ft-teal,#15a097); } .ft-soc-gift-row .fa-gift{ color:var(--ft-amber,#e8b04b); } .ft-soc-gift-from{ font-weight:700; } .ft-soc-gift-act{ float:right; } .ft-soc-gift-note-d{ font-style:italic; color:var(--ft-muted,#9fb0b3); font-size:.76rem; margin-top:4px; } .ft-soc-opened{ font-size:.72rem; color:var(--ft-muted,#9fb0b3); } /* gift reveal */ .ft-soc-reveal{ text-align:center; padding:18px 8px; } .ft-soc-reveal-ico{ font-size:3rem; animation:ftSocPop .5s var(--ft-ease,ease); } .ft-soc-reveal-txt{ font-size:1.05rem; margin-top:10px; color:var(--ft-text,#e8eef0); } .ft-soc-reveal-from{ font-size:.8rem; color:var(--ft-muted,#9fb0b3); margin-top:4px; } @keyframes ftSocPop{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.18); } 100%{ transform:scale(1); opacity:1; } } /* ============================ BLACKJACK TABLE (revamp) ============================ */ .ft-bj-felt{ position:relative; margin:12px 0; padding:20px 16px 16px; overflow:hidden; border-radius:90px 90px 26px 26px; background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.10), transparent 55%), radial-gradient(140% 120% at 50% 40%, #1f7a52 0%, #176043 45%, #0e3f2c 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -30px 60px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.4); } .ft-bj-felt::after{ content:""; position:absolute; left:14px; right:14px; top:64px; bottom:60px; border:2px solid rgba(255,255,255,.14); border-radius:80px 80px 18px 18px; pointer-events:none; } .ft-bj-feltlight{ position:absolute; left:50%; top:-40%; width:80%; height:80%; transform:translateX(-50%); background:radial-gradient(circle, rgba(255,255,250,.16), transparent 60%); pointer-events:none; } .ft-bj-arc{ position:relative; text-align:center; font-size:.6rem; letter-spacing:.22em; font-weight:800; color:rgba(255,247,214,.66); text-transform:uppercase; margin-bottom:10px; text-shadow:0 1px 2px rgba(0,0,0,.4); } .ft-bj-row{ position:relative; display:flex; align-items:center; gap:12px; min-height:96px; padding:4px 6px; z-index:1; } .ft-bj-player{ justify-content:flex-end; } .ft-bj-seat{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:rgba(255,255,255,.5); width:46px; flex:0 0 auto; } .ft-bj-player .ft-bj-seat{ order:3; text-align:right; } .ft-bj-hand{ display:flex; align-items:center; flex-wrap:nowrap; min-height:92px; flex:1 1 auto; perspective:900px; } .ft-bj-player .ft-bj-hand{ justify-content:flex-end; } .ft-bj-badge{ flex:0 0 auto; min-width:34px; height:34px; line-height:30px; text-align:center; padding:0 9px; border-radius:18px; background:rgba(4,20,16,.7); border:2px solid rgba(255,255,255,.22); color:#eafff7; font-weight:800; font-size:.92rem; box-shadow:0 3px 8px rgba(0,0,0,.4); } .ft-bj-badge:empty{ display:none; } .ft-bj-badge.bust{ background:rgba(120,20,28,.85); border-color:#e2556b; color:#ffd9df; } .ft-bj-shoe{ position:absolute; top:8px; right:10px; width:34px; height:46px; border-radius:5px; background:linear-gradient(135deg,#243b34,#15241f); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.4); opacity:.85; } .ft-bj-shoe::before{ content:""; position:absolute; inset:4px 4px auto 4px; height:5px; border-radius:2px; background:rgba(255,255,255,.14); } /* cards (SVG) — bigger, fanned, animated */ .ft-card{ position:relative; width:62px; height:87px; border-radius:9px; background:transparent; flex:0 0 auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition:transform .18s ease; animation:none; box-shadow:none; } .ft-card-back{ background:transparent; box-shadow:none; } .ft-card svg{ display:block; width:100%; height:100%; border-radius:9px; } .ft-card + .ft-card{ margin-left:-22px; } .ft-bj-hand .ft-card:hover{ transform:translateY(-8px); z-index:5; } .ft-card-deal{ animation:ftCardDeal .42s cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(var(--i,0) * .12s); } .ft-card-flip{ animation:ftCardFlip .5s ease both; animation-delay:calc(var(--i,0) * .08s); transform-origin:center; } @keyframes ftCardDeal{ 0%{ transform:translate(150px,-170px) rotate(22deg) scale(.7); opacity:0; } 60%{ opacity:1; } 100%{ transform:translate(0,0) rotate(0) scale(1); opacity:1; } } @keyframes ftCardFlip{ 0%{ transform:rotateY(90deg) scale(.96); } 55%{ transform:rotateY(0deg) scale(1.04); } 100%{ transform:rotateY(0) scale(1); } } @media (max-width:520px){ .ft-card{ width:52px; height:73px; } .ft-card + .ft-card{ margin-left:-18px; } } /* result banner */ .ft-bj-banner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:6; pointer-events:none; opacity:0; font-weight:900; font-size:2rem; letter-spacing:.06em; text-transform:uppercase; } .ft-bj-banner.show{ animation:ftBjBanner 1.9s ease both; } .ft-bj-banner.win{ color:#7dffd0; text-shadow:0 0 22px rgba(94,234,212,.8),0 2px 6px rgba(0,0,0,.6); } .ft-bj-banner.lose{ color:#ff8a9c; text-shadow:0 0 18px rgba(226,85,107,.7),0 2px 6px rgba(0,0,0,.6); } .ft-bj-banner.push{ color:#ffd98a; text-shadow:0 0 18px rgba(232,176,75,.7),0 2px 6px rgba(0,0,0,.6); } .ft-bj-banner.bj{ color:#ffe27a; font-size:2.4rem; text-shadow:0 0 28px rgba(255,210,80,.95),0 2px 8px rgba(0,0,0,.7); } @keyframes ftBjBanner{ 0%{ opacity:0; transform:scale(.5); } 18%{ opacity:1; transform:scale(1.12); } 32%{ transform:scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:scale(1); } } /* chip tray */ .ft-bj-chips{ display:flex; gap:12px; justify-content:center; align-items:center; margin:14px 0 8px; flex-wrap:wrap; } .ft-bj-chip{ position:relative; width:48px; height:48px; border-radius:50%; cursor:pointer; color:#fff; font-weight:800; font-size:.82rem; border:3px dashed rgba(255,255,255,.75); box-shadow:inset 0 0 0 3px rgba(255,255,255,.12), 0 5px 10px rgba(0,0,0,.45); transition:transform .12s ease, filter .12s ease; } .ft-bj-chip span{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .ft-bj-chip:hover{ transform:translateY(-3px); filter:brightness(1.1); } .ft-bj-chip:active{ transform:translateY(0) scale(.94); } .ft-bj-chip.toss{ animation:ftChipToss .26s ease; } @keyframes ftChipToss{ 0%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(180deg); } 100%{ transform:translateY(0) rotate(360deg); } } .ft-bj-chip.c5{ background:radial-gradient(circle at 50% 35%, #e8625f, #c0322f); } .ft-bj-chip.c25{ background:radial-gradient(circle at 50% 35%, #36b06a, #1f7d49); } .ft-bj-chip.c100{ background:radial-gradient(circle at 50% 35%, #3a3f46, #16191d); } .ft-bj-chip.c500{ background:radial-gradient(circle at 50% 35%, #9a5ec8, #6a35a0); } .ft-bj-chip-clear{ background:radial-gradient(circle at 50% 35%, #5a6b66, #36433f); font-size:1.2rem; border-style:solid; border-color:rgba(255,255,255,.35); } /* ============================ PLINKO (revamp) ============================ */ .ft-plinko-stage{ position:relative; padding:6px 6px 8px; } .ft-plinko-board{ position:relative; border-radius:18px; padding:10px 8px 6px; overflow:hidden; background:radial-gradient(120% 100% at 50% 0%, rgba(94,234,212,.07), transparent 60%), linear-gradient(180deg,#0d2126,#08161a); box-shadow:inset 0 2px 0 rgba(255,255,255,.05), inset 0 -22px 42px rgba(0,0,0,.42), 0 10px 26px rgba(0,0,0,.45); border:1px solid rgba(94,234,212,.13); } .ft-plinko-canvas{ display:block; width:100%; max-width:320px; margin:0 auto; } .ft-plinko-recent{ position:absolute; top:10px; right:8px; display:flex; flex-direction:column; gap:5px; z-index:2; } .ft-plk-rchip{ font-size:.55rem; font-weight:800; color:#06231d; padding:3px 6px; border-radius:6px; min-width:30px; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.4); opacity:.92; animation:ftPlkRchip .3s ease; } @keyframes ftPlkRchip{ from{ transform:translateX(12px); opacity:0; } to{ transform:translateX(0); opacity:.92; } } .ft-plinko-buckets{ display:flex; gap:3px; justify-content:center; margin-top:10px; flex-wrap:nowrap; } .ft-bucket{ flex:1 1 0; min-width:0; text-align:center; font-size:.6rem; font-weight:800; padding:7px 0; border-radius:7px; color:#04201b; box-shadow:0 3px 7px rgba(0,0,0,.35); transition:transform .15s, box-shadow .15s; } .ft-bucket.big{ color:#1a1206; } .ft-bucket.hi{ animation:ftBucketHit .55s cubic-bezier(.2,.9,.3,1.2); z-index:2; position:relative; } @keyframes ftBucketHit{ 0%{ transform:translateY(0) scale(1); } 35%{ transform:translateY(-9px) scale(1.2); } 100%{ transform:translateY(0) scale(1.05); } } @media (max-width:520px){ .ft-plk-rchip{ font-size:.5rem; min-width:26px; padding:2px 4px; } .ft-bucket{ font-size:.54rem; padding:6px 0; } } /* ============================ SLOTS (themed machines, revamp) ============================ */ .ft-slot-rangetag{ background:rgba(232,176,75,.16); color:var(--ft-amber,#e8b04b); border:1px solid rgba(232,176,75,.4); padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; } .ft-slot-picker{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0; } .ft-slot-card{ position:relative; border:1px solid var(--ft-line,#1f3a32); border-radius:14px; padding:14px 8px 12px; cursor:pointer; text-align:center; color:#fff; overflow:hidden; transition:transform .14s ease, box-shadow .14s ease; } .ft-slot-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.45); } .ft-slot-card-ico{ font-size:2.2rem; line-height:1; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); } .ft-slot-card-name{ font-weight:800; font-size:.86rem; margin-top:6px; } .ft-slot-card-range{ font-size:.68rem; opacity:.85; margin-top:3px; } .ft-slot-card-top{ display:inline-block; margin-top:7px; font-size:.62rem; font-weight:800; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.32); } /* theme palettes (cards + cabinet share) */ .theme-penny{ background:linear-gradient(160deg,#3a2a16,#1d1409); border-color:#7a5a2e; } .theme-classic{ background:linear-gradient(160deg,#2a0f12,#160809); border-color:#7a2730; } .theme-cosmic{ background:linear-gradient(160deg,#1b1442,#0a0820); border-color:#4a3aa0; } .theme-gems{ background:linear-gradient(160deg,#0c2a2e,#06181a); border-color:#1d7d77; } .theme-highroller{ background:linear-gradient(160deg,#1a1408,#0a0804); border-color:#8a6a1e; } .ft-slot-card.theme-penny .ft-slot-card-top{ color:#ffd9a3; } .ft-slot-card.theme-classic .ft-slot-card-top{ color:#ffb3bd; } .ft-slot-card.theme-cosmic .ft-slot-card-top{ color:#c9bcff; } .ft-slot-card.theme-gems .ft-slot-card-top{ color:#a9f0ea; } .ft-slot-card.theme-highroller .ft-slot-card-top{ color:#ffe6a3; } /* cabinet */ .ft-slot-cabinet{ border-radius:16px; padding:12px; border:1px solid var(--ft-line,#1f3a32); } .ft-slot-back{ background:none; border:none; color:var(--ft-mint,#5eead4); font-weight:700; font-size:.78rem; cursor:pointer; padding:2px 0 8px; } .ft-slot-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; } .ft-slot-name{ font-weight:900; font-size:1rem; color:#fff; letter-spacing:.02em; } .ft-slot-range{ font-size:.72rem; color:rgba(255,255,255,.7); } .ft-slots-machine{ position:relative; margin:0 auto; padding:16px 14px; max-width:300px; border-radius:16px; overflow:hidden; background:rgba(0,0,0,.28); box-shadow:inset 0 2px 0 rgba(255,255,255,.06), inset 0 -16px 30px rgba(0,0,0,.4); } .ft-slot-glow{ position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.10), transparent 70%); } .ft-slots{ position:relative; display:flex; gap:8px; justify-content:center; z-index:1; } .ft-slots::after{ content:""; position:absolute; left:-4px; right:-4px; top:50%; height:2px; transform:translateY(-1px); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); pointer-events:none; } .ft-reel{ width:76px; height:84px; border-radius:12px; overflow:hidden; display:block; background:linear-gradient(180deg,#fbfdfc,#e7eeeb); box-shadow:inset 0 6px 10px rgba(0,0,0,.25), inset 0 -6px 10px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.4); } .ft-reel-strip{ display:flex; flex-direction:column; will-change:transform; } .ft-reel-cell{ height:84px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; } /* result + paytable + quick bet */ .ft-slot-result{ text-align:center; font-weight:800; font-size:1rem; min-height:1.2em; margin:12px 0 6px; color:var(--ft-muted,#8aa79d); } .ft-slot-result.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 14px rgba(94,234,212,.45); } .ft-slot-result.lose{ color:var(--ft-danger,#e2556b); } .ft-slot-paytable{ display:flex; flex-wrap:wrap; gap:5px 12px; justify-content:center; margin:6px 0 10px; } .ft-slot-pt-row{ display:flex; align-items:center; gap:5px; font-size:.72rem; color:rgba(255,255,255,.78); } .ft-slot-pt-ico{ font-size:1rem; } .ft-slot-pt-pay{ font-weight:700; } .ft-slot-betq{ display:flex; gap:6px; justify-content:center; margin:0 0 10px; } .ft-slot-betq button{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#16252a); color:var(--ft-text,#e8eef0); border-radius:8px; padding:5px 12px; font-size:.76rem; font-weight:700; cursor:pointer; } .ft-slot-betq button:hover{ filter:brightness(1.12); } /* FX particles */ .ft-slot-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; } .ft-slot-particle{ position:absolute; top:-12%; animation:ftSlotFall 1.2s ease-in forwards; will-change:transform,opacity; } @keyframes ftSlotFall{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(150px) rotate(220deg); opacity:0; } } .ft-slot-particle.puff{ animation:ftSlotPuff .9s ease-out forwards; } @keyframes ftSlotPuff{ 0%{ transform:scale(.4); opacity:0; } 30%{ opacity:.85; } 100%{ transform:scale(1.7) translateY(-14px); opacity:0; } } .ft-slot-jackpot{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:4; pointer-events:none; font-weight:900; font-size:2rem; letter-spacing:.08em; color:#ffe27a; opacity:0; text-shadow:0 0 24px rgba(255,210,80,.95),0 2px 8px rgba(0,0,0,.7); } .ft-slot-jackpot.show{ animation:ftSlotJack 2.1s ease both; } @keyframes ftSlotJack{ 0%{ opacity:0; transform:scale(.4) rotate(-6deg); } 20%{ opacity:1; transform:scale(1.16) rotate(2deg); } 36%{ transform:scale(1) rotate(0); } 82%{ opacity:1; } 100%{ opacity:0; } } /* unique per-theme WIN animations */ .ft-slot-cabinet.win.theme-penny{ animation:ftWinPenny .85s ease; } @keyframes ftWinPenny{ 0%,100%{ box-shadow:0 0 0 rgba(217,138,58,0);} 40%{ box-shadow:0 0 0 3px rgba(217,138,58,.6), 0 0 30px rgba(217,138,58,.55);} } .ft-slot-cabinet.win.theme-classic{ animation:ftWinClassic .8s steps(1) 2; } @keyframes ftWinClassic{ 0%{ box-shadow:0 0 0 3px #e2556b inset;} 50%{ box-shadow:0 0 0 3px #e8b04b inset;} 100%{ box-shadow:0 0 0 3px #e2556b inset;} } .ft-slot-cabinet.win.theme-cosmic{ animation:ftWinCosmic 1s ease; } @keyframes ftWinCosmic{ 0%{ filter:hue-rotate(0) brightness(1);} 50%{ filter:hue-rotate(120deg) brightness(1.25);} 100%{ filter:hue-rotate(0) brightness(1);} } .ft-slot-cabinet.win.theme-gems{ animation:ftWinGems .9s ease; } @keyframes ftWinGems{ 0%{ filter:hue-rotate(0) saturate(1); transform:scale(1);} 30%{ filter:hue-rotate(180deg) saturate(1.6); transform:scale(1.03);} 60%{ filter:hue-rotate(300deg) saturate(1.4);} 100%{ filter:hue-rotate(360deg) saturate(1); transform:scale(1);} } .ft-slot-cabinet.win.theme-highroller{ animation:ftWinHigh .7s ease; } @keyframes ftWinHigh{ 0%,100%{ transform:translateX(0); box-shadow:0 0 0 rgba(232,176,75,0);} 20%{ transform:translateX(-4px);} 40%{ transform:translateX(4px); box-shadow:0 0 30px rgba(232,176,75,.7);} 60%{ transform:translateX(-3px);} 80%{ transform:translateX(2px);} } /* unique per-theme LOSE animations */ .ft-slot-cabinet.lose.theme-penny{ animation:ftLoseDim .6s ease; } @keyframes ftLoseDim{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(.7);} } .ft-slot-cabinet.lose.theme-classic{ animation:ftLoseShake .45s ease; } @keyframes ftLoseShake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-5px);} 75%{ transform:translateX(5px);} } .ft-slot-cabinet.lose.theme-cosmic{ animation:ftLoseFlicker .55s steps(2) 2; } @keyframes ftLoseFlicker{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} } .ft-slot-cabinet.lose.theme-gems{ animation:ftLoseGray .7s ease; } @keyframes ftLoseGray{ 0%,100%{ filter:saturate(1);} 50%{ filter:saturate(.15) brightness(.85);} } .ft-slot-cabinet.lose.theme-highroller{ animation:ftLoseHigh .55s ease; } @keyframes ftLoseHigh{ 0%,100%{ transform:translateX(0); filter:brightness(1);} 30%{ transform:translateX(-4px); filter:brightness(.8);} 70%{ transform:translateX(4px);} } @media (max-width:520px){ .ft-reel{ width:64px; height:74px; } .ft-reel-cell{ height:74px; font-size:2.2rem; } } .ft-slots-machine::before{ content:none; } /* combined Gifts & Trades sub-tabs */ .ft-socx-tab{ flex:1; border:1px solid var(--ft-line,#2a3a3d); background:var(--ft-panel-2,#16252a); color:var(--ft-muted,#9fb0b3); border-radius:var(--ft-radius-sm,8px); padding:6px; font-size:.74rem; font-weight:600; cursor:pointer; } .ft-socx-tab.active{ background:var(--ft-teal,#15a097); color:#fff; border-color:transparent; } /* ---------- Scratch-off ticket shop ---------- */ .ft-scr-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:10px 0; } .ft-scr-card{ position:relative; text-align:left; border:2px solid var(--scr-accent,#d4a24a); border-radius:14px; padding:12px; cursor:pointer; color:var(--ft-text,#e9fff8); background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.25)); overflow:hidden; transition:transform .12s, box-shadow .12s; } .ft-scr-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.42); } .ft-scr-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% -12%, var(--scr-glow,rgba(212,162,74,.35)), transparent 60%); pointer-events:none; } .ft-scr-card-ico{ font-size:2rem; line-height:1; } .ft-scr-card-name{ font-weight:900; font-size:1rem; margin-top:4px; } .ft-scr-card-rule{ font-size:.7rem; color:var(--ft-muted,#8aa79d); min-height:2.4em; margin:3px 0 8px; } .ft-scr-card-foot{ display:flex; justify-content:space-between; align-items:center; font-size:.7rem; gap:6px; } .ft-scr-card-top{ color:var(--scr-accent,#d4a24a); font-weight:700; white-space:nowrap; } .ft-scr-card-price{ background:var(--scr-accent,#d4a24a); color:#10160f; font-weight:900; padding:3px 9px; border-radius:20px; white-space:nowrap; } .ft-scr-note{ text-align:center; color:var(--ft-muted,#8aa79d); padding:12px; } .ft-scr-note.err{ color:var(--ft-danger,#e2556b); font-weight:700; } .ft-scr-card.theme-classic,.ft-scr-ticket.theme-classic{ --scr-accent:#d4a24a; --scr-glow:rgba(212,162,74,.35); } .ft-scr-card.theme-emerald,.ft-scr-ticket.theme-emerald{ --scr-accent:#2bbd7e; --scr-glow:rgba(43,189,126,.35); } .ft-scr-card.theme-gold,.ft-scr-ticket.theme-gold{ --scr-accent:#e8b84b; --scr-glow:rgba(232,184,75,.4); } .ft-scr-card.theme-ruby,.ft-scr-ticket.theme-ruby{ --scr-accent:#d65a64; --scr-glow:rgba(214,90,100,.38); } .ft-scr-card.theme-diamond,.ft-scr-ticket.theme-diamond{ --scr-accent:#7fb0e6; --scr-glow:rgba(127,176,230,.4); } .ft-scr-ticket{ border:2px solid var(--scr-accent,#d4a24a); border-radius:16px; padding:14px; position:relative; max-width:440px; margin:0 auto; background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.28)); } .ft-scr-back{ background:none; border:none; color:var(--ft-muted,#8aa79d); font-weight:700; cursor:pointer; padding:0; font-size:.8rem; } .ft-scr-back:hover{ color:var(--ft-text,#e9fff8); } .ft-scr-ticket-head{ display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 2px; gap:8px; } .ft-scr-name{ font-weight:900; font-size:1.15rem; color:var(--scr-accent,#d4a24a); } .ft-scr-price{ font-size:.8rem; color:var(--ft-muted,#8aa79d); white-space:nowrap; } .ft-scr-headline{ font-size:.78rem; color:var(--ft-muted,#8aa79d); margin-bottom:10px; } .ft-scr-section{ margin-bottom:12px; } .ft-scr-sec-label{ font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--scr-accent,#d4a24a); margin-bottom:6px; font-weight:800; } .ft-scr-grid{ display:grid; gap:8px; max-width:360px; margin:0 auto; } .ft-scr-cell{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; } .ft-scr-cell.big{ aspect-ratio:1/1; max-width:120px; justify-self:center; } .ft-scr-content{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; user-select:none; -webkit-user-select:none; text-align:center; } .ft-scr-ico{ font-size:1.7rem; line-height:1.1; } .ft-scr-cell.big .ft-scr-ico{ font-size:2.1rem; font-weight:900; color:var(--scr-accent,#d4a24a); } .ft-scr-sub{ font-size:.66rem; font-weight:800; color:var(--scr-accent,#d4a24a); } .ft-scr-canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; -ms-touch-action:none; z-index:2; } .ft-scr-cell.revealed .ft-scr-content{ animation:ftScrPop .35s ease; } @keyframes ftScrPop{ 0%{ transform:scale(.6); opacity:.2; } 100%{ transform:scale(1); opacity:1; } } .ft-scr-cell.win{ border-color:var(--ft-mint,#5eead4); box-shadow:0 0 16px rgba(94,234,212,.6), inset 0 0 12px rgba(0,0,0,.4); animation:ftScrWin .7s ease; z-index:1; } @keyframes ftScrWin{ 0%,100%{ box-shadow:0 0 16px rgba(94,234,212,.6), inset 0 0 12px rgba(0,0,0,.4); } 50%{ box-shadow:0 0 26px rgba(255,224,122,.9), inset 0 0 12px rgba(0,0,0,.4); } } .ft-scr-msg{ text-align:center; font-weight:800; min-height:1.2em; margin:8px 0; color:var(--ft-muted,#8aa79d); } .ft-scr-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-scr-msg.lose{ color:var(--ft-danger,#e2556b); } .ft-scr-controls{ display:flex; gap:8px; justify-content:center; align-items:center; } .ft-scr-reveal{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#16252a); color:var(--ft-text,#e9fff8); border-radius:10px; padding:9px 14px; font-weight:700; cursor:pointer; } .ft-scr-reveal:hover{ filter:brightness(1.12); } .ft-scr-reveal:disabled{ opacity:.45; cursor:default; } .ft-scr-again{ flex:0 0 auto; } /* ---------- Horse racing ---------- */ .ft-horse-track{ position:relative; margin:10px 0; padding:8px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#16402a,#0c2417); border:1px solid #1f5a3a; box-shadow:inset 0 0 24px rgba(0,0,0,.4); } .ft-horse-lanes{ display:flex; flex-direction:column; gap:4px; } .ft-horse-lane{ position:relative; height:38px; border-radius:6px; border:1px solid rgba(255,255,255,.06); background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 18px, rgba(255,255,255,.07) 18px 36px); } .ft-horse-lane:nth-child(even){ background:repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 18px, rgba(0,0,0,.05) 18px 36px); } .ft-horse-laneno{ position:absolute; left:4px; top:50%; transform:translateY(-50%); font-size:.58rem; color:rgba(255,255,255,.35); font-weight:800; z-index:1; } .ft-horse-runner{ position:absolute; left:8px; top:50%; margin-top:-15px; transform:translateX(0); display:flex; align-items:center; will-change:transform; z-index:2; } .ft-horse-emoji{ font-size:1.7rem; line-height:1; transform-origin:center bottom; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); transform:scaleX(-1); animation:ftGallop .32s ease-in-out infinite; } @keyframes ftGallop{ 0%,100%{ transform:scaleX(-1) translateY(0) rotate(-3deg); } 50%{ transform:scaleX(-1) translateY(-4px) rotate(2deg); } } .ft-horse-tag{ display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 3px; margin-left:-3px; margin-top:-12px; border-radius:8px; font-size:.56rem; font-weight:900; color:#10160f; border:1px solid rgba(255,255,255,.6); } .ft-horse-finish{ position:absolute; top:4px; bottom:4px; right:8px; width:10px; border-radius:2px; z-index:1; background:repeating-conic-gradient(#fff 0% 25%, #111 0% 50%) 0/10px 10px; box-shadow:0 0 0 1px rgba(0,0,0,.4); } .ft-horse-finish.flash{ animation:ftFinFlash .5s ease 3; } @keyframes ftFinFlash{ 0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.4); } 50%{ box-shadow:0 0 14px 3px rgba(255,224,122,.9); } } .ft-horse-lane.win{ outline:2px solid var(--ft-mint,#5eead4); box-shadow:0 0 14px rgba(94,234,212,.5); } .ft-horse-lane.mine::after{ content:"\2605"; position:absolute; right:22px; top:50%; transform:translateY(-50%); color:var(--ft-amber,#e8b04b); font-size:.66rem; z-index:1; } .ft-horse-board{ display:flex; flex-direction:column; gap:5px; margin:10px 0; } .ft-horse-pick{ display:flex; align-items:center; gap:8px; text-align:left; padding:7px 10px; border-radius:10px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#16252a); color:var(--ft-text,#e9fff8); cursor:pointer; transition:border-color .12s, transform .1s; } .ft-horse-pick:hover{ border-color:var(--ft-teal,#15a097); transform:translateY(-1px); } .ft-horse-pick.sel{ border-color:var(--ft-amber,#e8b04b); box-shadow:inset 0 0 0 1px var(--ft-amber,#e8b04b); } .ft-horse-pick.mine .ft-horse-pname::after{ content:" \2605"; color:var(--ft-amber,#e8b04b); } .ft-horse-pick:disabled{ opacity:.55; cursor:default; } .ft-horse-silk{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:900; color:#10160f; border:2px solid rgba(255,255,255,.55); } .ft-horse-pname{ flex:1 1 auto; font-weight:700; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ft-horse-odds,.ft-horse-podds{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; line-height:1; min-width:44px; } .ft-horse-odds b{ color:var(--ft-mint,#5eead4); font-size:.9rem; } .ft-horse-podds b{ color:var(--ft-muted,#8aa79d); font-size:.82rem; } .ft-horse-odds small,.ft-horse-podds small{ font-size:.52rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ft-muted,#8aa79d); margin-top:2px; } .ft-horse-betbar{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; } .ft-horse-betpick{ font-size:.82rem; color:var(--ft-muted,#8aa79d); } .ft-horse-betpick b{ color:var(--ft-text,#e9fff8); } .ft-horse-bettype{ display:flex; gap:4px; } .ft-horse-tab{ border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#16252a); color:var(--ft-muted,#8aa79d); border-radius:8px; padding:5px 12px; font-weight:700; font-size:.76rem; cursor:pointer; } .ft-horse-tab.active{ background:var(--ft-teal,#15a097); color:#04110d; border-color:var(--ft-teal,#15a097); } .ft-horse-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:8px; color:var(--ft-muted,#8aa79d); } .ft-horse-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-horse-msg.lose{ color:var(--ft-danger,#e2556b); } .ft-horse-note{ text-align:center; color:var(--ft-muted,#8aa79d); padding:10px; } .ft-horse-countdown{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; pointer-events:none; font-size:3.4rem; font-weight:900; color:#fff; text-shadow:0 3px 16px rgba(0,0,0,.7); background:rgba(4,12,10,.42); } .ft-horse-countdown.go{ color:var(--ft-mint,#5eead4); font-size:3.9rem; letter-spacing:.04em; } .ft-horse-countdown.pulse{ animation:ftCount .42s ease; } @keyframes ftCount{ 0%{ transform:scale(.5); opacity:.15; } 60%{ transform:scale(1.18); opacity:1; } 100%{ transform:scale(1); opacity:1; } } /* ---------- Crash / Rocket ---------- */ .ft-cz-crash .ft-crash-stage{ position:relative; height:220px; border-radius:12px; overflow:hidden; border:1px solid #14463a; margin:10px 0; box-shadow:inset 0 0 28px rgba(0,0,0,.5); } .ft-crash-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } .ft-crash-mult{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3rem; font-weight:900; color:#e9fff8; text-shadow:0 3px 16px rgba(0,0,0,.6); z-index:2; pointer-events:none; } .ft-crash-mult.boom{ animation:ftCrashBoom .4s ease; } @keyframes ftCrashBoom{ 0%{ transform:translate(-50%,-50%) scale(1.35); } 100%{ transform:translate(-50%,-50%) scale(1); } } .ft-crash-state{ position:absolute; top:8px; left:10px; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8aa79d; z-index:2; } .ft-crash-stage.shake{ animation:ftCrashShake .42s ease; } @keyframes ftCrashShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } } .ft-crash-history{ display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; min-height:20px; } .ft-crash-hchip{ font-size:.62rem; font-weight:800; padding:2px 7px; border-radius:10px; } .ft-crash-hchip.r{ background:rgba(226,85,107,.22); color:#ff8d9b; } .ft-crash-hchip.t{ background:rgba(94,234,212,.16); color:#5eead4; } .ft-crash-hchip.g{ background:rgba(255,209,102,.2); color:#ffd166; } .ft-crash-controls{ display:flex; gap:8px; } .ft-crash-bet, .ft-crash-out{ flex:1 1 auto; } .ft-crash-out{ background:linear-gradient(135deg,#1f9e6e,#13724f); border-color:#1f9e6e; color:#fff; } .ft-crash-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:8px; color:var(--ft-muted,#8aa79d); } .ft-crash-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-crash-msg.lose{ color:var(--ft-danger,#e2556b); } /* ---------- Video Poker (Jacks or Better) ---------- */ .ft-vp-paytable{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px 10px; margin:8px 0 12px; padding:8px 10px; border-radius:10px; background:rgba(20,40,34,.5); border:1px solid var(--ft-line,#1f3a32); } .ft-vp-prow{ display:flex; justify-content:space-between; font-size:.66rem; color:var(--ft-muted,#8aa79d); padding:1px 4px; border-radius:5px; } .ft-vp-prow span:last-child{ color:var(--ft-mint,#5eead4); font-weight:800; } .ft-vp-prow.win{ background:rgba(255,224,122,.18); box-shadow:0 0 0 1px rgba(255,224,122,.55); color:#ffe27a; } .ft-vp-prow.win span:last-child{ color:#ffe27a; } .ft-vp-hand{ display:flex; gap:6px; justify-content:center; margin:12px 0 6px; } .ft-vp-card{ position:relative; flex:1 1 0; max-width:74px; aspect-ratio:5/7; border-radius:8px; cursor:pointer; user-select:none; -webkit-user-select:none; background:linear-gradient(160deg,#ffffff,#eef2f0); border:1px solid #c9d2cd; color:#16242a; box-shadow:0 3px 8px rgba(0,0,0,.4); transition:transform .12s, box-shadow .12s; } .ft-vp-card.red{ color:#d23b4e; } .ft-vp-card.empty{ background:repeating-linear-gradient(45deg,#16323a 0 8px,#12272e 8px 16px); border-color:#1f3a32; color:#33505a; cursor:default; box-shadow:none; } .ft-vp-card:not(.empty):hover{ transform:translateY(-3px); } .ft-vp-corner{ position:absolute; display:flex; flex-direction:column; align-items:center; line-height:.92; font-weight:800; font-size:.74rem; } .ft-vp-corner.tl{ top:4px; left:5px; } .ft-vp-corner.br{ bottom:4px; right:5px; transform:rotate(180deg); } .ft-vp-pip{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.75rem; } .ft-vp-card.empty .ft-vp-pip{ font-size:1.3rem; } .ft-vp-held{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:none; background:var(--ft-amber,#e8b04b); color:#10160f; font-size:.58rem; font-weight:900; letter-spacing:.06em; padding:2px 6px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.4); } .ft-vp-card.held{ box-shadow:0 0 0 3px var(--ft-amber,#e8b04b), 0 4px 10px rgba(0,0,0,.45); transform:translateY(-4px); } .ft-vp-card.held .ft-vp-held{ display:block; } .ft-vp-card.flip{ animation:ftVpFlip .42s ease; } @keyframes ftVpFlip{ 0%{ transform:rotateY(90deg) scale(.92); opacity:.15; } 100%{ transform:rotateY(0) scale(1); opacity:1; } } .ft-vp-hint{ text-align:center; font-size:.74rem; color:var(--ft-muted,#8aa79d); margin:4px 0 10px; } .ft-vp-controls{ display:flex; gap:8px; } .ft-vp-deal, .ft-vp-draw{ flex:1 1 auto; } .ft-vp-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:8px; color:var(--ft-muted,#8aa79d); } .ft-vp-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-vp-msg.lose{ color:var(--ft-danger,#e2556b); } /* ---------- Hi-Lo ---------- */ .ft-hilo-trail{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:30px; margin:6px 0; } .ft-hilo-stage{ display:flex; justify-content:center; margin:8px 0; min-height:120px; align-items:center; } .ft-hilo-cardface{ position:relative; border-radius:8px; background:linear-gradient(160deg,#ffffff,#eef2f0); border:1px solid #c9d2cd; color:#16242a; box-shadow:0 3px 8px rgba(0,0,0,.4); } .ft-hilo-cardface.red{ color:#d23b4e; } .ft-hilo-cardface.big{ width:96px; aspect-ratio:5/7; } .ft-hilo-cardface:not(.big){ width:30px; aspect-ratio:5/7; } .ft-hilo-cardface.empty{ background:repeating-linear-gradient(45deg,#16323a 0 8px,#12272e 8px 16px); border-color:#1f3a32; color:#33505a; box-shadow:none; } .ft-hilo-cardface.bust{ box-shadow:0 0 0 3px var(--ft-danger,#e2556b), 0 4px 10px rgba(0,0,0,.45); } .ft-hilo-cardface.flip{ animation:ftHiloFlip .35s ease; } @keyframes ftHiloFlip{ 0%{ transform:rotateY(90deg) scale(.92); opacity:.1; } 100%{ transform:rotateY(0) scale(1); opacity:1; } } .ft-hilo-corner{ position:absolute; display:flex; flex-direction:column; align-items:center; line-height:.9; font-weight:800; } .ft-hilo-cardface.big .ft-hilo-corner{ font-size:.82rem; } .ft-hilo-cardface:not(.big) .ft-hilo-corner{ font-size:.4rem; } .ft-hilo-corner.tl{ top:3px; left:4px; } .ft-hilo-corner.br{ bottom:3px; right:4px; transform:rotate(180deg); } .ft-hilo-pip{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .ft-hilo-cardface.big .ft-hilo-pip{ font-size:2.4rem; } .ft-hilo-cardface:not(.big) .ft-hilo-pip{ font-size:.95rem; } .ft-hilo-streak{ text-align:center; font-size:.82rem; color:var(--ft-muted,#8aa79d); min-height:1.2em; margin:6px 0; } .ft-hilo-streak b{ color:var(--ft-amber,#e8b04b); } .ft-hilo-guess{ display:flex; gap:8px; margin:8px 0; } .ft-hilo-btn{ flex:1 1 0; padding:12px 8px; border-radius:10px; border:1px solid var(--ft-line,#1f3a32); font-weight:800; font-size:.9rem; cursor:pointer; color:#fff; transition:transform .1s, filter .1s; } .ft-hilo-btn b{ display:block; font-size:.76rem; opacity:.95; margin-top:2px; } .ft-hilo-higher{ background:linear-gradient(135deg,#1f9e6e,#13724f); border-color:#1f9e6e; } .ft-hilo-lower{ background:linear-gradient(135deg,#c0392b,#922b21); border-color:#c0392b; } .ft-hilo-btn:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.1); } .ft-hilo-btn:disabled{ opacity:.4; cursor:default; } .ft-hilo-controls{ display:flex; gap:8px; } .ft-hilo-start, .ft-hilo-cash{ flex:1 1 auto; } .ft-hilo-cash{ background:linear-gradient(135deg,#e8b04b,#c98a2a); border-color:#e8b04b; color:#10160f; } .ft-hilo-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:8px; color:var(--ft-muted,#8aa79d); } .ft-hilo-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-hilo-msg.lose{ color:var(--ft-danger,#e2556b); } /* ---------- Money Wheel ---------- */ .ft-wheel-stage{ position:relative; width:300px; max-width:88%; margin:6px auto; aspect-ratio:1/1; } .ft-wheel-spinner{ width:100%; height:100%; } .ft-wheel-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); } .ft-wheel-rot{ transform-box:fill-box; transform-origin:center; } .ft-wheel-pointer{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:22px solid var(--ft-amber,#e8b04b); z-index:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); } .ft-wheel-load{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--ft-muted,#8aa79d); } .ft-wheel-tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:10px 0; } .ft-wheel-tile{ position:relative; padding:8px 2px; border-radius:10px; border:2px solid var(--tc); background:var(--ft-panel-2,#13242a); background:color-mix(in srgb, var(--tc) 16%, var(--ft-panel-2,#13242a)); color:var(--ft-text,#e7f0ec); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .1s; } .ft-wheel-tile:hover{ transform:translateY(-2px); } .ft-wheel-tile.has{ box-shadow:0 0 0 1px var(--tc) inset; } .ft-wheel-tile.land{ animation:ftWheelLand 1s ease; box-shadow:0 0 0 3px var(--ft-amber,#e8b04b), 0 0 14px var(--tc); } @keyframes ftWheelLand{ 0%,100%{ transform:scale(1); } 30%{ transform:scale(1.12); } } .ft-wheel-tv{ font-size:1.2rem; font-weight:900; color:var(--tc); } .ft-wheel-tp{ font-size:.62rem; color:var(--ft-muted,#8aa79d); font-weight:700; } .ft-wheel-chip{ position:absolute; top:-7px; right:-7px; background:var(--ft-amber,#e8b04b); color:#10160f; font-size:.62rem; font-weight:800; border-radius:10px; padding:1px 6px; box-shadow:0 1px 3px rgba(0,0,0,.4); } .ft-wheel-chiptray{ display:flex; gap:6px; justify-content:center; margin:6px 0; } .ft-wheel-cb{ padding:6px 12px; border-radius:20px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#13242a); color:var(--ft-text,#e7f0ec); font-weight:800; font-size:.8rem; cursor:pointer; } .ft-wheel-cb.sel{ background:var(--ft-teal,#2bbd9e); color:#06201b; border-color:var(--ft-teal,#2bbd9e); } .ft-wheel-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; } .ft-wheel-total{ flex:0 1 auto; font-size:.85rem; color:var(--ft-muted,#8aa79d); } .ft-wheel-total b{ color:var(--ft-amber,#e8b04b); } .ft-wheel-clear{ flex:0 0 auto; padding:8px 14px; border-radius:8px; border:1px solid var(--ft-line,#1f3a32); background:transparent; color:var(--ft-muted,#8aa79d); font-weight:700; cursor:pointer; } .ft-wheel-spin{ flex:1 1 140px; width:auto; min-width:0; margin-top:0; } .ft-wheel-history{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:24px; margin:4px 0; } .ft-wheel-hchip{ font-size:.72rem; font-weight:800; border-radius:6px; padding:2px 7px; } .ft-wheel-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:6px; color:var(--ft-muted,#8aa79d); } .ft-wheel-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-wheel-msg.lose{ color:var(--ft-danger,#e2556b); } /* ---------- Mines ---------- */ .ft-mines-setup{ display:flex; align-items:center; gap:8px; margin:4px 0 10px; flex-wrap:wrap; } .ft-mines-setlabel{ font-size:.8rem; color:var(--ft-muted,#8aa79d); font-weight:700; } .ft-mines-presets{ display:flex; gap:6px; flex-wrap:wrap; } .ft-mines-mp{ min-width:38px; padding:6px 10px; border-radius:20px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#13242a); color:var(--ft-text,#e7f0ec); font-weight:800; font-size:.8rem; cursor:pointer; } .ft-mines-mp.sel{ background:var(--ft-danger,#e2556b); color:#fff; border-color:var(--ft-danger,#e2556b); } .ft-mines-mp:disabled{ opacity:.5; cursor:default; } .ft-mines-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:320px; margin:0 auto 10px; } .ft-mines-tile{ aspect-ratio:1/1; border-radius:10px; border:1px solid var(--ft-line,#1f3a32); background:linear-gradient(160deg,#1b3640,#13262c); cursor:pointer; font-size:1.5rem; display:flex; align-items:center; justify-content:center; transition:transform .1s, filter .1s, background .2s; } .ft-mines-tile:not(:disabled):hover{ transform:translateY(-2px); filter:brightness(1.18); border-color:var(--ft-teal,#2bbd9e); } .ft-mines-tile:disabled{ cursor:default; } .ft-mines-tile.gem{ background:radial-gradient(circle at 38% 30%, #2f8f7e, #14463c); border-color:#37c9a6; box-shadow:0 0 10px rgba(55,201,166,.35); } .ft-mines-tile.bomb{ background:radial-gradient(circle at 38% 30%, #7a2230, #3a1118); border-color:var(--ft-danger,#e2556b); } .ft-mines-tile.bomb.dim{ opacity:.5; box-shadow:none; } .ft-mines-tile.bomb.boom{ box-shadow:0 0 0 3px var(--ft-danger,#e2556b), 0 0 16px rgba(226,85,107,.6); animation:ftMineBoom .5s ease; } .ft-mines-tile.flip{ animation:ftMineFlip .28s ease; } @keyframes ftMineFlip{ 0%{ transform:rotateY(80deg) scale(.9); opacity:.2; } 100%{ transform:rotateY(0) scale(1); opacity:1; } } @keyframes ftMineBoom{ 0%,100%{ transform:scale(1); } 35%{ transform:scale(1.16); } } .ft-mines-stat{ text-align:center; font-size:.82rem; color:var(--ft-muted,#8aa79d); min-height:1.2em; margin:4px 0 8px; } .ft-mines-stat b{ color:var(--ft-amber,#e8b04b); } .ft-mines-controls{ display:flex; gap:8px; } .ft-mines-start, .ft-mines-cash{ flex:1 1 auto; width:auto; margin-top:0; } .ft-mines-cash{ background:linear-gradient(135deg,#e8b04b,#c98a2a); border-color:#e8b04b; color:#10160f; } .ft-mines-msg{ text-align:center; font-weight:800; min-height:1.2em; margin-top:8px; color:var(--ft-muted,#8aa79d); } .ft-mines-msg.win{ color:var(--ft-mint,#5eead4); text-shadow:0 0 12px rgba(94,234,212,.4); } .ft-mines-msg.lose{ color:var(--ft-danger,#e2556b); } /* ---------- Work check-in counter ---------- */ .ft-rw-workcount{ font-size:.85rem; color:var(--ft-muted,#8aa79d); margin-top:8px; text-align:center; } .ft-rw-workcount b{ color:var(--ft-amber,#e8b04b); } /* ---------- Activity stats in Level tab ---------- */ .ft-rw-activity{ margin-top:14px; } .ft-rw-activity .ft-pf-sec-title{ margin-bottom:8px; } /* ---------- One-time message editing (modal) ---------- */ .message-edited{ font-size:.66rem; color:var(--ft-muted,#8aa79d); font-style:italic; margin:0 6px; opacity:.85; } .ft-editmodal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; display:flex; align-items:center; justify-content:center; padding:16px; } .ft-editmodal{ width:100%; max-width:440px; background:var(--ft-panel,#16242a); border:1px solid var(--ft-line,#1f3a32); border-radius:var(--ft-radius,14px); box-shadow:var(--ft-shadow,0 12px 40px rgba(0,0,0,.5)); padding:16px; } .ft-editmodal-title{ font-weight:800; font-size:1rem; color:var(--ft-text,#e7f0ec); margin-bottom:10px; } .ft-edit-input{ width:100%; min-height:96px; resize:vertical; border-radius:10px; border:1px solid var(--ft-line,#1f3a32); background:var(--ft-panel-2,#13242a); color:var(--ft-text,#e7f0ec); padding:10px 12px; font-size:.95rem; font-family:inherit; box-sizing:border-box; } .ft-editmodal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; } .ft-edit-save, .ft-edit-cancel{ padding:8px 16px; border-radius:8px; font-weight:700; font-size:.85rem; cursor:pointer; border:1px solid var(--ft-line,#1f3a32); } .ft-edit-save{ background:var(--ft-teal,#2bbd9e); color:#06201b; border-color:var(--ft-teal,#2bbd9e); } .ft-edit-save:disabled{ opacity:.5; cursor:default; } .ft-edit-cancel{ background:transparent; color:var(--ft-muted,#8aa79d); } .ft-edit-err{ color:var(--ft-danger,#e2556b); font-size:.78rem; margin-top:6px; min-height:1em; } /* ================= Sportsbook ================= */ .ft-rw-sportsbook{ padding:6px 2px 12px; } .ft-sb-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .ft-sb-balance{ font-size:1rem; color:var(--ft-text,#eaf4f0); } .ft-sb-views{ display:inline-flex; background:var(--ft-panel,#13241f); border:1px solid var(--ft-line,#244038); border-radius:999px; padding:3px; } .ft-sb-view{ border:0; background:transparent; color:var(--ft-muted,#8aa79d); padding:6px 14px; border-radius:999px; font-weight:600; cursor:pointer; font-size:.86rem; } .ft-sb-view.active{ background:var(--ft-teal,#2bbd9b); color:#04211b; } .ft-sb-leagues{ display:flex; gap:7px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; -webkit-overflow-scrolling:touch; } .ft-sb-league{ flex:0 0 auto; border:1px solid var(--ft-line,#244038); background:var(--ft-panel,#13241f); color:var(--ft-muted,#8aa79d); border-radius:999px; padding:6px 13px; font-weight:600; font-size:.84rem; cursor:pointer; white-space:nowrap; } .ft-sb-league.active{ background:linear-gradient(180deg,var(--ft-panel-2,#173029),var(--ft-panel,#13241f)); color:var(--ft-text,#eaf4f0); border-color:var(--ft-teal,#2bbd9b); } .ft-sb-games{ display:grid; gap:10px; } .ft-sb-empty{ color:var(--ft-muted,#8aa79d); text-align:center; padding:26px 10px; font-size:.92rem; } .ft-sb-game{ background:var(--ft-grad-panel,linear-gradient(180deg,#13241f,#0f1d19)); border:1px solid var(--ft-line,#244038); border-radius:var(--ft-radius,16px); padding:11px 13px; box-shadow:var(--ft-shadow,0 6px 18px rgba(0,0,0,.25)); } .ft-sb-game.live{ border-color:var(--ft-amber,#e8b84b); } .ft-sb-game-head{ display:flex; justify-content:flex-end; margin-bottom:4px; } .ft-sb-when{ font-size:.74rem; color:var(--ft-muted,#8aa79d); font-weight:600; } .ft-sb-when.live{ color:var(--ft-amber,#e8b84b); } .ft-sb-row{ display:flex; align-items:center; gap:10px; padding:5px 0; } .ft-sb-team{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; } .ft-sb-logo{ width:26px; height:26px; object-fit:contain; flex:0 0 auto; } .ft-sb-logo-x{ display:inline-block; width:26px; height:26px; border-radius:50%; background:var(--ft-panel-2,#173029); } .ft-sb-tname{ font-weight:600; color:var(--ft-text,#eaf4f0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ft-sb-rec{ font-size:.72rem; color:var(--ft-muted,#8aa79d); flex:0 0 auto; } .ft-sb-score{ font-weight:800; font-size:1.05rem; color:var(--ft-text,#eaf4f0); flex:0 0 auto; min-width:24px; text-align:right; } .ft-sb-odds{ flex:0 0 auto; min-width:62px; border:1px solid var(--ft-teal,#2bbd9b); background:rgba(43,189,155,.12); color:var(--ft-mint,#8ff0d6); font-weight:800; border-radius:10px; padding:7px 10px; cursor:pointer; font-size:.9rem; } .ft-sb-odds:hover{ background:var(--ft-teal,#2bbd9b); color:#04211b; } .ft-sb-note,.ft-sb-sec{ color:var(--ft-muted,#8aa79d); } .ft-sb-note{ font-size:.76rem; margin-top:12px; line-height:1.5; } .ft-sb-sec{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:14px 0 7px; } .ft-sb-bet{ background:var(--ft-panel,#13241f); border:1px solid var(--ft-line,#244038); border-radius:var(--ft-radius-sm,11px); padding:9px 12px; margin-bottom:8px; } .ft-sb-bet-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .ft-sb-bet-pick{ font-weight:700; color:var(--ft-text,#eaf4f0); } .ft-sb-bet-sub{ font-size:.74rem; color:var(--ft-muted,#8aa79d); margin:2px 0 4px; } .ft-sb-bet-line{ font-size:.84rem; color:var(--ft-muted,#8aa79d); } .ft-sb-pos{ color:var(--ft-text,#eaf4f0); } .ft-sb-pos.win{ color:var(--ft-mint,#8ff0d6); } .ft-sb-pos.lose{ color:var(--ft-danger,#e2556b); } .ft-sb-pill{ font-size:.68rem; font-weight:800; text-transform:uppercase; padding:2px 8px; border-radius:999px; letter-spacing:.03em; } .ft-sb-pill.open{ background:rgba(108,140,255,.16); color:#9db3ff; } .ft-sb-pill.win{ background:rgba(43,189,126,.18); color:#74e6ab; } .ft-sb-pill.lose{ background:rgba(226,85,107,.16); color:#f0939f; } .ft-sb-pill.void{ background:rgba(232,184,75,.16); color:#e8c97a; } /* bet slip */ .ft-sb-slip-ov{ position:fixed; inset:0; background:rgba(2,10,8,.62); z-index:99999; display:flex; align-items:center; justify-content:center; padding:18px; } .ft-sb-slip{ width:100%; max-width:340px; background:var(--ft-grad-panel,linear-gradient(180deg,#173029,#0f1d19)); border:1px solid var(--ft-line,#244038); border-radius:var(--ft-radius,16px); padding:16px 16px 14px; box-shadow:0 18px 50px rgba(0,0,0,.5); } .ft-sb-slip-h{ font-weight:800; font-size:1.02rem; color:var(--ft-text,#eaf4f0); margin-bottom:8px; } .ft-sb-slip-pick{ font-weight:700; color:var(--ft-text,#eaf4f0); font-size:1.05rem; } .ft-sb-slip-odds{ color:var(--ft-mint,#8ff0d6); font-weight:800; margin-left:6px; } .ft-sb-slip-sub{ font-size:.78rem; color:var(--ft-muted,#8aa79d); margin:2px 0 12px; } .ft-sb-slip-lbl{ display:block; font-size:.76rem; color:var(--ft-muted,#8aa79d); margin-bottom:4px; } .ft-sb-slip-amt{ width:100%; } .ft-sb-slip-quick{ display:flex; gap:6px; margin:8px 0; } .ft-sb-slip-quick button{ flex:1; border:1px solid var(--ft-line,#244038); background:var(--ft-panel,#13241f); color:var(--ft-muted,#8aa79d); border-radius:9px; padding:6px 0; font-weight:600; cursor:pointer; font-size:.82rem; } .ft-sb-slip-quick button:hover{ color:var(--ft-text,#eaf4f0); border-color:var(--ft-teal,#2bbd9b); } .ft-sb-slip-win{ font-size:.9rem; color:var(--ft-muted,#8aa79d); margin:4px 0; } .ft-sb-slip-pot{ color:var(--ft-mint,#8ff0d6); } .ft-sb-slip-msg{ color:var(--ft-danger,#e2556b); font-size:.78rem; min-height:1em; margin:4px 0; } .ft-sb-slip-btns{ display:flex; gap:8px; margin-top:8px; } .ft-sb-slip-btns button{ flex:1; border-radius:10px; padding:10px 0; font-weight:700; cursor:pointer; border:0; } .ft-sb-slip-cancel{ background:transparent; color:var(--ft-muted,#8aa79d); border:1px solid var(--ft-line,#244038) !important; } .ft-sb-slip-go{ background:var(--ft-teal,#2bbd9b); color:#04211b; } .ft-sb-slip-go:disabled{ opacity:.5; cursor:default; } /* cosmetic renting */ .ft-cos-btn.rent{ background:rgba(232,184,75,.14); color:var(--ft-amber,#e8b84b); border:1px solid var(--ft-amber,#e8b84b); } .ft-cos-btn.rent:hover{ background:var(--ft-amber,#e8b84b); color:#241c04; } .ft-cos-rented{ font-size:.66rem; font-weight:800; color:var(--ft-amber,#e8b84b); background:rgba(232,184,75,.12); border-radius:999px; padding:2px 7px; margin-right:5px; white-space:nowrap; } .ft-cos-card.rented{ border-color:rgba(232,184,75,.5); } .ft-cos-card-foot{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .ft-cos-card-foot .ft-cos-rar{ margin-right:auto; } /* ================= Arcade ================= */ .ft-rw-arcade{ padding:6px 2px 14px; } .ft-arc-top{ display:flex; justify-content:flex-end; margin-bottom:10px; } .ft-arc-balance{ font-size:1rem; color:var(--ft-text,#eaf4f0); } .ft-arc-grid{ display:grid; gap:10px; } .ft-arc-empty{ color:var(--ft-muted,#8aa79d); text-align:center; padding:24px 10px; } .ft-arc-card{ display:flex; align-items:center; gap:12px; background:var(--ft-grad-panel,linear-gradient(180deg,#13241f,#0f1d19)); border:1px solid var(--ft-line,#244038); border-radius:var(--ft-radius,16px); padding:11px 13px; box-shadow:var(--ft-shadow,0 6px 18px rgba(0,0,0,.25)); } .ft-arc-ico{ font-size:1.9rem; width:44px; text-align:center; flex:0 0 auto; } .ft-arc-meta{ flex:1 1 auto; min-width:0; } .ft-arc-name{ font-weight:700; color:var(--ft-text,#eaf4f0); } .ft-arc-blurb{ font-size:.76rem; color:var(--ft-muted,#8aa79d); margin:1px 0; } .ft-arc-best{ font-size:.74rem; color:var(--ft-amber,#e8b84b); font-weight:700; } .ft-arc-actions{ display:flex; gap:6px; flex:0 0 auto; } .ft-arc-play{ border:1px solid var(--ft-teal,#2bbd9b); background:rgba(43,189,155,.14); color:var(--ft-mint,#8ff0d6); font-weight:800; border-radius:10px; padding:8px 12px; cursor:pointer; white-space:nowrap; } .ft-arc-play:hover{ background:var(--ft-teal,#2bbd9b); color:#04211b; } .ft-arc-scores{ border:1px solid var(--ft-line,#244038); background:var(--ft-panel,#13241f); color:var(--ft-amber,#e8b84b); border-radius:10px; padding:8px 10px; cursor:pointer; } .ft-arc-note{ font-size:.76rem; color:var(--ft-muted,#8aa79d); margin-top:12px; line-height:1.5; } /* overlay */ .ft-arc-ov{ position:fixed; inset:0; background:rgba(2,10,8,.72); z-index:99999; display:flex; align-items:center; justify-content:center; padding:14px; } .ft-arc-modal{ width:100%; max-width:440px; max-height:90vh; overflow:auto; background:var(--ft-grad-panel,linear-gradient(180deg,#173029,#0f1d19)); border:1px solid var(--ft-line,#244038); border-radius:var(--ft-radius,16px); box-shadow:0 18px 50px rgba(0,0,0,.55); } .ft-arc-modal.sm{ max-width:340px; } .ft-arc-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--ft-line,#244038); } .ft-arc-title{ font-weight:800; color:var(--ft-text,#eaf4f0); flex:1 1 auto; } .ft-arc-hud{ font-weight:700; color:var(--ft-mint,#8ff0d6); font-size:.88rem; } .ft-arc-x{ border:0; background:transparent; color:var(--ft-muted,#8aa79d); font-size:1.1rem; cursor:pointer; line-height:1; } .ft-arc-stage{ display:flex; align-items:center; justify-content:center; padding:14px; min-height:300px; user-select:none; } .ft-arc-canvas{ max-width:100%; height:auto; display:block; margin:0 auto; touch-action:none; border-radius:10px; background:#0e1b17; } .ft-arc-foot{ padding:12px 14px 14px; border-top:1px solid var(--ft-line,#244038); } .ft-arc-result{ text-align:center; font-size:1rem; color:var(--ft-text,#eaf4f0); margin-bottom:8px; } .ft-arc-foot-btns{ display:flex; gap:8px; margin-top:10px; } .ft-arc-foot-btns button{ flex:1; border-radius:10px; padding:10px 0; font-weight:700; cursor:pointer; border:0; } .ft-arc-again{ background:var(--ft-teal,#2bbd9b); color:#04211b; } .ft-arc-close{ background:transparent; color:var(--ft-muted,#8aa79d); border:1px solid var(--ft-line,#244038) !important; } .ft-arc-lb-list{ list-style:none; margin:0; padding:0; counter-reset:r; } .ft-arc-lb-list li{ counter-increment:r; display:flex; align-items:center; justify-content:space-between; padding:5px 2px; border-bottom:1px dashed var(--ft-line,#244038); font-size:.86rem; } .ft-arc-lb-list li::before{ content:counter(r); width:20px; color:var(--ft-muted,#8aa79d); font-weight:700; } .ft-arc-lb-n{ flex:1 1 auto; color:var(--ft-text,#eaf4f0); margin-left:4px; } .ft-arc-lb-s{ color:var(--ft-amber,#e8b84b); font-weight:800; } .ft-arc-lb-empty{ color:var(--ft-muted,#8aa79d); text-align:center; padding:12px; font-size:.86rem; } /* 2048 */ .ft-2048{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:300px; max-width:100%; } .ft-2048-c{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:800; font-size:1.4rem; background:rgba(255,255,255,.05); color:#04211b; } .ft-2048-c:empty,.ft-2048-c.v0{ background:rgba(255,255,255,.05); } .ft-2048-c.v2{ background:#cfeee4; } .ft-2048-c.v4{ background:#a9e6d2; } .ft-2048-c.v8{ background:#8ff0d6; } .ft-2048-c.v16{ background:#5fd6b6; } .ft-2048-c.v32{ background:#2bbd9b; } .ft-2048-c.v64{ background:#1f9c84; color:#fff; } .ft-2048-c.v128{ background:#e8c97a; } .ft-2048-c.v256{ background:#e8b84b; } .ft-2048-c.v512{ background:#e09a2e; color:#fff; } .ft-2048-c.v1024{ background:#e2766b; color:#fff; } .ft-2048-c.v2048,.ft-2048-c.v4096{ background:#e2556b; color:#fff; } /* memory */ .ft-mem{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:320px; max-width:100%; } .ft-mem-c{ aspect-ratio:1; border:1px solid var(--ft-line,#244038); border-radius:10px; background:var(--ft-panel-2,#173029); cursor:pointer; font-size:1.7rem; display:flex; align-items:center; justify-content:center; } .ft-mem-c .ft-mem-f{ opacity:0; transition:opacity .12s; } .ft-mem-c.open .ft-mem-f,.ft-mem-c.done .ft-mem-f{ opacity:1; } .ft-mem-c.open{ background:var(--ft-panel,#13241f); border-color:var(--ft-teal,#2bbd9b); } .ft-mem-c.done{ background:rgba(43,189,155,.18); border-color:var(--ft-teal,#2bbd9b); cursor:default; } /* whack */ .ft-whack-time{ text-align:center; font-weight:800; font-size:1.1rem; color:var(--ft-amber,#e8b84b); margin-bottom:10px; } .ft-whack{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:300px; max-width:100%; } .ft-whack-h{ aspect-ratio:1; border:0; border-radius:50%; background:#0c1714; box-shadow:inset 0 6px 14px rgba(0,0,0,.5); overflow:hidden; position:relative; cursor:pointer; } .ft-whack-m{ position:absolute; left:0; right:0; bottom:-4px; font-size:2rem; transform:translateY(110%); transition:transform .09s; } .ft-whack-h.up .ft-whack-m{ transform:translateY(0); } /* arcade: desktop-only badge + lock */ .ft-arc-desk{ display:inline-block; margin-left:8px; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#9db3ff; background:rgba(108,140,255,.16); border:1px solid rgba(108,140,255,.35); border-radius:999px; padding:2px 7px; vertical-align:middle; } .ft-arc-card.locked{ opacity:.72; } .ft-arc-play.locked{ border-color:var(--ft-line,#244038); background:var(--ft-panel,#13241f); color:var(--ft-muted,#8aa79d); cursor:not-allowed; }