/* Caipivara — per-game palette and fonts. * * Linked from index.html rather than bundled, so the look of a deployed build can be changed * without rebuilding it. The canvas reads the same properties through src/game/theme.ts, so a * colour has exactly one source of truth. */ @font-face { font-family: 'Geologica Mono'; src: url(font/Geologica/GeologicaRoman-Black-mono.ttf); } /* 23 MB, and roughly half of public/. It is genuinely used: gg-fast-components' ChatPage sets `font-family: "Geologica", system-ui, "Noto Color Emoji"`, so chat emoji fall back to it. Dropping it means relying on the OS emoji font. */ @font-face { font-family: 'Noto Color Emoji'; src: url(font/NotoColorEmoji-Regular.ttf); } @font-face { font-family: 'TitanOne'; src: url(font/TitanOne.ttf); } @font-face { font-family: 'TurboJungle'; src: url(font/TurboJungle.woff2); } /* Alias families matching the asset aliases in game.json `assets.fonts`, so the canvas can reference a font by the same name the loader registered. */ @font-face { font-family: 'multiplierFont'; src: url(font/TitanOne.ttf); } @font-face { font-family: 'cashoutPopupFont'; src: url(font/TurboJungle.woff2); } :root { /* Loading */ --loading-bg: linear-gradient(180deg, #461C11 0%, #A04D12 100.02%); --progressbar-bg: #172C1E; --progressbar-border: 2px solid #172C1E; --progress-bg: linear-gradient(90deg, #32A5A6 0%, #A5F9F9 100%); /* Generic */ --base-bg: #311601; --menu-bg: #7C3006; --menu-item-bg-color: #48200D; --menu-item-hover-bg-color: #914A48; --menu-item-active-bg-color: #5C1413; --menu-item-border-bottom: none; --surface-bg: #481E0A; --header-border-bottom: 1px solid #FFFFFF26; --surface-border: 1px solid #8A4337; --surface-border-radius: 12px; --divider-bg: #fff; --default-text: #ffffff; --accent-text: #6cf5fff8; --success-bg: #29a909fd; --success-color: #fff; --canvas-bg-image: url(bg_blur.png); --loader-bg: #F99E33; --scrollbar-bg: #F89D33; --round-info-bg: #161718; --round-info-border: 1px solid transparent; --round-info-header-bg: rgb(0, 0, 0); --round-info-label-text: #999999fa; --round-info-value-bg: rgba(0, 0, 0, 0.5); --history-pill-bg: #271413; --history-pill-active-bg: #7C3006; --history-pill-border: 1px solid #CE8D3D; --history-pill-active-border: 1px solid #CE8D3D; --history-pill-border-radius: 50px; --history-open-btn-border-radius: 13px; --history-open-btn-bg: #271413; --history-open-btn-border: 1px solid #CE8D3D; --history-open-btn-hover-bg: #70533D; --history-open-btn-hover-border: 1px solid #CE8D3D; --history-open-btn-active-bg: #00000081; --history-open-btn-text: #ffffff; --history-open-btn-active-border: 1px solid #fff; --history-item-active-bg: #955F1F; --history-item-active-text: #88ff00; --history-item-active-border: 1px solid #F99E33; --history-item-bg: #481E0A; --history-item-border: 1px solid #F99E33; --history-open-bg: #48200D; --history-open-border: 1px solid #F99E33; --history-header-open-bg: #7C3006; --history-header-open-border-bottom: 1px solid #F99E33; --history-load-more-btn-bg: linear-gradient(0deg, #CC7816 41%, #F99E33 60%); --history-load-more-btn-color: #000000; --history-load-more-btn-border: 1px solid #48200D; --bet-history-load-more-button-bg: var(--history-load-more-btn-bg); --bet-history-load-more-button-hover-bg: linear-gradient(0deg, #F99E33 41%, #FFB265 60%); --bet-history-load-more-button-active-bg: linear-gradient(0deg, #B36A13 41%, #CC7816 60%); --bet-history-load-more-button-border: var(--history-load-more-btn-border); --bet-history-load-more-button-text-color: var(--history-load-more-btn-color); --bet-history-modal-bg: var(--history-open-bg); --bet-history-modal-border: var(--history-open-border); --bet-history-modal-header-bg: var(--history-header-open-bg); --myBets-row-bg: #311000; --myBets-row-border: 1px solid #6C3A00; --myBets-row-bottom-bg: #6C2301; --myBets-row-bottom-border: 1px solid #6C3A00; --myBets-row-win-bg: #311000; --myBets-balance-header-color: var(--default-text); --myBets-initial-balance-color: #F99E33; --header-howtoplay-bg: transparent; --header-howtoplay-border: none; --header-howtoplay-text: #fff; --header-howtoplay-hover-text: #CBFF50; --header-howtoplay-active-text: #F03132; --header-howtoplay-border-radius: 20px; /* Menu */ --change-avatar-btn-border-radius: 999px; --change-avatar-btn-bg: #48200D; --change-avatar-btn-border: 1px solid #D45C00; --change-avatar-btn-text: #fff; --toggle-active-bg: #FFAB49; --toggle-active-border: solid 1px #fff; /* Tabs */ --tab-bg: #35040A; --tab-selected-bg: linear-gradient(0deg, #CC7816 41%, #F99E33 60%); --tab-selected-box-shadow: 0 1px 4px 1px #FFC98B inset; --tab-border: none; --tab-border-radius: 40px; --tab-text: #97989b; --tab-selected-border: 1px solid transparent; --tab-selected-border-radius: 10px; --tab-selected-text: #40151A; --tab-hover-text: #fff; --tab-border-radius: 999px; --sub-tab-bg: #35040A; --sub-tabs-border-radius: 999px; --sub-tab-text: #9F8A8D; --sub-tab-selected-bg: linear-gradient(0deg, #CC7816 41%, #F99E33 60%); --sub-tab-selected-border: none; --top-bets-big-win-item-header-bg: #955F1F; --top-bets-big-win-item-header-border: 1px solid #35040A; --top-bets-big-win-item-footer-bg: #35040A; --top-bets-big-win-item-footer-border: 1px solid #35040A; --top-bets-big-win-item-multiplier-pill-bg: #271413; --top-bets-big-win-item-multiplier-pill-border: 1px solid #CE8D3D; --top-bets-multipliers-bg: #48200D; --top-bets-multipliers-border: 1px solid #F99E33; --top-bets-multipliers-highlighted-bg: #955F1F; --top-bets-multipliers-highlighted-border: 1px solid #F99E33; --top-bets-multipliers-pill-border-radius: 99px; --top-bets-multipliers-pill-bg: #271413; --top-bets-multipliers-pill-border: 1px solid #CE8D3D; --myBets-multiplier-pill-border-radius: 999px; /* Bet Form */ --betform-bg: linear-gradient(180deg, #CE6915 0%, #8A350C 72.12%); --auto-section-border: 2px solid #40151A; --bet-stake-input-btn-bg: #FFAB49; --bet-stake-input-btn-icon-color: #40151A; --bet-stake-input-btn-border-radius: 50%; --bet-stake-input-btn-border: 1px solid transparent; --bet-stake-input-border-radius: 40px; --bet-stake-input-btn-hover-bg:#FFC077; --bet-stake-input-btn-active-bg: #E3871C; --bet-preset-bg: linear-gradient(0deg, #CC7816 41%, #F99E33 60%); --bet-preset-hover-bg: #FFC077; --bet-preset-active-bg: #E3871C; --bet-preset-text: #40151A; --bet-preset-radius: 100px; --bet-preset-border: 1px solid #40151A; --betform-border: 2px solid #40151A; --betform-cancel-border: #F5543E; --betform-cashout-border: #F5C83E; /* Add Slot Button */ --bet-form-add-form-button-bg: #40151A; --bet-form-add-form-button-hover-bg: #40151A; --bet-form-add-form-button-color: #FFBD00; --bet-form-remove-button-bg: #40151A; --bet-form-remove-button-hover-bg: #40151A; --bet-form-remove-button-color: #FFBD00; --bet-form-remove-button-border-radius: 50%; /* Scoreboard */ --all-bets-item-bg: #48200D; --all-bets-item-border: 1px solid #F99E33; --all-bets-item-win-bg: #955F1F; --all-bets-item-win-border: 1px solid #F99E33; --all-bets-item-win-multiplier-pill-bg: #fff; --myBets-multiplier-pill-bg: #271413; --myBets-multiplier-pill-color: #293036; --myBets-multiplier-pill-border: 1px solid #ce8d3d; /* Header */ --header-balance-text: #CBFF50; --header-currency-symbol-text: #9ea0a3fd; /* Miscellaneous */ --disabled-opacity: 0.5; /* Bet Button */ --bet-form-bet-button-font-family: "TitanOne"; --bet-form-bet-button-variant-bet-text-stroke-width: 0.5px; --bet-form-bet-button-variant-bet-text-stroke-color: #40151A; --bet-form-bet-button-variant-bet-text-shadow: 0 1.5px 0 #540C15; --bet-form-bet-button-border-radius: 18px; --bet-form-bet-button-variant-bet-base: transparent; --bet-form-bet-button-variant-bet-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #FFC115; --bet-form-bet-button-variant-bet-border: none; --bet-form-bet-button-variant-bet-text: #fff; --bet-form-bet-button-variant-bet-hover-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #FFD972; --bet-form-bet-button-variant-bet-active-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #E6A900; --bet-form-bet-button-box-shadow: 0 -2px 0 3px #471F01 inset, 0 4px 4px 0.5px rgba(255, 242, 206, 0.40) inset, 0 2px 5px 0 #540C15; --betbutton-shadow: 0 -2px 0 3px #471F01 inset, 0 4px 4px 0.5px rgba(255, 242, 206, 0.40) inset, 0 2px 5px 0 #540C15; --header-bar-bg: #311601; --scoreboard-pill-bg: #271413; --scoreboard-pill-border: 1px solid #CE8D3D; --bet-preset-hover-fill: #FFC077; --bet-preset-active-fill: #E3871C; --bet-form-autoplay-hover-fill: #FFC077; --history-title-border-bottom: 1px solid #F99E33; --history-title-radius: 12px; --bet-stake-input-btn-width: 24px; --bet-form-bet-button-mobile-font-weight: bold; --bet-form-bet-button-variant-cancel-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #FF2361; --bet-form-bet-button-variant-cancel-border: none; --bet-form-bet-button-variant-cancel-hover-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #FF5686; --bet-form-bet-button-variant-cancel-active-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #E5275D; --bet-form-bet-button-variant-cashout-border: none; --bet-form-bet-button-variant-cashout-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #A5E10E; --bet-form-bet-button-variant-cashout-text: #FFF; --bet-form-bet-button-variant-cashout-hover-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #A3ED7A; --bet-form-bet-button-variant-cashout-active-bg: linear-gradient(180deg, rgba(255, 212, 50, 0.10) 0%, rgba(210, 241, 14, 0.10) 100%), #5DE014; /* --bet-form-bet-button-variant-cashedout-bg: MAGENTA; --bet-form-bet-button-variant-cashedout-border: 2px solid rgba(210, 252, 255, 0.55); --bet-form-bet-button-variant-cashedout-text: #FFF; --bet-form-bet-button-variant-cashedout-hover-bg: rgba(32, 30, 35, 0.90); --bet-form-bet-button-variant-cashedout-hover-border: 2px solid rgba(210, 252, 255, 0.55); --bet-form-bet-button-variant-cashedout-hover-text: #FFF; */ /* Autoplay */ --autoplay-header-bg: #48200D; --autoplay-section-item-bg: #48200D; --autoplay-selection-button-bg: #48200D; --autoplay-selection-button-border: 1px solid #F99E33; --autoplay-selection-button-color: #fff; --autoplay-selection-button-hover-bg: #48200D; --autoplay-selection-button-hover-border: 1px solid #fff; --autoplay-selection-button-hover-color: #fff; --autoplay-selection-button-active-bg: #95643A; --autoplay-selection-button-active-border: 1px solid #F99E33; --autoplay-selection-button-active-color: #fff; --autoplay-input-bg: #40151A; --autoplay-alert-bg: linear-gradient(0deg, #CC7816 41%, #F99E33 60%); --autoplay-alert-color: #48200D; --autoplay-confirmation-modal-center-bg: #48200D; --bet-form-autoplay-bg: #FFAB49; --bet-form-autoplay-hover-bg: #FFC077; --bet-form-autoplay-border: none; --bet-form-autoplay-border-radius: 17px; --bet-form-autoplay-active-bg: #F03132; --bet-form-autoplay-active-border: solid 1px #ff7171fc; --bet-form-autoplay-text: #48200D; --bet-form-autoplay-active-text: #fff; --bet-form-autocashout-input-bg: #40151A; /* Modal */ --generic-modal-bg: #311601; --generic-modal-header-bg: #7C3006; --generic-modal-footer-bg: #7C3006; --generic-modal-header-text: #fff; --generic-modal-border: 1px solid #F99E33; --generic-modal-close-button-bg: #F99E33; --generic-modal-close-button-border: none; --generic-modal-close-button-hover-bg: #FFC077; /* Game Limits Modal */ --limits-modal-value-pill-bg: #4F9E22; --game-limits-item-bg: transparent; --game-limits-item-border: 1px solid #F99E33; --game-round-info-item-bg:#271413; /*Chat*/ --chat-input-bg: #fff; --chat-input-text: #ffffff; --chat-emoji-picker-container-bg: #955F1F; /*Error dialog*/ --error-dialog-bg: #7C3006; --error-dialog-border: 1px solid #48200D; --error-dialog-button-bg: #F99E33; --error-dialog-button-bg-gradient: linear-gradient(0deg, #CC7816 41%, #F99E33 60%); --error-dialog-button-border: 1px solid #48200D; --error-dialog-active-button-bg: rgb(245, 135, 8); --error-dialog-button-text-color: #48200D; --error-dialog-button-active-text-color: #fff; /*Cashout Announcer*/ --cashout-announcer-bg: #123405fd; --cashout-announcer-border: 2px solid #2c510cf9; --cashout-announcer-wonbox-bg: green; --cashout-announcer-label-text-color: white; --cashout-announce-outter-box-label-text-color: green; --cashout-announce-outter-box-value-text-color: #FFFFFF; --cashout-announcer-label-icon-color: #FFFFFF; --cashout-announcer-close-btn-bg: green; .history-round-info { --generic-modal-bg: #48200D; } .bet-history-modal { --generic-modal-bg: #48200D; } /* .modal-variant1 { --generic-modal-bg: #00306F; --generic-modal-header-bg: #226ACA; --generic-modal-footer-bg: #226ACA; } .modal-variant2 { --generic-modal-bg: #061F40; --generic-modal-header-bg: #161718; --generic-modal-footer-bg: #161718; } */ /* --------------------------------------------------------------------------- Properties the shared src/ reads that Caipivara's bundled palette never defined. Without them the DOM renders unstyled and the canvas silently uses the hardcoded fallbacks in getCssVar(name, fallback). --------------------------------------------------------------------------- */ /* Canvas. This game's art is Spine and fully covers the canvas, so the canvas itself is transparent over the bg_blur DOM background. */ --canvas-bg-alpha: 0; /* Multiplier. These are the values Multiplier.ts used to hardcode. */ --multiplier-crashed-label-color: #FF5B77, #FD365B, #FC385A, #FF7683; --multiplier-crash-fill: #FF5B77, #FD365B, #FC385A, #FF7683; /* Cashout popup text fill, previously a four-stop gradient of one colour. */ --cashout-popup-fill: #FFF9CA; /* Announcer countdown bar. Matches --progressbar-bg / --progress-bg above, which is the point of reading them from here rather than from the source. */ --progressbar-border-radius: 6px; /* The plane graph and dot grid are unused by a Spine scene, but the shared actors still resolve them. Kept transparent rather than left to fall back. */ --graph-bg: transparent; --graph-bg-alpha: 0; --graph-line: transparent; --dots-x: transparent; --dots-y: transparent; --dots-line: transparent; /* The demo background is a DOM layer behind the canvas. This game draws its own background art, so every layer is switched off. */ --demo-bg: none; --demo-container-bg: none; --demo-blend-mode: normal; --demo-stripe-a: transparent; --demo-stripe-b: transparent; --demo-stripe-from: 0deg; --demo-stripe-width: 0deg; /* Header shows the game name rather than a logo, so the logo box is unused. */ --header-logo-width: 142px; --header-logo-width-mobile: 138px; --header-logo-height: auto; --header-logo-margin: 12px; --header-logo-margin-mobile: 6px; /* Bet buttons. Caipivara named these --betform-*; the shared src/ reads --betbutton-*, so map the values onto the names the base expects. */ --bet-form-border: var(--betform-border); --betbutton-cancel-border: var(--betform-cancel-border); --betbutton-cashout-border: var(--betform-cashout-border); /* Autoplay modal buttons. */ --autoplay-submit-bttn-bg: #03BB15; --autoplay-submit-bttn-bg-hover: #05D81A; --autoplay-submit-bttn-bg-active: #029E12; --autoplay-submit-bttn-blend: normal; --autoplay-submit-bttn-blend-hover: normal; --autoplay-submit-bttn-border: 1px solid #471F01; --autoplay-reset-bttn-bg: #D45C00; --autoplay-reset-bttn-bg-hover: #EF8811; --autoplay-reset-bttn-bg-active: #BA6400; --autoplay-reset-bttn-border: 1px solid #471F01; /* Cashout announcer toast. Unused while features.cashoutPresentation is "scene", but the component is still mounted. */ --cashout-announcer-width: 320px; --cashout-announcer-max-width: calc(100vw - 16px); --cashout-announcer-min-width: 0; --cashout-announcer-min-height: 58px; --cashout-announcer-padding: 7px 10px 7px 22px; --cashout-announcer-radius: 999px; --cashout-announcer-gap: 10px; --cashout-announcer-label-weight: 500; --cashout-announcer-value-size: 22px; --cashout-announcer-value-weight: 700; --cashout-announcer-close-size: 28px; --cashout-announcer-close-icon-size: 14px; --cashout-announcer-wonbox-width: 142px; --cashout-announcer-wonbox-min-height: 44px; --cashout-announcer-wonbox-padding: 6px 12px; --cashout-announcer-wonbox-radius: 999px; --cashout-announcer-wonbox-gap: 1px; /* Chat, history, modals and the remaining odds and ends. */ --chat-header-border: var(--surface-border); --chat-online-indicator-bg: #28a909; --chat-picker-border: none; --avatar-selected-border-color: #F99E33; --debug-toggle-bg: #7C3006; --generic-modal-close-button-active-bg: var(--menu-bg); --generic-modal-header-border: none; --round-details-value-bg: var(--round-info-value-bg); --roundinfo-dot-bg: var(--menu-bg); --history-open-btn-active-color: #fff; --history-pill-active-color: var(--history-load-more-btn-color); --game-canva-border: none; --sub-tabs-min-width: 0; --sub-tabs-padding: 4px; }