/*
Theme Name: upinthepast presents Rewind & Ruin - RUINED TV CRASH
Theme URI: https://upinthepast.com
Author: upinthepast.com
Description: FUN NOT CORPORATE. Built for shocking funny parodies of TV shows we love but want to RUIN. Base: Posts + Widgets + Google AdSense + Animations. Sidebar only shows if you add something. Click post opens ruined parody. CRT crash course with glitch, static, slime.
Version: 7.0 RUINED FUN
License: GPL v2 or later
Text Domain: upinthepast-rewind-ruin
*/
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Creepster&family=Inter:wght@700;900&display=swap');

:root{
  --bg-outer: #fdf6e3;
  --bg-tv: #0a0a14;
  --accent: #ff1a1a;
  --accent2: #00ff88;
  --glow: #ffe066;
}

@keyframes flicker{0%{opacity:.97}10%{opacity:.92}20%{opacity:.99}100%{opacity:.96}}
@keyframes glitch{
  0%{transform:translate(0); text-shadow:0 0 10px var(--glow)}
  20%{transform:translate(-2px,1px); text-shadow:-3px 0 var(--accent),3px 0 var(--accent2)}
  40%{transform:translate(2px,-1px)}
  60%{transform:translate(-1px,2px)}
  100%{transform:translate(0)}
}
@keyframes scanmove{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}
@keyframes slimeDrip{0%{height:0}50%{height:20px}100%{height:0}}

body{ background: var(--bg-outer); margin:0; font-family:'Inter',sans-serif; }

.crt-tv{
  max-width:1340px; margin:20px auto;
  background: linear-gradient(145deg,#2a2a2a,#111);
  border-radius:36px; padding:18px; border:16px solid #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 6px #000;
  animation: flicker .18s infinite alternate;
}
.crt-inner{ background: var(--bg-tv); border-radius:20px; padding:0; position:relative; overflow:hidden; border:3px solid #000; box-shadow: inset 0 0 120px rgba(0,0,0,.9), inset 0 0 200px rgba(255,26,26,.08); }
.scanline{ position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); animation: scanmove 2.5s linear infinite; z-index:15; pointer-events:none; }

.header{ text-align:center; padding:28px 16px 12px; position:relative; }
.presents{ color: var(--accent2); font-size:11px; letter-spacing:5px; text-transform:uppercase; font-weight:900; animation: glitch 2.5s infinite; display:block; }
.logo{ font-family:'Bangers',cursive; font-size:76px; color: var(--accent); text-shadow: 0 0 12px var(--accent), 0 0 30px var(--accent), 4px 0 0 #000, -3px 0 0 var(--accent2); margin:6px 0; line-height:.9; transform: rotate(-1deg); animation: glitch 3s infinite; }
.logo span{ color: var(--glow); }
.tagline{ background:#000; color:#888; font-size:10px; letter-spacing:3px; padding:5px 14px; border-radius:20px; border:1px solid #333; display:inline-block; margin-top:6px; }

.ad-box{ background: repeating-linear-gradient(45deg,#111128,#111128 10px,#151530 10px,#151530 20px); border:2px dashed var(--accent); border-radius:10px; padding:12px; margin:14px 16px; text-align:center; position:relative; }
.ad-label{ position:absolute; top:-9px; left:14px; background: var(--accent); color:#fff; font-size:8px; padding:2px 8px; border-radius:4px; font-weight:900; letter-spacing:1px; }

.pill-nav{ display:flex; justify-content:center; gap:10px; margin:16px 0; flex-wrap:wrap; padding:0 16px; }
.pill-nav a{ background:#1a1a2e; color: var(--glow); border:2px solid var(--glow); padding:9px 22px; border-radius:30px; text-decoration:none; font-weight:900; font-size:13px; box-shadow:0 0 12px rgba(255,224,102,.3); transition:.2s; }
.pill-nav a:hover, .pill-nav a.active{ background: var(--glow); color:#000; transform: scale(1.06) rotate(-1deg); box-shadow:0 0 24px var(--glow); }

.layout{ display:grid; grid-template-columns: 1fr 360px; gap:18px; padding:0 16px 16px; }
.layout.no-sidebar{ grid-template-columns:1fr; }
.layout.sidebar-left{ grid-template-columns:360px 1fr; }
@media(max-width:980px){ .layout, .layout.sidebar-left{ grid-template-columns:1fr; } }

.panel{ background: linear-gradient(180deg,#1e1e3a 0%,#12122a 100%); border:2px solid #2a2a5a; border-radius:14px; padding:16px; position:relative; box-shadow:0 8px 20px rgba(0,0,0,.3); margin-bottom:16px; }
.panel.light{ background:#ffffff; border-color:#e6ddd0; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.panel h2{ color: var(--glow); font-family:'Bangers',cursive; font-size:22px; margin:0 0 6px 0; letter-spacing:1px; }
.panel.light h2{ color:#1a1a1a; font-family:'Inter',sans-serif; font-weight:900; }
.sub{ color: var(--accent2); font-size:9px; letter-spacing:1px; margin-bottom:10px; font-family:monospace; }
.panel.light .sub{ color:#888; }

.video-card{ background:#000; aspect-ratio:16/9; border-radius:10px; border:3px solid #333; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.video-card:hover{ border-color: var(--glow); transform: scale(1.01); }
.video-card img{ width:100%; height:100%; object-fit:cover; opacity:.7; }
.play{ width:72px; height:72px; border-radius:50%; background: radial-gradient(circle,var(--glow) 0%,var(--accent) 100%); color:#000; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; position:absolute; box-shadow:0 0 30px var(--glow); border:3px solid #000; animation: flicker .2s infinite alternate; }

.badge{ background:#ff0000; color:#fff; font-size:8px; padding:3px 8px; border-radius:12px; font-weight:900; animation: flicker .5s infinite; }
.badge.ruin{ background: var(--accent); }
.badge.live{ background:#ff0000; }

.clips-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
@media(max-width:600px){ .clips-grid{ grid-template-columns:1fr; } }
.clip{ background:#000; border:2px solid #333; border-radius:10px; overflow:hidden; display:block; text-decoration:none; transition:.2s; }
.clip:hover{ border-color: var(--glow); transform: rotate(1deg) scale(1.02); }
.clip img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.clip-title{ padding:6px 8px; font-size:11px; color: var(--glow); font-weight:700; background:#111; }

.sidebar-col{ display:flex; flex-direction:column; gap:0; }
.widget{ background:#fff; border:2px solid #e6ddd0; border-radius:12px; padding:14px; margin-bottom:14px; box-shadow:0 4px 10px rgba(0,0,0,.05); }
.widget.dark{ background:#111128; border-color:#2a2a5a; color:#e0e0a0; }
.widget .widget-title{ color: var(--accent); font-family:'Bangers'; font-size:16px; margin:0 0 8px 0; border-bottom:2px dashed #eee; padding-bottom:6px; }
.widget.dark .widget-title{ color: var(--glow); border-color:#333; }
.widget ul{ list-style:none; padding:0; margin:0; }
.widget li{ padding:6px 0; border-bottom:1px solid #f0ece4; font-size:13px; }
.widget a{ color:#333; text-decoration:none; }
.widget a:hover{ color: var(--accent); }

footer{ text-align:center; font-size:10px; color:#888; padding:18px; background:#0a0a14; border-top:2px solid #222; letter-spacing:2px; }

.single-content{ color:#ddd; line-height:1.7; font-size:15px; }
.single-content img{ max-width:100%; border-radius:8px; border:2px solid #333; }
.single-content h1,.single-content h2,.single-content h3{ color: var(--glow); font-family:'Bangers'; }
.page-content{ color:#222; }
.page-content h1{ color:#111; font-family:'Bangers'; font-size:36px; }