/* =====================================================================
   Honeycomb glow background (shared by the streamer portal and the
   owner control panel). Hex lines spread from the top-right corner and
   fade out toward the bottom left; the glow drifts very slowly. Load after the page's own CSS.
   ===================================================================== */
html {
  background:
    radial-gradient(1100px 520px at 100% -10%, rgba(145, 70, 255, .28), transparent 62%),
    radial-gradient(900px 600px at -15% 30%, rgba(31, 120, 255, .16), transparent 60%),
    radial-gradient(800px 500px at 60% 115%, rgba(255, 94, 196, .14), transparent 60%),
    linear-gradient(180deg, #110d2a 0%, #0c0a1d 45%, #0e0b24 100%);
  background-attachment: fixed;
  min-height: 100%;
}
body { background: transparent; }
body::before, body::after {
  content: ""; position: fixed; inset: -160px; z-index: -1; pointer-events: none;
  background-size: 56px 100px;
}
/* the honeycomb lines: visible everywhere, only slightly softer mid-page */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cg fill='none' stroke='%23a98bff' stroke-opacity='.085' stroke-width='1'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  --hl: linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, .75) 25%, rgba(0, 0, 0, .35) 55%, transparent 85%);
  -webkit-mask-image: var(--hl); mask-image: var(--hl);
}
/* the glow: brighter, blurred honeycomb inside big drifting light areas
   (strongest top right, fading toward the bottom left) */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cg fill='none' stroke='%23d27bff' stroke-opacity='.55' stroke-width='1.6'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  filter: blur(.6px) drop-shadow(0 0 4px rgba(190, 110, 255, .4));
  --hx: radial-gradient(52% 48% at 92% 6%, #000, transparent 72%),
        radial-gradient(44% 40% at 70% 22%, rgba(0, 0, 0, .8), transparent 72%),
        radial-gradient(40% 38% at 50% 42%, rgba(0, 0, 0, .55), transparent 72%),
        radial-gradient(34% 34% at 30% 62%, rgba(0, 0, 0, .3), transparent 72%),
        radial-gradient(40% 40% at 98% 40%, rgba(0, 0, 0, .55), transparent 72%),
        linear-gradient(to bottom left, rgba(0, 0, 0, .3), transparent 70%);
  -webkit-mask-image: var(--hx); mask-image: var(--hx);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add;
  animation: hexglow 30s ease-in-out infinite alternate;
  opacity: .45;
}
@keyframes hexglow {
  0%   { -webkit-mask-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: .39; }
  50%  { -webkit-mask-position: -160px 110px, 140px -70px, -110px -90px, 120px 80px, -90px -120px, 0 0; mask-position: -160px 110px, 140px -70px, -110px -90px, 120px 80px, -90px -120px, 0 0; opacity: .5; }
  100% { -webkit-mask-position: -70px 200px, 240px 40px, 70px -150px, 220px 140px, -150px 30px, 0 0; mask-position: -70px 200px, 240px 40px, 70px -150px, 220px 140px, -150px 30px, 0 0; opacity: .42; }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }