/* Celestial Night: a reversible, account-selected app skin.
   Only paint properties are changed here. No board, pawn, dice, avatar,
   in-game emote, layout, timing, or interaction selectors are touched. */

html[data-cosmetic-theme="celestial"] body.app-body {
  background-color: #08051b;
}
html[data-cosmetic-theme="celestial"] .app-shell {
  background: #0d0825;
  box-shadow: 0 0 48px rgba(12, 4, 32, .9);
}

/* One night sky ties together every in-app screen; the match screen keeps
   its existing, separately scoped Celestial arena styling. */
html[data-cosmetic-theme="celestial"] .screen:not(#screen-game) {
  background: linear-gradient(180deg, rgba(9, 6, 29, .76), rgba(10, 7, 29, .89) 58%, rgba(9, 6, 26, .94)),
    url('/images/cosmetics/theme-celestial.webp') center 20% / cover no-repeat;
}

/* App chrome: no changes to the player's avatar or to navigation geometry. */
html[data-cosmetic-theme="celestial"] .app-header {
  background: linear-gradient(100deg, #130c32, #1d103b 58%, #100b28);
  border-bottom-color: rgba(230, 202, 148, .23);
  box-shadow: 0 5px 22px rgba(7, 3, 22, .34);
}
html[data-cosmetic-theme="celestial"] .player-pill {
  background: linear-gradient(160deg, rgba(102, 72, 155, .52), rgba(26, 16, 54, .95));
  border-color: rgba(220, 188, 132, .47);
  box-shadow: 0 5px 0 rgba(54, 34, 92, .65), 0 10px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 239, 208, .18);
}
html[data-cosmetic-theme="celestial"] .token-balance-chip {
  background: linear-gradient(135deg, rgba(95, 65, 134, .45), rgba(24, 15, 53, .88));
  border-color: rgba(226, 195, 139, .32);
}
html[data-cosmetic-theme="celestial"] .btn-sound-icon {
  background: rgba(44, 29, 75, .58);
  border-color: rgba(206, 183, 244, .2);
}
html[data-cosmetic-theme="celestial"] .bottom-nav-bar {
  background: linear-gradient(180deg, #1d1239, #100c27);
  border-top-color: rgba(227, 199, 151, .28);
  box-shadow: 0 -8px 24px rgba(4, 2, 18, .28);
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile) {
  color: #b2a6c9;
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile) .bt-icon {
  background: linear-gradient(155deg, #574178, #271941);
  box-shadow: 0 7px 15px rgba(9, 4, 26, .5), inset 0 1px 0 rgba(244, 225, 255, .18);
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile).active {
  color: #ffe1a5;
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile).active .bt-icon {
  background: linear-gradient(145deg, #f3d896, #bb8e68 54%, #704b97);
  box-shadow: 0 7px 17px rgba(162, 100, 162, .35), 0 0 16px rgba(236, 204, 146, .2), inset 0 1px 0 rgba(255, 250, 226, .38);
}
html[data-cosmetic-theme="celestial"] #vault-fab,
html[data-cosmetic-theme="celestial"] #friends-fab {
  background: linear-gradient(145deg, #8f68bf, #4a2f79 62%, #251a4a);
  border-color: rgba(236, 203, 151, .58);
  box-shadow: 0 8px 20px rgba(15, 4, 36, .52), 0 0 18px rgba(184, 135, 226, .24), inset 0 1px 0 rgba(255, 246, 219, .32);
}

/* Home: the existing animated die is intentionally not selected. */
html[data-cosmetic-theme="celestial"] #screen-home .home-fx-orb-a {
  background: radial-gradient(circle, rgba(149, 100, 222, .34), transparent 70%);
}
html[data-cosmetic-theme="celestial"] #screen-home .home-fx-orb-b {
  background: radial-gradient(circle, rgba(114, 75, 184, .22), transparent 70%);
}
html[data-cosmetic-theme="celestial"] #screen-home .home-fx-grid {
  background-image: radial-gradient(rgba(244, 219, 171, .18) 1px, transparent 1.5px),
    radial-gradient(rgba(200, 173, 255, .13) 1px, transparent 1.5px);
  background-size: 58px 58px, 91px 91px;
  background-position: 7px 5px, 30px 35px;
}
html[data-cosmetic-theme="celestial"] .home-welcome-card {
  background: linear-gradient(100deg, rgba(18, 10, 43, .97) 5%, rgba(28, 15, 59, .86) 61%, rgba(37, 18, 71, .64)),
    url('/images/cosmetics/theme-celestial.webp') center 22% / cover;
  border-color: rgba(233, 200, 143, .52);
  box-shadow: 0 22px 48px rgba(5, 2, 21, .46), 0 0 28px rgba(164, 108, 214, .16), inset 0 1px 0 rgba(255, 238, 205, .16);
}
html[data-cosmetic-theme="celestial"] .home-welcome-card::after {
  border-color: rgba(238, 211, 165, .24);
  box-shadow: 0 0 0 26px rgba(188, 147, 216, .06), 0 0 0 52px rgba(206, 176, 238, .03);
}
html[data-cosmetic-theme="celestial"] .home-kicker {
  color: #f5dca9;
  background: rgba(148, 111, 175, .2);
  border-color: rgba(232, 198, 145, .4);
  box-shadow: 0 0 16px rgba(182, 134, 207, .2);
  animation: none;
}
html[data-cosmetic-theme="celestial"] .home-welcome-copy h1 span {
  background-image: linear-gradient(90deg, #fff4d7, #e7c98a 45%, #d4b9ff 80%, #fff1cb);
}
html[data-cosmetic-theme="celestial"] .home-welcome-copy p { color: #d2c8e5; }
html[data-cosmetic-theme="celestial"] .home-welcome-copy .ls-tagline {
  background: linear-gradient(180deg, rgba(187, 147, 202, .14), rgba(157, 116, 188, .06));
  border-color: rgba(227, 195, 164, .28);
}
html[data-cosmetic-theme="celestial"] .home-stats-strip {
  background: rgba(25, 16, 53, .82);
  border-color: rgba(225, 194, 150, .3);
  box-shadow: 0 12px 28px rgba(4, 2, 20, .36), inset 0 1px 0 rgba(255, 239, 213, .08);
}
html[data-cosmetic-theme="celestial"] .home-stat-item { background: rgba(188, 156, 225, .06); }
html[data-cosmetic-theme="celestial"] .home-stat-item:first-child { background: rgba(233, 193, 123, .12); }
html[data-cosmetic-theme="celestial"] .home-stat-item small { color: #c3b3d6; }
html[data-cosmetic-theme="celestial"] .home-section-heading,
html[data-cosmetic-theme="celestial"] .section-heading {
  color: #e6c995;
  text-shadow: 0 0 12px rgba(224, 179, 119, .2);
}
html[data-cosmetic-theme="celestial"] .home-section-heading::after {
  background: linear-gradient(90deg, rgba(227, 193, 145, .5), transparent);
}
html[data-cosmetic-theme="celestial"] .home-mode-quick,
html[data-cosmetic-theme="celestial"] .home-mode-friends {
  background: radial-gradient(circle at 0% 50%, rgba(160, 110, 205, .25), transparent 42%),
    linear-gradient(150deg, rgba(40, 25, 70, .96), rgba(19, 13, 41, .97));
  border-color: rgba(217, 184, 146, .42);
  box-shadow: 0 15px 28px rgba(4, 2, 19, .36), inset 0 1px 0 rgba(255, 239, 211, .1);
  animation: none;
}
html[data-cosmetic-theme="celestial"] .home-mode-icon {
  background: linear-gradient(150deg, #c6a3e9, #7850af);
  box-shadow: 0 8px 20px rgba(81, 46, 131, .44), 0 0 14px rgba(209, 169, 235, .2);
}
html[data-cosmetic-theme="celestial"] .home-mode-friends .home-mode-icon {
  background: linear-gradient(150deg, #edd09c, #a978a5);
  box-shadow: 0 8px 20px rgba(117, 74, 120, .38), 0 0 14px rgba(239, 204, 159, .18);
}
html[data-cosmetic-theme="celestial"] .home-mode-copy small { color: #cabddc; }
html[data-cosmetic-theme="celestial"] .home-mode-arrow {
  background: rgba(204, 166, 223, .13);
  border-color: rgba(226, 198, 173, .3);
  color: #f3dbaa;
}

/* Quick match and friends lobby: selection and enabled/disabled states remain
   controlled by the existing classes and engine. */
html[data-cosmetic-theme="celestial"] .hero-event-banner {
  background: linear-gradient(110deg, rgba(38, 22, 71, .97), rgba(30, 20, 58, .86)),
    url('/images/cosmetics/theme-celestial.webp') center 24% / cover;
  border-color: rgba(229, 198, 143, .4);
  box-shadow: 0 10px 24px rgba(5, 2, 20, .3), inset 0 1px 0 rgba(255, 239, 205, .08);
}
html[data-cosmetic-theme="celestial"] .mode-card,
html[data-cosmetic-theme="celestial"] .room-pill,
html[data-cosmetic-theme="celestial"] .match-summary-card,
html[data-cosmetic-theme="celestial"] .play-panel {
  background: linear-gradient(150deg, rgba(39, 25, 69, .95), rgba(18, 14, 41, .97));
  border-color: rgba(199, 176, 224, .24);
  box-shadow: 0 8px 22px rgba(4, 2, 17, .24), inset 0 1px 0 rgba(255, 241, 218, .05);
}
html[data-cosmetic-theme="celestial"] .mode-card.active,
html[data-cosmetic-theme="celestial"] .room-pill.active {
  background: linear-gradient(150deg, rgba(91, 61, 127, .88), rgba(42, 25, 70, .96));
  border-color: rgba(244, 211, 153, .8);
  box-shadow: 0 0 0 1px rgba(244, 211, 153, .25), 0 8px 20px rgba(128, 81, 159, .25);
}
html[data-cosmetic-theme="celestial"] .btn-play-hero {
  background: linear-gradient(110deg, #f3daa0, #d3ae72 58%, #be99bf);
  border-color: rgba(255, 232, 188, .68);
  color: #25182d;
  box-shadow: 0 9px 22px rgba(108, 61, 111, .32), inset 0 1px 0 rgba(255, 250, 229, .45);
}

/* Friends, Earn, rankings and profile surfaces; photos and avatars are not
   styled. Existing ad creatives, balances and status colours stay untouched. */
html[data-cosmetic-theme="celestial"] #screen-friends .friends-book-icon {
  background: rgba(78, 52, 111, .65);
  border-color: rgba(216, 183, 151, .35);
}
html[data-cosmetic-theme="celestial"] #screen-friends .refer-card,
html[data-cosmetic-theme="celestial"] #screen-friends .friends-find,
html[data-cosmetic-theme="celestial"] #screen-friends #friends-list {
  background: linear-gradient(145deg, rgba(44, 28, 76, .96), rgba(20, 15, 45, .97));
  border-color: rgba(201, 178, 229, .3);
  box-shadow: 0 10px 24px rgba(5, 2, 20, .24);
}
html[data-cosmetic-theme="celestial"] #screen-friends .friends-filters { background: rgba(31, 20, 55, .88); }
html[data-cosmetic-theme="celestial"] #screen-friends .friends-filters button[aria-pressed="true"] {
  background: rgba(144, 107, 177, .38);
  color: #fff0d4;
}
html[data-cosmetic-theme="celestial"] #screen-friends .fs-find-btn,
html[data-cosmetic-theme="celestial"] #screen-friends .refer-bar-actions button {
  background: linear-gradient(140deg, #6a4c91, #473268);
  border-color: rgba(224, 193, 159, .3);
  color: #fff7e8;
}
html[data-cosmetic-theme="celestial"] .earn-screen .earn-hero {
  background: linear-gradient(110deg, rgba(32, 20, 63, .85), rgba(64, 36, 91, .62)),
    url('/images/cosmetics/theme-celestial.webp') center 20% / cover;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(229, 197, 156, .24);
}
html[data-cosmetic-theme="celestial"] .earn-screen .earn-badge {
  background: rgba(160, 121, 181, .2);
  border-color: rgba(239, 203, 156, .42);
  color: #f6ddae;
}
html[data-cosmetic-theme="celestial"] .earn-screen .earn-card,
html[data-cosmetic-theme="celestial"] .earn-screen .we-stat,
html[data-cosmetic-theme="celestial"] .earn-screen .we-progress-card {
  background: rgba(32, 22, 61, .94);
  border-color: rgba(203, 179, 225, .22);
}
html[data-cosmetic-theme="celestial"] .earn-screen .we-play {
  background: linear-gradient(125deg, #574179, #764f93 55%, #473263);
  border-color: rgba(232, 202, 160, .36);
}
html[data-cosmetic-theme="celestial"] .earn-screen .we-play:disabled { opacity: .72; }
html[data-cosmetic-theme="celestial"] .earn-screen .we-play-cta {
  background: #efd9aa;
  color: #2d1b3b;
}
html[data-cosmetic-theme="celestial"] .lb-hero {
  background: linear-gradient(110deg, rgba(35, 20, 67, .95), rgba(38, 18, 67, .82)),
    url('/images/cosmetics/theme-celestial.webp') center 25% / cover;
  border-color: rgba(225, 193, 144, .47);
  box-shadow: 0 14px 30px rgba(9, 3, 27, .38), inset 0 1px 0 rgba(255, 236, 203, .1);
}
html[data-cosmetic-theme="celestial"] .lb-pod:not(.lb-pod-1),
html[data-cosmetic-theme="celestial"] .lb-row {
  background: linear-gradient(155deg, rgba(55, 36, 87, .94), rgba(25, 19, 52, .96));
  border-color: rgba(215, 192, 234, .27);
}
html[data-cosmetic-theme="celestial"] .profile-hero {
  background: linear-gradient(110deg, rgba(36, 21, 65, .94), rgba(18, 13, 42, .92)),
    url('/images/cosmetics/theme-celestial.webp') center 22% / cover;
  border-color: rgba(225, 191, 149, .35);
}
html[data-cosmetic-theme="celestial"] .profile-hero-bg {
  background: radial-gradient(circle at 75% 20%, rgba(167, 117, 211, .24), transparent 55%);
}
html[data-cosmetic-theme="celestial"] .psg-card,
html[data-cosmetic-theme="celestial"] .pa-tile {
  background: linear-gradient(155deg, rgba(49, 32, 78, .94), rgba(23, 17, 48, .96));
  border-color: rgba(212, 188, 223, .24);
}
html[data-cosmetic-theme="celestial"] #btn-open-gift-profile,
html[data-cosmetic-theme="celestial"] .btn-app-download-card {
  background: linear-gradient(115deg, #423061, #67457f 60%, #936b93);
  border-color: rgba(236, 203, 158, .42);
  box-shadow: 0 12px 28px rgba(10, 4, 26, .4), inset 0 1px 0 rgba(255, 238, 216, .14);
}

/* The policy view uses inline colors in the base UI, so override only its palette. */
html[data-cosmetic-theme="celestial"] #btn-privacy-back {
  background: #302045;
  border-color: #a6869b;
  color: #f4e8f5;
  border-radius: 6px;
}
html[data-cosmetic-theme="celestial"] #screen-privacy .privacy-tab {
  background: rgba(46, 30, 70, .82) !important;
  border-color: rgba(229, 192, 148, .25) !important;
  color: #c5b8d4 !important;
}
html[data-cosmetic-theme="celestial"] #screen-privacy .privacy-tab.active {
  background: linear-gradient(135deg, #e9cd8b, #a884a3) !important;
  border-color: #e9cd8b !important;
  color: #21172d !important;
}

/* Store, Vault, drawers and dialogs. Existing item artwork, emote/sticker
   renderers, wheels, buttons, prices and interaction targets are unchanged. */
html[data-cosmetic-theme="celestial"] .shop-title {
  background-image: linear-gradient(120deg, #fff8e7, #edcf9b 58%, #c7a5ee);
}
html[data-cosmetic-theme="celestial"] .shop-feature:not(.is-theme-feature) {
  background: linear-gradient(100deg, rgba(29, 18, 58, .97), rgba(59, 31, 88, .8)),
    url('/images/cosmetics/theme-celestial.webp') center 24% / cover;
  border-color: rgba(229, 197, 153, .4);
}
html[data-cosmetic-theme="celestial"] .shop-tab,
html[data-cosmetic-theme="celestial"] .vault-tab {
  background: rgba(70, 47, 101, .34);
  border-color: rgba(211, 185, 224, .22);
  color: #c5b4d8;
}
html[data-cosmetic-theme="celestial"] .shop-tab.is-active,
html[data-cosmetic-theme="celestial"] .vault-tab.is-active {
  background: linear-gradient(150deg, rgba(144, 102, 162, .6), rgba(75, 45, 102, .72));
  border-color: rgba(239, 204, 153, .7);
  color: #fff0d5;
  box-shadow: 0 6px 16px rgba(15, 5, 34, .35), inset 0 1px 0 rgba(255, 241, 219, .18);
}
html[data-cosmetic-theme="celestial"] .shop-card {
  background: linear-gradient(155deg, rgba(73, 49, 102, .68), rgba(25, 19, 50, .88));
  border-color: rgba(217, 190, 226, .27);
}
html[data-cosmetic-theme="celestial"] .shop-card.is-soon {
  background: linear-gradient(155deg, rgba(57, 42, 78, .52), rgba(23, 18, 43, .85));
  border-color: rgba(197, 174, 209, .16);
}
html[data-cosmetic-theme="celestial"] .vault-sheet {
  background: linear-gradient(160deg, rgba(37, 23, 67, .96), rgba(14, 10, 34, .98)),
    url('/images/cosmetics/theme-celestial.webp') center 22% / cover;
  border-color: rgba(228, 197, 158, .32);
  box-shadow: 0 -22px 60px rgba(3, 1, 15, .72), inset 0 1px 0 rgba(255, 239, 218, .12);
}
html[data-cosmetic-theme="celestial"] #friends-drawer,
html[data-cosmetic-theme="celestial"] .inbox-panel {
  background: linear-gradient(160deg, #241642, #100b29);
  border-color: rgba(226, 196, 151, .3);
}
html[data-cosmetic-theme="celestial"] body:not(.in-game) .modal-overlay {
  background: rgba(10, 5, 29, .88);
}
html[data-cosmetic-theme="celestial"] .name-modal-box,
html[data-cosmetic-theme="celestial"] .match-search-modal,
html[data-cosmetic-theme="celestial"] .sc-cf-card,
html[data-cosmetic-theme="celestial"] .gift-review-card {
  background: linear-gradient(145deg, #30204e, #17102f 68%, #100c25);
  border-color: rgba(225, 193, 158, .38);
  box-shadow: 0 20px 50px rgba(3, 1, 15, .68), inset 0 1px 0 rgba(255, 238, 212, .1);
}
html[data-cosmetic-theme="celestial"] #modal-inspect-player .name-modal-box {
  background: linear-gradient(145deg, #30204e, #17102f 68%, #100c25) !important;
  border-color: rgba(225, 193, 158, .38) !important;
}