/* immersive mode — layout, scene sizing, footer bar */

body.immersive {
  --_sidebar-h: 55px;
  overflow: hidden;
}

/* layout */

body.immersive .site-wrapper {
  max-width: none;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.immersive .site-main {
  width: 100%;
}

body.immersive .content {
  padding: 0;
  background: none;
  border: none;
}

/* scene */

body.immersive .vn-scene {
  aspect-ratio: 16 / 9;
  width: min(100cqw, (100cqh - var(--_sidebar-h)) * 16 / 9);
  margin: 0 auto;
  min-height: 0;
  border: none;
  padding: 0 clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px);
  container-type: size;
}

body.immersive .vn-portrait {
  width: clamp(100px, 25vw, 600px);
  height: clamp(100px, 25vw, 600px);
}

body.immersive .vn-dialogue-wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

body.immersive .vn-dialogue {
  padding: clamp(12px, 2vw, 24px) clamp(16px, 2.5vw, 28px);
  font-size: clamp(14px, 1.4vw, 20px);
  height: 30cqh;
}

body.immersive .vn-name {
  font-size: clamp(12px, 1.2vw, 16px);
  padding: clamp(3px, 0.5vw, 6px) clamp(8px, 1.2vw, 16px);
}

body.immersive .vn-choice-btn {
  font-size: clamp(13px, 1.3vw, 18px);
  padding: clamp(6px, 1vw, 12px) clamp(10px, 1.5vw, 16px);
}

/* footer bar */

body.immersive .site-sidebar {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  flex-shrink: 0;
  order: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  border-left: none;
  border-right: none;
}


body.immersive .nav-links {
  flex-direction: row;
  gap: 12px;

  a {
    padding-left: 0;
    text-align: center;

    &::before {
      display: none;
    }

    &::after {
      content: "";
      display: block;
      height: 0;
      color: var(--accent);
    }

    &:hover::after,
    &.current::after {
      content: "▴";
      height: auto;
    }
  }
}

body.immersive .palette-menu {
  left: auto;
  right: 0;
}