:root {
  --dm-accent: #5271ff;
  --dm-accent-2: #7c5cff;
  --dm-accent-glow: rgba(82, 113, 255, 0.42);
}

body.dm-app-accolades {
  --dm-accent: #22c55e;
  --dm-accent-2: #16a34a;
  --dm-accent-glow: rgba(34, 197, 94, 0.42);
}

body.dm-app-levelling {
  --dm-accent: #a855f7;
  --dm-accent-2: #7c3aed;
  --dm-accent-glow: rgba(168, 85, 247, 0.42);
}

body.dm-app-chat {
  --dm-accent: #facc15;
  --dm-accent-2: #f59e0b;
  --dm-accent-glow: rgba(250, 204, 21, 0.42);
}

body.dm-app-tools {
  --dm-accent: #f0607c;
  --dm-accent-2: #df5d6e;
  --dm-accent-glow: rgba(240, 96, 124, 0.42);
}

/* =========================
   Shared DerpMachina Theme
   ========================= */

:root{
  --dm-bg-base:
    linear-gradient(
      135deg,
      #07090d 0%,
      #10141b 48%,
      #0b0f13 100%
    );
}

/* Shared page background */
body{
  background:
    radial-gradient(
      circle at 16% 10%,
      var(--dm-accent-glow),
      transparent 34%
    ),

    radial-gradient(
      circle at 82% 18%,
      var(--dm-accent-glow),
      transparent 30%
    ),

    radial-gradient(
      circle at 50% 100%,
      color-mix(
        in srgb,
        var(--dm-accent) 20%,
        transparent
      ),
      transparent 42%
    ),

    var(--dm-bg-base);

  background-attachment: fixed;
}

/* Shared grid overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.75),
    rgba(0,0,0,.08)
  );

  z-index:0;
}

/* Keep content above overlay */
.profile-settings-shell,
.profile-settings-main,
.wrap,
.stats-wrap{
  position:relative;
  z-index:1;
}
body.dm-app-lobby {
  --dm-accent: #ef4444;
  --dm-accent-2: #dc2626;
  --dm-accent-glow: rgba(239, 68, 68, 0.42);
}