/* Lettering is served locally so Korean dialogue keeps its intended metrics. */
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  --dialogue-ink: #302b38;
  /* One continuous curve joins the body and the small, curved pointer. */
  --dialogue-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M59 12C104 7 219 9 260 15C282 18 294 32 295 54L294 87C292 108 276 119 251 121L103 122C91 122 80 121 72 119C67 129 59 135 47 138C53 130 57 123 56 116C32 111 23 98 22 79L23 49C24 29 36 16 59 12Z'/%3E%3C/svg%3E");
}

/* Compact speech sits in the scene. It does not inherit the old ellipse. */
#main .speech {
  isolation: isolate;
  min-width: 0;
  width: fit-content;
  max-width: 76%;
  padding: 15px 23px 17px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--dialogue-ink);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.65;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: pretty;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
  box-shadow: none;
}

#main .speech::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -6px -9px -21px;
  background: #fffefa;
  mask: var(--dialogue-shape) center / 100% 100% no-repeat;
  pointer-events: none;
}

#main .speech::after { content: none; }
#main .speech strong { font-weight: 650; }
#main .speech-top { top: 7%; left: 8%; }
#main .speech-top::before { transform: scaleX(-1); }

#main .speech-bottom {
  bottom: 7%;
  right: 8%;
  padding: 18px 24px 16px;
}
#main .speech-bottom::before {
  inset: -21px -9px -6px;
  transform: rotate(180deg);
}

#main .reading-panel .speech {
  top: 6%;
  left: 7%;
  max-width: 56%;
  padding: 16px 22px 17px;
  font-size: 15px;
}
#main .smile-panel .speech {
  top: 3%;
  left: 7%;
  max-width: 59%;
  padding: 12px 22px 17px;
  font-size: 15px;
}
#main .smile-panel .speech strong {
  display: inline-block;
  margin-bottom: 3px;
  font-size: 19px;
}

/* The form uses an unboxed aside in the illustration's quiet space. */
.profile-screen { background: #faf9fc; }
.form-scene {
  height: 258px;
  background: #faf9fc;
  overflow: hidden;
}
.form-portrait {
  width: 70%;
  mask-image: linear-gradient(90deg, #000 27%, #0009 45%, transparent 74%),
    linear-gradient(#000 70%, transparent 100%);
  mask-composite: intersect;
}
.form-portrait .shot {
  width: 142%;
  left: -24%;
  top: -111px;
}
.form-dialogue {
  position: absolute;
  top: 65px;
  left: 54%;
  right: 17px;
  color: var(--dialogue-ink);
}
.scene-speaker {
  display: inline-block;
  font-size: 10px;
  font-weight: 550;
  letter-spacing: .06em;
  color: #887b99;
  padding-bottom: 9px;
  margin-bottom: 7px;
  border-bottom: 1px solid #b7a9c34d;
}
#main .form-speech {
  position: static;
  max-width: none;
  width: auto;
  padding: 0;
  text-align: left;
  font-size: clamp(17px, 4.5vw, 21px);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: -.055em;
}
#main .form-speech::before { content: none; }
.scene-afterword {
  margin-top: 13px;
  color: #94889f;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -.015em;
}
.form-body { padding-top: 20px; }
.form-body h1 { font-size: 22px; font-weight: 650; }

/* Dialogue over the character reads like quiet subtitles, without a UI card. */
.conversation {
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 24px 9px 8px;
  bottom: 48px;
}
.conversation .speaker { font-size: 12px; font-weight: 550; }
#greeting-copy {
  font-size: 21px;
  font-weight: 450;
  letter-spacing: -.035em;
  line-height: 1.85;
  margin-top: 18px;
}
.conversation-bottom { margin-top: 24px; }
#greeting-next {
  padding: 12px 0 12px 18px;
  font-weight: 550;
  font-size: 13px;
}
.meeting::after {
  background: linear-gradient(transparent 41%, #18162ba8 63%, #18162bf2 81%);
}
.meeting-caption { color: #e9e1f7b8; font-size: 11px; }

/* Longer lines use the white gutter, rather than repeating enormous balloons. */
.dialogue-sequence { padding: 40px 28px 73px; }
#main .key-dialogue {
  max-width: 100%;
  width: fit-content;
  margin: 0 auto 43px;
  padding: 10px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: -.04em;
  background: none;
}
#main .key-dialogue::before { content: none; }
.dialogue-paragraphs { gap: 30px; }
.spoken-line {
  position: relative;
  max-width: 83%;
  margin: 0 0 0 8px;
  align-self: flex-start;
  color: #655b6d;
  font-size: 15px;
  font-weight: 450;
  letter-spacing: -.025em;
  line-height: 1.95;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.spoken-line:nth-child(even) {
  align-self: flex-end;
  margin: 6px 7px 0 0;
}
.closing-dialogue { padding-top: 43px; padding-bottom: 16px; }
#main .closing-dialogue .key-dialogue {
  margin-top: 0;
  font-size: 19px;
  font-weight: 550;
  background: none;
}
.narration { font-size: 14px; font-weight: 400; line-height: 2.15; color: #8a7f92; }
.constellation-intro { font-size: 18px; font-weight: 450; line-height: 1.95; }
.element-response p { font-weight: 450; }
.panel-sfx, .sound-effect {
  font-weight: 650;
  letter-spacing: -.07em;
  font-size: 20px;
  opacity: .72;
}
.panel-sfx { text-shadow: 0 1px 4px #24203740; }
.smile-sfx { left: 10%; top: 54%; font-size: 21px; }
.book-sfx { left: 9%; top: 76%; font-size: 22px; }
.comic-gutter { padding-top: 55px; padding-bottom: 52px; min-height: 237px; }
.comic-gutter.small { min-height: 143px; padding-top: 53px; padding-bottom: 50px; }

@media (min-width: 700px) {
  .form-scene { height: 300px; }
  .form-portrait .shot { top: -155px; }
  .form-dialogue { top: 79px; right: 28px; }
  #main .form-speech { font-size: 24px; }
  .scene-afterword { font-size: 12px; }
  .scene-speaker { font-size: 11px; }
  #main .speech { font-size: 18px; padding: 19px 28px 22px; }
  #main .form-speech { padding: 0; }
  #main .reading-panel .speech, #main .smile-panel .speech { font-size: 17px; }
  #main .key-dialogue { font-size: 22px; padding: 10px 0; }
  #main .closing-dialogue .key-dialogue { font-size: 21px; }
  .spoken-line { font-size: 17px; max-width: 80%; }
  .dialogue-sequence { padding: 51px 40px 80px; }
  .conversation { bottom: 60px; padding: 24px 10px 10px; }
  #greeting-copy { font-size: 24px; }
}

@media (max-width: 359px) {
  .form-scene { height: 225px; }
  .form-portrait .shot { top: -88px; }
  .form-dialogue { top: 48px; right: 12px; left: 50%; }
  #main .form-speech { font-size: 17px; }
  .scene-afterword { font-size: 9px; }
  #main .speech { font-size: 15px; padding: 13px 20px 16px; }
  #main .form-speech { padding: 0; }
  #main .reading-panel .speech, #main .smile-panel .speech { font-size: 14px; padding: 12px 16px 15px; }
  #main .key-dialogue { font-size: 18px; padding: 10px 0; }
  #main .closing-dialogue .key-dialogue { font-size: 18px; }
  .dialogue-sequence { padding-left: 23px; padding-right: 23px; }
  .spoken-line { max-width: 89%; font-size: 14px; }
}