/* Full-screen “camera blue” */
:root {
  --blue: #0000ff;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--blue);
  overflow: hidden;
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* Top-right OSD text */
.osd {
  cursor: pointer;
  user-select: none;

  position: fixed;
  top: 22px;
  left: 24px;   /* moved to top-left */
  color: #fff;

  /* Larger, more logo-like */
  font-size: 44px;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  /* CRT / camera OSD glow */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.85),
    0 0 14px rgba(255, 255, 255, 0.2);

  z-index: 30;

  /* Subtle instability */
  animation: osdJitter 2.8s infinite steps(1, end);
}

@keyframes osdJitter {
  0%, 85%, 100% { transform: translate(0, 0); opacity: 1; }
  86% { transform: translate(1px, -1px); }
  87% { transform: translate(-1px, 1px); }
  88% { transform: translate(0px, 0px); opacity: 0.96; }
}

/* Canvas noise overlay */
#noise {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;

  /* Make noise visible but subtle */
  opacity: 0.12;
  mix-blend-mode: screen;

  /* Occasional “signal” flicker */
  animation: flicker 5s infinite steps(1, end);
}

@keyframes flicker {
  0%, 92%, 100% { opacity: 0.10; }
  93% { opacity: 0.18; }
  94% { opacity: 0.08; }
  95% { opacity: 0.15; }
}

/* Horizontal scanline-ish overlay (very light) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.12) 1px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0) 6px
  );
}

/* Rare “glitch sweep” */
body::after {
  content: "";
  position: fixed;
  left: -10%;
  right: -10%;
  top: 0;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  animation: sweep 6.5s infinite;
}

@keyframes sweep {
  0%, 88%, 100% { transform: translateY(-30px); opacity: 0; }
  89% { opacity: 0.35; }
  90% { transform: translateY(25vh); }
  91% { transform: translateY(70vh); opacity: 0.15; }
  92% { transform: translateY(110vh); opacity: 0; }
}





/* ====== Bottom-right menu (taskbar-ish) ====== */
.taskbar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  z-index: 20;
}

.taskbtn {
  font-family: inherit;
  font-size: 16px;
  color: #000;
  background: #c0c0c0;
  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  padding: 10px 14px;
  cursor: pointer;

  /* chunky old UI look */
  box-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}

.taskbtn:active {
  border: 2px solid #404040;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  transform: translate(1px, 1px);
}

/* ====== Popup overlay ====== */
.win-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  place-items: center;
  background: rgba(0, 0, 0, 0.25);
}

.win-overlay:not([hidden]) {
  display: grid;
}

.win-overlay[hidden] {
  display: none;
}

/* ====== Window frame ====== */
.win {
  width: min(520px, calc(100vw - 32px));
  background: #c0c0c0;

  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;

  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* Title bar */
.win-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 10px;

  background: linear-gradient(to right, #0b2a8f, #0b2a8f);
  color: #fff;

  /* inner bevel line */
  border-bottom: 2px solid #808080;
}

.win-title {
  font-size: 16px;
  letter-spacing: 0.4px;
}

/* Needed for drag positioning */
.win {
  position: fixed; /* allow top/left movement */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* When we start dragging, we remove centering transform */
.win.dragging {
  transform: none;
}

.win-x {
  width: 34px;
  height: 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  background: #c0c0c0;

  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;

  cursor: pointer;
}

.win-x:active {
  border: 2px solid #404040;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Content */
.win-body {
  padding: 16px;
}

.win-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.win-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #e6e6e6;

  border: 2px solid #ffffff;
  border-right-color: #808080;
  border-bottom-color: #808080;

  font-size: 18px;
}

.win-icon.error {
  background: #ffd6d6;
}

.win-text {
  color: #000;
  font-size: 16px;
}

/* Options (radio list) */
.win-options {
  border: 2px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 12px;
  background: #d6d6d6;
  margin: 0;
}

.win-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000;
  font-size: 16px;
  padding: 6px 4px;
  cursor: pointer;
}

.win-option input {
  transform: translateY(1px);
}

/* Footer buttons */
.win-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 12px 14px 12px;
  border-top: 2px solid #808080;
}

.win-btn {
  min-width: 92px;
  font-family: inherit;
  font-size: 16px;
  color: #000;
  background: #c0c0c0;

  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;

  padding: 8px 12px;
  cursor: pointer;
}

.win-btn:active {
  border: 2px solid #404040;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  transform: translate(1px, 1px);
}

.win-btn.primary {
  outline: 1px dotted rgba(0,0,0,0.9);
  outline-offset: -4px;
}


/* ====== Channel layer (video mode) ====== */
.channel {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10; /* behind taskbar(20) and windows(50) but above blue */
  display: grid;
  place-items: center;
}

.channel[hidden] {
  display: none !important;
}

.channel-video {
  width: min(720px, 80vw);
  height: auto;
  max-height: 80vh;

  /* a little CRT feel */
  filter: contrast(1.05) brightness(1.02);
}

/* When channel is ON, we hide blue by covering it with black via .channel */
body.channel-on .channel {
  display: grid;
}

/* ====== Channel-change glitch ====== */

/* A quick “tear” overlay that appears during transition */
body::selection { background: transparent; } /* harmless */

body.channel-switching::after {
  /* reuse the sweep layer but make it harsher during switching */
  opacity: 0.35;
}

/* Boost noise during switching */
body.channel-switching #noise {
  opacity: 0.28;
}

/* Make the whole page jitter briefly */
body.channel-switching {
  animation: channelJolt 360ms steps(1, end);
}

@keyframes channelJolt {
  0%   { filter: none; transform: translate(0,0); }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(3px, -1px); }
  60%  { transform: translate(-1px, 2px); }
  80%  { transform: translate(2px, -2px); }
  100% { transform: translate(0,0); }
}

/* A black “cut” flash to sell the channel change */
.black-cut {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999; /* above everything for a split-second */
  opacity: 0;
  pointer-events: none;
}

.black-cut.on {
  animation: blackCut 220ms steps(1, end);
}

@keyframes blackCut {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}





/* ====== Upgrade: alternate glow for The Digital Blue ====== */
body.channel-mode .osd {
  /* slightly colder / different bloom */
  text-shadow:
    0 0 1px rgba(220, 240, 255, 0.9),
    0 0 18px rgba(150, 200, 255, 0.22);
}

/* ====== Upgrade: slower OSD jitter in channel mode ====== */
body.channel-mode .osd {
  animation-duration: 4.8s; /* slower than 2.8s */
}

/* ====== Upgrade: RGB split “desync” effect ====== */
.rgb-split {
  position: fixed;
  inset: 0;
  z-index: 25;              /* above channel(10), below OSD(30) and popups(50) */
  pointer-events: none;
  opacity: 0;
}

.rgb-split.on {
  animation: rgbPop 220ms steps(1, end);
}

@keyframes rgbPop {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* duplicate the screen 3x with offsets */
.rgb-split::before,
.rgb-split::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  mix-blend-mode: screen;
  opacity: 0.8;
}

/* We'll feed these via filter on the overlay container */
.rgb-split {
  backdrop-filter: none;
}

/* ====== Upgrade: 2-frame horizontal stretch on channel switch ====== */
.channel-video.stretch {
  transform: scaleX(1.08);
}

/* A little “sync wobble” on the whole channel layer during switching */
body.channel-switching .channel {
  animation: channelWobble 220ms steps(1, end);
}

@keyframes channelWobble {
  0%   { transform: translate(0,0); filter: none; }
  30%  { transform: translate(2px, 0); filter: contrast(1.2) brightness(0.9); }
  60%  { transform: translate(-2px, 0); filter: contrast(0.9) brightness(1.1); }
  100% { transform: translate(0,0); filter: none; }
}