/*
Theme Name: H0RRIBLE
Theme URI: https://example.com/h0rrible
Author: OpenCode Assistant
Description: Neon space-themed WordPress theme for MR.H0RRIBLE
Version: 1.0
Text Domain: h0rrible
*/

:root {
  --neon-green: #39FF14;
  --bg: #000000;
  --panel: #111111;
  --chrome: #C0C7D1;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
}

/* Global layout */
.site {
  min-height: 100vh;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #222;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo {
  font-family: Orbitron, 'Arial Black', sans-serif;
  font-size: 28px;
  color: var(--neon-green);
  text-shadow: 0 0 6px #39ff14, 0 0 20px #39ff14;
}
.brand-sub { color: #bbb; font-size: 12px; margin-left: 6px; }

.knob-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}
.knob {
  width: 44px; height: 44px; border-radius: 50%;
  background: #0a0a0a; border: 2px solid #333;
  display: grid; place-items: center; color: #0ff;
  position: relative; cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0,255,180,.25), 0 0 8px rgba(0,255,180,.6);
  transition: transform 0.2s ease;
}
.knob:hover { transform: scale(1.05); }
.knob:focus { outline: 2px solid var(--neon-green); outline-offset: 2px; }
.knob-label { font-size: 10px; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); color:#bbb; }

.nav-links { display:flex; gap: 8px; }
.nav-links a { color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 6px; border: 1px solid #333; }
.nav-links a:hover { background: rgba(57,255,20,.15); border-color: #2cff66; }

.tv-hero { display:flex; justify-content:center; align-items:center; padding: 40px 0; }
.tv-shell { width: min(980px, 92%); height: 520px; border: 10px solid #333; border-radius: 12px; background: #000; position: relative; overflow: hidden; box-shadow: 0 0 0 6px #111; }
.tv-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.95), rgba(0,0,0,.8) 40%, rgba(0,0,0,.95) 100%), #000; overflow: hidden; }
.crt-scan { position:absolute; inset:0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 2px, rgba(0,0,0,0) 2px 4px); mix-blend-mode: overlay; pointer-events:none; }
.tv-screen canvas { width: 100%; height: 100%; display: block; }
.logo { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: #39ff14; font-family: Orbitron, sans-serif; font-size: 28px; text-shadow: 0 0 6px #39ff14; z-index: 2; }
.cloud { position: absolute; width: 200px; height: 60px; border-radius: 40px; filter: blur(0.2px); animation: float 40s linear infinite; opacity:.9; }
.cloud.c1 { top: 40px; left: -280px; background: rgba(0,255,128,.35); animation-duration: 60s; }
.cloud.c2 { top: 120px; left: -180px; background: rgba(0,255,255,.35); animation-duration: 50s; }
.cloud.c3 { top: 200px; left: -320px; background: rgba(255,0,255,.35); animation-duration: 70s; }
.cloud.c4 { top: 260px; left: -150px; width: 260px; height: 72px; background: rgba(255,255,0,.35); animation-duration: 65s; }
.stars { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 0 0 8px #fff; animation: twinkle 4s infinite; }
.twinkle-layer { position: absolute; inset: 0; pointer-events: none; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity:.8; animation: twinkle 4s infinite; }
.stars-layer-2 .star { background: #cbd5e1; }

@keyframes float { 0% { transform: translateX(0); } 100% { transform: translateX(1400px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

/* Content area below TV */
.content-area { padding: 20px; max-width: 1100px; margin: 0 auto; }

/* Merch grid (fallback) */
.merch-grid { display:flex; flex-wrap:wrap; gap:16px; }
.merch-card { width:210px; background:#111; border:1px solid #333; border-radius:8px; padding:12px; }
.merch-card .image { height:120px; background:#222; border-radius:6px; }

/* Responsive tweaks */
@media (max-width: 800px) {
  .tv-shell { height: 420px; }
  .brand-logo { font-size: 22px; }
}