/* ============================================================
   RealPlayer.exe — video stream window (Owncast embed)
   Win98 chrome + minimal player controls
   ============================================================ */

.window-realplayer {
  width: 720px;
  min-width: 400px;
}

.window-realplayer .win98-title .rp-title-txt {
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 11px;
}

.rp-status-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 11px;
}

.rp-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: #808080;
  color: #202020;
  border: 1px solid #404040;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rp-live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #202020;
  border-radius: 50%;
  display: inline-block;
}

.rp-live-dot.is-live {
  background: #003c00;
  color: #4dff4d;
  border-color: #001a00;
}

.rp-live-dot.is-live::before {
  background: #4dff4d;
  box-shadow: 0 0 4px #4dff4d;
  animation: rp-pulse 1.4s ease-in-out infinite;
}

@keyframes rp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.rp-viewer-count { color: #404040; }

.rp-title-line {
  flex: 1;
  color: #404040;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rp-body {
  padding: 4px;
  background: #000;
  min-height: 340px;
  position: relative;
}

.rp-frame {
  width: 100%;
  height: 405px;
  background: #000;
  border: 2px inset #d4d0c8;
  display: block;
}

.rp-offline-overlay {
  position: absolute;
  inset: 4px;
  background: #000;
  color: #a0a0a0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 12px;
  pointer-events: none;
  border: 2px inset #d4d0c8;
}

.rp-offline-overlay.is-hidden { display: none; }

.rp-offline-glyph { font-size: 40px; color: #4a4a4a; }
.rp-offline-txt { color: #b0b0b0; letter-spacing: 1px; }
.rp-offline-sub {
  color: #707070;
  font-size: 10px;
  max-width: 320px;
  text-align: center;
  line-height: 1.4;
}

.rp-controls-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #d4d0c8;
  border-top: 1px solid #808080;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 11px;
}

.rp-controls-strip a {
  color: #0000ff;
  text-decoration: underline;
  font-size: 11px;
}

.rp-controls-spacer { flex: 1; }

@media (max-width: 720px) {
  .window-realplayer { width: 96vw !important; left: 2vw !important; }
  .rp-frame { height: 220px; }
}