:root { --red: #e10600; --dark-red: #7a0000; --black: #0a0a0a; --panel: #161616; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--black); color: #fff;
  font-family: Arial, sans-serif; min-height: 100vh;
}
header {
  background: linear-gradient(#1c1c1c, #000);
  border-bottom: 6px solid var(--red);
  text-align: center; padding: 18px 10px;
}
h1 {
  margin: 0; font-family: 'Bangers', 'Comic Sans MS', cursive;
  font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: 4px;
  color: var(--red);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 var(--dark-red);
  transform: rotate(-2deg);
}
main { max-width: 900px; margin: 20px auto; padding: 0 16px; }
.frame {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 4px solid var(--red); border-radius: 12px;
  box-shadow: 0 0 20px var(--dark-red); overflow: hidden;
}
.frame iframe { width: 100%; height: 100%; border: 0; }
.offline {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Bangers', cursive; font-size: 3rem; color: var(--red);
  pointer-events: none; background: #000;
}
.offline.hidden { display: none; }
.feed-config { display: flex; gap: 8px; margin-top: 10px; }
.feed-config input {
  flex: 1; padding: 8px; background: var(--panel); color: #fff;
  border: 2px solid var(--dark-red); border-radius: 6px;
}
button {
  font-family: 'Bangers', cursive; letter-spacing: 1px; cursor: pointer;
  background: var(--red); color: #fff; border: 3px solid #fff; border-radius: 10px;
  box-shadow: 0 4px 0 var(--dark-red); transition: transform .05s;
}
.feed-config button { padding: 8px 18px; font-size: 1.1rem; }
.controls {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px;
}
.controls button { padding: 18px 6px; font-size: 1.3rem; }
.controls button:hover { background: #ff2a1f; }
.controls button:active, .controls button.active {
  transform: translateY(4px); box-shadow: none; background: #fff; color: var(--red);
}
#status { text-align: center; color: #aaa; margin-top: 16px; }
@media (max-width: 600px) { .controls { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .controls { grid-template-columns: repeat(2, 1fr); } }