/* ───────────────────────────────────────────────────────────
   PoopTube — cursed youtube. dark mode by default but wrong.
   no external fonts. no external anything.
   ─────────────────────────────────────────────────────────── */

:root{
  --bg:#0a0a0c;
  --bg2:#101013;
  --panel:#15151a;
  --panel2:#1c1c22;
  --ink:#d8d4cf;
  --ink-dim:#7a7a82;
  --ink-faint:#3e3e46;
  --accent:#ff2244;
  --accent2:#ff5566;
  --rust:#a0341a;
  --jaundice:#b8a55c;
  --bile:#475c2c;
  --link:#88aaff;
  --good:#33dd88;
  --warn:#ffaa33;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --serif: 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,34,68,0.045) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(184,165,92,0.03) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px),
    var(--bg);
  overflow-x:hidden;
}

/* very subtle parallax */
@keyframes drift {
  0%   {background-position: 0 0, 0 0, 0 0, 0 0;}
  100% {background-position: 0 -40px, 0 30px, 0 0, 0 0;}
}
body{ animation: drift 90s linear infinite; }

/* CRT scanline overlay */
.crt{
  position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}
.crt::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0.0) 0px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.0) 4px);
  animation: roll 9s linear infinite;
}
@keyframes roll{ 0%{transform:translateY(-2%)} 100%{transform:translateY(2%)} }

/* vignette */
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:9001;
  background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* dead pixels — fixed, subtle. Positions in classes (CSP-strict). */
.dead-pixel{
  position:fixed;width:1px;height:1px;background:rgba(255,255,255,0.85);
  z-index:9100;pointer-events:none;mix-blend-mode:screen;
}
.dp-1{ top:13%; left:7%; }
.dp-2{ top:64%; left:91%; }
.dp-3{ top:82%; left:23%; width:2px; height:2px; }

/* ─── header ─── */
.topbar{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:10px 18px;
  background:linear-gradient(180deg, var(--bg2) 0%, rgba(16,16,19,0.92) 100%);
  border-bottom:1px solid #1f1f25;
  backdrop-filter: blur(2px);
}

.logo{
  display:inline-flex;align-items:baseline;gap:1px;
  font-family:var(--mono);font-weight:800;font-size:22px;letter-spacing:-0.5px;
  user-select:none;
  position:relative;
}
/* logo P: clean red, no shadow split, no offset. */
.logo-mark{ color:var(--accent); }
.logo-rest{ color:var(--ink); }
.logo-tube{
  color:var(--accent);
  background:var(--accent); color:#0a0a0c;
  padding:0 6px;border-radius:3px;margin-left:4px;
}
.logo-flip{
  position:absolute;left:0;top:100%;font-family:var(--mono);font-size:9px;
  color:var(--ink-faint);letter-spacing:0;
}

.search{display:flex;justify-content:center;width:100%;}
.search input{
  width:min(540px, 80%);background:#000; color:var(--ink);
  border:1px solid #2a2a32; border-right:0; padding:8px 12px;
  font-family:var(--mono);font-size:13px;outline:none;
  border-radius:3px 0 0 3px;
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.search input::placeholder{color:#444;font-style:italic;}
.search button{
  background:#1c1c22;color:var(--ink);border:1px solid #2a2a32;border-left:0;
  padding:8px 14px;cursor:pointer;border-radius:0 3px 3px 0;font-size:14px;
}
.search button:hover{background:#26262e;color:var(--accent);}

.topright{display:flex;align-items:center;gap:10px;}
.iconbtn{
  background:transparent;border:0;color:var(--ink-dim);font-size:18px;cursor:pointer;
  position:relative;padding:4px 6px;
}
.iconbtn:hover{color:var(--ink);}
.bell{
  position:absolute;top:-3px;right:-6px;background:var(--accent);color:#000;
  font-size:9px;font-family:var(--mono);padding:1px 4px;border-radius:8px;font-weight:700;
}

.avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#330,#660);
  display:grid;place-items:center;color:var(--accent2);font-family:var(--mono);font-weight:800;
  cursor:pointer;user-select:none;
  animation: avapulse 1.6s ease-in-out infinite alternate;
  border:1px solid #444;
}
@keyframes avapulse{
  0%   {transform:scale(1) rotate(-1deg); filter:hue-rotate(0deg);}
  50%  {transform:scale(1.04) rotate(2deg); filter:hue-rotate(60deg);}
  100% {transform:scale(0.98) rotate(-3deg); filter:hue-rotate(-30deg);}
}

/* ─── layout ─── */
.layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:24px;
  max-width:1400px;
  margin:18px auto 0;
  padding:0 18px 60px;
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr;}
}

/* ─── player ─── */
.player-frame{
  position:relative;
  background:#000;border:1px solid #1f1f25;border-radius:6px;overflow:hidden;
  aspect-ratio:854/480;
  box-shadow: 0 0 0 1px #000, 0 6px 32px rgba(255,34,68,0.06);
  animation: frameflicker 7s steps(3,end) infinite;
}
@keyframes frameflicker{
  0%, 92%, 100% { box-shadow: 0 0 0 1px #000, 0 6px 32px rgba(255,34,68,0.06); }
  93%  { box-shadow: 0 0 0 1px var(--accent), 0 6px 32px rgba(255,34,68,0.18); transform: translate(0.5px, 0); }
  95%  { box-shadow: 0 0 0 1px #00ffd5,    0 6px 32px rgba(0,255,213,0.18); transform: translate(-0.5px, 0); }
  97%  { box-shadow: 0 0 0 1px #000, 0 6px 32px rgba(255,34,68,0.06); }
}
.player-frame video{ width:100%; height:100%; display:block; }
.live-pill{
  position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.7);
  color:#ff5566;font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:3px;
  border:1px solid rgba(255,85,102,0.4);letter-spacing:0.5px;user-select:none;
  pointer-events:none;
}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff2244;
  margin-right:4px;vertical-align:middle;animation:livepulse 1.1s ease-in-out infinite;}
@keyframes livepulse{50%{opacity:0.2;}}
.scanline{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  pointer-events:none;animation: scan 6.7s linear infinite;
}
@keyframes scan{ 0%{top:-2px} 100%{top:100%} }

/* ─── titles & meta ─── */
.vidtitle{
  font-size:22px;line-height:1.25;margin:14px 2px 10px;
  font-weight:700;letter-spacing:-0.2px;
}

.glitch{position:relative;color:var(--ink);}
.glitch::before,.glitch::after{
  content: attr(data-text); position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:hidden;pointer-events:none;
}
.glitch::before{ color:#00ffd5; transform:translate(-1px,0); mix-blend-mode:screen; clip-path:inset(0 0 60% 0); animation: gl1 3.7s steps(2,end) infinite; }
.glitch::after{  color:#ff2244; transform:translate(1px,0);  mix-blend-mode:screen; clip-path:inset(60% 0 0 0); animation: gl2 4.1s steps(2,end) infinite; }
@keyframes gl1{ 0%,86%,100%{transform:translate(0,0); clip-path:inset(0 0 60% 0);} 90%{transform:translate(-2px,1px); clip-path:inset(40% 0 30% 0);} 95%{transform:translate(1px,-1px); clip-path:inset(10% 0 60% 0);} }
@keyframes gl2{ 0%,84%,100%{transform:translate(0,0); clip-path:inset(60% 0 0 0);} 88%{transform:translate(2px,-1px); clip-path:inset(30% 0 40% 0);} 93%{transform:translate(-1px,1px); clip-path:inset(60% 0 5% 0);} }

.metarow{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:6px 0 14px;border-bottom:1px solid #1c1c22;
  font-family:var(--mono);font-size:13px;color:var(--ink-dim);
}
.meta-left .dot{margin:0 6px;}
.views{ color: var(--ink); }
.uploaded{color:var(--ink-dim);font-style:italic;}

.meta-right{display:flex;gap:6px;flex-wrap:wrap;}
.metabtn{
  background:#16161a;border:1px solid #25252b;color:var(--ink);
  padding:6px 12px;border-radius:18px;cursor:pointer;font-family:var(--mono);font-size:12px;
}
.metabtn:hover{ background:#1f1f26; color:var(--accent2); }

/* ─── channel row ─── */
.channelrow{
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #1c1c22;
}
.channelpic{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:24px;
  background:radial-gradient(circle at 30% 30%, #2a0a0a, #000);
  border:1px solid #2a2a32;
  user-select:none;
}
.glitch-char{
  animation: charglitch 1.6s steps(2,end) infinite;
  text-shadow: 1px 0 0 #00ffd5, -1px 0 0 #ff2244;
}
@keyframes charglitch{
  0%,100%{ filter:hue-rotate(0deg); transform:none; }
  50%    { filter:hue-rotate(180deg) saturate(2); transform:translateX(0.4px); }
}
.channelname{font-weight:600;font-size:14px;}
.verify{color:var(--ink-dim);font-size:11px;}
.channelsub{font-size:12px;color:var(--ink-dim);font-style:italic;}
.subscribe{
  margin-left:auto;background:var(--accent);color:#0a0a0c;border:0;border-radius:18px;
  padding:8px 16px;font-family:var(--mono);font-weight:700;cursor:pointer;font-size:12px;
  letter-spacing:0.4px;
}
.subscribe:hover{ background:var(--accent2); }
.subscribe.bell-on{ background:#1f1f26; color:var(--ink); border:1px solid #303038;}

/* ─── description ─── */
.description{
  background:linear-gradient(180deg, #131318, #0e0e12);
  border:1px solid #1c1c22;border-radius:6px;padding:14px 16px;margin-top:14px;
  font-size:14px;line-height:1.55;
}
.desc-head{margin-bottom:8px;color:var(--accent2);font-family:var(--mono);}
.desc-body p{margin:0 0 8px;color:var(--ink);}
.dim{color:var(--ink-dim);font-family:var(--mono);}
.sig{ color:var(--ink-dim); font-style:italic; }
.description details{ margin-top:8px;padding-top:8px;border-top:1px dashed #25252b; }
.description summary{ cursor:pointer;color:var(--ink-dim);font-family:var(--mono);font-size:12px; }
.chapters{ margin:6px 0 6px 18px;font-family:var(--mono);font-size:12px;color:var(--ink-dim); }
.chapters li{ margin:2px 0; }
.tinyprint{font-size:10px;color:var(--ink-faint);font-family:var(--mono);}

/* ─── comments ─── */
.comments{ margin-top:24px; }
.comments-head{
  display:flex;align-items:baseline;gap:18px;margin-bottom:12px;
  font-size:14px;color:var(--ink);
}
.comments-head em{font-style:italic;color:var(--ink-dim);font-size:12px;}
.sortby{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-dim);}

.addcomment{display:flex;gap:10px;align-items:center;margin-bottom:18px;}
.addcomment input{
  flex:1;background:transparent;border:0;border-bottom:1px solid #25252b;
  color:var(--ink);padding:8px 0;font-family:var(--sans);font-size:13px;outline:none;
}
.addcomment input::placeholder{color:#444;font-style:italic;}
.myavatar{
  width:32px;height:32px;border-radius:50%;background:#222;
  display:grid;place-items:center;color:var(--accent);font-family:var(--mono);font-weight:800;
  border:1px solid #333;
}

.commentlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;}
.cmt{display:flex;gap:12px;align-items:flex-start;}
.cmt.indent{margin-left:42px;border-left:1px dashed #25252b;padding-left:10px;}
.cmt-avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 32px;
  display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:13px;
  user-select:none;border:1px solid #2a2a32;
}
.cmt-body{flex:1;min-width:0;}
.cmt-line1{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px;}
.cmt-user{font-weight:600;color:var(--ink);font-family:var(--mono);}
.cmt-user.weird{color:var(--accent2);}
.cmt-user.ghost{color:var(--ink-faint);font-style:italic;}
.cmt-time{color:var(--ink-dim);font-family:var(--mono);font-size:11px;}
.cmt-time.warn{color:var(--warn);}
.cmt-time.bad{color:var(--accent);}
.cmt-time.ok{color:var(--good);}
.cmt-text{color:var(--ink);font-size:13.5px;line-height:1.5;margin:4px 0;word-wrap:break-word;}
.cmt-text.faded{color:var(--ink-dim);}
.cmt-actions{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--ink-dim);margin-top:2px;}
.cmt-actions span{cursor:default;}
.cmt-pin{color:var(--accent2);font-size:10px;font-family:var(--mono);
  border:1px solid var(--accent);padding:1px 4px;border-radius:3px;margin-left:4px;}

/* small caps for some users */
.smallcaps{font-variant:small-caps;letter-spacing:0.5px;}

/* ─── sidebar / recommended ─── */
.sidebar{ min-width:0; }
.recheader{
  font-size:14px;margin:0 2px 12px;color:var(--ink);
  display:flex;align-items:center;gap:10px;
}
.autoplay-pill{
  font-size:10px;color:var(--ink-dim);font-family:var(--mono);
  border:1px solid #25252b;padding:2px 6px;border-radius:10px;font-weight:400;
}
.auto-toggle{color:var(--good);}

.reclist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.rec{
  display:grid;grid-template-columns: 168px 1fr; gap:10px;
  cursor:pointer;border-radius:4px;padding:4px;
  transition: background 0.2s;
}
.rec:hover{background:#13131a;}
.rec.locked{cursor:not-allowed;opacity:0.85;}
.rec.locked:hover{background:#13131a;}
.rec.locked .rec-thumb::after{
  content:"⛔";position:absolute;top:4px;right:4px;font-size:14px;
  text-shadow:0 0 4px #000;
}
.rec-thumb{
  position:relative;background:#000;border-radius:3px;overflow:hidden;
  aspect-ratio:168/96;display:block;
}
.rec-thumb canvas{width:100%;height:100%;display:block;}
.rec-dur{
  position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,0.85);
  color:var(--ink);font-family:var(--mono);font-size:10px;padding:1px 4px;border-radius:2px;
}
.rec-info{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;}
.rec-title{font-size:12.5px;line-height:1.3;color:var(--ink);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.rec-chan{font-size:11px;color:var(--ink-dim);font-family:var(--mono);margin-top:3px;}
.rec-views{font-size:10px;color:var(--ink-faint);font-family:var(--mono);margin-top:1px;}
.rec.locked .rec-title{color:var(--ink-dim);}
.rec-footer{margin-top:14px;text-align:center;}
.footnote{font-size:10px;color:var(--ink-faint);font-style:italic;}

/* ─── footer ─── */
.bottom{ max-width:1400px;margin:30px auto 0;padding: 18px 18px 40px; border-top:1px solid #1c1c22; color:var(--ink-dim); font-size:12px; font-family:var(--mono); }
.bottom a{color:var(--link);}
.bottom .tiny{font-size:11px;color:var(--ink-faint);margin-top:4px;}

/* ─── konami overlay ─── */
/* `hidden` attribute must beat our explicit display rule. */
.konami-overlay[hidden]{ display:none !important; }
.konami-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:9500;
  display:grid;place-items:center;
  animation: konfade 0.2s ease-out;
}
@keyframes konfade{ from{opacity:0;} to{opacity:1;} }
.konami-inner{
  background:linear-gradient(180deg,#1a0a0a,#0a0010);
  border:1px solid var(--accent);box-shadow:0 0 60px rgba(255,34,68,0.4);
  padding:24px 28px;max-width:420px;text-align:center;border-radius:6px;
  font-family:var(--mono);
}
.konami-title{font-size:24px;margin-bottom:10px;}
.konami-line{font-size:14px;letter-spacing:0;color:var(--accent2);margin:14px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;}
.kkey{
  display:inline-block;min-width:14px;padding:4px 8px;
  border:1px solid #1a2a1a;border-radius:3px;background:#0a0a0a;
  color:#778899;font-family:var(--mono);
  transition:background 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out, border-color 140ms ease-out;
  text-align:center;line-height:1;
}
/* correct key just pressed -> green glow */
.kkey.lit{
  background:#0e2a16;color:#5cff8c;border-color:#33ff66;
  box-shadow:0 0 10px #33ff66, 0 0 22px rgba(51,255,102,0.35);
  transform:translateY(-1px) scale(1.06);
}
/* wrong key -> the entire row flashes red and shakes; sequence resets to 0 */
.konami-line.wrong .kkey{
  animation:kshake 280ms;
  background:#3a0010 !important;color:#ffb0b8 !important;border-color:#ff2244 !important;
  box-shadow:0 0 12px #ff2244, 0 0 30px rgba(255,34,68,0.55) !important;
  transform:scale(1) !important;
}
@keyframes kshake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.konami-inner p{color:var(--ink);font-size:13px;line-height:1.5;}
.konami-inner button{
  margin-top:14px;background:var(--accent);color:#000;border:0;
  padding:8px 16px;border-radius:3px;cursor:pointer;font-family:var(--mono);
  font-weight:700;font-size:12px;
}

/* selection */
::selection{background:var(--accent);color:#000;}

/* scrollbar (webkit) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#1f1f25;border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#2a2a32;}