/*
 * Celestial Night — Astrolabe UI
 * A real alternate interface composition, not a global recolour. Every rule is
 * scoped to the opted-in account. Existing controls, prices, game mechanics,
 * dice, pawns, board, player avatars, voice and emote renderers stay untouched.
 */

/* A carved header and floating navigation replace the default full-width bars. */
html[data-cosmetic-theme="celestial"] .app-header {
  height: 68px;
  padding: 7px 14px;
  background: linear-gradient(115deg, #0a1023, #13152c 45%, #101025);
  border-bottom: 1px solid rgba(224, 189, 127, .32);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .42), inset 0 -3px 0 rgba(201, 157, 84, .07);
}
html[data-cosmetic-theme="celestial"] .player-pill {
  border-radius: 7px 19px 7px 19px;
  background: linear-gradient(140deg, rgba(53, 54, 83, .92), rgba(15, 21, 43, .98));
  border-color: rgba(235, 198, 130, .58);
  box-shadow: 0 4px 0 #090d1b, 0 8px 18px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 243, 214, .22);
}
html[data-cosmetic-theme="celestial"] .token-balance-chip {
  border-radius: 7px 18px 7px 18px;
  border-color: rgba(229, 195, 129, .42);
  background: linear-gradient(130deg, #282943, #11182d);
}
html[data-cosmetic-theme="celestial"] .btn-sound-icon {
  border-radius: 8px 16px 8px 16px;
  border-color: rgba(226, 196, 142, .3);
  background: #1d2339;
}
html[data-cosmetic-theme="celestial"] .bottom-nav-bar {
  height: 67px;
  margin: 0 12px 9px;
  padding: 0 4px;
  border: 1px solid rgba(223, 188, 122, .46);
  border-radius: 22px 8px 22px 8px;
  background: linear-gradient(160deg, #24273f, #0c1227 75%);
  box-shadow: 0 9px 20px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 241, 207, .14);
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile) {
  min-height: 62px;
  gap: 1px;
  padding: 3px 0 5px;
  color: #aab0c5;
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile) .bt-icon {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 0;
  color: #bdc4d5;
  background: transparent;
  box-shadow: none;
  filter: none;
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile) .bt-icon::before {
  content: '';
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--celestial-nav-icon) center / contain no-repeat;
  mask: var(--celestial-nav-icon) center / contain no-repeat;
}
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile) .bt-icon::after { display: none; }
html[data-cosmetic-theme="celestial"] .b-tab-store .bt-icon svg { display: none; }
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile).active { color: #f5dcab; }
html[data-cosmetic-theme="celestial"] .b-tab:not(.b-tab-profile).active .bt-icon {
  color: #18172a;
  background: linear-gradient(145deg, #fff0c4, #d8ae62);
  border-color: #fff2ca;
  box-shadow: 0 0 0 3px rgba(232, 194, 123, .12), 0 4px 14px rgba(222, 177, 100, .3);
  transform: translateY(-2px);
}
html[data-cosmetic-theme="celestial"] .b-tab .bt-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18px;
}
html[data-cosmetic-theme="celestial"] .b-tab-friends { --celestial-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 20v-1.5a5.5 5.5 0 0 1 11 0V20M16 5.3a3 3 0 0 1 0 5.4M17 14a4.5 4.5 0 0 1 3.5 4.4V20'/%3E%3C/svg%3E"); }
html[data-cosmetic-theme="celestial"] .b-tab-earn { --celestial-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3zM8 21h8'/%3E%3C/svg%3E"); }
html[data-cosmetic-theme="celestial"] .b-tab-home { --celestial-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10 8.5-7 8.5 7M6 9v10.5h12V9M10 19.5v-6h4v6'/%3E%3C/svg%3E"); }
html[data-cosmetic-theme="celestial"] .b-tab-reward { --celestial-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0V4zM8 6H4v1a4 4 0 0 0 4 4m8-5h4v1a4 4 0 0 1-4 4M12 13v4m-4 3h8m-6-3h4'/%3E%3C/svg%3E"); }
html[data-cosmetic-theme="celestial"] .b-tab-store { --celestial-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8zM9 8V6a3 3 0 1 1 6 0v2M9 13h6'/%3E%3C/svg%3E"); }

/* The home hero becomes an illustrated observatory, with inset filigree. */
html[data-cosmetic-theme="celestial"] #screen-home { padding: 12px 14px 24px; gap: 11px; }
html[data-cosmetic-theme="celestial"] .home-welcome-card {
  min-height: 222px;
  padding: 24px 18px 21px;
  border: 1px solid rgba(236, 207, 151, .76);
  border-radius: 9px 35px 9px 35px;
  background: linear-gradient(90deg, rgba(4, 9, 24, .96) 0%, rgba(7, 12, 29, .84) 43%, rgba(7, 10, 25, .16) 100%),
    url('/images/cosmetics/celestial-observatory.webp') 72% 44% / cover no-repeat;
  box-shadow: 0 20px 34px rgba(1, 4, 16, .5), inset 0 1px rgba(255, 243, 213, .2), 0 0 0 3px rgba(227, 190, 122, .06);
}
html[data-cosmetic-theme="celestial"] .home-welcome-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(226, 193, 132, .32);
  border-radius: 4px 29px 4px 29px;
  pointer-events: none;
  z-index: 0;
}
/* r556 — owner: "হোম স্ক্রিনে এই লেখা কেন?" — থিমের নাম-স্ট্যাম্প বাদ */
html[data-cosmetic-theme="celestial"] .home-welcome-card::after {
  content: none;
  display: none;
  position: absolute;
  left: 18px;
  right: auto;
  top: auto;
  bottom: 6px;
  width: auto;
  height: auto;
  border: 0;
  box-shadow: none;
  color: #e6c786;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 1;
  opacity: .8;
  animation: none;
}
html[data-cosmetic-theme="celestial"] .home-welcome-shine { opacity: .18; }
html[data-cosmetic-theme="celestial"] .home-welcome-copy { max-width: 73%; }
html[data-cosmetic-theme="celestial"] .home-kicker {
  border: 0;
  border-radius: 0;
  padding: 0 0 7px;
  margin-bottom: 9px;
  background: none;
  box-shadow: none;
  color: #f2d394;
  border-bottom: 1px solid rgba(231, 194, 128, .5);
  font-size: 9px;
  letter-spacing: 1.2px;
}
html[data-cosmetic-theme="celestial"] .home-welcome-copy h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(23px, 7vw, 29px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
  text-shadow: 0 3px 12px #080b1b;
}
html[data-cosmetic-theme="celestial"] .home-welcome-copy h1 span { font-family: inherit; }
html[data-cosmetic-theme="celestial"] .home-welcome-copy p:not(.ls-tagline) {
  max-width: 90%;
  color: #d4d6e4;
  font-size: 11px;
  line-height: 1.45;
}
html[data-cosmetic-theme="celestial"] .home-welcome-copy .ls-tagline {
  max-width: 98%;
  margin-top: 12px;
  padding: 7px 9px;
  border-radius: 3px 12px 3px 12px;
  border-color: rgba(228, 191, 126, .35);
  background: rgba(7, 13, 30, .76);
  font-size: 10.5px;
  line-height: 1.4;
}

/* Three separate instrument tiles and two side-by-side destinations. */
html[data-cosmetic-theme="celestial"] .home-stats-strip {
  padding: 0;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-cosmetic-theme="celestial"] .home-stat-item,
html[data-cosmetic-theme="celestial"] .home-stat-item:first-child {
  min-height: 68px;
  flex-direction: column;
  gap: 2px;
  padding: 7px 4px;
  border: 1px solid rgba(211, 184, 141, .35);
  border-radius: 4px 15px 4px 15px;
  background: linear-gradient(155deg, rgba(43, 48, 74, .95), rgba(14, 20, 39, .96));
  box-shadow: inset 0 1px rgba(255, 242, 215, .11), 0 7px 14px rgba(0, 0, 0, .25);
}
html[data-cosmetic-theme="celestial"] .home-stat-icon { font-size: 15px; line-height: 1; }
html[data-cosmetic-theme="celestial"] .home-stat-item div { align-items: center; gap: 1px; }
html[data-cosmetic-theme="celestial"] .home-stat-item small { font-size: 8px; letter-spacing: 1px; }
html[data-cosmetic-theme="celestial"] .home-stat-item strong { font-size: 13px; line-height: 1.1; }
html[data-cosmetic-theme="celestial"] .home-section-heading {
  margin-top: 4px;
  color: #efcf95;
  font-size: 9px;
  letter-spacing: 1.8px;
}
html[data-cosmetic-theme="celestial"] .home-section-heading::before { content: '✦'; color: #d7ad68; font-size: 12px; }
html[data-cosmetic-theme="celestial"] .home-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
html[data-cosmetic-theme="celestial"] .home-mode-card {
  min-height: 153px;
  padding: 15px 14px 13px;
  align-items: flex-start;
  flex-direction: column;
  border: 1px solid rgba(224, 194, 139, .55);
  border-radius: 5px 26px 5px 26px;
  background: radial-gradient(circle at 92% 0, rgba(202, 162, 112, .20), transparent 43%),
    linear-gradient(150deg, #25304a, #11182c 75%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 242, 213, .16);
}
html[data-cosmetic-theme="celestial"] .home-mode-friends {
  background: radial-gradient(circle at 92% 0, rgba(128, 156, 202, .2), transparent 43%),
    linear-gradient(150deg, #202b48, #10162c 75%);
}
html[data-cosmetic-theme="celestial"] .home-mode-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(226, 197, 146, .16);
  border-radius: 3px 21px 3px 21px;
  pointer-events: none;
}
html[data-cosmetic-theme="celestial"] .home-mode-icon,
html[data-cosmetic-theme="celestial"] .home-mode-friends .home-mode-icon {
  width: 40px;
  height: 40px;
  margin: 0 0 10px;
  border: 1px solid rgba(244, 218, 170, .67);
  border-radius: 50%;
  background: linear-gradient(145deg, #efd699, #8b6b57);
  box-shadow: 0 0 0 4px rgba(226, 194, 136, .09), 0 5px 12px rgba(0, 0, 0, .3);
  font-size: 19px;
  animation: none;
}
html[data-cosmetic-theme="celestial"] .home-mode-copy { gap: 4px; width: 100%; }
html[data-cosmetic-theme="celestial"] .home-mode-copy strong { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.15; }
html[data-cosmetic-theme="celestial"] .home-mode-copy small { color: #c1c5d5; font-size: 10px; line-height: 1.35; }
html[data-cosmetic-theme="celestial"] .home-mode-arrow {
  position: absolute;
  top: 17px;
  right: 14px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border-color: rgba(234, 207, 155, .5);
  background: rgba(234, 207, 155, .08);
  color: #f5dda8;
  font-size: 19px;
  animation: none;
}

/* Other screens adopt the same engraved frames and editorial hierarchy. */
html[data-cosmetic-theme="celestial"] #screen-friends .friends-book-head {
  min-height: 94px;
  margin: 0 0 10px;
  padding: 17px 16px;
  border: 1px solid rgba(220, 191, 139, .44);
  border-left: 3px solid #e0bd7e;
  border-radius: 4px 24px 4px 24px;
  background: linear-gradient(95deg, rgba(10, 16, 34, .95), rgba(19, 29, 48, .72)),
    url('/images/cosmetics/celestial-observatory.webp') 76% 42% / cover;
}
html[data-cosmetic-theme="celestial"] #screen-friends .friends-book-head h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 27px;
  font-weight: 700;
  color: #fff1d2;
}
html[data-cosmetic-theme="celestial"] #screen-friends .friends-book-icon { border-radius: 50%; color: #f3d69c; }
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 {
  border-radius: 5px 20px 5px 20px;
  background: linear-gradient(145deg, rgba(38, 44, 65, .96), rgba(14, 20, 37, .97));
  border-color: rgba(220, 190, 140, .32);
}
html[data-cosmetic-theme="celestial"] #screen-friends .friends-filters,
html[data-cosmetic-theme="celestial"] #screen-friends .friends-filters button { border-radius: 5px 13px 5px 13px; }
html[data-cosmetic-theme="celestial"] .earn-screen .earn-hero {
  min-height: 138px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  border: 1px solid rgba(229, 199, 147, .48);
  border-radius: 5px 30px 5px 30px;
  background: linear-gradient(90deg, rgba(6, 12, 27, .97), rgba(10, 16, 34, .76) 56%, rgba(13, 18, 34, .28)),
    url('/images/cosmetics/celestial-observatory.webp') 72% 43% / cover;
}
html[data-cosmetic-theme="celestial"] .earn-screen .earn-title { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.15; }
html[data-cosmetic-theme="celestial"] .earn-screen .earn-badge { border-radius: 3px; }
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-play { border-radius: 5px 18px 5px 18px; }
html[data-cosmetic-theme="celestial"] .lb-hero {
  padding: 23px 16px 18px;
  border-radius: 5px 30px 5px 30px;
  background: linear-gradient(95deg, rgba(8, 14, 29, .95), rgba(18, 25, 45, .75)),
    url('/images/cosmetics/celestial-observatory.webp') 70% 40% / cover;
}
html[data-cosmetic-theme="celestial"] .lb-title { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 1.12; }
html[data-cosmetic-theme="celestial"] .lb-kicker { border-radius: 3px 12px 3px 12px; }
html[data-cosmetic-theme="celestial"] .lb-pod {
  padding-top: 17px;
  border-radius: 50px 50px 4px 4px;
  border-color: rgba(226, 192, 132, .5);
  background: linear-gradient(160deg, #30364b, #141c31 72%);
}
html[data-cosmetic-theme="celestial"] .lb-pod-1 {
  padding-top: 24px;
  background: linear-gradient(160deg, #554730, #211e20 75%);
}
html[data-cosmetic-theme="celestial"] .lb-pod-base { border-radius: 4px 4px 0 0; }
html[data-cosmetic-theme="celestial"] .lb-row { border-radius: 4px 16px 4px 16px; }
html[data-cosmetic-theme="celestial"] .profile-hero {
  margin: 0 8px;
  padding: 27px 18px;
  border: 1px solid rgba(225, 194, 141, .47);
  border-radius: 4px 32px 4px 32px;
  background: linear-gradient(90deg, rgba(8, 14, 29, .96), rgba(15, 21, 38, .62)),
    url('/images/cosmetics/celestial-observatory.webp') 78% 35% / cover;
}
html[data-cosmetic-theme="celestial"] .profile-hero-bg { border-radius: inherit; }
html[data-cosmetic-theme="celestial"] .ph-hero-name { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
html[data-cosmetic-theme="celestial"] .profile-stats-global { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-cosmetic-theme="celestial"] .psg-card {
  min-height: 63px;
  padding: 10px 12px;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  text-align: left;
  border-radius: 4px 17px 4px 17px;
}
html[data-cosmetic-theme="celestial"] .psg-body { align-items: flex-start; }
html[data-cosmetic-theme="celestial"] .pa-tile,
html[data-cosmetic-theme="celestial"] #btn-open-gift-profile,
html[data-cosmetic-theme="celestial"] .btn-app-download-card { border-radius: 5px 22px 5px 22px; }
html[data-cosmetic-theme="celestial"] #btn-open-community-group {
  border-radius: 5px 22px 5px 22px;
  border-color: rgba(221, 189, 133, .45) !important;
  background: linear-gradient(120deg, #1c2c43, #293e5b 60%, #424c67) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 241, 215, .13) !important;
}

/* Selection controls preserve their native state; only their presentation moves. */
html[data-cosmetic-theme="celestial"] .hero-event-banner {
  min-height: 98px;
  padding: 17px 16px;
  border-radius: 4px 24px 4px 24px;
  background: linear-gradient(90deg, rgba(9, 15, 31, .96), rgba(18, 25, 44, .63)),
    url('/images/cosmetics/celestial-observatory.webp') 75% 40% / cover;
}
html[data-cosmetic-theme="celestial"] .heb-title { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; }
html[data-cosmetic-theme="celestial"] .section-heading { letter-spacing: 1.3px; }
html[data-cosmetic-theme="celestial"] .section-heading::before { content: '✦  '; color: #e2bf82; }
/* The original compact lobby is non-scrolling; the taller theme must never
   hide the real stake selector or match button on short phones. */
html[data-cosmetic-theme="celestial"] #screen-lobby { overflow-y: auto; overscroll-behavior-y: contain; }
html[data-cosmetic-theme="celestial"] #screen-lobby .mode-card,
html[data-cosmetic-theme="celestial"] #screen-play .mode-card {
  min-height: 64px;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
}
html[data-cosmetic-theme="celestial"] #screen-lobby .mc-info,
html[data-cosmetic-theme="celestial"] #screen-play .mc-info { min-width: 0; align-items: flex-start; text-align: left; }
html[data-cosmetic-theme="celestial"] #screen-lobby .mc-icon,
html[data-cosmetic-theme="celestial"] #screen-play .mc-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 201, 145, .44);
  border-radius: 50%;
  background: rgba(220, 194, 149, .12);
}
html[data-cosmetic-theme="celestial"] #screen-lobby .mc-sub { text-align: left; line-height: 1.25; }
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 { border-radius: 4px 17px 4px 17px; }
html[data-cosmetic-theme="celestial"] .btn-play-hero { border-radius: 4px 19px 4px 19px; letter-spacing: .45px; }

/* Policy pages remain readable and fully scrollable, in the same visual system. */
html[data-cosmetic-theme="celestial"] #screen-privacy .screen-topbar {
  padding: 10px 12px;
  border: 1px solid rgba(221, 190, 139, .38);
  border-radius: 4px 20px 4px 20px;
  background: linear-gradient(110deg, rgba(26, 34, 53, .95), rgba(12, 17, 35, .85));
}
html[data-cosmetic-theme="celestial"] #privacy-screen-title { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; }
html[data-cosmetic-theme="celestial"] #screen-privacy .privacy-tab { border-radius: 4px 15px 4px 15px !important; }
html[data-cosmetic-theme="celestial"] #privacy-screen-content {
  border: 1px solid rgba(218, 190, 143, .26);
  border-radius: 4px 20px 4px 20px;
  background: rgba(13, 19, 35, .65);
}

/* Store and Vault become an item gallery with individually framed shelves. */
html[data-cosmetic-theme="celestial"] .shop-head { align-items: center; padding: 3px 1px 0; }
html[data-cosmetic-theme="celestial"] .shop-title { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; letter-spacing: 2px; }
html[data-cosmetic-theme="celestial"] .shop-feature:not(.is-theme-feature) {
  min-height: 126px;
  border-radius: 4px 28px 4px 28px;
  background: linear-gradient(90deg, rgba(8, 13, 29, .97), rgba(13, 20, 38, .6)),
    url('/images/cosmetics/celestial-observatory.webp') 75% 45% / cover;
}
html[data-cosmetic-theme="celestial"] .shop-feature.is-theme-feature { min-height: 126px; border-radius: 4px 28px 4px 28px; }
html[data-cosmetic-theme="celestial"] .sf-title { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; }
html[data-cosmetic-theme="celestial"] .shop-tab,
html[data-cosmetic-theme="celestial"] .vault-tab { border-radius: 3px 15px 3px 15px; }
html[data-cosmetic-theme="celestial"] .shop-tab.is-active,
html[data-cosmetic-theme="celestial"] .vault-tab.is-active {
  background: linear-gradient(135deg, #eddbab, #c09a65);
  color: #16182a;
  border-color: #ffedc4;
}
html[data-cosmetic-theme="celestial"] .shop-card {
  border-radius: 4px 22px 4px 22px;
  border-color: rgba(221, 192, 143, .4);
  background: linear-gradient(155deg, #30364c, #111a2c 80%);
  box-shadow: inset 0 1px rgba(255, 241, 214, .12), 0 7px 14px rgba(0, 0, 0, .25);
}
html[data-cosmetic-theme="celestial"] .shop-card .sc-art { border-radius: 3px 15px 3px 15px; }
html[data-cosmetic-theme="celestial"] .shop-theme-card,
html[data-cosmetic-theme="celestial"] .vault-theme-card { border-radius: 4px 25px 4px 25px; border-color: rgba(225, 194, 143, .45); }
html[data-cosmetic-theme="celestial"] .vault-sheet { border-radius: 8px 40px 0 0; border-color: rgba(226, 195, 139, .56); }
html[data-cosmetic-theme="celestial"] .vault-head { padding-top: 19px; border-bottom: 1px solid rgba(223, 194, 145, .18); }
html[data-cosmetic-theme="celestial"] .vault-title { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; letter-spacing: 1.6px; }
html[data-cosmetic-theme="celestial"] .vault-tabs { padding-top: 12px; }
html[data-cosmetic-theme="celestial"] .vault-tab { min-width: 66px; }
html[data-cosmetic-theme="celestial"] .vault-empty .ve-go,
html[data-cosmetic-theme="celestial"] .shop-theme-action,
html[data-cosmetic-theme="celestial"] .vault-theme-action { border-radius: 4px 15px 4px 15px; }
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 { border-radius: 5px 26px 5px 26px; }

/* The arena frame is ornamental only: no board, pawn, die or pod selectors. */
#screen-game[data-cosmetic-theme="celestial"] .game-hud-bar {
  border-radius: 4px 20px 4px 20px;
  background: linear-gradient(120deg, rgba(22, 31, 48, .98), rgba(8, 13, 28, .96));
  border-color: rgba(226, 194, 137, .58);
  box-shadow: 0 7px 18px rgba(3, 5, 15, .45), inset 0 1px rgba(255, 240, 213, .17);
}
#screen-game[data-cosmetic-theme="celestial"] .board-arena-wrapper {
  border-color: rgba(235, 198, 133, .7);
  box-shadow: 0 12px 28px rgba(2, 3, 17, .52), inset 0 0 0 3px rgba(225, 190, 127, .09);
}

@media (max-height: 640px) {
  /* Keep both pre-existing floating controls clear of key home content. */
  html[data-cosmetic-theme="celestial"] .home-stats-strip,
  html[data-cosmetic-theme="celestial"] .home-mode-grid { margin-right: 60px; }
  html[data-cosmetic-theme="celestial"] #screen-home { padding-bottom: 150px; }
}
/* Update this theme's promotional artwork for everyone, even before it is
   equipped. The server's existing art URL stays valid for older clients. */
.shop-theme-art {
  background: #10182c url('/images/cosmetics/celestial-observatory.webp') 72% 43% / cover no-repeat;
}
.shop-theme-art img { opacity: 0; }
.vault-theme-card {
  background-image: url('/images/cosmetics/celestial-observatory.webp'), linear-gradient(145deg, #1c133b, #0d1022 80%);
  background-size: 100% 145px, cover;
  background-position: center top, center;
  background-repeat: no-repeat;
}
.vault-theme-art { opacity: 0; }

@media (max-width: 360px) {
  html[data-cosmetic-theme="celestial"] .app-header { padding-left: 9px; padding-right: 9px; }
  html[data-cosmetic-theme="celestial"] .player-pill { gap: 6px; padding-right: 7px; }
  html[data-cosmetic-theme="celestial"] .player-name { max-width: 82px; }
  html[data-cosmetic-theme="celestial"] .home-welcome-card { min-height: 210px; }
  html[data-cosmetic-theme="celestial"] .home-welcome-copy { max-width: 74%; }
  html[data-cosmetic-theme="celestial"] .home-mode-card { min-height: 158px; padding: 13px 11px; }
  html[data-cosmetic-theme="celestial"] .home-mode-copy strong { font-size: 15px; }
  html[data-cosmetic-theme="celestial"] .home-mode-copy small { font-size: 9.5px; }
}