/* Act endings: each chapter's painting above a quiet bronze panel. */
#overlay.act-victory,
#questModal:has(> .ac-panel) {
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  align-content: center;
  overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(9, 7, 6, .38), rgba(4, 3, 3, .82));
}
#questUI:has(.ac-panel)::before, #questUI:has(.ac-panel)::after { display: none; }
.ac-panel.act-complete {
  position: relative;
  flex: none;
  width: min(760px, 100%);
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #6a5033 #100d0b;
  border: 1px solid #795934;
  background: #100d0b;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .8), 0 0 0 4px rgba(12, 9, 7, .7), inset 0 0 0 1px rgba(223, 185, 117, .09);
  color: #ded0b9;
  text-align: center;
  outline: none;
  animation: ac-arrive .55s ease-out both;
}
.ac-panel .ac-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(200px, 29vh, 300px);
  padding: 0 24px 24px;
  overflow: hidden;
  isolation: isolate;
}
.ac-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; opacity: .78; }
.ac-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #100d0b, rgba(16, 13, 11, .4) 46%, rgba(16, 13, 11, .05) 80%); }
.ac-heading { animation: ac-reveal .65s .12s ease-out both; }
.ac-chapter { margin: 0 0 10px; color: #ddc39b; font: 400 12px/1.5 Cinzel, Georgia, serif; letter-spacing: .14em; text-wrap: balance; }
.ac-panel .ac-heading h2 { margin: 0; color: #f5dfb0; font: 400 clamp(30px, 4.6vw, 50px)/1.15 Cinzel, Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
.ac-body { padding: 0 clamp(20px, 5vw, 54px) 32px; }
.ac-defeat { margin: 2px 0 28px; color: #c7baa5; font: 400 clamp(18px, 2.1vw, 22px)/1.5 'EB Garamond', Georgia, serif; text-wrap: pretty; animation: ac-reveal .55s .24s ease-out both; }
.ac-unlock { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 22px 12px; border-block: 1px solid rgba(165, 125, 70, .3); background: radial-gradient(ellipse at center, rgba(162, 107, 34, .09), transparent 75%); text-align: left; animation: ac-reveal .55s .38s ease-out both; }
.ac-unlock > img { width: 55px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(208, 132, 35, .2)); }
.ac-unlock-label { margin: 0 0 3px; color: #bba382; font: 400 12px/1.5 'EB Garamond', Georgia, serif; letter-spacing: .04em; }
.ac-panel .ac-unlock h3 { margin: 0; color: #edca87; font: 400 27px/1.2 Cinzel, Georgia, serif; }
.ac-unlock-hint { margin: 6px 0 0; color: #b9ac98; font: 400 15px/1.4 'EB Garamond', Georgia, serif; }
.ac-unlock-lead { margin: 6px 0 0; color: #d8c8a8; font: italic 400 15px/1.4 'EB Garamond', Georgia, serif; } /* (where the story goes next: Act III's card, into Act IV) */
.ac-actions { display: grid; justify-items: center; gap: 8px; margin-top: 28px; animation: ac-reveal .55s .5s ease-out both; }
#ui :is(#overlay, #questModal) .ac-panel button.ac-continue { width: 228px; min-width: 0; min-height: 50px; margin: 0; padding: 12px 24px; border: 1px solid #a4804f; border-radius: 2px; background: linear-gradient(#44301c, #281b11); box-shadow: inset 0 1px rgba(255, 231, 181, .12), 0 4px 16px #0005; color: #f1d9ac; font: 400 17px/1.4 Cinzel, Georgia, serif; letter-spacing: .035em; transition: transform .16s, background-color .16s, border-color .16s, filter .16s; }
#ui :is(#overlay, #questModal) .ac-panel button.ac-continue:hover { border-color: #d4b27c; filter: brightness(1.18); }
#ui :is(#overlay, #questModal) .ac-panel button.ac-credits { min-height: 40px; min-width: 100px; margin: 0; padding: 6px 16px; border: 0; background: none; box-shadow: none; color: #b5a38a; font: 400 15px/1.4 'EB Garamond', Georgia, serif; }
#ui :is(#overlay, #questModal) .ac-panel button.ac-credits:hover { color: #f1d9ac; }
#ui :is(#overlay, #questModal) .ac-panel button:focus-visible { outline: 2px solid #f0d6a1; outline-offset: 4px; }
#ui :is(#overlay, #questModal) .ac-panel button:active { transform: scale(.96); }
.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 26px; animation: ac-reveal .55s .3s ease-out both; }
.ac-stats dt { color: #b6a68e; font: 400 13px/1.4 'EB Garamond', Georgia, serif; }
.ac-stats dd { margin: 6px 0 0; color: #e3d1af; font: 400 22px/1.2 'EB Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }

/* Narrated finales keep a record of the journey alongside the chapter painting. */
#questModal:has(> .ac-journey) { background: radial-gradient(ellipse at center, rgba(7, 6, 5, .72), rgba(4, 3, 3, .92)); }
.ac-panel.act-complete.ac-journey { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); width: min(980px, 100%); text-align: left; }
.ac-journey-art { position: relative; min-height: 560px; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(165, 125, 70, .3); }
.ac-journey-art > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--ac-art-position, 72% center); opacity: .82; }
.ac-journey-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #100d0b 2%, rgba(16, 13, 11, .18) 50%, rgba(16, 13, 11, .25)), linear-gradient(90deg, transparent 75%, rgba(16, 13, 11, .4)); }
.ac-journey-chapter { position: absolute; right: 28px; bottom: 38px; left: 28px; animation: ac-reveal .65s .12s ease-out both; }
.ac-journey-chapter p { margin: 0 0 12px; color: #d4b885; font: 400 14px/1.4 Cinzel, Georgia, serif; letter-spacing: .15em; }
.ac-journey-chapter strong { display: block; max-width: 250px; color: #f0dab2; font: 400 32px/1.2 Cinzel, Georgia, serif; text-wrap: balance; }
.ac-journey-content { min-width: 0; padding: 36px 38px 28px; }
.ac-journey-heading { animation: ac-reveal .6s .2s ease-out both; }
.ac-identity { margin: 0 0 12px; color: #c7ab81; font: 400 14px/1.5 'EB Garamond', Georgia, serif; overflow-wrap: anywhere; }
.ac-journey-heading h2 { margin: 0; color: #f5dfb0; font: 400 clamp(28px, 3.6vw, 40px)/1.2 Cinzel, Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
.ac-epilogue { margin: 12px 0 0; color: #c7baa5; font: 400 19px/1.5 'EB Garamond', Georgia, serif; text-wrap: pretty; }
.ac-journey-record { margin: 30px 0 24px; animation: ac-reveal .6s .3s ease-out both; }
.ac-journey-record h3 { margin: 0 0 18px; color: #bba382; font: 400 13px/1.5 'EB Garamond', Georgia, serif; letter-spacing: .04em; }
.ac-journey .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin: 0; animation: none; }
.ac-journey .ac-stats > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ac-journey .ac-stats dt { margin-top: 5px; font-size: 14px; }
.ac-journey .ac-stats dd { order: -1; margin: 0; color: #eed9b1; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; overflow-wrap: anywhere; }
.ac-journey .ac-unlock { justify-content: flex-start; padding: 18px 0; gap: 16px; }
.ac-journey .ac-unlock > img { width: 44px; height: 52px; }
.ac-journey .ac-unlock h3 { font-size: 24px; }
.ac-journey .ac-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
#ui #questModal .ac-journey button.ac-continue { width: min(228px, 100%); }

@media (max-width: 720px) {
  .ac-panel.act-complete.ac-journey { display: block; max-width: 540px; }
  .ac-journey-art { min-height: 175px; border-right: 0; border-bottom: 1px solid rgba(165, 125, 70, .2); }
  .ac-journey-art > img { object-position: 68% 44%; }
  .ac-journey-chapter { left: 24px; bottom: 22px; }
  .ac-journey-chapter p { margin-bottom: 6px; font-size: 12px; }
  .ac-journey-chapter strong { max-width: 200px; font-size: 24px; }
  .ac-journey-content { padding: 24px; }
  .ac-journey-record { margin-top: 24px; }
  .ac-journey .ac-stats { gap: 18px 20px; }
}
@media (max-height: 540px) and (min-width: 721px) {
  .ac-panel.act-complete.ac-journey { width: min(920px, 100%); grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
  .ac-journey-art { min-height: 0; }
  .ac-journey-content { padding: 12px 24px; }
  .ac-identity { margin-bottom: 6px; line-height: 1.3; }
  .ac-journey-heading h2 { font-size: 28px; line-height: 1.15; }
  .ac-epilogue { margin-top: 6px; font-size: 16px; line-height: 1.4; }
  .ac-journey-record { margin: 10px 0; }
  .ac-journey-record h3 { margin-bottom: 6px; font-size: 12px; }
  .ac-journey .ac-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .ac-journey .ac-stats dd { font-size: 23px; }
  .ac-journey .ac-stats dt { font-size: 12px; }
  .ac-journey .ac-unlock { padding-block: 10px; }
  .ac-journey .ac-unlock-label { line-height: 1.2; margin-bottom: 2px; }
  .ac-journey .ac-unlock h3 { line-height: 1.1; }
  .ac-journey .ac-unlock-hint { margin-top: 4px; font-size: 14px; line-height: 1.3; }
  .ac-journey .ac-unlock-lead { margin-top: 3px; font-size: 13px; line-height: 1.25; }
  .ac-journey .ac-actions { margin-top: 12px; }
  #ui #questModal .ac-journey button.ac-continue { min-height: 44px; padding-block: 8px; }
}
@keyframes ac-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ac-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 540px) {
  .ac-panel .ac-hero { min-height: 190px; padding: 0 18px 20px; }
  .ac-body { padding-bottom: 24px; }
  .ac-defeat { margin-bottom: 22px; }
  .ac-unlock { padding-block: 18px; }
  .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-height: 540px) and (min-width: 541px) {
  .ac-panel.act-complete { width: min(700px, 100%); }
  .ac-panel .ac-hero { min-height: 144px; padding-bottom: 14px; }
  .ac-panel .ac-heading h2 { font-size: 36px; }
  .ac-body { padding-bottom: 18px; }
  .ac-defeat { margin-bottom: 16px; font-size: 18px; }
  .ac-unlock { padding-block: 12px; }
  .ac-unlock > img { width: 42px; height: 48px; }
  .ac-actions { margin-top: 16px; }
  .ac-stats { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-panel, .ac-panel * { animation: none !important; }
  #ui :is(#overlay, #questModal) .ac-panel button { transition: none; }
}
.quest-reduced-motion .ac-panel, .quest-reduced-motion .ac-panel * { animation: none !important; }
.quest-reduced-motion #ui :is(#overlay, #questModal) .ac-panel button { transition: none; }