/* ========= Bulge system on .screen_container ========= */
.screen_container.bulge-shell {
  position: relative;
  overflow: hidden;
  border-radius: 12px;

  /* Tune these (you said you needed negative for the look you want) */
  --bulge-strength: -0.2;       /* negative = your preferred “bulge” */
  --bulge-rnorm: 0.70710678;     /* half-diagonal in UV space */
}

/* Real DOM (used for events + cloning); hidden visually once bulge is on */
.screen_container .bulge-source {
  position: relative;
  z-index: 1;
  opacity: 0;
  height: 100%;
}

/* The visible warped render */
.screen_container .bulge-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;

  touch-action: none;
  cursor: var(--cursor-block);
}

/* ========= Glassy screen overlay (on top of the warped view) ========= */
.screen_container.bulge-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;

  background:
    radial-gradient(120% 80% at 35% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 55%),
    radial-gradient(140% 120% at 70% 70%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 35%, rgba(0,0,0,0.10));

  mix-blend-mode: screen;
  opacity: 0.85;
}

@supports (backdrop-filter: blur(1px)) {
  .screen_container.bulge-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;

    backdrop-filter: blur(1.2px) saturate(1.1);
    opacity: 0.35;
  }
}

/* When cloning for capture, disable overlays so we don't “double-glass” */
.bulge-capture::before,
.bulge-capture::after {
  display: none !important;
}

/* Default: show real DOM, hide canvas (until first render) */
.screen_container.bulge-shell .bulge-source { opacity: 1; }
.screen_container.bulge-shell .bulge-canvas { opacity: 0; }

/* After first successful render: hide real DOM, show canvas */
.screen_container.bulge-shell.bulge-on .bulge-source { opacity: 0; }
.screen_container.bulge-shell.bulge-on .bulge-canvas { opacity: 1; }

/* Passthrough mode (for real selection, native hover, native scrollbars)
   Hold Alt to enable (wired up in JS). */
.screen_container.bulge-shell.bulge-passthrough .bulge-source { opacity: 1 !important; }
.screen_container.bulge-shell.bulge-passthrough .bulge-canvas { opacity: 0 !important; pointer-events: none !important; }

/* ========= Fake scrollbar (so it shows in html2canvas capture) ========= */
.screen_container .fake_sb_track {
  position: absolute;
  right: var(--scrollbar-inset);
  top: var(--arrow-h);
  bottom: var(--arrow-h);
  width: var(--sbw);
  z-index: 4; /* inside source; gets captured and warped */
  background: transparent;
  pointer-events: auto;
}

.screen_container .fake_sb_track.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.screen_container .fake_sb_thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  background: var(--c-accent);
  border-radius: 0;
  opacity: 0.9;
  transform: translateY(0px);
  will-change: transform, height;
}

.screen_container .fake_sb_thumb.is-hovered {
  box-shadow: inset 0 0 2px 5px rgba(0, 0, 0, 0.35);
}

.bezel, .bezel_img, .screen::before {
  pointer-events: none !important;
}