/*
 * Ryadom · visible static desktop wallpaper v5.
 * Desktop pane styling beats the legacy opaque, more-specific rule in
 * the inlined lavender-app.css: #app > .pane:not(#pane-map):not(#pane-chat).
 * The background lives on the actual pane as well as the application shell.
 * Screen width alone enables it (hybrid touch laptops have pointer:coarse).
 * No downloaded pictures, animation, pseudo-elements, or event interception.
 */
@media (min-width:900px) {
  body.rl-theme {
    --site-canvas:#e9ddf5;
    --site-wallpaper:
      radial-gradient(circle at 92% 16%,transparent 0 158px,rgba(130,93,181,.19) 159px 161px,transparent 162px 243px,rgba(130,93,181,.12) 244px 246px,transparent 247px),
      radial-gradient(circle at 6% 91%,transparent 0 105px,rgba(105,141,198,.15) 106px 108px,transparent 109px 178px,rgba(105,141,198,.10) 179px 181px,transparent 182px),
      radial-gradient(ellipse 62% 64% at 93% 12%,rgba(182,147,225,.56) 0%,rgba(182,147,225,0) 77%),
      radial-gradient(ellipse 52% 66% at 4% 93%,rgba(162,188,239,.46) 0%,rgba(162,188,239,0) 78%),
      radial-gradient(ellipse 49% 55% at 72% 105%,rgba(236,175,214,.36) 0%,rgba(236,175,214,0) 73%),
      radial-gradient(circle,rgba(118,91,169,.21) .85px,transparent 1.4px),
      linear-gradient(135deg,#f9f5ff 0%,#e7daf4 54%,#f1e3f8 100%);
    --site-wallpaper-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,24px 24px,100% 100%;
  }
  /* Explicit painting avoids being covered by opaque pane backgrounds and
     works even if the page is not using a fine mouse pointer. */
  body.rl-theme,
  body.rl-theme #gate,
  body.rl-theme #app,
  body.rl-theme #app > .pane:is(#pane-home,#pane-more,#pane-sos):not(#pane-map):not(#pane-chat) {
    background-color:var(--site-canvas);
    background-image:var(--site-wallpaper);
    background-size:var(--site-wallpaper-size);
    background-position:center;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat;
    background-attachment:fixed;
  }
  /* Keep a consistent wallpaper behind the game frame, not in the game. */
  body.rl-theme #pane-more #moreCafe { background:transparent; }
  body.rl-theme[data-theme="night"] {
    --site-canvas:#1a1927;
    --site-wallpaper:
      radial-gradient(circle at 92% 16%,transparent 0 158px,rgba(171,128,220,.13) 159px 161px,transparent 162px 243px,rgba(171,128,220,.08) 244px 246px,transparent 247px),
      radial-gradient(circle at 6% 91%,transparent 0 105px,rgba(116,147,206,.12) 106px 108px,transparent 109px 178px,rgba(116,147,206,.08) 179px 181px,transparent 182px),
      radial-gradient(ellipse 62% 64% at 93% 12%,rgba(120,83,177,.23) 0%,rgba(120,83,177,0) 77%),
      radial-gradient(ellipse 52% 66% at 4% 93%,rgba(77,105,155,.23) 0%,rgba(77,105,155,0) 78%),
      radial-gradient(ellipse 49% 55% at 72% 105%,rgba(153,82,143,.16) 0%,rgba(153,82,143,0) 73%),
      radial-gradient(circle,rgba(206,187,241,.11) .85px,transparent 1.4px),
      linear-gradient(135deg,#242035 0%,#1a1927 54%,#272235 100%);
  }
}

/* Nav and header contrast: preserve white readability and native click targets. */
@media (min-width:1100px) and (hover:hover) and (pointer:fine) {
  body.rl-theme #app > nav.rl-tabbar {
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(13px);
    backdrop-filter:blur(13px);
    border-right-color:rgba(142,118,185,.18);
  }
  body.rl-theme #app > header {
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-bottom-color:rgba(142,118,185,.18);
  }
  body.rl-theme[data-theme="night"] #app > nav.rl-tabbar {
    background:rgba(36,35,49,.95);
    border-right-color:rgba(171,150,204,.17);
  }
  body.rl-theme[data-theme="night"] #app > header {
    background:rgba(36,35,49,.96);
    border-bottom-color:rgba(171,150,204,.17);
  }
}