.page-home {
  overflow: hidden;
}

.site-main {
  display: flex;
  flex-direction: row;
  
  direction: ltr;
  height: calc(100vh - var(--total-header));
  margin-top: 0;
}


.panel {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.panel--left {
  width: var(--panel-left-width);
  min-width: var(--panel-left-width);
  background-color: var(--color-bg-panel);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
}


.panel--center {
  flex: 1;
  background-color: var(--color-bg-secondary);
  border-left: 2px solid var(--color-border);
  border-right: 2px solid var(--color-border);
}


.panel--right {
  width: var(--panel-right-width);
  min-width: var(--panel-right-width);
  background-color: var(--color-bg-panel);
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
}


.site-main.game-mode .panel--left,
.site-main.game-mode .panel--center {
  display: none;
}

.site-main.game-mode #game-frame {
  display: flex;
  flex: 1;
}


#game-frame {
  display: none;
  flex: 1;
  background-color: var(--color-bg);
  align-items: center;
  justify-content: center;
}