/* Static vector skies: no downloads, timers, parallax or animation. */
:root {
  --scene-stars-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='420' viewBox='0 0 480 420'%3E%3Cg fill='%23dbeaff'%3E%3Ccircle cx='32' cy='38' r='1.1' opacity='.64'/%3E%3Ccircle cx='126' cy='93' r='.8' opacity='.45'/%3E%3Ccircle cx='244' cy='29' r='1.3' opacity='.7'/%3E%3Ccircle cx='365' cy='77' r='.8' opacity='.38'/%3E%3Ccircle cx='442' cy='22' r='.7' opacity='.52'/%3E%3Ccircle cx='75' cy='194' r='.7' opacity='.37'/%3E%3Ccircle cx='198' cy='160' r='1.1' opacity='.57'/%3E%3Ccircle cx='306' cy='219' r='.75' opacity='.5'/%3E%3Ccircle cx='418' cy='167' r='1.2' opacity='.65'/%3E%3Ccircle cx='27' cy='326' r='.7' opacity='.49'/%3E%3Ccircle cx='145' cy='287' r='1.3' opacity='.58'/%3E%3Ccircle cx='261' cy='368' r='.8' opacity='.52'/%3E%3Ccircle cx='357' cy='306' r='.65' opacity='.37'/%3E%3Ccircle cx='463' cy='385' r='1.1' opacity='.58'/%3E%3C/g%3E%3Cpath d='M321 115v6m-3-3h6M91 369v6m-3-3h6' stroke='%23dbeaff' stroke-width='.6' opacity='.45'/%3E%3C/svg%3E");
  --scene-stars: var(--scene-stars-pattern), radial-gradient(ellipse at 15% 12%, #29325a80, transparent 58%), radial-gradient(ellipse at 95% 60%, #26315b45, transparent 60%), linear-gradient(160deg, #10162b, #070d1e 60%, #090d1b);
  --scene-aurora: radial-gradient(ellipse 95% 18% at 65% 14%, #55beaa32, transparent 74%), radial-gradient(ellipse 100% 28% at 22% 30%, #306c8560, transparent 72%), linear-gradient(150deg, transparent 5%, #14443d55 20%, #6bc9ac32 25%, transparent 32%, #278f8950 45%, transparent 57%), linear-gradient(165deg, #102f34, #061a1b 67%, #07171e);
  --scene-waves: radial-gradient(ellipse 135% 72% at 120% 112%, #1d546c 48%, transparent 48.3%), radial-gradient(ellipse 150% 78% at -20% 115%, #18445b 54%, transparent 54.3%), radial-gradient(ellipse 140% 78% at 115% 103%, #12354b 66%, transparent 66.3%), linear-gradient(160deg, #102d43, #071b2a 70%);
}
html[data-background="stars"] { --scene-bg:#070d1e; --scene-image:var(--scene-stars); }
html[data-background="aurora"] { --scene-bg:#061a1b; --scene-image:var(--scene-aurora); }
html[data-background="waves"] { --scene-bg:#071b2a; --scene-image:var(--scene-waves); }
html[data-background]:not([data-background="theme"]) {
  background-color:var(--scene-bg);
}
html[data-background]:not([data-background="theme"]) body {
  background-color:var(--scene-bg);
  background-image:var(--scene-image);
  background-attachment:fixed;
  color:var(--ink);
}
/* The menu is a fixed, full-screen layer; paint the scene there too. Its content
   wrapper remains transparent, while each control keeps an opaque surface. */
html[data-background]:not([data-background="theme"]) #mainMenu[open] {
  background-color:var(--scene-bg);
  background-image:var(--scene-image);
  background-attachment:fixed;
}
html[data-background]:not([data-background="theme"]) #mainMenu .main-menu-content { background:transparent; }
html[data-background]:not([data-background="theme"]) :is(.deck,.account-card,.theme-switch,.theme-dots,.weather-card,.menu-tile a,.menu-tile>button,.menu-tile>form,.notice-settings,.appearance-picker) {
  background-color:var(--card);
  border-color:var(--line);
  color:var(--ink);
}
html[data-background]:not([data-background="theme"]) :is(.chat-message,.chat-item,.friend-row) { background:var(--card);color:var(--ink);border-color:var(--line); }
html[data-background]:not([data-background="theme"]) .chat-message.mine { background:var(--chat-mine); }

/* Picker styling is scoped so existing menu controls keep their layout. */
.appearance-picker { min-width:0;max-width:100%;margin:16px 0 20px;padding:14px;border:1px solid var(--line-strong);border-radius:20px;background:var(--card);color:var(--ink); }
.appearance-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px; }
.appearance-picker .appearance-heading h3 { margin:0;font:700 1rem/1.35 var(--font,system-ui,sans-serif);color:var(--ink); }
.appearance-heading>span { color:var(--muted);font-size:.76rem;line-height:1.4; }
.appearance-choices { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }
.appearance-picker .appearance-choice { position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;min-width:0;width:100%;min-height:104px;margin:0;padding:6px 6px 9px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:600 .77rem/1.3 var(--font,system-ui,sans-serif);cursor:pointer;text-align:center;white-space:normal;overflow-wrap:anywhere;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.appearance-preview { display:block;flex:0 0 52px;width:100%;height:52px;border-radius:9px;border:1px solid #ffffff20; }
.appearance-preview-theme { background:radial-gradient(ellipse at 20% 20%,var(--accent),transparent 90%),var(--bg); }
.appearance-preview-stars { background:var(--scene-stars-pattern),radial-gradient(ellipse at 15% 12%,#485685aa,transparent 80%),#070d1e;background-size:180px 158px,auto,auto; }
.appearance-preview-aurora { background:var(--scene-aurora); }
.appearance-preview-waves { background:var(--scene-waves); }
.appearance-check { position:absolute;right:8px;top:8px;display:none;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--btn-ink);font-size:14px;line-height:1;box-shadow:0 1px 5px #0006; }
.appearance-picker .appearance-choice[aria-checked="true"] { border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent); }
.appearance-choice[aria-checked="true"] .appearance-check { display:flex; }
.appearance-picker .appearance-choice:focus-visible { outline:3px solid var(--accent);outline-offset:3px; }
.appearance-picker .appearance-choice:hover { border-color:var(--accent); }
.appearance-picker + .account-form { margin-top:20px; }
#mainMenu .appearance-picker { margin:0; }
@media(max-width:420px) { .appearance-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }.appearance-picker { padding:12px; }.appearance-picker .appearance-choice { min-height:103px; }.appearance-preview { flex-basis:54px;height:54px; } }