/* Browser palettes mirror the Android theme resources in styles.xml. */
body {
  color-scheme: dark;
  --bg: #090b12;
  --panel: #111622;
  --raised: #1a2230;
  --accent: #b9a2ff;
  --accent-soft: #302943;
  --text: #f5f4fc;
  --muted: #a4adbe;
  --line: #2a3446;
  --logo-light: #eee5ff;
  --logo-mid: #bd8cff;
  --logo-deep: #7c3aed;
  --glow: color-mix(in srgb, var(--accent) 18%, transparent);
  background-color: var(--bg);
  color: var(--text);
  accent-color: var(--accent);
  transition: background-color .22s ease, color .22s ease;
}

body[data-theme="blue"] {
  --bg: #071018; --panel: #0c1924; --raised: #142737;
  --accent: #79d7f7; --accent-soft: #143447; --text: #f1faff;
  --muted: #9eb8c7; --line: #223e4e;
  --logo-light: #ecfbff; --logo-mid: #71dafa; --logo-deep: #1c91bd;
}
body[data-theme="amber"] {
  --bg: #110d0a; --panel: #1c1510; --raised: #292018;
  --accent: #ffc56e; --accent-soft: #46311b; --text: #fff8ef;
  --muted: #c7b39a; --line: #493622;
  --logo-light: #fff4ce; --logo-mid: #ffc56e; --logo-deep: #c87422;
}
body[data-theme="emerald"] {
  --bg: #07120f; --panel: #10231b; --raised: #204335;
  --accent: #76e6b1; --accent-soft: #183c2d; --text: #effff7;
  --muted: #a8c7b6; --line: #285442;
  --logo-light: #ecfff4; --logo-mid: #76e6b1; --logo-deep: #1b9468;
}
body[data-theme="rose"] {
  --bg: #130b12; --panel: #271725; --raised: #452b40;
  --accent: #ffadd5; --accent-soft: #43273a; --text: #fff3fa;
  --muted: #d2afc5; --line: #59384f;
  --logo-light: #fff0f7; --logo-mid: #ffadd5; --logo-deep: #ca5b9e;
}
body[data-theme="crimson"] {
  --bg: #13090d; --panel: #27121a; --raised: #49212d;
  --accent: #ff8294; --accent-soft: #48202c; --text: #fff4f4;
  --muted: #d0adb3; --line: #5a2b37;
  --logo-light: #fff0f2; --logo-mid: #ff8294; --logo-deep: #b72f52;
}
body[data-theme="graphite"] {
  --bg: #0b0d10; --panel: #1a1e24; --raised: #303741;
  --accent: #d7e0ec; --accent-soft: #303741; --text: #f6f7f8;
  --muted: #bdc3cc; --line: #3d4652;
  --logo-light: #ffffff; --logo-mid: #d7e0ec; --logo-deep: #727e90;
}
body[data-theme="sunset"] {
  --bg: #160e0c; --panel: #2c1b16; --raised: #4a3025;
  --accent: #ffb18b; --accent-soft: #3a241d; --text: #fff5ef;
  --muted: #d4b7a9; --line: #614033;
  --logo-light: #fff1e7; --logo-mid: #ffb18b; --logo-deep: #c86642;
}
body[data-theme="indigo"] {
  --bg: #090b19; --panel: #171c38; --raised: #303a60;
  --accent: #a4b6ff; --accent-soft: #222a4a; --text: #f2f4ff;
  --muted: #b0bbdb; --line: #414e7b;
  --logo-light: #f0f3ff; --logo-mid: #a4b6ff; --logo-deep: #505cce;
}
body[data-theme="mint"] {
  --bg: #071311; --panel: #102b26; --raised: #225044;
  --accent: #b0f5d5; --accent-soft: #183b34; --text: #effff9;
  --muted: #abd1c3; --line: #306554;
  --logo-light: #eefff8; --logo-mid: #b0f5d5; --logo-deep: #3ea98d;
}

body, .header, .space, .panel, .account-tabs, .account-tabs-layout>[role="tabpanel"],
.settings-identity, .title-comment, .profile-comment-card, .profile-watch-card,
.social-workspace, .social-sidebar, .social-conversation, .social-friends-panel,
.social-compose, .share-dialog, .share-friend, .notification-center,
.notification-panel, .comment-compose textarea, .comment-reply-compose textarea {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.header { background: color-mix(in srgb, var(--bg) 94%, transparent); border-color: color-mix(in srgb, var(--line) 58%, transparent); }
.header a, .muted, .panel p, footer, footer small { color: var(--muted); }
.header a.active, .header nav a:hover, .profile, h1, h2, h3 { color: var(--text); }
.header nav a.active:after { background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.space { background: radial-gradient(ellipse at 80% 0, color-mix(in srgb, var(--accent) 17%, transparent), transparent 50%), radial-gradient(ellipse at 5% 60%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 45%); }
.stars { opacity: .25; }
.button, button, input, select, textarea { accent-color: var(--accent); }
.button { border-color: color-mix(in srgb, var(--line) 85%, transparent); }
.button:hover, .card:hover .poster, .share-friend:hover { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); }
.button.primary, .request-accept { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.button.primary:hover, .request-accept:hover { background: color-mix(in srgb, var(--accent) 84%, white); }
input, select, textarea, .search-form input, .member-field input { background-color: color-mix(in srgb, var(--panel) 78%, var(--bg)); color: var(--text); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.panel, .title-comment, .profile-watch-card, .profile-comment-card, .member-session,
.notification-toggle, .share-friend, .account-tabs, .account-tabs-layout>[role="tabpanel"] {
  background-color: color-mix(in srgb, var(--panel) 92%, transparent);
  border-color: var(--line);
}
.account-tabs button, .settings-identity, .device-link-card h2 { border-color: var(--line); }
.account-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 13%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.settings-identity { background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 15%, transparent), transparent 65%), color-mix(in srgb, var(--panel) 92%, transparent); }
.settings-sync, .settings-identity small, .settings-nav-icon, .section-head>a,
.metadata, .card .card-meta, .cast p, .setting small, footer>a { color: var(--muted); }
.eyebrow, .settings-identity small, .settings-nav-icon, .settings-sync, .profile-count,
.metadata .rating, .device-link-card h2 { color: var(--accent); }
.poster { background: linear-gradient(145deg, var(--raised), var(--panel)); border-color: var(--line); }
.empty, .title-comments, .profile-history, .profile-comment-history { border-color: var(--line); }
dialog { background: var(--panel); color: var(--text); border-color: var(--line); }
.dialog-inner .muted, .fine-print, .notice-message { color: var(--muted); }
.toast, #toast { background: var(--raised); color: var(--text); border-color: var(--line); }
.social-live-badge, .social-workspace, .social-sidebar, .social-friends-panel,
.social-conversation, .social-compose, .social-request, .social-attachment,
.comment-compose, .comment-replies, .title-comment-reply, .profile-empty {
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
}
.social-workspace { background: color-mix(in srgb, var(--panel) 93%, var(--bg)); }
.social-sidebar, .social-friends-panel { background-color: color-mix(in srgb, var(--bg) 72%, var(--panel)); }
.social-conversation { background-color: var(--panel); }
.social-compose, .comment-compose textarea, .comment-reply-compose textarea { background-color: color-mix(in srgb, var(--bg) 64%, var(--panel)); color: var(--text); }
.social-room-link, .social-dm-link, .social-message-body>p, .social-empty h3,
.social-friend-link strong, .social-privacy strong, .comment-body>p,
.title-comment-reply, .profile-comment-card { color: var(--text); }
.social-sidebar h3, .social-aside-head p, .social-small, .social-friend-link small,
.social-privacy small, .social-conversation-head p, .comment-author time,
.profile-comment-card small { color: var(--muted); }
.social-room-link.active, .social-dm-link.active, .social-request,
.share-friend:hover, .comment-actions button { background-color: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.social-avatar { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 25%, var(--raised)), var(--panel)); border-color: var(--line); color: var(--accent); }
.social-room-icon, .social-shared-title { background-color: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.comment-replies { border-left-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.public-profile-hero.has-image-banner:after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 30%, transparent) 70%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 72%, transparent), transparent 75%); }
.avatar-choice[aria-pressed="true"], .banner-choice[aria-pressed="true"] { outline-color: var(--accent); }

/* Recolour the wordmark from its clean alpha silhouette instead of hue-shifting its pixels. */
body { --luna-logo-gradient: linear-gradient(135deg, #d4b6ff 0%, #a45cff 48%, #e53ccc 100%); }
body[data-theme="blue"] { --luna-logo-gradient: linear-gradient(135deg, #baf5ff 0%, #55d5f4 52%, #3188f7 100%); }
body[data-theme="amber"] { --luna-logo-gradient: linear-gradient(135deg, #fff1bd 0%, #ffc465 52%, #ed8f42 100%); }
body[data-theme="emerald"] { --luna-logo-gradient: linear-gradient(135deg, #c5ffe7 0%, #71e5b0 52%, #23ad81 100%); }
body[data-theme="rose"] { --luna-logo-gradient: linear-gradient(135deg, #ffe0f0 0%, #fa9bd0 52%, #c963b0 100%); }
body[data-theme="crimson"] { --luna-logo-gradient: linear-gradient(135deg, #ffc4d0 0%, #f47d98 52%, #c74169 100%); }
body[data-theme="graphite"] { --luna-logo-gradient: linear-gradient(135deg, #f0f2f7 0%, #c4cad7 52%, #8894a8 100%); }
body[data-theme="sunset"] { --luna-logo-gradient: linear-gradient(135deg, #ffe0c5 0%, #ffab75 52%, #ec6d63 100%); }
body[data-theme="indigo"] { --luna-logo-gradient: linear-gradient(135deg, #d9d8ff 0%, #9c9cff 52%, #6265d9 100%); }
body[data-theme="mint"] { --luna-logo-gradient: linear-gradient(135deg, #d6ffef 0%, #87e5c9 52%, #43b5b2 100%); }
.luna-wordmark { display: inline-block; filter: none; }
.luna-wordmark img { display: block; width: 100%; height: auto; opacity: 1; filter: none; }
@supports (mask-image: url('/images/luna-logo.png')) or (-webkit-mask-image: url('/images/luna-logo.png')) {
  .luna-wordmark { position: relative; isolation: isolate; }
  .luna-wordmark img { opacity: 0; }
  .luna-wordmark::after { content: ""; position: absolute; inset: 0; background: var(--luna-logo-gradient); -webkit-mask: url('/images/luna-logo.png') center / contain no-repeat; mask: url('/images/luna-logo.png') center / contain no-repeat; pointer-events: none; }
}
/* Animated lunar scenery sits in the existing fixed sky behind the interface. */
.space::before, .space::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  transition: opacity .45s ease, background .45s ease, filter .45s ease;
}
.space::before {
  width: clamp(250px, 38vw, 620px); aspect-ratio: 1; top: 12vh; right: -8vw;
  border-radius: 50%; opacity: .24;
  background:
    radial-gradient(circle at 31% 32%, #ffffff17 0 2.1%, transparent 2.5%),
    radial-gradient(circle at 68% 48%, #00000020 0 5.6%, transparent 6.1%),
    radial-gradient(circle at 44% 70%, #ffffff12 0 3.2%, transparent 3.7%),
    radial-gradient(circle at 74% 75%, #00000019 0 2.3%, transparent 2.8%),
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--text) 20%, var(--raised)) 0%, var(--raised) 40%, var(--panel) 67%, transparent 70%);
  box-shadow: 0 0 95px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: moonrise-drift 46s ease-in-out infinite alternate;
}
.space::after {
  inset: 0; opacity: .28;
  background: radial-gradient(ellipse at 15% 48%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%), radial-gradient(ellipse at 85% 78%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 43%);
  animation: lunar-haze 34s ease-in-out infinite alternate;
}
@keyframes moonrise-drift { from { transform: translate3d(0, 0, 0) scale(.98); } to { transform: translate3d(-2.2vw, 1.8vh, 0) scale(1.025); } }
@keyframes lunar-haze { from { opacity: .2; transform: translateX(-1.5%); } to { opacity: .36; transform: translateX(1.5%); } }
@keyframes eclipse-glow { from { transform: rotate(-8deg) scale(.99); } to { transform: rotate(8deg) scale(1.03); } }
@keyframes aurora-flow { from { transform: translate3d(-2%, 0, 0) skewY(-8deg); background-position: 0 0, 0 0; } to { transform: translate3d(2%, 2vh, 0) skewY(-2deg); background-position: 90px 0, -70px 0; } }
@keyframes crater-drift { from { transform: translateX(-1.5%) scaleY(.98); } to { transform: translateX(1.5%) scaleY(1.02); } }
@keyframes deep-nebula { from { transform: rotate(-5deg) scale(1); opacity: .18; } to { transform: rotate(5deg) scale(1.08); opacity: .34; } }

body[data-background="eclipse"] .space::before {
  background: radial-gradient(circle at center, var(--bg) 0 36%, transparent 37% 43%, color-mix(in srgb, var(--logo-light) 70%, transparent) 44% 44.8%, color-mix(in srgb, var(--accent) 60%, transparent) 45.2% 47%, transparent 49%), radial-gradient(circle at center, color-mix(in srgb, var(--raised) 80%, var(--bg)), transparent 69%);
  box-shadow: 0 0 45px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 140px color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: .58; animation: eclipse-glow 30s ease-in-out infinite alternate;
}
body[data-background="eclipse"] .space::after { opacity: .4; background: radial-gradient(ellipse at 76% 34%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%), radial-gradient(ellipse at 76% 34%, transparent 0 22%, color-mix(in srgb, var(--accent) 8%, transparent) 23% 24%, transparent 25%); }

body[data-background="aurora"] .space::before {
  width: 120vw; height: 70vh; aspect-ratio: auto; top: -18vh; right: -10vw; border-radius: 0;
  background: linear-gradient(110deg, transparent 7%, color-mix(in srgb, var(--accent) 0%, transparent) 15%, color-mix(in srgb, var(--accent) 18%, transparent) 30%, color-mix(in srgb, var(--text) 7%, transparent) 40%, transparent 51%), linear-gradient(72deg, transparent 20%, color-mix(in srgb, var(--accent) 13%, transparent) 39%, transparent 59%);
  filter: blur(36px); opacity: .46; animation: aurora-flow 27s ease-in-out infinite alternate;
}
body[data-background="aurora"] .space::after {
  background: radial-gradient(circle 150px at 79% 29%, #ffffff85 0%, color-mix(in srgb, var(--logo-light) 65%, var(--accent)) 5%, var(--raised) 58%, transparent 63%), radial-gradient(ellipse at 79% 29%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 26%);
  opacity: .46;
}

body[data-background="craters"] .space::before {
  width: auto; height: 55vh; aspect-ratio: auto; left: -18vw; right: -18vw; top: 62vh; border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 31% 19%, transparent 0 5%, color-mix(in srgb, var(--bg) 76%, transparent) 5.4% 7.2%, transparent 7.6%), radial-gradient(ellipse at 74% 28%, transparent 0 7%, color-mix(in srgb, var(--bg) 70%, transparent) 7.4% 9.2%, transparent 9.6%), radial-gradient(ellipse at 51% 8%, color-mix(in srgb, var(--text) 21%, var(--raised)), var(--panel) 62%, var(--bg) 100%);
  opacity: .52; box-shadow: 0 -25px 100px color-mix(in srgb, var(--accent) 12%, transparent); animation: crater-drift 38s ease-in-out infinite alternate;
}
body[data-background="craters"] .space::after { opacity: .23; background: radial-gradient(ellipse at 50% 74%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 52%); }

body[data-background="deep-space"] .space::before {
  width: clamp(300px, 46vw, 700px); top: 15vh; right: -9vw; opacity: .32;
  background: radial-gradient(circle at 34% 40%, color-mix(in srgb, var(--bg) 95%, transparent) 0 32%, transparent 33%), radial-gradient(circle at 50% 50%, transparent 0 36%, color-mix(in srgb, var(--logo-light) 72%, transparent) 36.5% 37.2%, transparent 38%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 67%);
  box-shadow: none; animation: deep-nebula 40s ease-in-out infinite alternate;
}
body[data-background="deep-space"] .space::after {
  background: radial-gradient(ellipse at 22% 31%, color-mix(in srgb, var(--accent) 21%, transparent), transparent 36%), radial-gradient(ellipse at 76% 68%, color-mix(in srgb, var(--logo-deep) 17%, transparent), transparent 44%);
  animation-duration: 42s;
}
.effects-off .space::before, .effects-off .space::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  body, .header, .space, .panel, .account-tabs, .account-tabs-layout>[role="tabpanel"],
  .settings-identity, .title-comment, .profile-comment-card, .profile-watch-card,
  .social-workspace, .social-sidebar, .social-conversation, .social-friends-panel,
  .social-compose, .share-dialog, .share-friend, .comment-compose textarea,
  .comment-reply-compose textarea { transition: none; }

  .space::before, .space::after { animation: none; transition: none; }
}