#chapter-menu {
  --menu-ink: #402a1e;
  --menu-serif: "LXGW WenKai TC", "霞鶩文楷 TC", "Baskervville", PMingLiU, serif;
  position: fixed;
  inset: 0;
  overflow: auto;
  display: grid;
  align-items: start;
  padding: clamp(120px, 27dvh, 292px) clamp(26px, 10vw, 192px) 24px;
  isolation: isolate;
  color: var(--menu-ink);
  background: #c39b74 url("./assets/ui/main-menu/main-menu-background.png") center 64% / cover no-repeat;
}

.menu-front {
  --menu-title-size: clamp(40px, 6vw, 100px);
  --menu-action-width: min(260px, calc(100vw - 2 * clamp(26px, 10vw, 192px)));
  width: min(100%, 380px);
  padding-block: 8px;
}
.menu-primary { display: grid; width: max-content; }
#menu-title {
  margin: 0 0 clamp(16px, 4vh, 42px);
  color: #302016;
  text-shadow: 0 1px 2px #f7dfb488;
  font: 700 var(--menu-title-size)/1.1 var(--menu-serif);
  letter-spacing: .11em;
  white-space: nowrap;
}
.menu-actions {
  display: grid;
  grid-template-columns: 0;
  justify-self: center;
  justify-items: center;
  gap: 9px;
  /* Center under the four glyphs without the trailing letter spacing. */
  translate: calc(-.055 * var(--menu-title-size)) 0;
}
.menu-actions button { width: var(--menu-action-width); }
.menu-actions button, #menu-confirm {
  color: #fbefda;
  background: url("paper-grain.png"), linear-gradient(#684633, #523627);
  border: 1px solid #52372a;
  border-radius: 4px;
  min-height: 45px;
  padding: 8px 17px;
  font: 650 clamp(16px, 1.5vw, 22px)/1.3 var(--menu-serif);
  letter-spacing: .1em;
}
.menu-actions button:hover:not(:disabled), #menu-confirm:hover { background-color: #815636; background-image: url("paper-grain.png"); }
.menu-actions button:disabled {
  background: #eddbb7;
  color: #6e5a45;
  border-color: #9d805b;
}
#menu-toggle-audio {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #f4e2bf;
  background: #3d291dde;
  border: 1px solid #ae8660;
  border-radius: 5px;
}
#menu-toggle-audio:hover { background: #684633; }
#menu-toggle-audio svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#playtest-feedback {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  min-height: 44px;
  padding-inline: 11px;
  color: #f4e2bf;
  background: #3d291dde;
  border: 1px solid #ae8660;
  border-radius: 5px;
  font: 600 .875rem/1.2 var(--menu-serif);
  text-decoration: none;
}
#playtest-feedback:hover { background: #684633; }
#playtest-feedback:focus-visible { outline: 2px solid #f9e9c9; outline-offset: 2px; }
#menu-status {
  width: fit-content;
  max-width: 290px;
  margin: 10px 0 0;
  color: #542b20;
  background: #f2e2bf;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: .9rem;
}

#chapter-chooser, #menu-confirmation {
  color: #432b1e;
  border: 1px solid #97734e;
  border-radius: 8px;
  padding: clamp(12px, 2.5vw, 26px);
  background: url("paper-grain.png"), #f2e2bf;
  max-height: calc(100dvh - 20px);
  overflow: auto;
}
#chapter-chooser { width: min(950px, calc(100% - 24px)); }
#menu-confirmation { width: min(480px, calc(100% - 24px)); }
#chapter-chooser::backdrop, #menu-confirmation::backdrop { background: #26191091; backdrop-filter: blur(3px); }
.menu-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.menu-dialog-head h2, #menu-confirm-title { margin: 0; font: 700 clamp(20px, 2.5vw, 32px)/1.25 "LXGW WenKai TC", PMingLiU, serif; }
.chapter-pages { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#chapter-cards { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.7vw, 18px); }
#chapter-previous { grid-column: 1; grid-row: 1; }
#chapter-next { grid-column: 3; grid-row: 1; }
.chapter-card {
  min-width: 0;
  text-align: start;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: clamp(5px, 1vw, 10px);
  border-color: #97734e;
  border-radius: 4px;
  background: #f8edd3;
}
.chapter-card:hover:not(:disabled) { background: #fffae8; }
.chapter-card { -webkit-tap-highlight-color: transparent; }
.chapter-card:disabled { background: #e8d8b9; color: #65533e; }
.chapter-preview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: url("paper-grain.png"), #c6ac83; border: 1px solid #b49770; }
.chapter-number, .chapter-availability { font-size: .77rem; }
.chapter-number { margin-top: 4px; }
.chapter-card strong { font: 700 clamp(14px, 2vw, 24px)/1.2 "LXGW WenKai TC", PMingLiU, serif; }
#close-chooser, .chapter-pages > button, .menu-confirm-actions button { min-width: 44px; min-height: 44px; }
#menu-confirmation p { margin: 10px 0; line-height: 1.5; }
#menu-confirm-warning, #menu-confirm-error { color: #752f22; }
.menu-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
#menu-confirm { font-size: 16px; }

#chapter-title-card {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: #000;
  color: #f9f0e0;
}
#chapter-title-card::backdrop { background: #000; }
#skip-chapter-title, #skip-chapter-title:hover {
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 clamp(20px, 4vw, 55px)/1.25 "LXGW WenKai TC", PMingLiU, serif;
  letter-spacing: .12em;
}
#title-chapter-number { font-size: .53em; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  #chapter-title-card[open] span { animation: chapter-title-fade 2s both; }
}
@keyframes chapter-title-fade {
  0%, 100% { opacity: 0; }
  18%, 80% { opacity: 1; }
}

@media (orientation: landscape) and (max-height: 470px) {
  #chapter-menu { padding: 15dvh 8vw 14px; }
  .menu-front { width: min(100%, 315px); --menu-action-width: min(210px, 84vw); }
  .menu-actions { gap: 6px; }
}
@media (orientation: portrait) and (max-width: 580px) {
  #chapter-menu { justify-items: center; padding: 12dvh 22px 24px; background-position: 84% center; }
  #chapter-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 50%;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 33%, #f4d6abcc, #f4d6ab40 59%, transparent 78%);
    pointer-events: none;
  }
  .menu-front { text-align: center; }
  .menu-primary, #menu-status { margin-inline: auto; }
  #chapter-cards { grid-template-columns: minmax(0, 1fr); }
  .chapter-card { grid-template-columns: minmax(85px, 43%) minmax(0, 1fr); align-items: center; gap: 3px 10px; }
  .chapter-preview { grid-column: 1; grid-row: 1 / span 3; }
  .chapter-number, .chapter-card strong, .chapter-availability { grid-column: 2; margin-top: 0; }
}