@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500&display=swap');

:root {
  --plum-950: #120f1a;
  --plum-800: #2a2438;
  --plum-600: #3d3450;
  --plum-400: #6d5f8a;
  --lilac: #8c7bb5;
  --amber: #e8a33d;
  --screen-left: 14.375%;
  --screen-top: 14%;
  --screen-width: 71.25%;
  --screen-height: 70%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--plum-950);
  overflow: hidden;
  font-family: 'Barlow', sans-serif;
}

.tv-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: var(--tv-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--plum-950);
}

.tv-screen {
  position: absolute;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  background: #000;
  overflow: hidden;
  border-radius: 0.6vw;
}

.tv-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
  background: #000;
}
.tv-media.is-active { display: block; }

.tv-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--lilac);
  text-align: center;
}
.tv-placeholder__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.tv-placeholder__sub {
  margin: 0;
  color: var(--plum-400);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
}

.sound-btn {
  position: absolute;
  right: 4%;
  bottom: 6%;
  z-index: 5;
  background: rgba(18, 15, 26, 0.85);
  color: #fff;
  border: 1px solid var(--lilac);
  border-radius: 999px;
  padding: 0.6em 1.2em;
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  cursor: pointer;
}
.sound-btn:hover { background: var(--plum-600); }

.tv-bug {
  position: absolute;
  left: 3%;
  bottom: 3%;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--plum-400);
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  text-transform: capitalize;
}
#bugClock { color: var(--lilac); }