@font-face {
  font-family: 'CMUBright';
  src: url('cmunbmr.1abc9b72afe40775d6d7.woff') format('woff');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'CMUBright', serif;
  background: #000;
  color: #fff;
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  padding: 1.5vh 1.5vw;
  gap: 1vh;
}

/* ── Title ── */
.title {
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: normal;
  text-align: right;
  padding-right: 2vw;
  flex-shrink: 0;
}

/* ── Video area ── */
#video-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.video-player {
  position: absolute;
  width: 30vw;
  max-height: 60vh;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease, z-index 0s;
  will-change: transform;
  z-index: 1;
}

/* Hide native controls across browsers */
.video-player::-webkit-media-controls,
.video-player::-webkit-media-controls-enclosure,
.video-player::-webkit-media-controls-panel,
.video-player::-webkit-media-controls-overlay-enclosure {
  display: none !important;
}
.video-player::-webkit-media-controls-start-playback-button {
  display: none !important;
}
.video-player::-moz-media-controls {
  display: none !important;
}

/* Layout: three videos in diagonal-ish positions */
#v0 { left: 2vw;  top: 2vh; }
#v1 { left: 36vw; top: 20vh; }
#v2 { right: 2vw; bottom: 2vh; }

/* Hover enlarge (temporary) */
.video-player.hover {
  z-index: 10;
}

#v0.hover { transform: scale(1.6); }
#v1.hover { transform: scale(1.6); }
#v2.hover { transform: scale(1.6); }

/* Click enlarge (locked) */
.video-player.enlarged {
  z-index: 20;
}

#v0.enlarged { transform: scale(2.8) translateX(3vw) translateY(3vh); }
#v1.enlarged { transform: scale(2.8); }
#v2.enlarged { transform: scale(2.8) translateX(-3vw) translateY(-3vh); }

/* ── Controls area ── */
#controls {
  display: flex;
  align-items: center;
  gap: 2vw;
  flex-shrink: 0;
  padding: 0 1vw;
}

#mixers {
  display: flex;
  gap: 1.5vw;
  align-items: center;
}

.mixer-group {
  display: flex;
  align-items: center;
  gap: 0.3vw;
}

.mixer-label {
  font-size: clamp(0.7rem, 1vw, 1rem);
  opacity: 0.6;
}

.mixer {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  width: 0.6vw;
  height: 6vh;
  background: #333;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.mixer::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.2vw;
  height: 1.2vw;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.mixer::-moz-range-thumb {
  width: 1.2vw;
  height: 1.2vw;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

/* ── Playbar ── */
#playbar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

#play-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

#play-btn:hover { opacity: 0.7; }

#seek-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 0.4vh;
  background: linear-gradient(to right, #fff 0%, #fff var(--seek, 0%), #333 var(--seek, 0%), #333 100%);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: height 0.1s;
}

#seek-slider:hover { height: 0.6vh; }

#seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.2vh;
  height: 1.2vh;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

#seek-slider::-moz-range-thumb {
  width: 1.2vh;
  height: 1.2vh;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

/* ── Info text — restored to original position: scrollable panel on the right ── */
#info {
  position: fixed;
  top: 12vh;
  right: 1vw;
  width: 24vw;          /* original: width 25% */
  max-height: 40vh;     /* original: height 40% */
  overflow-y: auto;
  font-size: clamp(0.6rem, 1vw, 0.9rem);
  line-height: 1.5;
  text-align: justify;
  padding: 0.8em;
  background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.85;
  scrollbar-width: none;
  z-index: 0;           /* videos (z-index 1+) paint above */
  pointer-events: auto;
}

#info::-webkit-scrollbar { display: none; }

/* ── Rotate overlay (portrait mobile) ── */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.rotate-message svg {
  margin-bottom: 1.5rem;
  animation: rotate-phone 2s ease-in-out infinite;
}

.rotate-message p {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.rotate-message span {
  font-size: 0.95rem;
  opacity: 0.6;
  display: block;
  max-width: 280px;
  margin: 0 auto;
}

@keyframes rotate-phone {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(90deg); }
  75% { transform: rotate(0deg); }
}

/* Show overlay on portrait mobile (screen <= 768px AND height > width) */
@media (pointer: coarse) and (orientation: portrait) {
  #rotate-overlay { display: flex; }
  #app { display: none; }
}

@media (pointer: coarse) and (orientation: landscape) {
  #rotate-overlay { display: none !important; }
  #app { display: flex; }
}

/* On non-touch or wide screens, hide overlay and show app */
@media (pointer: fine) {
  #rotate-overlay { display: none !important; }
  #app { display: flex; }
}

/* Safety: always show app if overlay hidden via display none */
#rotate-overlay:not([style*="display: flex"]) ~ #app {
  display: flex;
}

/* ── Responsive ── */
@media (max-aspect-ratio: 1/1) {
  #v0, #v1, #v2 {
    width: 28vw;
  }
  #v0.enlarged { transform: scale(1.8) translateX(2vw) translateY(2vh); }
  #v1.enlarged { transform: scale(1.8); }
  #v2.enlarged { transform: scale(1.8) translateX(-2vw) translateY(-2vh); }
  #v0.hover { transform: scale(1.3); }
  #v1.hover { transform: scale(1.3); }
  #v2.hover { transform: scale(1.3); }
}