/* Purchasable themes: each block re-tints the scene and the letter tiles. Applied via data-theme on by js/services/theme-service.js. */ :root[data-theme="night"] { --scene-ground: #2B3055; --scene-bg-base: linear-gradient(180deg, #4A5490 0%, #39406E 46%, #2B3055 100%); --gradient-game-bg: linear-gradient(180deg, #4A5490 0%, #2B3055 100%); --brand-tile-bg: linear-gradient(135deg, #8E9BFF 0%, #5E6BD8 48%, #4A55B8 100%); --brand-tile-border: #2E3684; --brand-tile-depth: #272E6E; --brand-tile-text: #EEF1FF; } :root[data-theme="ocean"] { --scene-ground: #3B8FD4; --scene-bg-base: linear-gradient(180deg, #5BD6F0 0%, #48B5E9 46%, #3B8FD4 100%); --gradient-game-bg: linear-gradient(180deg, #5BD6F0 0%, #3B8FD4 100%); --brand-tile-bg: linear-gradient(135deg, #A8E9FF 0%, #52B8F0 48%, #2E8FD0 100%); --brand-tile-border: #1D6FA8; --brand-tile-depth: #175E90; --brand-tile-text: #F0FBFF; } :root[data-theme="forest"] { --scene-ground: #57C785; --scene-bg-base: linear-gradient(180deg, #A8E6A1 0%, #7ED98F 46%, #57C785 100%); --gradient-game-bg: linear-gradient(180deg, #A8E6A1 0%, #57C785 100%); --brand-tile-bg: linear-gradient(135deg, #D9F8A8 0%, #8FD452 48%, #5FAE3C 100%); --brand-tile-border: #3F7D25; --brand-tile-depth: #356B1F; --brand-tile-text: #F4FFE3; } :root[data-theme="candy"] { --scene-ground: #FF9BCB; --scene-bg-base: linear-gradient(180deg, #FFC9E5 0%, #FFB1D8 46%, #FF9BCB 100%); --gradient-game-bg: linear-gradient(180deg, #FFC9E5 0%, #FF9BCB 100%); --brand-tile-bg: linear-gradient(135deg, #FFD1E8 0%, #FF8FC2 48%, #F569A8 100%); --brand-tile-border: #C2377C; --brand-tile-depth: #A82C6A; --brand-tile-text: #FFF0F8; } :root[data-theme="gold"] { --scene-ground: #F5AE3D; --scene-bg-base: linear-gradient(180deg, #FFE08A 0%, #FFC95C 46%, #F5AE3D 100%); --gradient-game-bg: linear-gradient(180deg, #FFE08A 0%, #F5AE3D 100%); --brand-tile-bg: linear-gradient(135deg, #FFF7C2 0%, #FFD35C 48%, #F0A93C 100%); --brand-tile-border: #B07A1F; --brand-tile-depth: #96671A; --brand-tile-text: #FFFBE8; } /* Avatar frames (frame_bronze / frame_silver / frame_gold). */ .avatar--frame-bronze { box-shadow: 0 0 0 3px #C77B30, 0 0 0 6px rgba(199, 123, 48, .35); } .avatar--frame-silver { box-shadow: 0 0 0 3px #AEB8C6, 0 0 0 6px rgba(174, 184, 198, .40); } .avatar--frame-gold { box-shadow: 0 0 0 3px #F2B32C, 0 0 0 6px rgba(242, 179, 44, .40), 0 0 14px rgba(242, 179, 44, .45); }