html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
  padding-top: 0;
}

header.navbar {
  flex: 0 0 auto;
}

.viewer-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Player region: fixed height */
.player-wrapper {
  flex: 0 0 66.67vh; /* Desktop: two thirds of viewport height */
  width: 100%;
}
@media (max-width: 767px) {
  .player-wrapper {
    flex: 0 0 40vh; /* Mobile: half of viewport height */
    width: 100%;
  }
}

.player-wrapper > iframe, .player-wrapper > div {
  width: 100%;
  height: 100%;
}

#panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#panel > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#context {
  flex: 1;
  padding: 1rem;
  overflow: auto; /* Prevents overflow if content grows */
}

/* Control region: natural height, subdivided with CSS Grid */
#control {
  flex: 0 auto;
  padding: 0.5rem;
  display: grid;
  gap: 1rem; /* Gap between control groups */
  align-items: start /* prevent vertical stretching */
}

/* On wider screens, use two columns for controls */
@media (min-width: 768px) {
  #control {
    grid-template-columns: 1fr 1fr;
  }
}

/* On narrower screens, stack the two control groups */
@media (max-width: 767px) {
  #control {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}

/* Left control group: a row of three buttons and a toggle below */
.controls-left {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.5rem;
}
.controls-left .button-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
}

/* Right control group: a row of two buttons, aligned right */
.controls-right {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}


/* transition */
#context {
  position: relative;
  overflow: hidden;
  min-height: 3em;
}

#context p {
  animation: slide-in 0.3s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}


.pop {
    animation: pop 0.4s ease;
}

@keyframes pop {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.3) translateY(-20px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}



.pane-stack {
  position: relative;
}

.pane {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* All panes except the first child are overlays */
.pane-stack > .pane:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pane.pane-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.pane.pane-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.pane.pane-dim {
  opacity: 0.4;
  pointer-events: none;
}