/* Shared window corners. */
body {
  transition: filter 320ms ease, background-color 320ms ease;
}

body.scene-inverted {
  filter: invert(1) hue-rotate(180deg);
}

#terminal::before, #terminal::after,
.reader-window::before, .reader-window::after {
  content: '';
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  pointer-events: none;
  z-index: 10;
}

/* Terminal corners. */
#terminal::before {
  top: 0; left: 0;
  background:
    linear-gradient(to right, var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%) left / 1px 100% no-repeat;
}
#terminal::after {
  bottom: 0; right: 0;
  background:
    linear-gradient(to left, var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(to top, var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%) right / 1px 100% no-repeat;
}

/* Reader corners. */
.reader-window::before {
  top: 0; left: 0;
  background:
    linear-gradient(to right, var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%) left / 1px 100% no-repeat;
}
.reader-window::after {
  bottom: 0; right: 0;
  background:
    linear-gradient(to left, var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(to top, var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%) right / 1px 100% no-repeat;
}

/* Shared scanlines and remaining corner accents. */
#terminal,
.reader-window {
  background-size:
    100% var(--scanline-gap),
    var(--corner-size) 1px, 1px var(--corner-size),
    var(--corner-size) 1px, 1px var(--corner-size);
  background-position:
    0 0,
    top right, top right,
    bottom left, bottom left;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

#terminal {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,5,20,0.22) 2px, rgba(0,5,20,0.22) 3px),
    linear-gradient(to left,  var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%),
    linear-gradient(to bottom, var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%),
    linear-gradient(to right, var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%),
    linear-gradient(to top,   var(--term-accent) 0%, var(--term-accent-lo) 60%, transparent 100%);
  background-color: var(--term-bg);
}

.reader-window {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 3px),
    linear-gradient(to left,  var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%),
    linear-gradient(to bottom, var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%),
    linear-gradient(to right, var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%),
    linear-gradient(to top,   var(--reader-accent) 0%, var(--reader-accent-lo) 60%, transparent 100%);
  background-color: var(--reader-bg);
}

/* Shared drag and resize handles. */
.drag-handle {
  cursor: var(--cursor-grab);
  user-select: none;
  touch-action: none;
}

.drag-handle:active {
  cursor: var(--cursor-grabbing);
}

.resize-handle {
  position: absolute;
  z-index: 10;
  touch-action: none;
}

.resize-se {
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  cursor: var(--cursor-resize-se);
  background: linear-gradient(135deg, transparent 40%, rgba(160,140,200,0.22) 40%);
}

.resize-s {
  bottom: 0; left: 18px; right: 18px;
  height: 8px;
}

.resize-e {
  right: 0; top: 18px; bottom: 18px;
  width: 8px;
}

.resize-se { cursor: var(--cursor-resize-se) !important; }
.resize-s  { cursor: var(--cursor-resize-s) !important; }
.resize-e  { cursor: var(--cursor-resize-e) !important; }

body ::selection {
  background: rgba(180, 160, 210, 0.28);
  color: rgba(244, 246, 250, 0.96);
  text-shadow: none;
}

.glow-caret-wrap {
  position: relative;
}

.glow-caret-field {
  caret-color: transparent;
}

.glow-caret-mirror {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.glow-caret-marker {
  display: inline-block;
  width: 0;
}

.glow-caret {
  position: absolute;
  width: var(--caret-width, 6px);
  height: var(--caret-height, 11px);
  background: var(--caret-color, rgba(130,180,230,0.85));
  box-shadow:
    0 0 4px var(--caret-glow-1, rgba(130,180,230,1.0)),
    0 0 12px var(--caret-glow-2, rgba(110,160,220,0.7)),
    0 0 24px var(--caret-glow-3, rgba(90,140,210,0.4)),
    0 0 40px var(--caret-glow-4, rgba(70,120,200,0.2));
  animation: cursor-glow-blink 1.1s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
}

.glow-caret-wrap.is-focused .glow-caret {
  opacity: 1;
}

@media (max-width: 768px) {
  .resize-se {
    width: 28px;
    height: 28px;
  }

  .resize-s {
    left: 24px;
    right: 24px;
    height: 14px;
  }

  .resize-e {
    top: 24px;
    bottom: 24px;
    width: 14px;
  }
}

/* Full-screen CRT scanline overlay. */
#crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(180, 160, 220, 0.04) 2px,
    rgba(180, 160, 220, 0.04) 3px
  );
}