@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400&display=swap');

body {
  font-family: 'Lato', sans-serif;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.4;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
}

a { color: #fff; text-decoration: none; }
a:visited { color: #ccc; }

img { display: block; max-width: 100%; height: auto; }

/* ── Room layout ── */
.room-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

/* ── Media container with hover controls ── */
.room-media {
  position: relative;
  display: inline-block;
  line-height: 0; /* prevent gap under image */
}

.room-media img,
.room-media video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* hidden audio element */
.room-media audio {
  display: none;
}

/* Hover control bar — invisible until hover */
.hover-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  opacity: 0;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
}

.room-media:hover .hover-controls { opacity: 1; }

.btn-playpause {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}
.btn-playpause:hover { opacity: 1; }

.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 3px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

/* ── Flash unavailable notice ── */
.unavailable {
  font-size: 14px;
  color: #666;
  font-style: italic;
  text-align: center;
  margin: 20px auto;
  max-width: 500px;
  line-height: 1.6;
}