/* ---------- DESKTOP ---------- */
#desktop {
  position: fixed; inset: 0; bottom: calc(var(--panel-h) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(59,158,255,.18), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(36,86,170,.22), transparent 60%),
    linear-gradient(160deg, #081021 0%, #050910 70%);
  overflow: hidden;
}
#wall-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.wall-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 10px; pointer-events: none; opacity: .9;
}
.wall-mark svg { width: clamp(90px, 14vw, 150px); height: auto; opacity: .22; }
.wall-mark span { font-family: var(--font-display); letter-spacing: .5em; font-size: 12px; color: rgba(217,227,242,.28); text-transform: uppercase; padding-left: .5em; }
.icons { position: absolute; top: 16px; display: grid; gap: 6px; z-index: 2; }
.icons.left { left: 12px; }
.icons.right { right: 12px; }
.dicon {
  width: 88px; display: grid; justify-items: center; gap: 6px; padding: 8px 4px;
  border-radius: 8px; text-decoration: none; color: var(--fg); text-align: center;
  font-size: 12.5px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,.9);
  border: 1px solid transparent;
}
.dicon:hover { background: rgba(59,158,255,.14); border-color: rgba(59,158,255,.3); }
.dicon .glyph {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(160deg, #1b2a44, #0f1829); border: 1px solid #2a3d5e;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.dicon .glyph svg { width: 26px; height: 26px; }
.dicon .glyph.txt { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg); }