/* Arthur uses the production Le Quartier scene engine with one background and one sprite set. */
.stage {
  --portrait-width: min(80vw, 77.5dvh);
  --portrait-center: 50%;
  background: #d8c9b4;
}

.scenery {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.room { object-fit: cover; }

.character {
  width: var(--portrait-width);
  left: calc(var(--portrait-center) - var(--portrait-width) / 2);
  bottom: -22dvh;
  z-index: 4;
}

.topbar-spacer,
.control-spacer {
  display: block;
  width: 44px;
  height: 44px;
}

.conversation {
  width: min(590px, calc(100% - 32px));
  --chat-controls-space: 34px;
}

.chat-window {
  height: clamp(132px, 23dvh, 218px);
  min-height: 132px;
}

.chat-messages { gap: 16px; }
.message-bubble { font-size: 18px; }
.speaking-controls { column-gap: 58px; }
.speaking-controls #type-toggle { justify-self: end; }
.speaking-controls .promo-control {
  justify-self: start;
  text-decoration: none;
}

.history-guidance:empty { display: none; }

@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    height: 100lvh;
    min-height: 100lvh;
    background-color: #d8c9b4;
  }
  .practice {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100lvh;
    min-height: 100lvh;
  }
  .stage {
    --portrait-width: min(112vw, 66dvh);
    --portrait-center: 50%;
  }
  .room { object-position: left center; }
  .character { bottom: 0; }
  .conversation { width: calc(100% - 22px); }
  .chat-window { height: clamp(138px, 25dvh, 210px); min-height: 138px; }
  .message-bubble { font-size: 16px; }
  .speaking-controls { column-gap: 28px; }
}

@media (max-height: 650px) and (min-width: 700px) {
  .stage { --portrait-width: 58dvh; --portrait-center: 35%; }
  .character { bottom: 3dvh; }
  .conversation { left: auto; right: 24px; transform: none; width: 410px; }
  .topbar { right: 24px; left: 24px; grid-template-columns: 1fr auto 1fr; }
  .topbar .location { text-align: center; margin: 0; }
  .chat-window { height: 31dvh; min-height: 118px; }
}

@media (max-height: 650px) and (max-width: 600px) {
  .stage { --portrait-width: min(84vw, 58dvh); }
  .character { bottom: 0; }
  .chat-window { min-height: 100px; height: 24dvh; }
}