/* Test-play presentation only: preserve story, role and release logic. */
:root { --play-header-height: 72px; }
body[data-view="readings"], body[data-view="handout"] {
  height: auto !important;
  overflow-y: auto !important;
  padding-top: calc(var(--play-header-height) + 12px) !important;
}
body[data-view="readings"] main, body[data-view="handout"] main {
  width: 100%; max-width: none; min-width: 0;
}
body[data-view="readings"] #commonReader,
body[data-view="handout"] #reader {
  position: static !important; inset: auto !important;
  width: 100% !important; max-width: none !important;
  height: auto !important; max-height: none !important;
  margin: 0 !important; padding: 16px clamp(12px, 1.6vw, 32px) 48px !important;
  overflow: visible !important; box-sizing: border-box;
}
body[data-view="readings"] #commonReader:not(.hidden) { display: block !important; }
body[data-view="readings"] #commonReader > .reading-workspace {
  height: auto !important; max-height: none !important;
  overflow: visible !important; align-items: start !important;
}
body[data-view="readings"] #commonReader > .reading-workspace > #readingPanel,
body[data-view="readings"] #commonReader > .reading-workspace > .workflow-panel {
  position: relative !important; top: auto !important;
  height: auto !important; max-height: none !important;
  overflow: visible !important; min-width: 0;
  scroll-margin-top: calc(var(--play-header-height) + 16px);
}
.reading-workspace .text-panel {
  box-sizing: border-box; width: 100%; max-width: 52em;
  padding: 28px clamp(16px, 2.6vw, 52px);
  overflow-wrap: break-word;
}
.reading-workspace .reading-scene-visual {
  height: clamp(150px, 25dvh, 260px); min-height: 150px;
}
.reading-workspace .reading-scene-visual .chapter-heading {
  padding: 56px clamp(20px, 3vw, 52px) 24px;
}
.testplay-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.testplay-start p { margin: 0; font-size: .95rem; color: #c0cfdd; }
.testplay-start button {
  min-height: 44px; padding: 10px 20px; border: 1px solid #d9bb72;
  border-radius: 8px; background: #233b50; color: #f6e5b7; font: inherit; cursor: pointer;
}
.testplay-gm-guide { display: none; margin: 0 0 20px; border: 1px solid #526779; border-radius: 10px; }
body.gm-mode .testplay-gm-guide:has(#gmConsole:not(.hidden)) { display: block; }
.testplay-gm-guide > summary { padding: 14px 18px; color: #eed59a; font-size: 1rem; cursor: pointer; }
.testplay-gm-guide #gmConsole { margin: 0; max-width: none; }
.testplay-rule { padding: 12px 16px; border-left: 3px solid #d9bb72; background: #14283b; font-size: 1rem; line-height: 1.8; }
.testplay-start button:focus-visible, .testplay-gm-guide > summary:focus-visible { outline: 3px solid #9acbff; outline-offset: 3px; }
@media (min-width: 1100px) {
  body .reading-workspace:not(.ho-workspace), body .reading-workspace.ho-workspace {
    display: grid !important; width: 100%; max-width: none;
    grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr) clamp(150px, 12vw, 210px) !important;
    gap: clamp(14px, 1.5vw, 28px) !important;
  }
  body[data-view="readings"] #commonReader > .reading-workspace > .reading-tabs,
  body[data-view="readings"] #commonReader > .reading-workspace > .reader-tools,
  .ho-workspace > .chapter-tabs, .ho-workspace > .reader-tools {
    position: sticky !important; top: calc(var(--play-header-height) + 12px) !important;
    height: auto !important; max-height: calc(100dvh - var(--play-header-height) - 24px) !important;
    overflow-y: auto !important; overscroll-behavior: contain;
  }
  .reading-workspace > .reader-tools { width: 100%; min-width: 0; }
  .reader-tools button, .reader-tools select { white-space: normal; }
  body[data-view="handout"] #reader > .character-header,
  body[data-view="handout"] #reader > .chapter-progress {
    margin-left: calc(clamp(210px, 17vw, 280px) + clamp(14px, 1.5vw, 28px));
    margin-right: calc(clamp(150px, 12vw, 210px) + clamp(14px, 1.5vw, 28px));
  }
}
@media (min-width: 801px) and (max-width: 1099px) {
  body .reading-workspace { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .reading-workspace > .reading-tabs, .reading-workspace > .chapter-tabs {
    grid-column: 1; grid-row: 1 / span 2; position: sticky;
    top: calc(var(--play-header-height) + 12px); display: flex; flex-direction: column;
    max-height: calc(100dvh - var(--play-header-height) - 24px); overflow-y: auto;
  }
  .reading-workspace > .chapter-panel, .reading-workspace > .workflow-panel { grid-column: 2; grid-row: 2; margin: 0; }
  .reading-workspace > .reader-tools { grid-column: 2; grid-row: 1; position: static; max-height: none; margin: 0; }
  .reading-workspace > .reader-tools .chapter-toc { flex-basis: 100%; }
}
@media (max-width: 800px) {
  .mobile-reader-bar { top: var(--play-header-height); }
  body[data-view="readings"] #commonReader > .reading-workspace > #readingPanel,
  body[data-view="readings"] #commonReader > .reading-workspace > .workflow-panel,
  .reading-workspace .story-marker { scroll-margin-top: calc(var(--play-header-height) + 72px); }
  .testplay-start { align-items: stretch; }
  .testplay-start button { width: 100%; }
  .reading-workspace .text-panel { padding: 22px 16px; }
  .reading-workspace .reading-scene-visual { height: 170px; min-height: 170px; }
}
/* GM reference: replace the long nested sidebar with two compact selectors. */
#gmHandouts { max-width: 1440px; margin: 0 auto; }
#gmHandouts > h2 { margin: 0 0 16px; font: 500 clamp(1.7rem,3vw,2.3rem)/1.4 serif; color: #f2e4c6; }
.gm-reader-toolbar { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(220px, 2fr) auto; gap: 16px; align-items: end; position: sticky; top: var(--play-header-height); z-index: 12; padding: 14px 18px; margin-bottom: 20px; background: #0c1929; border: 1px solid #405369; border-radius: 10px; }
.gm-reader-toolbar label { display: grid; gap: 4px; min-width: 0; font-size: .875rem; color: #d9c48e; }
.gm-reader-toolbar select, .gm-reader-toolbar button { width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 1rem; padding: 9px 12px; color: #edf3fa; border: 1px solid #526a80; border-radius: 6px; background: #162b40; }
.gm-reader-toolbar button { cursor: pointer; color: #f3db9f; }
#gmHandouts .gm-reader-article { position: static; height: auto; max-height: none; overflow: visible; scroll-margin-top: calc(var(--play-header-height) + 130px); padding: 0; }
#gmHandouts .gm-reader-article > h3 { max-width: 52rem; margin: 0 auto; padding: 28px 24px 16px; font-size: 1.3rem; color: #f2d99d; }
#gmHandouts .text-panel { box-sizing: border-box; width: 100%; max-width: 52rem; margin: 0 auto; padding: 16px 24px 48px; font-size: 1.125rem; line-height: 1.95; overflow-wrap: anywhere; }
#gmHandouts :is(select,button):focus-visible { outline: 3px solid #9acbff; outline-offset: 3px; }
@media(max-width:650px) {
  .gm-reader-toolbar { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 10px; }
  .gm-reader-toolbar label:nth-child(2) { grid-column: 1/-1; grid-row: 2; }
  .gm-reader-toolbar button { font-size: .875rem; }
  #gmHandouts .gm-reader-article { scroll-margin-top: calc(var(--play-header-height) + 185px); }
  #gmHandouts .text-panel { padding: 16px 16px 36px; }
}
/* GM scroll chaining follows the page instead of stopping at a side rail. */
html:has(body.gm-mode) { scroll-behavior: auto; }
body.gm-mode[data-view] { height: auto !important; max-height: none !important; overflow-y: visible !important; overflow-x: clip !important; }
body.gm-mode .reading-workspace > .reading-tabs,
body.gm-mode .reading-workspace > .reader-tools { overscroll-behavior-y: auto !important; }
.gm-reading-access { display: none; }
body.gm-mode .gm-reading-access { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 16px; border: 1px solid #62758a; border-radius: 9px; background: #102235; scroll-margin-top: calc(var(--play-header-height) + 16px); }
.gm-reading-access label { display: grid; gap: 6px; flex: 1 1 280px; min-width: 0; color: #e9d297; font-size: .95rem; }
.gm-reading-access select, .gm-reading-access button { min-height: 44px; padding: 10px 12px; border: 1px solid #73869a; border-radius: 6px; font: inherit; font-size: 1rem; background: #192e43; color: #f2f4f8; max-width: 100%; }
.gm-reading-access button:disabled { opacity: .5; }
@media(max-width:600px) { .gm-reading-access button { width: 100%; } }
/* Wide GM reader: selectors left, document center, navigation right. */
.gm-reader-selectors, .gm-reader-actions { display: contents; }
@media (min-width: 1100px) {
  body.gm-mode #gmHandouts {
    display: grid; max-width: none; width: 100%; min-width: 0;
    grid-template-columns: clamp(200px, 17vw, 260px) minmax(0, 1fr) clamp(145px, 12vw, 185px);
    gap: 16px clamp(14px, 1.5vw, 28px); align-items: start;
  }
  #gmHandouts > h2 { grid-column: 2; margin: 0; }
  #gmHandouts .gm-reader-toolbar { display: contents; }
  #gmHandouts .gm-reader-selectors, #gmHandouts .gm-reader-actions {
    display: grid; gap: 18px; grid-row: 2; min-width: 0;
    position: sticky; top: calc(var(--play-header-height) + 16px);
    padding: 14px; background: #0c1929; border: 1px solid #405369; border-radius: 10px;
  }
  #gmHandouts .gm-reader-selectors { grid-column: 1; }
  #gmHandouts .gm-reader-actions { grid-column: 3; padding: 10px; }
  #gmHandouts .gm-reader-actions button { white-space: normal; }
  #gmHandouts .gm-reader-article {
    grid-column: 2; grid-row: 2; min-width: 0; margin: 0;
    scroll-margin-top: calc(var(--play-header-height) + 16px);
  }
}
/* One vertical scroll owner: the document, not the reading columns. */
html:has(body[data-view="readings"]),
html:has(body[data-view="handout"]) {
  height: auto !important; overflow-y: auto !important;
  overflow-x: clip !important; overscroll-behavior-y: auto !important;
  scroll-behavior: auto !important;
}
body[data-view="readings"], body[data-view="handout"] {
  min-height: 100dvh; height: auto !important; max-height: none !important;
  overflow-x: clip !important; overflow-y: visible !important;
  overscroll-behavior-y: auto !important; scroll-behavior: auto !important;
}
body[data-view] :is(#commonReader, #reader) > .reading-workspace {
  height: auto !important; max-height: none !important; overflow: visible !important;
  align-items: start !important;
}
body[data-view] :is(#commonReader, #reader) .reading-workspace > :is(.chapter-panel, .workflow-panel, #readingPanel) {
  position: static !important; top: auto !important;
  height: auto !important; max-height: none !important; min-height: 0 !important;
  overflow: visible !important; overscroll-behavior: auto !important;
  scroll-behavior: auto !important;
}
body.gm-mode .gm-reader-toolbar {
  position: static !important; top: auto !important;
}
/* Closed GM sections must not stretch into tall empty grid cells. */
.gm-guide-grid { align-items: start; }
/* Readable controls and document hierarchy. */
#readingTabs .readable-cue { display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; min-width: 0; padding: 14px; }
#readingTabs .readable-cue > :is(b,small,span) { display: block; width: 100%; min-width: 0; grid-column: auto; white-space: normal; word-break: normal; overflow-wrap: break-word; text-align: left; }
.reader-location { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #d9bb72; color: #dce7ee; font-size: .95rem; }
.testplay-gm-guide { margin-top: 24px; }
.gm-guide-grid { align-items: start; }
.gm-guide-grid :is(p,li) { line-height: 1.85; word-break: normal; overflow-wrap: break-word; }
.start-destination { width: min(480px,calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid #d9bb72; border-radius: 16px; background: #0c1b2d; color: #edf3fa; }
.start-destination::backdrop { background: #020811c9; }
.start-destination h2 { margin: 0 0 12px; font-size: 1.4rem; color: #efdca9; }
.start-destination button { display: block; width: 100%; min-height: 48px; margin-top: 12px; padding: 12px; border: 1px solid #687b8e; border-radius: 8px; background: #17314a; color: #edf3fa; font: inherit; cursor: pointer; }
.start-destination [data-destination="opening"] { background: #d9bb72; color: #081424; border-color: #d9bb72; font-weight: 700; }
.start-destination [data-cancel] { background: transparent; }
.start-destination button:focus-visible { outline: 3px solid #9acbff; outline-offset: 3px; }
#ho4-character-choice { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
#ho4-character-choice > button.primary { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 120px; margin: 0; padding: 14px 8px; border-radius: 12px; border: 1px solid #7a8b9b; background: #162b40; color: #f0e5c9; }
#ho4-character-choice .face-strip { display: flex; justify-content: center; margin: 0; }
#ho4-character-choice img { width: 56px !important; height: 56px !important; object-fit: cover; border-radius: 50%; }
#ho4-character-choice .choice-label { font-size: 1rem; text-align: center; }
.gm-extra-readings { display: none; margin: 0 0 16px; }
body.gm-mode .gm-extra-readings { display: block; }
.gm-extra-readings > summary { cursor: pointer; padding: 10px 14px; color: #c5d3df; border: 1px solid #41576c; border-radius: 8px; font-size: .9rem; }
.post-vote-stages h5 { margin: 16px 0 6px; color: #dfce9d; font-size: .95rem; }
.post-vote-stages button[aria-pressed="true"] { border-color: #d9bb72; background: #253d50; }
.post-vote-stages button:disabled { opacity: .5; cursor: default; }
.result-page .action-symbol { display: none; }
@media(max-width:480px) { #ho4-character-choice { grid-template-columns: repeat(2,minmax(0,1fr)); } }