/* The story (backlog B3): the stage on which the guide tells it, and the bubble in which she says a line on a page.
   Wide pages first, then what changes on a phone, upright and on its side. */

/* ---- The stage: a dialog as large as the window. A touch anywhere on it goes on to the next line. ---- */
dialog.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  /* clip, so that nothing can scroll it: the words wait a little below their place before they rise */
  overflow: hidden;
  overflow: clip;
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
dialog.stage::backdrop {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* over a page (a chapter's first line): the page stays visible behind a veil */
.stage.on-page {
  background: rgba(5, 9, 34, 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: fade-in 0.35s ease backwards;
}
/* the opening: the night sky of the game's backdrop, darker towards the bottom where the words are */
.stage.on-scene {
  background:
    linear-gradient(180deg, rgba(7, 12, 42, 0.2) 0%, rgba(7, 12, 42, 0.1) 45%, rgba(7, 12, 42, 0.78) 100%),
    var(--night-800) url("../assets/galaxy-pastel.webp") center 38% / cover no-repeat;
  animation: fade-in 0.6s ease backwards;
}

/* the start page: the game's name and one button */
.stage-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.stage-title .brand-mark {
  width: clamp(56px, 8vmin, 84px);
  height: clamp(56px, 8vmin, 84px);
  filter: drop-shadow(0 0 22px rgba(246, 217, 138, 0.45));
}
.stage-title h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 7vmin, 72px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.14em;
  color: var(--moon-bright);
  text-shadow: 0 0 34px rgba(246, 217, 138, 0.35);
}
.stage-title p {
  margin: 4px 0 0;
  font-size: var(--fs-lg);
  letter-spacing: 0.24em;
  color: var(--ink-soft);
}
.stage-title .action-button {
  width: auto;
  min-width: 220px;
  min-height: 60px;
  margin-top: clamp(22px, 5vmin, 44px);
  font-size: var(--fs-lg);
  animation: stage-ready 2s ease-out infinite;
}
/* a player who has been here before: the start page fades and is gone */
.stage.leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}
.stage:not(.at-start) .stage-title {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}
.stage.on-page .stage-title {
  display: none;
}

/* leaving the story */
.stage-skip {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  z-index: 2;
  min-width: 72px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: opacity 0.6s ease 0.5s;
}
.stage.at-start .stage-skip,
.stage.on-page .stage-skip {
  opacity: 0;
  pointer-events: none;
}

/* the guide and her words */
.stage-talk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: min(940px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  transition:
    opacity 0.9s ease 0.4s,
    transform 0.9s var(--ease-out) 0.4s;
}
.stage.at-start .stage-talk {
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
}
.stage-who {
  flex: none;
  display: block;
  width: clamp(120px, 15vw, 180px);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 12px 14px rgba(3, 6, 28, 0.5));
}
/* she hops in once the sky is there */
.stage.greets .stage-who {
  animation: bunny-greeting 1s ease 1.25s 1 backwards;
}
/* her name and the listen button on one row, the words below across the whole box, the hint in the last corner */
.stage-box {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 10px;
  min-width: 0;
  margin-bottom: 8px;
  padding: 12px 14px 10px 26px;
  border-radius: 24px 24px 24px 8px;
  background: var(--grain) 0 0 / 300px, #fff6e2;
  color: #26305e;
  box-shadow: 0 16px 44px -14px rgba(3, 6, 28, 0.85);
  outline: none;
}
.stage-name {
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  min-height: var(--tap);
  align-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.stage-name small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6c75a6;
}
.stage-voice {
  grid-area: 1 / 2;
  align-self: center;
}
/* room for two rows of words, so that the box keeps its height from one line to the next */
.stage-line {
  grid-area: 2 / 1 / auto / -1;
  min-height: 3.7em;
  margin: 2px 12px 0 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.85;
  color: #26305e;
}
.stage-line.turn {
  animation: stage-line 0.35s var(--ease-out) backwards;
}
.stage-hint {
  grid-area: 3 / 1 / auto / -1;
  justify-self: end;
  margin: 4px 8px 0 0;
  font-size: var(--fs-xs);
  color: #7b83ad;
}
.stage-hint:not(:empty)::after {
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  animation: stage-bob 1.2s ease-in-out infinite;
}
@keyframes stage-ready {
  0% {
    box-shadow:
      0 0 0 0 rgba(246, 217, 138, 0.55),
      0 14px 30px -12px rgba(246, 200, 90, 0.7);
  }
  70%,
  100% {
    box-shadow:
      0 0 0 18px rgba(246, 217, 138, 0),
      0 14px 30px -12px rgba(246, 200, 90, 0.7);
  }
}
@keyframes stage-line {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes stage-bob {
  50% {
    transform: translateY(3px);
  }
}

/* ---- A listen button that is only the speaker: for a line that is said by itself and has little room. ---- */
.voice-button.small {
  flex: none;
  justify-content: center;
  width: var(--tap);
  min-height: var(--tap);
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.voice-button.small span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- The guide says a line on a page: before a level, and when a chapter is finished. ---- */
.guide-says {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.guide-says:empty {
  display: none;
}
.guide-says-art {
  flex: 0 0 clamp(52px, 5.4vw, 72px);
  filter: drop-shadow(0 8px 10px rgba(3, 6, 28, 0.45));
}
.guide-says .bunny-speech {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 10px 18px;
}
.guide-says .bunny-speech::before {
  bottom: calc(50% - 9px);
}
.guide-says .bunny-speech > p {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  line-height: 1.7;
}
#briefing-says {
  margin: -6px 0 18px;
}
#chapter-line {
  max-width: 600px;
  margin: 4px auto 0;
}
/* The chapter page on a wide window: the picture gives way to the guide's cheer, so that the page still keeps to one
   screen where the window allows it; a low window also leaves out the count of levels (the page before has it) and
   sets the rest closer. */
body:not(.phone) #chapter-screen .chapter-cinematic {
  min-height: 100%;
}
body:not(.phone) #chapter-screen .chapter-cinematic > * {
  flex: none;
}
body:not(.phone) #chapter-screen .chapter-stage.has-illustration {
  flex: 1 1 120px;
  height: auto;
  min-height: 120px;
  max-height: 250px;
}
@supports (width: 1cqw) {
  body:not(.phone) #chapter-screen .chapter-stage.has-illustration {
    container-type: size;
  }
  body:not(.phone) #chapter-screen .chapter-stage.has-illustration #chapter-art {
    display: grid;
    place-items: center;
  }
  body:not(.phone) #chapter-screen .chapter-illustration {
    width: min(100cqw, 150cqh);
    height: auto;
    aspect-ratio: 3 / 2;
  }
}
@media (max-height: 900px) {
  /* the page before a level makes room for the guide's line in the same way */
  body:not(.phone) #briefing-screen .guide-says-art {
    flex-basis: 54px;
  }
  body:not(.phone) #briefing-screen .briefing-content h2 {
    margin: 6px 0 14px;
  }
  body:not(.phone) #briefing-screen #briefing-says {
    margin-bottom: 12px;
  }
  body:not(.phone) #briefing-screen .examples {
    margin-top: 14px;
  }
  body:not(.phone) #briefing-screen .practice-hint {
    margin: 6px 0 8px;
  }
  body:not(.phone) #chapter-screen .chapter-progress {
    display: none;
  }
  body:not(.phone) #chapter-screen #chapter-title {
    margin: 10px 0 6px;
  }
  body:not(.phone) #chapter-screen .earned-badge,
  body:not(.phone) #chapter-screen .chapter-network,
  body:not(.phone) #chapter-screen #chapter-next {
    margin-top: 12px;
  }
  body:not(.phone) #chapter-screen .chapter-options {
    margin-top: 4px;
  }
}
/* the button in the "how to play" dialog that tells the opening again */
.story-again {
  justify-self: center;
  align-self: center;
}

/* ---- Phones ---- */
@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) {
  .stage-talk {
    width: calc(100% - 24px - var(--phone-safe-left, 0px) - var(--phone-safe-right, 0px));
    gap: 8px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .stage-box {
    column-gap: 6px;
    margin-bottom: 4px;
    padding: 6px 8px 8px 16px;
    border-radius: 20px 20px 20px 6px;
  }
  .stage-name {
    min-height: 44px;
    font-size: 18px;
  }
  .stage-name small {
    font-size: 13px;
  }
  .stage-line {
    min-height: 3.4em;
    margin: 0 8px 0 0;
    font-size: 16px;
    line-height: 1.7;
  }
  .stage-hint {
    margin: 2px 8px 0 0;
    font-size: 13px;
  }
  .stage-skip {
    top: calc(10px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    min-height: 44px;
  }
  .guide-says {
    gap: 8px;
  }
  .guide-says-art {
    flex-basis: 44px;
  }
  .guide-says .bunny-speech {
    padding: 6px 6px 6px 12px;
  }
  .guide-says .bunny-speech > p {
    font-size: 14px;
    line-height: 1.55;
  }
  .voice-button.small {
    width: 44px;
    min-height: 44px;
  }
  /* a practice button's picture keeps inside the button, whatever size the button has here */
  body.phone #briefing-screen .example button svg {
    width: 84%;
    height: 84%;
  }
}
/* upright: the guide stands on the box's corner, the box takes the whole width */
@media (max-width: 650px) and (orientation: portrait) {
  .stage-talk {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .stage-who {
    width: 104px;
    margin: 0 0 -10px 6px;
  }
  .stage-title h1 {
    font-size: 42px;
  }
  .stage-title p {
    font-size: 15px;
    letter-spacing: 0.2em;
  }
  #chapter-line {
    margin: 2px 0;
  }
  /* The page before a level: its number beside its name and everything a little closer, so that the guide's line
     has its room and the first level, with its practice, still keeps to one screen. */
  body.phone #briefing-screen .briefing-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 10px;
    margin: 0 0 6px;
  }
  body.phone #briefing-screen .briefing-heading h2 {
    margin: 0;
  }
  body.phone #briefing-screen #briefing-says {
    margin: 0 0 8px;
  }
  body.phone #briefing-screen .rule-heading {
    padding: 8px 10px;
  }
  body.phone #briefing-screen .examples {
    margin: 8px 0;
  }
  body.phone #briefing-screen .example > svg,
  body.phone #briefing-screen .example button {
    width: 56px;
    height: 56px;
  }
  /* The chapter page keeps to one screen however long the guide's cheer is: the picture takes the room that is
     left. */
  body.phone #chapter-screen .chapter-cinematic {
    height: 100%;
  }
  body.phone #chapter-screen .chapter-cinematic > * {
    flex: none;
  }
  body.phone #chapter-screen .chapter-stage.has-illustration {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 96px;
    max-height: 200px;
    margin: 2px 0;
  }
  body.phone #chapter-screen #chapter-title {
    margin: 6px 0 2px;
  }
  body.phone #chapter-screen #chapter-next {
    margin-top: 8px;
  }
}
/* The chapter page's main button: its words in the middle, the arrow at its right edge. */
#chapter-screen #chapter-next {
  justify-content: center;
  padding-left: 48px;
  padding-right: 48px;
}
#chapter-screen #chapter-next > b {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto 0;
}
/* The chapter's picture keeps its shape in whatever room its place has. */
@supports (width: 1cqw) {
  body.phone #chapter-screen .chapter-stage.has-illustration {
    container-type: size;
  }
  body.phone #chapter-screen .chapter-stage.has-illustration #chapter-art {
    display: grid;
    place-items: center;
  }
  body.phone #chapter-screen .chapter-illustration {
    width: min(100cqw, 150cqh);
    height: auto;
    aspect-ratio: 3 / 2;
  }
  /* a small picture: its caption keeps to one row */
  @container (max-height: 146px) or (max-width: 218px) {
    body.phone #chapter-screen .chapter-illustration span i {
      display: none;
    }
  }
}
/* on its side: the name and the button side by side would be too low; everything a size smaller */
@media (orientation: landscape) and (max-height: 500px) {
  .stage-who {
    width: 96px;
  }
  .stage-title {
    gap: 2px;
    padding: 10px;
  }
  .stage-title .brand-mark {
    width: 44px;
    height: 44px;
  }
  .stage-title h1 {
    margin-top: 6px;
    font-size: 38px;
  }
  .stage-title p {
    font-size: 14px;
  }
  .stage-title .action-button {
    min-height: 52px;
    margin-top: 16px;
  }
  #chapter-line {
    margin: 0;
    max-width: none;
  }
  /* The page before a level, on its side: the level's number and name on one row, the guide's line across the page,
     then the rule and the three signals on the left, the button and the details on the right. */
  body.phone #briefing-screen .briefing-content {
    grid-template-columns: minmax(0, 1fr) 185px;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 4px 14px;
    align-items: center;
  }
  body.phone #briefing-screen .briefing-heading {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  body.phone #briefing-screen .briefing-heading h2 {
    margin: 0;
  }
  body.phone #briefing-screen #briefing-says {
    grid-area: 2 / 1 / 3 / 3;
    margin: 0;
  }
  body.phone #briefing-screen #briefing-says .bunny-speech {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  body.phone #briefing-screen #briefing-rule {
    grid-area: 3 / 1;
  }
  body.phone #briefing-screen #ready {
    grid-area: 3 / 2;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.phone #briefing-screen #examples {
    grid-area: 4 / 1 / 6 / 2;
    margin: 0;
  }
  body.phone #briefing-screen #practice-hint {
    grid-area: 4 / 2;
    margin: 0;
  }
  body.phone #briefing-screen #briefing-details {
    grid-area: 5 / 2;
    align-self: start;
    margin: 0;
  }
  body.phone #briefing-screen .example {
    padding: 6px 4px;
  }
  body.phone #briefing-screen .example > svg,
  body.phone #briefing-screen .example button {
    width: 48px;
    height: 48px;
  }
  /* The chapter page on its side: the picture on the left with the two small buttons under it; on the right the
     heading, the guide's cheer (which takes the room that is left), the badge and the way on. */
  body.phone #chapter-screen .chapter-cinematic {
    height: 100%;
    grid-template-columns: minmax(155px, 1fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 3px 12px;
    align-items: center;
  }
  body.phone #chapter-screen #chapter-repaired {
    grid-area: 1 / 2;
  }
  body.phone #chapter-screen #chapter-title {
    grid-area: 2 / 2;
    margin: 0;
  }
  body.phone #chapter-screen #chapter-line {
    grid-area: 3 / 2;
  }
  body.phone #chapter-screen #chapter-badge {
    grid-area: 4 / 2;
  }
  body.phone #chapter-screen #chapter-next {
    grid-area: 5 / 2;
  }
  body.phone #chapter-screen .chapter-stage.has-illustration {
    grid-area: 1 / 1 / 5 / 2;
    align-self: stretch;
    width: 100%;
    height: auto;
  }
  body.phone #chapter-screen .chapter-options {
    grid-area: 5 / 1;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
  }
  /* the guide is in the picture beside the bubble: no second one */
  body.phone #chapter-screen.with-illustration #chapter-line .guide-says-art {
    display: none;
  }
}