/* =========================================================
   ABSOLUTESKIN — Cold Blueprint / Silver-Case Linework
   - Keeps images in original color
   - Hard technical overlays + microcopy crumbs
   - CRT webcam filter
   ========================================================= */

/* ===== 1) VARIABLES (palette + geometry + surface) ===== */
:root{
  /* Dominant palette */
  --b0:#001a24;
  --b1:#003850;
  --b2:#004060;
  --b3:#004070;

  --ink0:#0B0B10;
  --ink1:#101018;

  --w0:#F0F0F0;
  --w1:rgba(240,240,240,0.72);
  --w2:rgba(240,240,240,0.55);
  --w3:rgba(240,240,240,0.35);
  --w4:rgba(240,240,240,0.22);

  --yl:#FFD200;         /* electric yellow */
  --gn:#00D06A;         /* neon green microtext */
  --am:#FFB000;         /* amber tick marks */

  --o-grid:0.08;
  --o-guide:0.14;

  --lw1:1px;
  --lw2:2px;

  --rad0:2px;
  --rad1:4px;
  --rad2:8px;

  --s0:2px;
  --s1:6px;
  --s2:10px;
  --s3:14px;
  --s4:18px;
  --s5:24px;

  --scan:0.28;
  --grain:0.12;
  --blur:0.7px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display: "Orbitron", var(--font-sans);
}

/* ===== RESET ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--w0);
  font-family:var(--font-sans);

  /* Layered backgrounds (keeps your GIF in color) */
  background-color:var(--b1);
  background-image:
    url("../images/background.gif");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;

  overflow-x:hidden;
}

/* subtle vertical gradient + scanlines */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1100px 780px at 20% 12%, rgba(0,64,96,0.22), transparent 58%),
    radial-gradient(900px 900px at 82% 20%, rgba(0,56,80,0.20), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.14) 40%, rgba(0,0,0,0.42)),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.055) 3px,
      rgba(255,255,255,0.055) 4px
    );
  opacity:1;
  mix-blend-mode:overlay;
}

/* film grain + vignette (CSS-only noise approximation) */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 62%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 48%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 22%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 68%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 82%, rgba(255,255,255,0.035) 0 1px, transparent 2px),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0.00) 56%, rgba(0,0,0,0.62) 100%);
  opacity:var(--grain);
  filter: blur(var(--blur));
  mix-blend-mode:overlay;
  animation: rxDrift 12.5s linear infinite;
}

@keyframes rxDrift{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-1.2%,0.7%,0); }
  100%{ transform:translate3d(0,0,0); }
}

/* ===== HUD/NOISE DIVS (kept subtle, never layout-affecting) ===== */
.rx-hud,
.rx-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
}

.rx-hud{
  opacity:0.55;
  mix-blend-mode:overlay;
  background:
    /* faint global grid */
    repeating-linear-gradient(90deg, rgba(240,240,240,var(--o-grid)) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(180deg, rgba(240,240,240,var(--o-grid)) 0 1px, transparent 1px 96px),

    /* long guides */
    linear-gradient(90deg, transparent 0 12%, rgba(240,240,240,0.10) 12.1% 12.2%, transparent 12.3% 100%),
    linear-gradient(90deg, transparent 0 68%, rgba(240,240,240,0.08) 68.1% 68.2%, transparent 68.3% 100%),
    linear-gradient(180deg, transparent 0 22%, rgba(240,240,240,0.08) 22.1% 22.2%, transparent 22.3% 100%),
    linear-gradient(180deg, transparent 0 78%, rgba(240,240,240,0.07) 78.1% 78.2%, transparent 78.3% 100%),

    /* diagonal “cut” */
    linear-gradient(118deg, transparent 0 47.6%, rgba(240,240,240,0.10) 47.8% 47.95%, transparent 48.1% 100%);
}

.rx-noise{
  opacity:0.18;
  mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.10) 3px,
      rgba(0,0,0,0.10) 4px
    );
}

/* ===== 4) OVERLAY SYSTEM (rectangles + crumbs) ===== */
.overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
}

.overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* long guides only */
    linear-gradient(90deg, transparent 0 9%, rgba(240,240,240,var(--o-guide)) 9.1% 9.2%, transparent 9.3% 100%),
    linear-gradient(90deg, transparent 0 62%, rgba(240,240,240,0.12) 62.1% 62.2%, transparent 62.3% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(240,240,240,0.12) 18.1% 18.2%, transparent 18.3% 100%),
    linear-gradient(180deg, transparent 0 74%, rgba(240,240,240,0.10) 74.1% 74.2%, transparent 74.3% 100%);
  opacity:0.75;
  mix-blend-mode:overlay;
}

.overlay::after{
  content:
    "[ ] { } :: /  _  \A"
    "t+00:00:01  drift:+0.3 \A"
    "route:null  /  do not trust clean edges \A"
    "残像 / ひそか / 断片";
  position:absolute;
  left:3%;
  top:8%;
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.15;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.38);
  white-space:pre;
}

.overlay .rect{
  position:absolute;
  border:var(--lw1) solid rgba(240,240,240,0.34);
  border-radius:var(--rad0);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.10);
  opacity:0.75;
}

.overlay .rect::before{
  content:"";
  position:absolute;
  inset:8px;
  border:var(--lw1) solid rgba(240,240,240,0.18);
  border-radius:var(--rad0);
}

.overlay .rect::after{
  content:"😃";
  position:absolute;
  left:8px;
  top:-10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.46);
  background:rgba(11,11,16,0.74);
  padding:4px 6px;
  border:var(--lw1) solid rgba(240,240,240,0.16);
}

/* 12+ rectangles (responsive %) */
.overlay .r1{ left:2.6%;  top:10.5%; width:32%; height:14%; }
.overlay .r2{ left:18%;   top:28%;   width:44%; height:18%; }
.overlay .r3{ left:6%;    top:54%;   width:28%; height:13%; }
.overlay .r4{ left:38%;   top:8%;    width:24%; height:9%;  }
.overlay .r5{ left:63.5%; top:18%;   width:32%; height:22%; }
.overlay .r6{ left:57%;   top:46%;   width:38%; height:14%; }
.overlay .r7{ left:3.5%;  top:72%;   width:40%; height:16%; }
.overlay .r8{ left:46%;   top:66%;   width:22%; height:10%; }
.overlay .r9{ left:70%;   top:64%;   width:26%; height:18%; }
.overlay .r10{left:12%;   top:18%;   width:20%; height:8%;  }
.overlay .r11{left:33%;   top:48%;   width:18%; height:10%; }
.overlay .r12{left:54%;   top:30%;   width:16%; height:9%;  }
.overlay .r13{left:8%;    top:86%;   width:22%; height:8%;  }

/* yellow “tag” highlight on one frame */
.overlay .r4{
  border-color: rgba(255,210,0,0.52);
  box-shadow: inset 0 0 0 1px rgba(255,210,0,0.16);
}
.overlay .r4::after{
  content:"TAG//LOCK";
  color: rgba(11,11,16,0.92);
  background: rgba(255,210,0,0.90);
  border-color: rgba(255,210,0,0.40);
}

/* ===== bottom amber ticks strip (fixed, non-blocking) ===== */
.rx-bottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:34px;
  z-index:30;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,16,0.00), rgba(11,11,16,0.70)),
    repeating-linear-gradient(90deg,
      rgba(255,176,0,0.00) 0 14px,
      rgba(255,176,0,0.00) 14px 18px,
      rgba(255,176,0,0.60) 18px 20px
    );
  opacity:0.85;
}

/* ===== 3) MAIN PAGE LAYOUT ===== */
.page{
  position:relative;
  z-index:5;
  padding-bottom:56px; /* keep content clear of bottom ticks */
}

/* Mast/header keeps your GIF, adds blueprint linework */
.mast{
  position:relative;
  height:220px;
  overflow:hidden;
  border-bottom:var(--lw1) solid rgba(240,240,240,0.18);
  background: url("../images/banner.gif") no-repeat center center / cover;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.mast::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.72)),
    repeating-linear-gradient(90deg, rgba(240,240,240,0.055) 0 1px, transparent 1px 24px);
  mix-blend-mode:overlay;
  opacity:0.85;
}

.mast h1{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--w0);
  text-shadow: 0 0 18px rgba(0,0,0,0.55);
}

.mast h1::after{
  content:"// ABSOLUTE INDEX  ::  checksum: 7f  ::  keep the wound open";
  position:absolute;
  left: 6px;
  top: -18px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.46);
  white-space:nowrap;
}

.submark{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  padding:7px 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.62);
  background:rgba(11,11,16,0.58);
  border:var(--lw1) solid rgba(240,240,240,0.16);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.08);
}

/* ===== sections become panels with boundaries AND boundary-ignoring overlays ===== */
.section{
  max-width:1100px;
  margin: 18px auto;
  padding: 14px 14px 16px;
  background: rgba(11,11,16,0.66);
  border: var(--lw1) solid rgba(240,240,240,0.18);
  border-radius: var(--rad2);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  position:relative;
  overflow:hidden;
}

.section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(0,64,96,0.18), transparent 44%),
    linear-gradient(315deg, rgba(0,56,80,0.16), transparent 50%),
    repeating-linear-gradient(0deg, rgba(240,240,240,0.03) 0 1px, transparent 1px 18px);
  opacity:0.85;
}

.section::after{
  content:"ARCHIVE::PANEL / unit:731 / note: 断片 / do not trust clean edges";
  position:absolute;
  right:12px;
  top:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.38);
  white-space:nowrap;
}

.section > *{ position:relative; z-index:2; }

.section h2{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:1.65rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--w0);
  border-bottom:var(--lw1) solid rgba(240,240,240,0.16);
  padding-bottom:8px;
}

.section h2::after{
  content:" / yawning / partial gooning / 10,000+ hours of masturbation... / ";
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(0,208,106,0.62);
  margin-left:10px;
}

.subtitle{
  margin:0 0 12px;
  color:rgba(240,240,240,0.68);
  font-family:var(--font-sans);
  font-size:0.95rem;
}

/* ===== YouTube channel tiles ===== */
.channel-links{
  max-width:1100px;
  margin:14px auto 8px;
  padding: 0 14px;
  display:flex;
  gap:12px;
  justify-content:center;
}

.channel-box{
  flex:1;
  text-decoration:none;
  color:var(--w0);
  position:relative;
  overflow:hidden;
  border-radius:var(--rad2);
  background: rgba(16,16,24,0.60);
  border: var(--lw1) solid rgba(240,240,240,0.18);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.08);
  padding: 12px 10px 10px;
  text-align:center;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

.channel-box::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,210,0,0.00), rgba(255,210,0,0.08), rgba(255,210,0,0.00)),
    repeating-linear-gradient(90deg, rgba(240,240,240,0.00) 0 18px, rgba(240,240,240,0.06) 19px 20px);
  opacity:0.55;
  mix-blend-mode:overlay;
}

.channel-box::after{
  content:"LINK // EXTERNAL";
  position:absolute;
  right:10px;
  top:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(255,210,0,0.78);
  opacity:0.95;
}

.channel-box:hover{
  transform: translateY(-3px);
  border-color: rgba(240,240,240,0.30);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(240,240,240,0.12);
  filter: drop-shadow(1px 0 rgba(0,208,106,0.18)) drop-shadow(-1px 0 rgba(255,176,0,0.14));
}

.pfp{
  display:block;
  width:74px;
  height:74px;
  border-radius:50%;
  object-fit:cover;
  border: var(--lw1) solid rgba(240,240,240,0.32);
  margin: 8px auto 8px;
}

.channel-box span{
  display:block;
  font-family:var(--font-display);
  letter-spacing:1px;
  font-size:0.98rem;
  text-transform:lowercase;
}

/* ===== route cards ===== */
.route-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

.route-card{
  display:block;
  text-decoration:none;
  color:var(--w0);
  position:relative;
  overflow:hidden;
  border-radius:var(--rad2);
  background: rgba(16,16,24,0.60);
  border: var(--lw1) solid rgba(240,240,240,0.18);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.08);
  padding: 12px 12px 10px;
  min-height: 130px;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

.route-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(240,240,240,0.00) 0 22px, rgba(240,240,240,0.06) 23px 24px),
    linear-gradient(135deg, rgba(0,64,96,0.14), transparent 46%);
  opacity:0.75;
  mix-blend-mode:overlay;
}

.route-card::after{
  content:"LOG:: " attr(href) " / cut here / keep moving / 影";
  position:absolute;
  left:12px;
  bottom:10px;
  right:12px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.44);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0.95;
}

.route-card:hover{
  transform: translateY(-3px);
  border-color: rgba(240,240,240,0.30);
  box-shadow: 0 12px 30px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(240,240,240,0.12);
  filter: drop-shadow(1px 0 rgba(0,208,106,0.14)) drop-shadow(-1px 0 rgba(255,176,0,0.12));
}

.route-card .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(11,11,16,0.92);
  background: var(--yl);
  padding: 6px 8px;
  border-radius: var(--rad1);
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
}

.route-card .tag::before{
  content:"";
  width:8px;
  height:8px;
  background: rgba(11,11,16,0.92);
  box-shadow: 12px 0 0 rgba(11,11,16,0.34);
}

.route-card .title{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:1.2px;
  margin: 10px 0 6px;
  text-transform:uppercase;
}

.route-card .desc{
  margin:0;
  color: rgba(240,240,240,0.70);
  font-size:0.92rem;
}

.route-card .accent{
  position:absolute;
  right:10px;
  top:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(0,208,106,0.78);
}

/* ===== thumbnail grid (keeps original image color) ===== */
.thumbnail-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}

.thumb-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--rad2);
  background: rgba(16,16,24,0.60);
  border: var(--lw1) solid rgba(240,240,240,0.18);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.08);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

.thumb-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    /* frame-within-frame */
    linear-gradient(rgba(240,240,240,0.00), rgba(240,240,240,0.00)) 0 0/100% 100%,
    linear-gradient(var(--w0), var(--w0)) 12px 12px / 14px 1px no-repeat,
    linear-gradient(var(--w0), var(--w0)) 12px 12px / 1px 14px no-repeat,
    linear-gradient(var(--w0), var(--w0)) calc(100% - 26px) 12px / 14px 1px no-repeat,
    linear-gradient(var(--w0), var(--w0)) calc(100% - 12px) 12px / 1px 14px no-repeat,
    linear-gradient(var(--w0), var(--w0)) 12px calc(100% - 12px) / 14px 1px no-repeat,
    linear-gradient(var(--w0), var(--w0)) 12px calc(100% - 26px) / 1px 14px no-repeat,
    linear-gradient(var(--w0), var(--w0)) calc(100% - 26px) calc(100% - 12px) / 14px 1px no-repeat,
    linear-gradient(var(--w0), var(--w0)) calc(100% - 12px) calc(100% - 26px) / 1px 14px no-repeat,

    /* soft scan */
    repeating-linear-gradient(180deg, rgba(255,255,255,0.00) 0 3px, rgba(255,255,255,0.06) 3px 4px);
  opacity:0.22;
  mix-blend-mode:overlay;
}

.thumb-item::after{
  content:"NOTE:: keep gettin bigger / timesgone:?? / yell:loud / 陰茎か?";
  position:absolute;
  left:12px;
  top:12px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(240,240,240,0.44);
  background: linear-gradient(90deg, rgba(11,11,16,0.72), rgba(11,11,16,0.00));
  padding:6px 8px;
  border-left: var(--lw2) solid rgba(240,240,240,0.20);
  opacity:0.0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events:none;
}

.thumb-item:hover{
  transform: translateY(-3px);
  border-color: rgba(240,240,240,0.30);
  box-shadow: 0 12px 30px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(240,240,240,0.12);
  filter: drop-shadow(1px 0 rgba(0,208,106,0.14)) drop-shadow(-1px 0 rgba(255,176,0,0.12));
}

.thumb-item:hover::after{
  opacity:1;
  transform: translateY(0);
}

.thumb-item img{
  width:100%;
  display:block;
  object-fit:cover;
  background:#000;
  /* Keep original color. Only subtle contrast. */
  filter: contrast(1.06) saturate(1.02);
  transition: transform .14s ease, filter .14s ease;
}

.thumb-item:hover img{
  transform: scale(1.02);
  filter:
    contrast(1.10)
    saturate(1.04)
    drop-shadow(1px 0 rgba(0,208,106,0.12))
    drop-shadow(-1px 0 rgba(255,176,0,0.10));
}

.thumb-label{
  margin:0;
  padding: 10px 10px 11px;
  font-family:var(--font-display);
  font-size:0.92rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--w0);
  background: rgba(11,11,16,0.76);
  border-top: var(--lw1) solid rgba(240,240,240,0.14);
  position:relative;
}

.thumb-label::after{
  content:" / archive id: " attr(data-id) " / amber ticks";
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(255,176,0,0.68);
  opacity:0.0;
  margin-left:10px;
}

.thumb-item:hover .thumb-label::after{ opacity:1; }

/* ===== channel page search bar ===== */
.search-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--lw1) solid rgba(240,240,240,0.12);
}

.search-row .meta{
  color: rgba(240,240,240,0.68);
  font-family:var(--font-mono);
  font-size: 11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.search-row input[type="search"]{
  flex:1;
  min-width:220px;
  max-width:520px;
  padding: 10px 12px;
  border-radius: var(--rad2);
  border: var(--lw1) solid rgba(240,240,240,0.18);
  background: rgba(11,11,16,0.60);
  color: var(--w0);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.08);
}

.search-row input[type="search"]::placeholder{
  color: rgba(240,240,240,0.40);
}

/* ===== back link ===== */
.back-link{
  display:inline-block;
  margin: 10px 0 8px;
  color: var(--w0);
  text-decoration:none;
  font-family:var(--font-display);
  letter-spacing:1px;
}

.back-link:hover{
  text-decoration:underline;
}

/* ===== lightbox / jumpscare overlays (kept) ===== */
#lightbox-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.90);
  justify-content:center;
  align-items:center;
  z-index: 2000;
}
#lightbox-overlay img{
  max-width:95vw;
  max-height:95vh;
  border: var(--lw1) solid rgba(240,240,240,0.18);
  border-radius: var(--rad2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.60);
  cursor: zoom-out;
}
#jumpscare-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:#000;
  justify-content:center;
  align-items:center;
  z-index:3000;
}
#jumpscare-overlay img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#post-jump-video{
  display:none;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:4000;
  background:#000;
}

/* ===== fixed players ===== */
.player{
  position:fixed;
  top: 10px;
  width: clamp(320px, 34vw, 420px);
  background: rgba(11,11,16,0.70);
  border-radius: var(--rad2);
  padding: 9px;
  display:flex;
  align-items:center;
  gap: 10px;
  border: var(--lw1) solid rgba(240,240,240,0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(240,240,240,0.08);
  z-index: 1200;
  backdrop-filter: blur(2px);
}

.player.left{ left: 10px; }
.player.right{ right: 10px; }

.player .cover{
  width: 60px;
  height: 60px;
  border-radius: var(--rad1);
  object-fit: cover;
  border: var(--lw1) solid rgba(240,240,240,0.22);
  filter: none; /* keep cover color */
}

.player .info-controls{
  flex:1;
  display:flex;
  flex-direction:column;
}
.player .title{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:1px;
  font-size: 0.98rem;
  line-height:1.2;
}
.player .artist{
  font-size: 0.86rem;
  color: rgba(240,240,240,0.68);
  margin-top:2px;
}

.player .controls{
  margin-top: 8px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.player .btn{
  background:none;
  border:none;
  cursor:pointer;
  width:24px;
  height:24px;
  padding:0;
  transition: transform .10s ease, filter .10s ease;
}

.player .btn svg{ fill: rgba(240,240,240,0.90); }
.player .btn:hover{
  transform: scale(1.06);
  filter: drop-shadow(1px 0 rgba(0,208,106,0.22)) drop-shadow(-1px 0 rgba(255,176,0,0.18));
}

.player input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  background: rgba(240,240,240,0.22);
  border-radius:999px;
  outline:none;
}

.player input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background: var(--w0);
  cursor:pointer;
}

.player .time{
  margin-top: 6px;
  font-family:var(--font-mono);
  font-size: 10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(240,240,240,0.60);
}

/* ===== webcam widget + CRT ===== */
#webcam-widget{
  position:fixed;
  bottom:10px;
  left:10px;
  width:300px;
  max-width:42vw;
  background: rgba(11,11,16,0.74);
  border: var(--lw2) solid rgba(255,210,0,0.24);
  border-left-color: rgba(255,0,0,0.45);
  border-radius: var(--rad2);
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(240,240,240,0.06);
  z-index:1200;
  backdrop-filter: blur(2px);
  isolation:isolate;
}

#webcam-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:7px 9px;
  border-bottom: var(--lw1) solid rgba(240,240,240,0.12);
  font-family:var(--font-display);
  color: rgba(240,240,240,0.84);
  font-size:.86rem;
  background:
    linear-gradient(90deg, rgba(255,210,0,0.10), rgba(11,11,16,0.66));
}

#webcam-toggle{
  appearance:none;
  border: var(--lw1) solid rgba(240,240,240,0.18);
  cursor:pointer;
  padding:6px 10px;
  border-radius: var(--rad2);
  font-weight:800;
  letter-spacing:.6px;
  background: rgba(255,210,0,0.18);
  color: rgba(240,240,240,0.92);
  transition: transform .08s ease, opacity .12s ease;
}
#webcam-toggle:hover{ opacity:.92; }
#webcam-toggle:active{ transform: scale(.98); }
#webcam-toggle[data-state="off"]{
  background: rgba(0,0,0,0.35);
  color: rgba(255,210,0,0.85);
}

#webcam-view{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}

#webcam-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter: contrast(1.18) saturate(1.12) brightness(0.92);
  transform: scale(1.03);
  transform-origin:center;
}

#webcam-view::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.22) 3px,
      rgba(0,0,0,0.22) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 4px
    );
  mix-blend-mode: overlay;
  opacity:0.42;
  animation: crtRoll 2.8s linear infinite, crtFlicker 5.2s infinite;
}

#webcam-view::after{
  content:"CAM // LIVE FEED // TRIPLE DIGIT IQ MALE?!  ::  do not trust our edgers";
  position:absolute;
  left:10px;
  top:10px;
  z-index:3;
  pointer-events:none;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(255,210,0,0.82);
  background: linear-gradient(90deg, rgba(11,11,16,0.76), rgba(11,11,16,0.00));
  padding:6px 8px;
  border-left: var(--lw2) solid rgba(255,210,0,0.32);
}

@keyframes crtRoll{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 0 120px, 0 0; }
}
@keyframes crtFlicker{
  0%,100%{ opacity:0.36; }
  35%{ opacity:0.46; }
  52%{ opacity:0.38; }
  78%{ opacity:0.44; }
}

/* ===== motion: micro-jitter + flicker (hover only) ===== */
@keyframes microJitter{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(1px,0); }
  50%{ transform:translate(0,1px); }
  75%{ transform:translate(-1px,0); }
  100%{ transform:translate(0,0); }
}

.route-card:hover,
.thumb-item:hover{
  animation: microJitter 0.18s steps(2,end) 1;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===== responsive ===== */
@media (max-width: 860px){
  .channel-links{ flex-direction:column; }
}

@media (max-width: 720px){
  .player{ width: 88vw; left:6vw; right:auto; }
  .player.right{ top: 92px; }
  .mast{ height:210px; }
  .submark{ display:none; }
}
/* =========================
   INDEX: NEW VIDEOS (DIRECT)
   ========================= */

.new-videos-inline{
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(240,240,240,0.18);
  border-radius: 10px;
  background: rgba(0,0,0,0.40);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.06);
}

.new-videos-inline__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(240,240,240,0.12);
}

.new-videos-inline__label{
  font-family: 'Orbitron', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(240,240,240,0.85);
}

.new-videos-thumbs{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Reuse your existing thumb-item styling, just tighten it */
.thumb-item.thumb-item--mini img{
  height: 140px;
  object-fit: cover;
}

.thumb-item.thumb-item--mini .thumb-label{
  font-size: 0.80rem;
  padding: 9px 10px 10px;
}
/* assets/site.css (ADD/KEEP THIS BLOCK AT VERY BOTTOM) */

/* =========================
   INDEX: NEW VIDEOS (DIRECT ENTRY)
   - Only newVideos bypasses channel list
   ========================= */

.new-videos-inline{
  margin: 12px 0 14px;
  padding: 10px;
  border: 1px solid rgba(240,240,240,0.18);
  border-radius: 10px;
  background: rgba(0,0,0,0.40);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.06);
}

.new-videos-inline__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(240,240,240,0.12);
}

.new-videos-inline__label{
  font-family: 'Orbitron', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(240,240,240,0.85);
}

.new-videos-thumbs{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Mini thumbs reuse your existing thumb-item look */
.thumb-item.thumb-item--mini img{
  height: 140px;
  object-fit: cover;
}

.thumb-item.thumb-item--mini .thumb-label{
  font-size: 0.80rem;
  padding: 9px 10px 10px;
}

/* =========================================================
   PATCH — KEEP LINEWORK OFF VIDEO + GALLERY SURFACES ONLY
   - leaves HUD, header, players, webcam, bottom ticks, etc. intact
   - removes thumbnail/frame overlays from media tiles
   - lifts media surfaces above the fixed .overlay linework
   ========================================================= */

/* lift gallery/video surfaces above the global fixed overlay */
.thumbnail-grid,
.new-videos-inline,
.new-videos-thumbs,
.video-wrapper,
.gallery-grid,
.gallery-thumb{
  position: relative;
  z-index: 60;
}

.thumb-item,
.thumb-item img,
.thumb-label,
.video-wrapper > *,
.video-wrapper iframe,
.video-wrapper video{
  position: relative;
  z-index: 61;
}

/* remove linework directly drawn on top of gallery/video cards */
.thumb-item::before,
.thumb-item::after{
  content: none !important;
  display: none !important;
}


/* =========================================================
   PATCH — REMOVE BULK BOX/EMOJI OVERLAY LINEWORK
   - removes the fixed .overlay system only
   - keeps HUD, noise, players, webcam, header, bottom ticks intact
   ========================================================= */

.overlay,
.overlay::before,
.overlay::after,
.overlay .rect,
.overlay .rect::before,
.overlay .rect::after{
  display: none !important;
  content: none !important;
}