.story-narrative-actions.message-actions.has-story-play-actions { flex-wrap:wrap; align-items:center; row-gap:4px; min-width:0; }
.story-narrative-actions.has-story-play-actions > .icon-action { flex-shrink: 0; }
.story-play-strip { display:contents; }
.story-narrative-actions .story-play-action { flex:0 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:28px; min-height:28px; max-width:min(130px,100%); padding:4px 6px; border:1px solid color-mix(in srgb,var(--accent,#b89a72) 55%,var(--border,#555)); border-radius:8px; background:var(--surface-solid,#191a1b); color:var(--text,#eee); font:inherit; font-size:11px; line-height:1.35; white-space:nowrap; opacity:1; cursor:pointer; }
.story-narrative-actions .story-play-action > span:first-child { flex-shrink:0; }
.story-narrative-actions .story-play-action > span:last-child { overflow:hidden; text-overflow:ellipsis; }
.story-narrative-actions .story-play-action:focus-visible, .story-play-dialog button:focus-visible { outline:2px solid var(--accent,#b89a72); outline-offset:2px; }
.story-narrative-actions .story-play-action:disabled { opacity:.45; cursor:default; }
.story-play-dialog { width:min(520px,calc(100% - 28px)); }
.story-play-dialog h2 { overflow-wrap:anywhere; min-width:0; }
.story-play-dialog header > button { flex-shrink:0; }
.story-play-dialog .story-play-select { display:grid; gap:8px; margin:16px 0; font-size:14px; }
.story-play-dialog select { color:var(--text,#eee); background:var(--surface,#222); border:1px solid var(--border,#555); border-radius:10px; padding:8px; }
.story-play-dialog .story-rule-odds small { display:block; margin-top:8px; font-size:12px; color:var(--text-soft,#aaa); }
.story-play-dialog blockquote { margin:12px 0; padding:12px; border-left:3px solid var(--accent,#b89a72); color:var(--text-soft,#aaa); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.story-play-resources { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--accent,#b89a72); }
.story-play-library { display:grid; gap:12px; margin-top:16px; }
.story-play-library article { padding:14px; border:1px solid var(--border,#555); border-radius:14px; }
.story-play-library h3 { margin:0 0 8px; font-size:16px; }
.story-play-library small { display:block; line-height:1.6; color:var(--text-soft,#aaa); }
.story-play-library details { margin:12px 0; font-size:13px; }
.story-play-unavailable { color:var(--text-soft,#aaa); }
@media (max-width:620px) { .story-play-dialog footer { flex-wrap:wrap; } }

/* Vesper Story Lounge MVP — isolated from the existing chat/debate styles. */
.story-nav-item {
  width: 100%; min-height: 42px; padding: 0 12px; display: grid;
  grid-template-columns: 24px minmax(0,1fr) 20px; align-items: center; gap: 8px;
  border: 0; border-radius: 11px; color: var(--text-soft, #aaa); background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.story-nav-item:hover { background: var(--surface-soft, rgba(255,255,255,.05)); color: var(--text, #eee); }
.story-nav-item .story-nav-icon { text-align:center; }
.story-nav-item .story-nav-arrow { text-align:right; opacity:.55; }

.story-shell {
  position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-rows: auto minmax(0,1fr);
  color: var(--text, #e6e3dd); -webkit-text-size-adjust:100%; text-size-adjust:100%; background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent, #b49b79) 10%, transparent), transparent 36%),
    var(--bg, #090a0b);
}
.story-shell.hidden { display:none !important; }
.story-topbar { min-height: 68px; padding: env(safe-area-inset-top,0) 18px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); background:color-mix(in srgb,var(--bg,#090a0b) 90%,transparent); backdrop-filter:blur(22px); }
.story-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.story-brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border-strong,var(--border)); border-radius:13px; background:var(--surface,#161719); box-shadow:var(--shadow-sm,0 8px 24px rgba(0,0,0,.2)); font-size:20px; }
.story-brand-copy { min-width:0; }
.story-brand-copy strong { display:block; font-size:15px; letter-spacing:.01em; }
.story-brand-copy small { display:block; margin-top:3px; color:var(--text-faint,#858585); font-size:10px; }
.story-close { width:38px; height:38px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--surface); cursor:pointer; font-size:21px; }
.story-layout { min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); }
.story-library { min-height:0; padding:16px; display:flex; flex-direction:column; gap:12px; border-right:1px solid var(--border); background:color-mix(in srgb,var(--surface,#121315) 68%,transparent); overflow:auto; }
.story-new { min-height:43px; border:1px solid color-mix(in srgb,var(--accent,#b89a72) 45%,var(--border)); border-radius:12px; color:var(--text); background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#b89a72) 18%,var(--surface)),var(--surface)); font-weight:800; cursor:pointer; }
.story-library-title { margin-top:4px; display:flex; align-items:center; justify-content:space-between; color:var(--text-faint); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.story-library-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.story-library-tabs button,
.story-mobile-library-tabs button { min-height:34px; padding:0 9px; border:1px solid var(--border); border-radius:10px; color:var(--text-faint); background:var(--bg); cursor:pointer; font:inherit; font-size:9px; font-weight:800; }
.story-library-tabs button.active,
.story-mobile-library-tabs button.active { color:var(--text); border-color:color-mix(in srgb,var(--accent,#b89a72) 52%,var(--border)); background:color-mix(in srgb,var(--accent,#b89a72) 12%,var(--surface)); }
.story-library-tabs button span,
.story-mobile-library-tabs button span { margin-left:3px; opacity:.75; }
.story-library-help { margin:-3px 1px 0; color:var(--text-faint); font-size:8px; line-height:1.55; }
.story-room-list { display:grid; gap:7px; }
.story-room-card { width:100%; padding:11px; display:grid; gap:4px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--surface); text-align:left; cursor:pointer; }
.story-room-card:hover,.story-room-card.active { border-color:color-mix(in srgb,var(--accent,#b89a72) 52%,var(--border)); background:var(--surface-soft,var(--surface)); }
.story-room-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.story-room-card span { color:var(--text-faint); font-size:9px; }
.story-empty-library { padding:22px 8px; color:var(--text-faint); text-align:center; font-size:10px; line-height:1.6; }
.story-main { min-width:0; min-height:0; position:relative; display:grid; }
.story-screen { min-width:0; min-height:0; display:grid; }
.story-screen.hidden { display:none !important; }
.story-lobby { padding:clamp(24px,7vw,76px); place-content:safe center; justify-items:center; text-align:center; overflow:auto; }
.story-orbit { width:76px; height:76px; display:grid; place-items:center; margin-bottom:20px; border:1px solid color-mix(in srgb,var(--accent,#b89a72) 35%,var(--border)); border-radius:26px; background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent,#b89a72) 18%,transparent),transparent 60%),var(--surface); font-size:37px; }
.story-lobby h2 { margin:0; font-size:clamp(25px,4vw,42px); line-height:1.1; letter-spacing:-.04em; }
.story-lobby p { max-width:600px; margin:15px 0 0; color:var(--text-soft); font-size:13px; line-height:1.75; }
.story-lobby-actions { margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.story-autosave-copy { margin:10px 0 0 !important; color:var(--text-faint) !important; font-size:9px !important; }
.story-primary,.story-secondary { min-height:44px; padding:0 17px; border-radius:12px; cursor:pointer; font-weight:800; }
.story-primary { border:1px solid color-mix(in srgb,var(--accent,#b89a72) 55%,var(--border)); color:var(--bg,#111); background:var(--accent,#c6ad88); }
.story-secondary { border:1px solid var(--border); color:var(--text); background:var(--surface); }
.story-setup { padding:24px; align-content:start; overflow:auto; }
.story-setup-card { width:min(780px,100%); margin:0 auto; padding:22px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); }
.story-setup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:20px; }
.story-setup-head > div { min-width:0; flex:1 1 auto; }
.story-setup-head > #story-setup-cancel { min-width:72px; flex:0 0 auto; white-space:nowrap; word-break:keep-all; }
.story-setup-head h2 { margin:0; font-size:20px; }
.story-setup-head p { margin:6px 0 0; color:var(--text-faint); font-size:11px; }
.story-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.story-field { display:grid; gap:6px; }
.story-field.full { grid-column:1/-1; }
.story-field label { color:var(--text-soft); font-size:10px; font-weight:800; }
.story-field input,.story-field textarea,.story-field select { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:11px; outline:none; color:var(--text); background:var(--bg); font:inherit; font-size:12px; }
.story-field input,.story-field select { min-height:42px; padding:0 11px; }
.story-field textarea { min-height:110px; padding:11px; resize:vertical; line-height:1.55; }
.story-field textarea.story-setup-genre { min-height:calc(42px + 1.55em); }
.story-field textarea.story-setup-detail { min-height:calc(110px + 3.1em); }
.story-field input:focus,.story-field textarea:focus,.story-field select:focus { border-color:color-mix(in srgb,var(--accent,#b89a72) 65%,var(--border)); }
.story-character-count { min-height:1em; margin-top:-2px; justify-self:end; color:var(--text-faint); font-size:9px; font-variant-numeric:tabular-nums; line-height:1.2; }
.story-character-count.near-limit { color:color-mix(in srgb,#d8a34d 74%,var(--text-soft)); }
.story-character-count.at-limit { color:color-mix(in srgb,#d97d7d 84%,var(--text)); }
.story-setup-actions { margin-top:18px; display:flex; justify-content:flex-end; gap:9px; }
.story-room { grid-template-rows:auto minmax(0,1fr) auto; background:var(--bg,#f1f3eb); }
.story-room-head { min-height:48px; padding:7px 18px; display:flex; align-items:center; justify-content:flex-end; gap:0; border-bottom:1px solid var(--border); }
.story-room-head-copy { display:none; min-width:0; }
.story-room-head-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.story-room-head-copy small { display:block; margin-top:3px; color:var(--text-faint); font-size:9px; }
.story-room-actions { display:flex; gap:7px; }
.story-room-actions button { min-height:34px; padding:0 10px; border:1px solid var(--border); border-radius:10px; color:var(--text-soft); background:var(--surface); cursor:pointer; font-size:10px; }
.story-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; }
.story-content { width:min(860px,calc(100% - 36px)); min-height:100%; margin:0 auto; padding:25px 0 42px; box-sizing:border-box; }
.story-state { margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px; }
.story-state-chip { padding:5px 8px; border:1px solid var(--border); border-radius:999px; color:var(--text-faint); background:var(--surface); font-size:9px; }
.story-notice,
.story-archived-banner { margin:0 0 16px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--accent,#b89a72) 30%,var(--border)); border-radius:11px; color:var(--text-soft); background:color-mix(in srgb,var(--accent,#b89a72) 8%,var(--surface)); font-size:10px; line-height:1.55; }
.story-notice.hidden,
.story-archived-banner.hidden,
#story-composer-wrap.hidden { display:none !important; }
.story-turn { margin:0 0 28px; }
.story-player-line { max-width:78%; margin-left:auto; padding:10px 12px; border-radius:15px 15px 4px 15px; color:var(--text); background:color-mix(in srgb,var(--accent,#b89a72) 14%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent,#b89a72) 22%,var(--border)); font-size:12px; line-height:1.6; white-space:pre-wrap; }
.story-player-line.director { border-style:dashed; color:var(--text-soft); }
.story-turn-input-mode { display:block; margin-bottom:4px; color:var(--text-faint); font-size:9px; font-weight:900; letter-spacing:.06em; }
.story-narrative { margin-top:15px; color:var(--text); font-size:14px; line-height:1.9; white-space:pre-wrap; word-break:break-word; }
.story-suggestions { margin-top:13px; display:flex; flex-wrap:wrap; gap:7px; }
.story-suggestion { padding:7px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-soft); background:var(--surface); cursor:pointer; font-size:10px; }
.story-suggestion:hover { border-color:color-mix(in srgb,var(--accent,#b89a72) 45%,var(--border)); color:var(--text); }
.story-suggestion:disabled { opacity:.52; cursor:default; }
.story-turn-meta { margin-top:9px; color:var(--text-faint); font-size:8px; letter-spacing:.01em; }
.story-narrative-actions.message-actions {
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:5px;
  opacity:1;
  flex-wrap:wrap;
}
/* R36: a draft-only action beside copy/speech, scoped to Story. */
.story-narrative-actions .story-quick-dice-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  height: auto;
  padding: 8px 12px;
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.story-narrative-actions .story-quick-dice-action[hidden] { display: none !important; }
.story-narrative-actions .story-quick-dice-action:disabled { opacity: .5; cursor: not-allowed; }
.story-room > .story-scroll .story-narrative-actions .story-quick-dice-action {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(10,12,14,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.story-narrative-actions .story-quick-dice-action:focus-visible {
  outline: 2px solid var(--accent, #b89a72);
  outline-offset: 3px;
}
.story-quick-dice-dialog {
  box-sizing: border-box;
  width: min(480px, calc(100% - 28px));
  max-width: calc(100% - 28px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text, #eee);
  background: var(--surface-solid, #191a1b);
  border: 1px solid var(--border, #555);
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.story-quick-dice-dialog::backdrop { background: rgba(0,0,0,.55); }
.story-quick-dice-dialog form { margin: 0; }
.story-quick-dice-dialog header, .story-quick-dice-dialog footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-quick-dice-dialog header { justify-content: space-between; }
.story-quick-dice-dialog h2 { margin: 0; font-size: 18px; }
.story-quick-dice-dialog p, .story-quick-dice-dialog dd {
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.story-quick-dice-dialog .story-quick-dice-intent {
  padding: 12px;
  background: var(--surface, #222);
  border-radius: 12px;
  white-space: pre-wrap;
}
.story-quick-dice-dialog .story-quick-dice-hint { color: var(--text-soft, #aaa); font-size: 12px; }
.story-quick-dice-dialog .story-field { min-width: 0; }
.story-quick-dice-dialog select { min-height: 44px; width: 100%; box-sizing: border-box; font-size: 16px; }
.story-quick-dice-dialog dt { font-weight: 600; font-size: 12px; color: var(--accent, #b89a72); }
.story-quick-dice-dialog dd { margin: 3px 0 12px; }
.story-quick-dice-dialog footer { justify-content: flex-end; margin-top: 18px; }
.story-quick-dice-dialog button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border, #555);
  border-radius: 12px;
  color: var(--text, #eee);
  background: var(--surface, #222);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.story-quick-dice-dialog button.story-primary { background: var(--accent, #b89a72); color: var(--bg, #111); }
@media (max-width: 620px) {
  .story-quick-dice-dialog { padding: 16px; }
  .story-quick-dice-dialog .story-form-grid { grid-template-columns: minmax(0, 1fr); }
}
.story-empty-room { padding:70px 20px; text-align:center; color:var(--text-faint); font-size:12px; line-height:1.7; }
.story-thinking { margin:18px 0; color:var(--text-faint); font-size:11px; }
.story-thinking::after { content:""; display:inline-block; width:12px; animation:story-dots 1.1s steps(4,end) infinite; }
@keyframes story-dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%,100%{content:"..."} }
.story-composer { padding:10px 16px calc(10px + env(safe-area-inset-bottom,0)); border-top:1px solid var(--border); background:color-mix(in srgb,var(--bg,#0c0d0e) 92%,transparent); backdrop-filter:blur(20px); }
.story-compose-shell { width:min(860px,100%); margin:0 auto; padding:8px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; gap:8px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.story-mode { min-height:36px; padding:0 10px; border:1px solid var(--border); border-radius:10px; color:var(--text-soft); background:var(--bg); cursor:pointer; font-size:10px; font-weight:800; white-space:nowrap; }
.story-mode.director { color:var(--accent-strong,var(--accent)); border-color:color-mix(in srgb,var(--accent,#b89a72) 42%,var(--border)); }
.story-input { min-height:36px; max-height:150px; padding:8px 4px; border:0; outline:0; resize:none; color:var(--text); background:transparent; font:inherit; font-size:13px; line-height:1.45; }
.story-send { width:38px; height:38px; border:0; border-radius:11px; color:var(--bg,#111); background:var(--accent,#c5aa83); cursor:pointer; font-size:18px; font-weight:900; }
.story-send:disabled,.story-mode:disabled { opacity:.45; cursor:not-allowed; }
.story-mode-hint { width:min(860px,100%); margin:7px auto 0; color:var(--text-soft); text-align:left; font-size:9px; line-height:1.45; }
.story-note { width:min(860px,100%); margin:4px auto 0; color:var(--text-faint); text-align:center; font-size:8px; }
.story-error {
  margin:10px auto;
  width:min(860px,calc(100% - 30px));
  padding:10px 12px;
  border:1px solid rgba(220,95,95,.28);
  border-radius:11px;
  color:#c97878;
  background:rgba(120,20,20,.08);
  font-size:11px;
  font-weight:650;
  line-height:1.55;
  text-shadow:0 1px 2px rgba(0,0,0,.38);
}
.story-error.hidden { display:none; }

/* Keep Story narration crisp on the restored black room while preserving the
 * shadow treatment introduced for the immersive reading layout. */
.story-room > .story-room-head .story-room-head-copy strong,
.story-room > .story-scroll .story-narrative,
.story-room > .story-scroll .story-empty-room,
.story-room > .story-scroll .story-thinking {
  color:#000;
}
.story-room > .story-room-head .story-room-head-copy small,
.story-room > .story-scroll .story-turn-meta {
  color:rgba(0,0,0,.88);
}
[data-theme="dark"] .story-room > .story-room-head .story-room-head-copy strong,
[data-theme="dark"] .story-room > .story-scroll .story-narrative,
[data-theme="dark"] .story-room > .story-scroll .story-empty-room,
[data-theme="dark"] .story-room > .story-scroll .story-thinking {
  color:#fff;
}
[data-theme="dark"] .story-room > .story-room-head .story-room-head-copy small,
[data-theme="dark"] .story-room > .story-scroll .story-turn-meta {
  color:rgba(255,255,255,.88);
}
.story-room > .story-scroll .story-narrative-actions .message-action.icon-action {
  color:#fff;
  border-color:rgba(255,255,255,.22);
  background:rgba(10,12,14,.58);
  box-shadow:0 5px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.story-room > .story-scroll .story-narrative-actions .message-action.icon-action:hover,
.story-room > .story-scroll .story-narrative-actions .message-action.icon-action:focus-visible {
  border-color:rgba(255,255,255,.38);
  background:rgba(10,12,14,.72);
}
.story-room > #story-composer-wrap .story-composer {
  border-top:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.story-room > #story-composer-wrap .story-mode-hint,
.story-room > #story-composer-wrap .story-note {
  display:none;
}

/* Story reuses the main chat speech engine and player. During Story playback
 * the player is portaled into the full-screen Story shell without changing
 * the normal chat stacking context. */
.speech-player.story-speech-player {
  z-index:1240;
  color:#fff;
  border-color:rgba(255,255,255,.24);
  background:rgba(11,13,15,.72);
  background:color-mix(in srgb,#0b0d0f 72%,transparent);
  box-shadow:var(--speech-player-shadow);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.speech-player.story-speech-player .speech-player-copy strong,
.speech-player.story-speech-player .speech-player-button { color:#fff; }
.speech-player.story-speech-player .speech-player-copy span { color:rgba(255,255,255,.74); }
.speech-player.story-speech-player .speech-player-button:hover { background:rgba(255,255,255,.12); }
html.vesper-story-lounge-open #modal-root { z-index:1400; }
html.vesper-story-lounge-open #toast-stack { z-index:1410; }

:root:not([data-theme="dark"]) .story-shell,
[data-theme="light"] .story-shell { --story-shadow: rgba(65,77,58,.14); }
:root:not([data-theme="dark"]) .story-primary,
[data-theme="light"] .story-primary { color:#273022; }

@media (max-width: 720px) {
  .story-layout { grid-template-columns:1fr; }
  .story-library { display:none; }
  .story-topbar { min-height:60px; padding-left:12px; padding-right:12px; }
  .story-brand-mark { width:34px; height:34px; border-radius:11px; }
  .story-brand-copy small { display:none; }
  .story-setup { padding:14px; }
  .story-setup-card { padding:16px; }
  .story-form-grid { grid-template-columns:1fr; }
  .story-field.full { grid-column:auto; }
  /* iOS Safari zoom guard: focused form controls must render at 16 CSS px or larger. */
  .story-field input,
  .story-field textarea,
  .story-field select,
  .story-input { font-size:16px; }
  .story-room-head { padding:8px 12px; }
  .story-content { width:calc(100% - 24px); padding-top:17px; }
  .story-player-line { max-width:88%; }
  .story-narrative { font-size:13px; line-height:1.8; }
  .story-composer { padding-left:8px; padding-right:8px; }
  .story-compose-shell { grid-template-columns:auto minmax(0,1fr) auto; border-radius:14px; }
  .story-mode { width:42px; padding:0; overflow:hidden; font-size:0; }
  .story-mode::before { content:"🎭"; font-size:15px; }
  .story-mode.director::before { content:"🎬"; }
  .story-note { font-size:7px; }
}

@media screen and (max-width: 620px) {
  .story-topbar { min-height:52px; }
}

/* Safari browser tabs already reserve the notch and home-indicator areas.
 * Avoid counting those insets twice. Native WKWebView and installed PWA shells
 * keep the original safe-area padding. */
@media screen and (max-width: 620px) and (display-mode: browser) {
  :root:not(.vesper-native-shell) .story-topbar {
    padding-top:max(0px,calc(env(safe-area-inset-top,0px) - 12px));
  }
  :root:not(.vesper-native-shell) .story-composer {
    padding-bottom:max(6px,calc(6px + env(safe-area-inset-bottom,0px) - 14px));
  }
}

/* Covers iPhone landscape and other coarse-pointer WebKit layouts wider than 720px. */
@media (hover: none) and (pointer: coarse) {
  .story-field input,
  .story-field textarea,
  .story-field select,
  .story-input { font-size:16px; }
}

@media (prefers-reduced-motion: reduce) { .story-thinking::after { animation:none; content:"…"; } }
.story-mobile-library-tabs { display:none; width:min(620px,100%); margin-top:18px; grid-template-columns:1fr 1fr; gap:7px; }
.story-mobile-rooms { display:none; width:min(620px,100%); margin-top:8px; gap:7px; text-align:left; }
@media (max-width:720px) {
  .story-mobile-library-tabs,
  .story-mobile-rooms { display:grid; }
  /* R100: the library grows below a viewport-based start, not around a center. */
  .story-lobby { justify-items:stretch; align-content:start; padding-top:clamp(24px,16svh,140px); padding-bottom:max(24px,env(safe-area-inset-bottom,0px)); overscroll-behavior-y:contain; }
  .story-lobby > * { margin-left:auto; margin-right:auto; }
  .story-mobile-library-tabs,
  .story-mobile-rooms { margin-left:0; margin-right:0; }
}

/* Story essential timeline controls — branch, rewind, savepoint, recap and room management. */
.story-room-head { position:relative; }
.story-room-head-copy { flex:1 1 auto; }
.story-room-actions {
  flex:0 1 auto; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.story-room-actions::-webkit-scrollbar { display:none; }
/* The native hidden attribute also removes folded controls from keyboard focus. */
.story-room-actions[hidden] { display:none !important; }
.story-room-actions button:disabled,
.story-manage-menu button:disabled,
.story-panel button:disabled,
.story-turn-actions button:disabled { opacity:.44; cursor:not-allowed; }

.story-manage-menu {
  position:absolute; z-index:16; top:calc(100% - 5px); right:18px; width:178px; padding:7px;
  display:grid; gap:4px; border:1px solid var(--border); border-radius:12px;
  background:color-mix(in srgb,var(--surface,#151618) 96%,var(--bg,#090a0b));
  box-shadow:0 18px 46px rgba(0,0,0,.32); backdrop-filter:blur(22px);
}
.story-manage-menu.hidden { display:none !important; }
.story-manage-menu button {
  min-height:36px; padding:0 10px; border:0; border-radius:8px; color:var(--text-soft);
  background:transparent; cursor:pointer; text-align:left; font:inherit; font-size:10px;
}
.story-manage-menu button:hover { color:var(--text); background:var(--surface-soft,rgba(255,255,255,.06)); }
.story-manage-menu button.danger { color:#d98f8f; }

.story-player-row { display:flex; align-items:flex-start; justify-content:flex-end; gap:7px; }
.story-player-row .story-player-line { margin-left:0; }
.story-turn-actions { position:relative; flex:0 0 auto; margin-top:2px; }
.story-turn-actions > summary {
  width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--border);
  border-radius:9px; color:var(--text-faint); background:var(--surface); cursor:pointer;
  list-style:none; user-select:none; font-size:14px; line-height:1;
}
.story-turn-actions > summary::-webkit-details-marker { display:none; }
.story-turn-actions[open] > summary,
.story-turn-actions > summary:hover { color:var(--text); border-color:color-mix(in srgb,var(--accent,#b89a72) 42%,var(--border)); }
.story-turn-action-menu {
  position:absolute; z-index:10; top:35px; right:0; width:220px; padding:7px; display:grid; gap:4px;
  border:1px solid var(--border); border-radius:12px;
  background:color-mix(in srgb,var(--surface,#151618) 97%,var(--bg,#090a0b));
  box-shadow:0 16px 40px rgba(0,0,0,.3); backdrop-filter:blur(20px);
}
.story-turn-action-menu button {
  min-height:36px; padding:0 10px; border:0; border-radius:8px; color:var(--text-soft);
  background:transparent; cursor:pointer; text-align:left; font:inherit; font-size:10px;
}
.story-turn-action-menu button:not(:disabled):hover { color:var(--text); background:var(--surface-soft,rgba(255,255,255,.06)); }
.story-turn-footer { margin-top:9px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.story-turn-footer .story-turn-meta { margin-top:0; }
.story-turn-branch-badge,
.story-turn-legacy {
  padding:3px 6px; border:1px solid var(--border); border-radius:999px;
  color:var(--text-faint); background:var(--surface); font-size:8px;
}
.story-turn-branch-badge { color:color-mix(in srgb,var(--accent,#b89a72) 76%,var(--text)); }
.story-timeline-truncated {
  margin:0 0 16px; padding:9px 11px; border:1px dashed var(--border); border-radius:10px;
  color:var(--text-faint); background:color-mix(in srgb,var(--surface,#151618) 70%,transparent);
  font-size:9px; line-height:1.55;
}

.story-branch-draft {
  width:min(860px,calc(100% - 32px)); margin:9px auto 0; padding:9px 11px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid color-mix(in srgb,var(--accent,#b89a72) 42%,var(--border));
  border-radius:12px; background:color-mix(in srgb,var(--accent,#b89a72) 9%,var(--surface));
}
.story-branch-draft.hidden { display:none !important; }
.story-branch-draft div { min-width:0; display:grid; gap:2px; }
.story-branch-draft strong { color:var(--text); font-size:10px; }
.story-branch-draft span { color:var(--text-faint); font-size:8px; line-height:1.45; }
.story-branch-draft button {
  flex:0 0 auto; min-height:30px; padding:0 9px; border:1px solid var(--border); border-radius:9px;
  color:var(--text-soft); background:var(--bg); cursor:pointer; font:inherit; font-size:9px;
}

.story-panel-backdrop {
  position:fixed; z-index:1250; inset:0; display:flex; justify-content:flex-end;
  background:rgba(0,0,0,.48); backdrop-filter:blur(3px);
}
.story-panel-backdrop.hidden { display:none !important; }
.story-panel {
  width:min(460px,calc(100% - 24px)); height:100%; min-height:0; display:grid;
  grid-template-rows:auto auto minmax(0,1fr); border-left:1px solid var(--border);
  color:var(--text); background:color-mix(in srgb,var(--bg,#090a0b) 97%,var(--surface));
  box-shadow:-22px 0 60px rgba(0,0,0,.36); animation:story-panel-in .18s ease-out;
}
@keyframes story-panel-in { from { transform:translateX(18px); opacity:.6; } to { transform:translateX(0); opacity:1; } }
.story-panel-head {
  min-height:62px; padding:calc(10px + env(safe-area-inset-top,0)) 14px 10px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--border);
}
.story-panel-head strong { font-size:14px; }
.story-panel-head button {
  width:34px; height:34px; border:1px solid var(--border); border-radius:10px;
  color:var(--text); background:var(--surface); cursor:pointer; font-size:20px;
}
.story-panel-tabs { padding:9px 12px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; border-bottom:1px solid var(--border); }
.story-panel-tabs button {
  min-height:35px; border:1px solid var(--border); border-radius:10px; color:var(--text-faint);
  background:var(--surface); cursor:pointer; font:inherit; font-size:9px; font-weight:800;
}
.story-panel-tabs button.active {
  color:var(--text); border-color:color-mix(in srgb,var(--accent,#b89a72) 48%,var(--border));
  background:color-mix(in srgb,var(--accent,#b89a72) 12%,var(--surface));
}
.story-panel-content {
  min-height:0; padding:14px 14px calc(24px + env(safe-area-inset-bottom,0)); overflow:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.story-panel-summary-card {
  margin-bottom:12px; padding:14px; display:grid; gap:6px; border:1px solid color-mix(in srgb,var(--accent,#b89a72) 34%,var(--border));
  border-radius:14px; background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent,#b89a72) 13%,transparent),transparent 55%),var(--surface);
}
.story-panel-summary-card span { color:var(--text-faint); font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.story-panel-summary-card strong { font-size:12px; line-height:1.6; white-space:pre-wrap; }
.story-panel-summary-card small { color:var(--text-faint); font-size:9px; line-height:1.5; }
.story-panel-section {
  margin:0 0 10px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
}
.story-panel-section h3 { margin:0 0 8px; color:var(--text-soft); font-size:10px; }
.story-panel-section ul { margin:0; padding-left:17px; display:grid; gap:5px; }
.story-panel-section li,
.story-panel-prose { color:var(--text-soft); font-size:10px; line-height:1.65; white-space:pre-wrap; word-break:break-word; }
.story-panel-prose { margin:0; }
.story-panel-empty { margin:0; color:var(--text-faint); font-size:9px; line-height:1.55; }
.story-panel-footnote { margin:12px 3px 0; color:var(--text-faint); font-size:8px; line-height:1.55; }
.story-info-settings-head .story-panel-guidance { margin:10px 0 0; }
.story-info-editor { display:grid; gap:14px; }
.story-info-editor .story-form-grid { grid-template-columns:minmax(0,1fr); }
.story-info-editor .story-field.full { grid-column:auto; }
.story-info-field-hint { color:var(--text-faint); font-size:12px; line-height:1.55; }
.story-info-editor-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; }
.story-info-editor-actions button { width:100%; min-width:0; }
.story-info-error {
  padding:11px 12px; border:1px solid rgba(220,95,95,.32); border-radius:11px;
  color:#d99; background:rgba(120,20,20,.09); font-size:13px; line-height:1.55;
}
.story-info-error.hidden { display:none !important; }
.story-info-editor[aria-busy="true"] { opacity:.78; }
.story-panel-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.story-panel-section-head h3 { margin-bottom:0; }
.story-panel-section-head > span { color:var(--text-faint); font-size:8px; }
.story-panel-section-head > button,
.story-branch-card button,
.story-savepoint-card button {
  min-height:30px; padding:0 9px; border:1px solid var(--border); border-radius:8px;
  color:var(--text-soft); background:var(--bg); cursor:pointer; font:inherit; font-size:8px;
}
.story-panel-section-head > button:hover,
.story-branch-card button:hover,
.story-savepoint-card button:hover { color:var(--text); border-color:color-mix(in srgb,var(--accent,#b89a72) 42%,var(--border)); }
.story-branch-list,
.story-savepoint-list,
.story-timeline-turns { margin-top:9px; display:grid; gap:7px; }
.story-branch-card,
.story-savepoint-card {
  padding:9px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg);
}
.story-branch-card.active {
  border-color:color-mix(in srgb,var(--accent,#b89a72) 48%,var(--border));
  background:color-mix(in srgb,var(--accent,#b89a72) 8%,var(--bg));
}
.story-branch-card > div:first-child,
.story-savepoint-card > div:first-child { min-width:0; display:grid; gap:3px; }
.story-branch-card strong,
.story-savepoint-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:9px; }
.story-branch-card span,
.story-savepoint-card span { color:var(--text-faint); font-size:8px; }
.story-current-branch { flex:0 0 auto; padding:4px 7px; border-radius:999px; color:color-mix(in srgb,var(--accent,#b89a72) 78%,var(--text)) !important; background:color-mix(in srgb,var(--accent,#b89a72) 10%,var(--surface)); }
.story-branch-actions,
.story-savepoint-actions { flex:0 0 auto; display:flex; align-items:center; gap:5px; }
.story-savepoint-actions .danger { color:#d98f8f; }
.story-worldline-section .story-panel-guidance strong { color:color-mix(in srgb,var(--accent,#b89a72) 78%,var(--text)); }
.story-timeline-turn {
  width:100%; padding:8px 9px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--bg);
  cursor:pointer; text-align:left;
}
.story-timeline-turn:hover { border-color:color-mix(in srgb,var(--accent,#b89a72) 42%,var(--border)); }
.story-timeline-turn span { color:var(--text-faint); font-size:8px; }
.story-timeline-turn strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:700; }
.story-timeline-actions { flex:0 0 auto; display:grid; gap:5px; }

@media (max-width: 900px) {
  .story-room-actions { max-width:68%; }
  .story-room-actions button { padding:0 8px; }
}

@media (max-width: 720px) {
  .story-room-head { align-items:flex-start; padding-top:9px; padding-bottom:9px; }
  .story-room-head-copy { max-width:42%; padding-top:3px; }
  .story-room-head-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .story-room-actions { max-width:58%; gap:5px; }
  .story-room-actions button { min-height:32px; padding:0 8px; white-space:nowrap; font-size:9px; }
  .story-manage-menu { right:10px; }
  .story-turn-action-menu { position:fixed; z-index:1260; left:12px; right:12px; top:auto; bottom:calc(12px + env(safe-area-inset-bottom,0)); width:auto; }
  .story-branch-draft { width:calc(100% - 16px); margin-top:7px; box-sizing:border-box; }
  .story-panel { width:100%; border-left:0; }
  .story-panel-backdrop { background:var(--bg,#090a0b); }
  .story-panel-section { padding:11px; }
}

@media (max-width: 420px) {
  .story-room-head-copy { max-width:34%; }
  .story-room-actions { max-width:66%; }
  .story-room-actions button { padding:0 7px; }
  .story-player-line { max-width:calc(100% - 40px); }
  .story-branch-card,
  .story-savepoint-card { align-items:flex-start; flex-direction:column; }
  .story-branch-actions,
  .story-savepoint-actions { width:100%; }
  .story-branch-actions button,
  .story-savepoint-actions button { flex:1 1 auto; }
}

/* R19: beginner setup and help, isolated from chat/voice/commerce UI. */
.story-setup { grid-template-columns: minmax(0, 1fr); }
.story-setup-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
.story-setup-card > * { min-width: 0; }
.story-beginner-section, .story-beginner-help-section {
  padding: 20px; border: 1px solid var(--border, #45453e); border-radius: 18px;
  background: var(--surface, #20211e); color: var(--text, #f0eee7); margin: 16px 0;
}
.story-beginner-section h3, .story-beginner-help-section h3 { margin: 6px 0 12px; font-size: 19px; line-height: 1.4; }
.story-beginner-eyebrow { color: #c5a675; font-size: 11px; letter-spacing: .12em; font-weight: 750; }
.story-beginner-section p, .story-beginner-help-section p, .story-beginner-help-section li { font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.story-beginner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.story-beginner-grid > button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 16px; border: 1px solid #777466; border-radius: 13px; background: #242621; color: #f0eee7; text-align: left; cursor: pointer; font: inherit; }
.story-beginner-grid > button:hover { border-color: #dbc092; background: #30322b; }
.story-beginner-grid small { color: #d4be99; font-size: 11px; line-height: 1.5; }
.story-beginner-grid strong { font-size: 16px; }
.story-beginner-grid span { font-size: 12px; line-height: 1.7; }
.story-beginner-grid b { margin-top: auto; color: #e6c99d; font-size: 12px; }
.story-beginner-status:empty { display: none; }
.story-beginner-status { padding: 12px; border-left: 3px solid #c5a675; }
.story-beginner-section summary, .story-beginner-help-section summary { cursor: pointer; padding: 12px 0; min-height: 44px; box-sizing: border-box; font-size: 13px; font-weight: 650; line-height: 1.6; }
.story-beginner-section details, .story-beginner-help-section details { border-top: 1px solid #646457; }
.story-beginner-help-section { grid-column: 1 / -1; margin: 0; }
.story-beginner-help-section ol { padding-left: 23px; }
.story-beginner-help-section li + li { margin-top: 9px; }
.story-beginner-dialog { width: min(660px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #777466; border-radius: 18px; background: #20221e; color: #f0eee7; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; margin: auto; }
.story-beginner-dialog::backdrop { background: rgba(0, 0, 0, .68); }
.story-beginner-dialog header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #20221e; border-bottom: 1px solid #515447; }
.story-beginner-dialog h2 { margin: 0; font-size: 19px; line-height: 1.5; }
.story-beginner-dialog button { min-height: 44px; padding: 10px 14px; border: 1px solid #828475; border-radius: 10px; background: #30342c; color: #f0eee7; cursor: pointer; font: inherit; }
.story-beginner-dialog #story-beginner-close { min-width: 44px; font-size: 24px; line-height: 1; }
.story-beginner-dialog #story-beginner-apply { background: #d1b383; color: #1d201a; font-weight: 750; }
.story-beginner-dialog button:disabled, .story-beginner-grid button:disabled { opacity: .5; cursor: not-allowed; }
.story-beginner-preview-body { padding: 6px 20px 16px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.story-beginner-preview-body dt { color: #dfc59f; font-weight: 750; margin-top: 13px; }
.story-beginner-preview-body dd { margin: 4px 0 0; white-space: pre-wrap; }
#story-beginner-preview-cost { border-top: 1px solid #515447; padding-top: 14px; color: #d9d6cd; }
#story-beginner-replace-wrap { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; }
#story-beginner-replace-wrap[hidden] { display: none; }
#story-beginner-replace { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: #d1b383; }
.story-beginner-dialog footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 18px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #515447; }
.story-beginner-section :focus-visible, .story-beginner-dialog :focus-visible, .story-beginner-help-section :focus-visible { outline: 2px solid #e6c99d; outline-offset: 3px; }
@media (max-width: 700px) {
  .story-beginner-grid { grid-template-columns: minmax(0, 1fr); }
  .story-beginner-section, .story-beginner-help-section { padding: 15px; }
  .story-beginner-dialog footer button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .story-panel { animation:none; }
}

/* === STORY LOUNGE MOBILE STREAM + KEYBOARD MAGNET + READABILITY POLISH: 2026-08-23 ===
 * Scope: Story Lounge only. The existing 1:1/Debate composer, viewport anchor,
 * backend state, credit and cache behavior remain untouched.
 */
.story-room-card-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
}
.story-room-card-row .story-room-card { min-width: 0; }
.story-room-card-delete {
  min-width: 48px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #c86f6f 32%, var(--border));
  border-radius: 12px;
  color: #c98282;
  background: color-mix(in srgb, #9b3d3d 7%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.story-room-card-delete:hover {
  color: #e6a1a1;
  border-color: color-mix(in srgb, #d97d7d 56%, var(--border));
  background: color-mix(in srgb, #9b3d3d 12%, var(--surface));
}

.story-player-line { font-size: 14px; line-height: 1.68; }
.story-narrative { font-size: 15px; line-height: 1.78; }
.story-suggestion { font-size: 12px; line-height: 1.35; }
.story-turn-meta { font-size: 10px; }
.story-state-chip { font-size: 10px; }
.story-notice,
.story-archived-banner { font-size: 12px; }
.story-empty-room { font-size: 14px; }

.story-thinking {
  min-height: 46px;
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}
.story-thinking::after { content: none !important; display: none !important; }
.story-thinking-loader {
  flex: 0 0 auto;
  min-width: 42px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #b89a72) 9%, var(--surface));
}
.story-thinking-loader i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #b89a72) 80%, var(--text));
  animation: story-thinking-pulse 1s infinite ease-in-out;
}
.story-thinking-loader i:nth-child(2) { animation-delay: .14s; }
.story-thinking-loader i:nth-child(3) { animation-delay: .28s; }
@keyframes story-thinking-pulse {
  0%, 70%, 100% { transform: translateY(0) scale(.72); opacity: .38; }
  35% { transform: translateY(-3px) scale(1); opacity: 1; }
}
.story-narrative-streaming::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.12em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent, #b89a72) 72%, var(--text));
  animation: story-stream-caret .78s steps(1, end) infinite;
}
@keyframes story-stream-caret { 0%, 48% { opacity: .95; } 49%, 100% { opacity: .12; } }
#story-tail {
  height: var(--vesper-story-bottom-clearance, 0px);
  min-height: 0;
  pointer-events: none;
}
.story-room.story-busy #story-turns .story-turn:last-child,
#story-turns .story-turn:last-child { margin-bottom: 8px; }

/* Keep the pending row's footprint while its streamed turn takes over. */
.story-room.story-busy #story-thinking.hidden {
  display: flex !important;
  visibility: hidden;
}

@media (max-width: 620px) {
  .story-content {
    width: calc(100% - 24px);
    padding-top: 17px;
    padding-bottom: 8px;
  }
  .story-player-line {
    max-width: 88%;
    padding: 11px 13px;
    font-size: 16px;
    line-height: 1.65;
  }
  .story-turn-input-mode { font-size:11px; }
  .story-narrative {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.78;
  }
  .story-suggestions { margin-top: 12px; gap: 8px; }
  .story-suggestion {
    padding: 8px 11px;
    font-size: 13px;
    line-height: 1.35;
  }
  .story-turn-meta,
  .story-state-chip { font-size: 11px; }
  .story-turn-footer { margin-top: 8px; }
  .story-note { display: none; }
  .story-mode-hint { margin-top:6px; padding:0 4px; font-size:11px; line-height:1.4; }
  .story-composer {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
  }
  .story-compose-shell {
    padding: 6px;
    gap: 7px;
  }
  .story-input { line-height: 1.55; }
  .story-thinking {
    min-height: 50px;
    margin: 7px 0 3px;
    gap: 12px;
    font-size: 15px;
  }
  .story-thinking-loader {
    min-width: 48px;
    height: 34px;
    gap: 6px;
  }
  .story-thinking-loader i { width: 8px; height: 8px; }
  .story-room-card-delete { min-width: 56px; font-size: 12px; }

  html.vesper-story-composer-visual-anchor #story-composer-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vesper-story-composer-visual-bottom);
    bottom: auto;
    z-index: 1230;
    width: 100%;
    margin: 0;
    transform: translateY(-100%);
  }
  html.vesper-story-composer-visual-anchor .story-composer {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  html.vesper-story-composer-visual-anchor .story-content { padding-bottom: 0; }

  /* Mobile Safari browser tabs keep the Story composer in its normal grid
   * row. The whole Story shell follows the measured VisualViewport bottom in
   * document coordinates, avoiding the stale fixed + transform compositor
   * position that third-party keyboards can leave behind. Match normal chat:
   * commit stable browser geometry; installed PWAs keep the fixed anchor. */
  html.vesper-story-composer-flow-anchor .story-shell {
    position: absolute;
    inset: 0 0 auto;
    height: var(--vesper-story-composer-flow-bottom);
    transition: none;
    overflow-anchor: none;
    min-height: 0;
    max-height: 100dvh;
    /* The flow shell intentionally ends at the keyboard top. Extend only its
     * paint below that edge so a transparent third-party keyboard cannot reveal
     * the main app or an already-open drawer underneath Story Lounge. */
    box-shadow: 0 100vh 0 100vh var(--bg, #090a0b);
  }
  html.vesper-story-composer-flow-anchor #story-composer-wrap {
    position: static;
    inset: auto;
    z-index: 1230;
    width: 100%;
    margin: 0;
    transform: none;
  }
  html.vesper-story-composer-flow-anchor .story-composer {
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--bg, #0c0d0e);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.vesper-story-composer-flow-anchor .story-content { padding-bottom: 8px; }

  /* Keep the waiting row fully above the mobile composer while iOS releases
   * the keyboard/visual-viewport anchor after a turn is submitted. */
  .story-room.story-busy #story-thinking + #story-tail {
    height: max(var(--vesper-story-bottom-clearance, 0px), 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-thinking-loader i,
  .story-narrative-streaming::after { animation: none; }
  .story-thinking-loader i { opacity: .8; transform: none; }
}


/* === STORY LOUNGE LINEAR TIMELINE + MOBILE WIDTH SAFETY: 2026-08-23 ===
 * Scope: Story Lounge only. Prevents intrinsic toolbar/text widths from widening
 * the mobile grid, enlarges all auxiliary panels, and exposes a simple linear
 * restart/save workflow.
 */
.story-shell,
.story-topbar,
.story-layout,
.story-main,
.story-screen,
.story-room,
.story-room-head,
.story-room-actions,
.story-scroll,
.story-content,
#story-turns,
.story-turn,
.story-player-row,
.story-narrative,
#story-composer-wrap,
.story-composer,
.story-compose-shell,
.story-panel,
.story-panel-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.story-shell,
.story-layout,
.story-main,
.story-room,
.story-scroll,
.story-panel-content { overflow-x: hidden; }
.story-shell {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
}
.story-shell * { box-sizing: border-box; }
.story-layout,
.story-main,
.story-screen,
.story-room,
.story-scroll { width: 100%; }
.story-scroll { max-width: 100vw; }
.story-content {
  width: min(860px, 100%);
  padding-left: 18px;
  padding-right: 18px;
}
.story-turn,
.story-player-row,
.story-narrative { width: 100%; }
.story-player-line,
.story-narrative,
.story-panel-prose,
.story-panel-section li,
.story-timeline-turn strong,
.story-room-card strong,
.story-room-card span {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.story-room-actions { min-width: 0; }
.story-room-actions button { flex: 0 0 auto; }
.story-compose-shell { width: min(860px, 100%); }

/* Auxiliary Story screens should be as readable as the 16 px main narrative. */
.story-library-tabs button,
.story-mobile-library-tabs button { font-size: 13px; }
.story-library-help { font-size: 12px; line-height: 1.65; }
.story-room-card strong { font-size: 15px; line-height: 1.4; }
.story-room-card span { font-size: 12px; line-height: 1.5; white-space: normal; }
.story-empty-library { font-size: 14px; }
.story-setup-head p { font-size: 14px; line-height: 1.6; }
.story-field label { font-size: 14px; }
.story-room-actions button { font-size: 12px; }
.story-manage-menu button { min-height: 42px; font-size: 14px; }
.story-panel-head strong { font-size: 18px; }
.story-panel-tabs button { min-height: 44px; font-size: 14px; }
.story-panel-summary-card span { font-size: 13px; }
.story-panel-summary-card strong { font-size: 16px; line-height: 1.72; }
.story-panel-summary-card small { font-size: 13px; line-height: 1.6; }
.story-panel-section h3 { font-size: 15px; }
.story-panel-section li,
.story-panel-prose { font-size: 16px; line-height: 1.72; }
.story-panel-empty { font-size: 14px; line-height: 1.65; }
.story-panel-footnote,
.story-panel-guidance { color: var(--text-faint); font-size: 13px; line-height: 1.65; }
.story-panel-guidance { margin: 0 0 12px; }
.story-panel-section-head > span { font-size: 13px; }
.story-panel-section-head > button,
.story-branch-card button,
.story-savepoint-card button,
.story-timeline-fork,
.story-timeline-restart,
.story-panel-manage-actions button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}
.story-branch-card strong,
.story-savepoint-card strong { font-size: 16px; line-height: 1.45; white-space: normal; }
.story-branch-card span,
.story-savepoint-card span { font-size: 13px; }
.story-timeline-turn-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.story-timeline-turn {
  min-width: 0;
  padding: 12px 13px;
  grid-template-columns: auto minmax(0, 1fr);
}
.story-timeline-turn span { font-size: 13px; }
.story-timeline-turn strong { min-width: 0; font-size: 16px; line-height: 1.45; white-space: normal; }
.story-timeline-fork { color:color-mix(in srgb,var(--accent,#b89a72) 82%,var(--text)); white-space:nowrap; }
.story-timeline-restart { white-space: nowrap; }
.story-timeline-fork:disabled,
.story-timeline-restart:disabled { opacity: .44; cursor: not-allowed; }
.story-panel-manage-actions { display: grid; gap: 8px; }
.story-panel-manage-actions .danger,
.story-danger-zone .danger { color: #d98f8f; border-color: color-mix(in srgb, #d98f8f 36%, var(--border)); }
.story-danger-zone { border-color: color-mix(in srgb, #d98f8f 22%, var(--border)); }

@media (max-width: 720px) {
  .story-layout { grid-template-columns: minmax(0, 1fr); }
  .story-main,
  .story-screen,
  .story-room,
  .story-scroll { max-width: 100%; }
  .story-room-head {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 6px 12px;
  }
  .story-room-head-copy {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }
  .story-room-head-copy strong { font-size: 16px; }
  .story-room-head-copy small { font-size: 13px; }
  .story-room-actions {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }
  .story-room-actions button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 4px;
    font-size: 13px;
    white-space: nowrap;
  }
  .story-manage-menu {
    top: calc(100% - 2px);
    right: 12px;
    width: min(250px, calc(100% - 24px));
  }
  .story-manage-menu button { font-size: 16px; }
  .story-content {
    width: 100%;
    padding: 17px 20px 8px;
  }
  .story-player-row { max-width: 100%; }
  .story-player-line {
    min-width: 0;
    max-width: 88%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .story-narrative {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .story-panel-content { padding-left: 16px; padding-right: 16px; }
  .story-panel-tabs button { font-size: 15px; }
  .story-panel-section { padding: 15px; }
  .story-panel-section h3 { font-size: 16px; }
  .story-panel-section li,
  .story-panel-prose,
  .story-panel-summary-card strong,
  .story-timeline-turn strong,
  .story-savepoint-card strong { font-size: 16px; }
  .story-panel-section-head > button,
  .story-branch-card button,
  .story-savepoint-card button,
  .story-timeline-fork,
  .story-timeline-restart,
  .story-panel-manage-actions button { font-size: 15px; }
  .story-library-tabs button,
  .story-mobile-library-tabs button { min-height: 42px; font-size: 15px; }
  .story-library-help { font-size: 14px; }
  .story-room-card { padding: 14px; }
  .story-room-card strong { font-size: 16px; }
  .story-room-card span { font-size: 14px; }
  .story-room-card-delete { min-width: 62px; font-size: 14px; }
  .story-empty-library { font-size: 15px; }
  .story-setup-head p { font-size: 15px; }
  .story-field label { font-size: 15px; }
}

@media (max-width: 430px) {
  .story-content { padding-left: 16px; padding-right: 16px; }
  .story-room-actions { gap: 5px; }
  .story-room-actions button { font-size: 12px; }
  .story-worldline-section .story-panel-section-head { align-items:stretch; flex-direction:column; }
  .story-worldline-section .story-panel-section-head > button { width:100%; }
  .story-timeline-turn-row { grid-template-columns: minmax(0, 1fr); }
  .story-timeline-actions { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story-timeline-fork,
  .story-timeline-restart { width: 100%; }
}

/* Narrative Voltage help — isolated to the new Story setup screen. */
.story-setup-actions {
  align-items: center;
  justify-content: space-between;
}
.story-voltage-help {
  width: auto;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 48%, var(--border));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #b89a72) 10%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  line-height: 1;
}
.story-voltage-help > span { font-size: 20px; }
.story-voltage-help > strong { font-size: 12px; white-space: nowrap; }
.story-voltage-help:hover,
.story-voltage-help:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 78%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 18%, var(--surface));
  outline: none;
}
.story-voltage-guide-backdrop {
  position: fixed;
  z-index: 1280;
  inset: 0;
  padding: max(16px, env(safe-area-inset-top, 0)) 16px max(16px, env(safe-area-inset-bottom, 0));
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(5px);
}
.story-voltage-guide-backdrop.hidden { display: none !important; }
.story-voltage-guide {
  width: min(720px, 100%);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 38%, var(--border));
  border-radius: 22px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg, #090a0b) 97%, var(--surface));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}
.story-voltage-guide-head {
  min-height: 74px;
  padding: 15px 16px 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
}
.story-voltage-guide-head span {
  display: block;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--accent, #b89a72) 80%, var(--text));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}
.story-voltage-guide-head h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.story-voltage-guide-head button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 25px;
  line-height: 1;
}
.story-voltage-guide-content {
  min-height: 0;
  padding: 18px 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.story-voltage-guide-lead {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.72;
}
.story-voltage-bands { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.story-voltage-bands article {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.story-voltage-bands article.recommended {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 58%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 11%, var(--surface));
}
.story-voltage-bands strong { display: block; font-size: 15px; }
.story-voltage-bands p,
.story-voltage-guide-section > p,
.story-voltage-guide-section li {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}
.story-voltage-bands p { margin: 5px 0 0; }
.story-voltage-guide-section { margin-top: 18px; }
.story-voltage-guide-section h3 { margin: 0 0 9px; font-size: 16px; }
.story-voltage-guide-section > p { margin: 0; }
.story-voltage-guide-section ul { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.story-voltage-examples { display: grid; gap: 7px; }
.story-voltage-examples p {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent, #b89a72) 65%, var(--border));
  border-radius: 0 10px 10px 0;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.65;
}
.story-voltage-guide-note {
  margin: 18px 0 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 42%, var(--border));
  border-radius: 13px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent, #b89a72) 9%, var(--surface));
  font-size: 14px;
  line-height: 1.7;
}

.story-text-editor-dialog {
  width: min(760px, 100%);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 42%, var(--border));
  border-radius: 22px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg, #090a0b) 97%, var(--surface));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
}
.story-text-editor-dialog form {
  min-height: 0;
  max-height: inherit;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.story-text-editor-content {
  min-height: 0;
  padding: 18px 20px 10px;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 10px;
}
.story-text-editor-content > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}
#story-text-editor-input {
  width: 100%;
  min-height: min(46dvh, 420px);
  max-height: 56dvh;
  padding: 14px;
  resize: vertical;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}
#story-text-editor-input:focus {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 72%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent, #b89a72) 22%, transparent);
}
.story-text-editor-count {
  color: var(--text-faint);
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.story-text-editor-actions {
  padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0));
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.story-text-editor-actions button {
  min-width: 110px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}
#story-text-editor-submit {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 62%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 21%, var(--surface));
}

@media (max-width: 620px) {
  .story-voltage-guide-backdrop { padding-left: 10px; padding-right: 10px; }
  .story-voltage-guide { max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)); border-radius: 20px; }
  .story-voltage-guide-head { min-height: 68px; padding-left: 16px; }
  .story-voltage-guide-head h2 { font-size: 19px; }
  .story-voltage-guide-content { padding: 16px 15px 20px; }
  .story-voltage-bands { grid-template-columns: minmax(0, 1fr); }
  .story-voltage-guide-lead,
  .story-voltage-bands strong { font-size: 15px; }
  .story-voltage-bands p,
  .story-voltage-guide-section > p,
  .story-voltage-guide-section li,
  .story-voltage-examples p,
  .story-voltage-guide-note { font-size: 14px; }
  .story-text-editor-backdrop { padding: max(8px, env(safe-area-inset-top, 0)) 8px max(8px, env(safe-area-inset-bottom, 0)); }
  .story-text-editor-dialog { max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)); border-radius: 18px; }
  .story-text-editor-content { padding: 14px 13px 8px; grid-template-rows: auto minmax(0, 1fr) auto; }
  #story-text-editor-input { min-height: 42dvh; max-height: none; resize: none; font-size: 16px; }
  .story-text-editor-actions { padding: 10px 13px max(13px, env(safe-area-inset-bottom, 0)); display: grid; grid-template-columns: 1fr 1fr; }
  .story-text-editor-actions button { width: 100%; min-width: 0; min-height: 46px; font-size: 14px; }
}

/* Story Lounge immersion v3 — deliberately scoped away from general chat. */
.story-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.story-help-trigger {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 38%, var(--border));
  border-radius: 12px;
  color: color-mix(in srgb, var(--accent, #b89a72) 82%, var(--text));
  background: color-mix(in srgb, var(--accent, #b89a72) 8%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.story-help-trigger:hover,
.story-help-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 78%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 17%, var(--surface));
  outline: none;
}
.story-state:empty { display: none; }
.story-return-recap {
  margin: 0 0 18px;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 42%, var(--border));
  border-radius: 16px;
  display: grid;
  gap: 7px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent, #b89a72) 12%, var(--surface)), var(--surface));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .08);
}
.story-return-recap.hidden { display: none !important; }
.story-return-kicker {
  color: color-mix(in srgb, var(--accent, #b89a72) 80%, var(--text));
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.story-return-recap > strong { font-size: 15px; line-height: 1.55; }
.story-return-recap > small,
.story-return-recap > p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.story-return-recap > div { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 7px; }
.story-return-recap button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.story-return-recap button:first-child {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 54%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 18%, var(--surface));
}
.story-scene-transition {
  margin: 0 0 16px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 34%, var(--border));
  border-radius: 14px;
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  background: color-mix(in srgb, var(--bg, #090a0b) 90%, var(--surface));
  transition: opacity .3s ease, transform .42s cubic-bezier(.22, .75, .24, 1);
  pointer-events: none;
}
.story-scene-transition.hidden { display: none !important; }
.story-scene-transition.show { opacity: 1; transform: translateY(0); }
.story-scene-transition span { color: var(--accent, #b89a72); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.story-scene-transition strong { font-size: 15px; }
.story-scene-transition small { color: var(--text-soft); font-size: 11px; }
.story-help-guide { width: min(820px, 100%); }
.story-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.story-help-grid article {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.story-help-grid article > span {
  display: block;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--accent, #b89a72) 76%, var(--text-soft));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.story-help-grid h3 { margin: 0 0 7px; font-size: 15px; }
.story-help-grid p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.story-help-grid .story-help-mode-guide { grid-column: 1 / -1; }
.story-help-grid .story-help-mode-guide p + p { margin-top: 9px; }
.story-panel-summary-card > p { margin: 8px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }

@media screen and (max-width: 620px) {
  .story-help-trigger,
  .story-close { width: 40px; height: 40px; flex-basis: 40px; }
  .story-topbar-actions { gap: 7px; }
  .story-help-grid { grid-template-columns: minmax(0, 1fr); }
  .story-help-grid article { padding: 14px; }
  .story-help-grid p { font-size: 14px; }
  .story-return-recap { padding: 15px; }
  .story-return-recap > strong { font-size: 14px; }
  .story-return-recap > small,
  .story-return-recap > p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-scene-transition { transition: none; transform: none; }
}

/* Story Quick Start library RC9.1.19 — eight genres, five complete Stories each. */
.story-quick-start {
  margin: -4px 0 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 28%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent, #b89a72) 7%, var(--surface));
}
.story-quick-start-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.story-quick-start-head > div { min-width: 0; }
.story-quick-start-head span { display: block; margin-bottom: 3px; color: var(--accent, #b89a72); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.story-quick-start-head h3 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.35; }
.story-quick-start-head > small { max-width: 310px; color: var(--text-faint); font-size: 11px; line-height: 1.55; text-align: right; }
.story-quick-genre-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.story-quick-genre {
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.story-quick-genre:hover,
.story-quick-genre.active {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 65%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 15%, var(--surface));
}
.story-quick-genre:focus-visible,
.story-quick-story-card > button:focus-visible,
.story-quick-catalog-status button:focus-visible { outline: 2px solid var(--accent, #b89a72); outline-offset: 2px; }
.story-quick-genre:disabled,
.story-quick-story-card > button:disabled { cursor: wait; opacity: .62; }
.story-quick-genre-icon { flex: 0 0 auto; font-size: 17px; }
.story-quick-genre > span:last-child { min-width: 0; display: grid; gap: 2px; }
.story-quick-genre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.story-quick-genre small { overflow: hidden; color: var(--text-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.story-quick-library { margin-top: 15px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, var(--accent, #b89a72) 22%, var(--border)); }
.story-quick-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.story-quick-library-head span { color: color-mix(in srgb, var(--accent, #b89a72) 78%, var(--text)); font-size: 10px; font-weight: 850; }
.story-quick-library-head h4 { margin: 3px 0 0; color: var(--text); font-size: 15px; }
.story-quick-library-head > small { color: var(--text-faint); font-size: 10px; text-align: right; }
.story-quick-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.story-quick-story-card { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--surface) 94%, var(--accent, #b89a72)); }
.story-quick-story-card.starting { border-color: color-mix(in srgb, var(--accent, #b89a72) 76%, var(--border)); }
.story-quick-story-card header { display: flex; align-items: flex-start; gap: 9px; }
.story-quick-story-card header > span { flex: 0 0 auto; color: var(--accent, #b89a72); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.story-quick-story-card header > div { min-width: 0; display: grid; gap: 3px; }
.story-quick-story-card header strong { color: var(--text); font-size: 13px; line-height: 1.4; }
.story-quick-story-card header small { color: var(--text-faint); font-size: 9px; line-height: 1.45; }
.story-quick-story-card > p { flex: 1 1 auto; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.62; }
.story-quick-story-card > .story-quick-story-cast { flex: 0 0 auto; color: var(--text-faint); font-size: 9px; line-height: 1.45; }
.story-quick-story-cast span { margin-right: 6px; color: color-mix(in srgb, var(--accent, #b89a72) 76%, var(--text-soft)); font-weight: 850; }
.story-quick-story-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.story-quick-story-meta span { padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 20%, var(--border)); border-radius: 999px; color: var(--text-faint); font-size: 9px; }
.story-quick-story-card > button { min-height: 42px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 65%, var(--border)); border-radius: 11px; display: flex; align-items: center; justify-content: space-between; color: color-mix(in srgb, var(--text) 90%, #000); background: var(--accent, #b89a72); cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }
.story-quick-story-card > button span { font-size: 15px; }
.story-quick-library-close { min-height: 38px; margin: 11px auto 0; padding: 0 13px; border: 0; display: block; color: var(--text-faint); background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.story-quick-library-close:focus-visible { outline: 2px solid var(--accent, #b89a72); outline-offset: 2px; border-radius: 8px; }
.story-quick-start-note { margin: 11px 1px 0; color: var(--text-faint); font-size: 9px; line-height: 1.5; }
.story-quick-catalog-status { grid-column: 1 / -1; min-height: 72px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--accent, #b89a72) 35%, var(--border)); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-soft); background: var(--surface); font-size: 11px; text-align: center; }
.story-quick-catalog-status.error { flex-direction: column; }
.story-quick-catalog-status.error small { color: var(--text-faint); }
.story-quick-catalog-status button { min-height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-elevated, var(--surface)); cursor: pointer; font: inherit; font-weight: 800; }
.story-quick-catalog-loader { width: 15px; height: 15px; border: 2px solid color-mix(in srgb, var(--accent, #b89a72) 24%, transparent); border-top-color: var(--accent, #b89a72); border-radius: 50%; animation: story-quick-spin .75s linear infinite; }
.story-manual-create-heading { margin: 0 0 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.story-manual-create-heading span { color: var(--text); font-size: 13px; font-weight: 850; }
.story-manual-create-heading small { color: var(--text-faint); font-size: 10px; }
@keyframes story-quick-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .story-quick-catalog-loader { animation: none; }
}
.story-first-scene { display: grid; justify-items: center; gap: 7px; }
.story-first-scene > span { color: var(--accent, #b89a72); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.story-first-scene > strong { color: var(--text); font-size: 18px; }
.story-first-scene > p { max-width: 470px; margin: 0 0 7px; }
.story-first-scene > button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 62%, var(--border));
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #b89a72) 18%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}
.story-suggestion.move {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 58%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 12%, var(--surface));
}
.story-suggestion-kind {
  margin-right: 6px;
  color: var(--accent, #b89a72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}
.story-return-recap > .story-return-next {
  color: color-mix(in srgb, var(--accent, #b89a72) 72%, var(--text));
  font-weight: 750;
}

@media screen and (max-width: 720px) {
  .story-quick-start { padding: 13px; }
  .story-quick-start-head,
  .story-quick-library-head,
  .story-manual-create-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .story-quick-start-head > small,
  .story-quick-library-head > small { max-width: none; text-align: left; }
  .story-quick-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-quick-story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-quick-genre { min-height: 60px; }
  .story-quick-story-card > p { font-size: 12px; }
  .story-quick-story-card > button { min-height: 44px; font-size: 12px; }
}

/* Story Platform Modes RC9.2.0
 * These selectors are intentionally appended after every legacy/mobile patch.
 * Classic keeps the existing form and room layout; Creator and Rules opt into
 * the extra surfaces only when story.js removes their `hidden` state.
 */
.story-experience-picker {
  margin: -4px 0 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 31%, var(--border));
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent, #b89a72) 11%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface) 96%, var(--accent, #b89a72));
}
.story-experience-picker-head,
.story-experience-head {
  margin: 0 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.story-experience-picker-head > div,
.story-experience-head > div { min-width: 0; }
.story-experience-picker-head > span,
.story-experience-head > span,
.story-mode-extra-head > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--accent, #b89a72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.story-experience-picker-head h3,
.story-experience-head h3,
.story-mode-extra-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}
.story-experience-picker-head > small,
.story-experience-head > p {
  max-width: 350px;
  margin: 0;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.55;
  text-align: right;
}
.story-experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
[data-story-experience] {
  min-width: 0;
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 10px;
  row-gap: 3px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
[data-story-experience]:hover {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 58%, var(--border));
  transform: translateY(-1px);
}
[data-story-experience].active,
[data-story-experience][aria-checked="true"],
[data-story-experience][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 76%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 15%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #b89a72) 16%, transparent);
}
[data-story-experience]:focus-visible,
.story-template-actions button:focus-visible,
.story-turn-advanced-actions button:focus-visible,
.story-rule-panel button:focus-visible {
  outline: 2px solid var(--accent, #b89a72);
  outline-offset: 2px;
}
[data-story-experience] .story-experience-icon,
[data-story-experience] > span:first-child {
  grid-row: 1 / 4;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 25%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent, #b89a72) 8%, var(--bg));
  font-size: 17px;
}
[data-story-experience] strong { min-width: 0; font-size: 13px; line-height: 1.35; }
[data-story-experience] small {
  min-width: 0;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.45;
}
[data-story-experience] em {
  width: max-content;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 25%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent, #b89a72) 78%, var(--text-soft));
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .04em;
}

.story-mode-extra {
  margin: 0 0 18px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 27%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent, #b89a72) 6%, var(--surface));
}
#story-setup-form > .story-mode-extra { margin-top: 18px; }
.story-mode-extra.hidden,
#story-classic-setup.hidden,
#story-creator-setup.hidden,
#story-rules-setup.hidden { display: none !important; }
.story-mode-extra-head {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 14px;
}
.story-mode-extra-head > div { min-width: 0; }
.story-mode-extra-head > span {
  grid-column: 1;
  color: var(--accent, #b89a72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.story-mode-extra-head > h3 { grid-column: 1; }
.story-mode-extra-head p {
  grid-column: 1;
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
}
.story-mode-help-trigger {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  width: auto;
  height: 38px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 48%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent, #b89a72) 85%, var(--text));
  background: color-mix(in srgb, var(--accent, #b89a72) 10%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  line-height: 1;
}
.story-mode-help-trigger > span { font-size: 18px; }
.story-mode-help-trigger > strong { font-size: 11px; white-space: nowrap; }
.story-mode-help-trigger:hover,
.story-mode-help-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 82%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 18%, var(--surface));
  outline: none;
}
.story-mode-help-guide { width: min(920px, 100%); }
.story-mode-help-content.hidden { display: none !important; }
.story-mode-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.story-mode-help-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.story-mode-help-card.wide { grid-column: 1 / -1; }
.story-mode-help-card > span {
  display: block;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--accent, #b89a72) 80%, var(--text-soft));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.story-mode-help-card h3 { margin: 0 0 8px; color: var(--text); font-size: 15px; line-height: 1.45; }
.story-mode-help-card p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.68; }
.story-mode-help-card p + p { margin-top: 9px; }
.story-mode-help-card code {
  padding: .08em .28em;
  border-radius: 5px;
  color: color-mix(in srgb, var(--accent, #b89a72) 82%, var(--text));
  background: color-mix(in srgb, var(--accent, #b89a72) 10%, var(--bg));
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
  overflow-wrap: anywhere;
}
.story-mode-help-example {
  margin: 10px 0;
  padding: 10px 11px;
  border-left: 3px solid color-mix(in srgb, var(--accent, #b89a72) 62%, var(--border));
  border-radius: 0 10px 10px 0;
  display: grid;
  gap: 6px;
  background: color-mix(in srgb, var(--accent, #b89a72) 7%, var(--bg));
}
.story-mode-help-example code { padding: 0; background: transparent; line-height: 1.6; }
.story-mode-badge {
  grid-column: 2;
  grid-row: 1 / 4;
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 36%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent, #b89a72) 82%, var(--text));
  background: color-mix(in srgb, var(--accent, #b89a72) 10%, var(--surface));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  white-space: nowrap;
}
.story-mode-control-grid,
.story-creator-form-grid,
.story-rules-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.story-mode-control-grid > .full,
.story-creator-form-grid > .full,
.story-rules-form-grid > .full { grid-column: 1 / -1; }
.story-mode-extra .story-field { min-width: 0; }
.story-mode-extra .story-field textarea { min-height: 118px; }
#story-creator-author-note { min-height: 112px; }
#story-creator-lorebook { min-height: 190px; }
#story-creator-npc-examples { min-height: 150px; }
#story-rules-skills,
#story-rules-actors,
#story-rules-equipment,
#story-rules-quest { min-height: 130px; }
.story-field-hint,
.story-mode-note {
  margin: 0;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.6;
}
.story-mode-note {
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent, #b89a72) 28%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.story-mode-note strong { color: var(--text-soft); }
.story-template-actions {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
}
.story-template-actions > div:first-child { min-width: 0; }
.story-template-actions strong { display: block; color: var(--text); font-size: 12px; }
.story-template-actions small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 10px; line-height: 1.45; }
.story-template-action-buttons { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.story-template-actions button,
.story-mode-secondary-action {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.story-template-actions button:hover,
.story-mode-secondary-action:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #b89a72) 48%, var(--border));
}
#story-template-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.story-rules-sheet-grid {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}

.story-rules-sheet {
  grid-column: 1 / -1;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.story-rules-sheet > header {
  margin-bottom: 11px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.story-rules-sheet > header strong { color: var(--text); font-size: 13px; }
.story-rules-sheet > header small { color: var(--text-faint); font-size: 10px; }
.story-rules-attribute-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.story-rules-attribute-grid .story-field label { font-size: 11px; }
.story-rules-attribute-grid input { text-align: center; font-variant-numeric: tabular-nums; }

.story-room-mode-tools {
  display: flex;
  align-items: center;
  gap: 7px;
}
.story-room-mode-tools.hidden { display: none !important; }
.story-room-mode-tools button,
.story-panel-mode-tab {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 30%, var(--border));
  border-radius: 10px;
  color: color-mix(in srgb, var(--accent, #b89a72) 76%, var(--text-soft));
  background: color-mix(in srgb, var(--accent, #b89a72) 8%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.story-panel-tabs.has-mode-tab { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.story-turn-advanced-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.story-turn-advanced-actions.hidden { display: none !important; }
.story-turn-advanced-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent, #b89a72));
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.story-turn-advanced-actions button:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #b89a72) 48%, var(--border));
}
.story-turn-advanced-actions button:disabled,
.story-template-actions button:disabled { opacity: .46; cursor: not-allowed; }
.story-turn-advanced-actions .story-action-cost {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 650;
}
.story-variant-nav {
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 26%, var(--border));
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: color-mix(in srgb, var(--accent, #b89a72) 7%, var(--surface));
}
.story-variant-nav span { color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.story-variant-nav button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
}

.story-rule-panel,
.story-creator-panel,
.story-rules-controls {
  display: grid;
  gap: 10px;
}
.story-rule-panel.hidden,
.story-creator-panel.hidden,
.story-rules-controls.hidden { display: none !important; }
.story-rules-controls {
  width: min(860px, calc(100% - 36px));
  margin: 0 auto 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 32%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent, #b89a72) 7%, var(--surface));
}
.story-rule-card,
.story-rule-result {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-soft);
  background: var(--surface);
}
.story-rule-result {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 36%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 8%, var(--surface));
}
.story-rule-result.success { border-color: color-mix(in srgb, #79b986 45%, var(--border)); }
.story-rule-result.failure { border-color: color-mix(in srgb, #d38484 44%, var(--border)); }
.story-rule-card h3,
.story-rule-result h3 { margin: 0 0 8px; color: var(--text); font-size: 14px; }
.story-rule-card p,
.story-rule-result p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.story-rule-result-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.story-rule-result-grid > div {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  background: var(--bg);
}
.story-rule-result-grid span { color: var(--text-faint); font-size: 9px; }
.story-rule-result-grid strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.story-rule-status-list,
.story-creator-lore-list { display: grid; gap: 7px; }
.story-rule-status-row,
.story-creator-lore-entry {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.story-rule-status-row strong,
.story-creator-lore-entry strong { color: var(--text); font-size: 12px; }
.story-rule-status-row small,
.story-creator-lore-entry small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 10px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  [data-story-experience] { transition: none; }
  [data-story-experience]:hover { transform: none; }
}

@media screen and (max-width: 720px) {
  .story-experience-picker,
  .story-mode-extra { padding: 13px; }
  .story-experience-picker-head,
  .story-experience-head,
  .story-mode-extra-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .story-mode-extra-head { grid-template-columns: minmax(0, 1fr); }
  .story-mode-extra-head .story-mode-badge { grid-column: 1; grid-row: auto; }
  #story-creator-setup .story-mode-extra-head,
  #story-rules-setup .story-mode-extra-head { grid-template-columns: minmax(0, 1fr) auto; }
  .story-mode-help-trigger { width: auto; min-width: 44px; height: 44px; grid-column: 2; grid-row: 1 / 4; }
  .story-mode-help-grid { grid-template-columns: minmax(0, 1fr); }
  .story-mode-help-card.wide { grid-column: auto; }
  .story-mode-help-card p { font-size: 14px; }
  .story-experience-picker-head > small,
  .story-experience-head > p { max-width: none; text-align: left; }
  .story-experience-grid { grid-template-columns: minmax(0, 1fr); }
  [data-story-experience] { min-height: 76px; padding: 12px; }
  [data-story-experience] strong { font-size: 15px; }
  [data-story-experience] small { font-size: 12px; }
  [data-story-experience] em { font-size: 9px; }
  .story-mode-control-grid,
  .story-creator-form-grid,
  .story-rules-form-grid { grid-template-columns: minmax(0, 1fr); }
  .story-mode-control-grid > .full,
  .story-creator-form-grid > .full,
  .story-rules-form-grid > .full { grid-column: auto; }
  .story-mode-extra-head p,
  .story-field-hint,
  .story-mode-note { font-size: 13px; }
  .story-template-actions { align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-template-actions > small { grid-column: 1 / -1; grid-row: 1; }
  .story-template-action-buttons { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-template-actions button { width: 100%; min-height: 44px; font-size: 13px; }
  .story-rules-attribute-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-rules-attribute-grid .story-field:first-child { grid-column: 1 / -1; }
  .story-turn-advanced-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-turn-advanced-actions button { width: 100%; min-height: 42px; font-size: 13px; }
  .story-turn-advanced-actions .story-action-cost { grid-column: 1 / -1; }
  .story-panel-tabs.has-mode-tab { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story-panel-tabs.has-mode-tab button { min-width: 0; padding: 0 3px; font-size: 13px; }
  /* R43: fit every Story mode's menu into one compact row, without clipping. */
  .story-room-actions,
  .story-room-actions.has-advanced,
  .story-room-actions:has(#story-open-advanced:not(.hidden)) {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
    gap: 3px;
    padding: 0 0 2px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .story-room-actions::-webkit-scrollbar,
  .story-room-actions.has-advanced::-webkit-scrollbar,
  .story-room-actions:has(#story-open-advanced:not(.hidden))::-webkit-scrollbar { display: none; }
  .story-room-actions button,
  .story-room-actions.has-advanced button,
  .story-room-actions:has(#story-open-advanced:not(.hidden)) button {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 32px;
    padding: 0 3px;
    font-size: clamp(10px, 2.75vw, 12px);
    border-radius: 8px;
    white-space: nowrap;
  }
  .story-rules-controls { width: calc(100% - 24px); margin-bottom: 10px; }
  .story-rule-result-grid { grid-template-columns: minmax(0, 1fr); }
  .story-rule-card p,
  .story-rule-result p { font-size: 15px; }
}

@media screen and (max-width: 430px) {
  .story-template-action-buttons,
  .story-turn-advanced-actions { grid-template-columns: minmax(0, 1fr); }
  .story-rules-attribute-grid { grid-template-columns: minmax(0, 1fr); }
  .story-rules-attribute-grid .story-field:first-child { grid-column: auto; }
  .story-panel-tabs.has-mode-tab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* RC9.2 runtime markup wiring. These rules intentionally live after the
   generic mode shell so the long-lived Classic layout is untouched. */
.story-generation-badge {
  display: inline-flex;
  margin: 0 8px 0 0;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 35%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent, #b89a72) 78%, var(--text));
  background: color-mix(in srgb, var(--accent, #b89a72) 9%, var(--surface));
  font-size: 9px;
  font-weight: 850;
  vertical-align: middle;
}
.story-turn-advanced-actions {
  padding-top: 7px;
  border-top: 1px solid var(--border);
}
.story-turn-advanced-actions button {
  height: auto;
  min-height: 38px;
  display: grid;
  gap: 2px;
  align-content: center;
  text-align: left;
}
.story-turn-advanced-actions button small { color: var(--text-faint); font-size: 9px; font-weight: 650; }

.story-rule-result {
  margin: 12px 0;
  display: grid;
  gap: 4px;
}
.story-rule-result > span { color: var(--accent, #b89a72); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.story-rule-result > strong { color: var(--text); font-size: 13px; line-height: 1.5; }
.story-rule-result > small { color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.story-rule-summary { min-width: 0; display: grid; gap: 3px; }
.story-rule-summary > span { color: var(--accent, #b89a72); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.story-rule-summary > strong { color: var(--text); font-size: 12px; }
.story-rule-summary > small { color: var(--text-faint); font-size: 10px; line-height: 1.45; }
.story-rule-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; }
.story-rule-actions label { min-width: 128px; display: grid; gap: 4px; color: var(--text-faint); font-size: 9px; }
.story-rule-actions select,
.story-rule-actions button {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--bg);
  font: inherit;
  font-size: 10px;
}
.story-rule-actions button { cursor: pointer; font-weight: 800; }
.story-rule-actions button:disabled { opacity: .45; cursor: not-allowed; }
.story-rule-actors,
.story-rule-quests,
.story-lore-list { display: grid; gap: 8px; }
/* R56: keep the read-only character cards and inventory control separated. */
.story-adventure-records > .story-rule-actors { gap: 12px; margin: 16px 0; }
.story-adventure-records > [data-story-inventory-open] { margin-top: 2px; }
.story-rule-actor,
.story-rule-quest,
.story-lore-list article {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  background: var(--bg);
}
.story-rule-actor header,
.story-rule-quest { align-items: center; }
.story-rule-actor header { display: flex; justify-content: space-between; gap: 10px; }
.story-rule-actor strong,
.story-rule-quest strong,
.story-lore-list strong { color: var(--text); font-size: 12px; }
.story-rule-actor p,
.story-rule-quest p,
.story-lore-list p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.6; }
.story-rule-actor small,
.story-lore-list small { color: var(--text-faint); font-size: 10px; line-height: 1.45; }
.story-rule-quest > span { color: var(--accent, #b89a72); font-size: 9px; font-weight: 850; }
.story-creator-config-summary { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.story-creator-config-summary > div { padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.story-creator-config-summary dt { color: var(--text-faint); font-size: 9px; }
.story-creator-config-summary dd { margin: 3px 0 0; color: var(--text); font-size: 11px; font-weight: 800; }
.story-variant-nav { display: grid; align-items: stretch; }
.story-variant-nav > button {
  width: 100%;
  height: auto;
  min-height: 50px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.story-variant-nav > button strong { min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-variant-nav > button:disabled { opacity: .62; cursor: default; }
.story-info-creator-editor { margin-top: 16px; }

@media screen and (max-width: 720px) {
  .story-rule-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-rule-actions label,
  .story-rule-actions button { width: 100%; min-width: 0; }
  .story-rule-actions select,
  .story-rule-actions button { min-height: 42px; font-size: 12px; }
  .story-creator-config-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-variant-nav > button { grid-template-columns: minmax(0, 1fr) auto; }
  .story-variant-nav > button > span { grid-column: 1 / -1; }
}

@media screen and (max-width: 430px) {
  .story-rule-actions,
  .story-creator-config-summary { grid-template-columns: minmax(0, 1fr); }
}

.story-rule-cost-note {
  margin: 0;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.55;
}
.story-rules-toolbox {
  min-width: 0;
  display: grid;
  gap: 9px;
}
.story-rules-toolbox > summary {
  width: max-content;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  color: var(--text-soft);
  background: var(--bg);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  list-style: none;
}
.story-rules-toolbox > summary::-webkit-details-marker { display: none; }
.story-rules-toolbox > summary::after { content: "＋"; margin-left: 8px; color: var(--accent, #b89a72); }
.story-rules-toolbox[open] > summary::after { content: "−"; }
.story-rules-summary-primary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.story-rules-summary-primary > strong { flex: 0 0 auto; color: var(--text); font-size: 12px; }
.story-rules-summary-primary > small {
  min-width: 0;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 10px;
}
.story-rules-summary-action { margin-left: auto; color: var(--text-soft); font-size: 10px; white-space: nowrap; }
.story-panel-section-head > div,
.story-rule-actor > div,
.story-rule-quest > div { display: flex; flex-wrap: wrap; gap: 6px; }
.story-panel-section-head > div > button,
.story-rule-actor button,
.story-rule-quest button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.story-panel-section-head > div > button:disabled,
.story-rule-actor button:disabled,
.story-rule-quest button:disabled { opacity: .45; cursor: not-allowed; }

@media screen and (max-width: 720px),
       screen and (max-height: 720px) and (hover: none) and (pointer: coarse) {
  .story-room.story-room-rules .story-rules-controls:not(.hidden) {
    width: calc(100% - 16px);
    margin-bottom: 6px;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 14px;
    min-height: 0;
    max-height: min(46vh, 520px);
    max-height: min(46dvh, 520px, max(120px, calc(100dvh - 360px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: transparent;
  }
  .story-room.story-room-rules .story-rules-toolbox {
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 32%, var(--border));
    border-radius: 13px;
    overflow: visible;
    background: color-mix(in srgb, var(--accent, #b89a72) 7%, var(--surface));
  }
  .story-room.story-room-rules .story-rules-toolbox > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    min-height: 50px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    justify-content: stretch;
    background: var(--surface);
  }
  .story-room.story-room-rules .story-rules-toolbox[open] > summary {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--border);
  }
  .story-room.story-room-rules .story-rules-toolbox[open] > .story-rule-summary {
    padding: 10px 12px 0;
  }
  .story-room.story-room-rules .story-rules-toolbox[open] > .story-rule-actions {
    padding: 10px 12px 0;
  }
  .story-room.story-room-rules .story-rules-toolbox[open] > .story-rule-cost-note {
    padding: 10px 12px 12px;
  }
}

@media screen and (max-width: 720px) {
  .story-rule-cost-note { font-size: 12px; }
  .story-rules-toolbox > summary { width: 100%; min-height: 42px; font-size: 12px; }
  .story-rules-summary-primary { flex: 1 1 auto; }
  .story-rules-summary-primary > small { max-width: min(38vw, 190px); font-size: 11px; }
  .story-rules-summary-action { font-size: 11px; }
  .story-panel-section-head > div { width: 100%; }
  .story-panel-section-head > div > button,
  .story-rule-actor button,
  .story-rule-quest button { flex: 1 1 130px; min-height: 42px; font-size: 12px; }
}

@media screen and (max-width: 360px) {
  .story-rules-summary-action { display: none; }
}

/* Story Backdrop Choice Library RC9.2.5
 * A selected image is a fixed room decoration, never a semantic scene cue.
 * Header, controls and composer keep their existing surfaces. Only generated
 * narration and its credit line opt into white reading text. */
.story-backdrop-picker {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a72) 31%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent, #b89a72));
}
.story-backdrop-picker-head {
  margin: 0 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.story-backdrop-picker-head > div { min-width: 0; }
.story-backdrop-picker-head span {
  display: block;
  margin-bottom: 3px;
  color: var(--accent, #b89a72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.story-backdrop-picker-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}
.story-backdrop-picker-head > small {
  max-width: 390px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.55;
  text-align: right;
}
.story-backdrop-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.story-backdrop-category {
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 8px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.story-backdrop-category > span {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 18px;
}
.story-backdrop-category strong { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; }
.story-backdrop-category small { color: var(--text-faint); font-size: 9px; }
.story-backdrop-category:hover,
.story-backdrop-category.active,
.story-backdrop-category[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 76%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 14%, var(--surface));
}
.story-backdrop-category:focus-visible,
.story-backdrop-asset:focus-visible {
  outline: 2px solid var(--accent, #b89a72);
  outline-offset: 2px;
}
.story-backdrop-category:disabled,
.story-backdrop-asset:disabled { opacity: .55; cursor: wait; }
.story-backdrop-variant-wrap { margin-top: 14px; }
.story-backdrop-variant-wrap.hidden { display: none !important; }
.story-backdrop-variant-head {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.story-backdrop-variant-head strong { color: var(--text); font-size: 12px; }
.story-backdrop-variant-head small { color: var(--text-faint); font-size: 10px; }
.story-backdrop-asset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.story-backdrop-asset {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #fff;
  background: #161719;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.story-backdrop-asset:hover,
.story-backdrop-asset.active,
.story-backdrop-asset[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 86%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #b89a72) 40%, transparent);
}
.story-backdrop-preview {
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  background: #202226;
}
.story-backdrop-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .2s ease;
}
.story-backdrop-asset:hover .story-backdrop-preview img { transform: scale(1.025); }
.story-backdrop-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 999px;
  display: grid;
  place-items: center;
  opacity: 0;
  color: #15130f;
  background: var(--accent, #d3b37d);
  box-shadow: 0 2px 8px rgba(0,0,0,.36);
  font-size: 13px;
  font-weight: 900;
}
.story-backdrop-asset.active .story-backdrop-check,
.story-backdrop-asset[aria-checked="true"] .story-backdrop-check { opacity: 1; }
.story-backdrop-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.45;
}
.story-backdrop-status.error { color: #a33a3a; font-weight: 800; }
html[data-theme="dark"] .story-backdrop-status.error { color: #ef9a9a; }

.story-backdrop-panel { display: grid; gap: 14px; }
.story-backdrop-panel-current,
.story-backdrop-panel-copy {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.story-backdrop-panel-current {
  border-color: color-mix(in srgb, var(--accent, #b89a72) 42%, var(--border));
  background: color-mix(in srgb, var(--accent, #b89a72) 9%, var(--surface));
}
.story-backdrop-panel-current > span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent, #b89a72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.story-backdrop-panel-current > strong,
.story-backdrop-panel-copy > strong { color: var(--text); font-size: 13px; line-height: 1.45; }
.story-backdrop-panel-current > p,
.story-backdrop-panel-copy > p { margin: 5px 0 0; color: var(--text-faint); font-size: 10px; line-height: 1.55; }
.story-backdrop-panel .story-backdrop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-backdrop-panel .story-backdrop-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-backdrop-panel-message {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 11px;
  line-height: 1.55;
}
.story-backdrop-panel-message.error { color: #d99; border-color: rgba(220,95,95,.32); background: rgba(120,20,20,.09); }
.story-backdrop-panel-message.success { color: var(--text-soft); border-color: color-mix(in srgb, var(--accent, #b89a72) 38%, var(--border)); background: color-mix(in srgb, var(--accent, #b89a72) 8%, var(--surface)); }
.story-backdrop-panel-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 9px; }
.story-backdrop-panel-actions button { width: 100%; min-height: 40px; }

.story-room.has-backdrop {
  background-color: var(--bg, #f1f3eb);
  background-image: var(--story-backdrop-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.story-room.has-backdrop > .story-room-head { background: var(--bg, #f1f3eb); }

/* R22: keep reading space open; the existing room actions are opt-in. */
.story-room > .story-room-head {
  min-height: 0;
  padding: 0 12px;
  flex-direction: column;
  align-items: stretch;
}
.story-room-head > .story-room-actions {
  align-self: flex-end;
  margin: 8px 0 2px;
}
.story-room-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  flex: 0 0 auto;
  width: 80px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--accent, #b49b79);
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.story-room-menu-toggle:hover { background: var(--surface-soft, rgba(255,255,255,.06)); }
.story-room-menu-toggle:focus-visible { outline: 2px solid var(--accent, #b49b79); outline-offset: -2px; }
.story-room.has-backdrop > #story-composer-wrap { background: transparent; }
.story-room.has-backdrop > .story-scroll { background: transparent; }
.story-room.has-backdrop > .story-scroll .story-narrative,
.story-room.has-backdrop > .story-scroll .story-turn-footer .story-turn-meta,
.story-room.has-backdrop > .story-scroll .story-thinking {
  color: #fff !important;
  /* R64: a faint same-position reinforcement; offset and 1.25px blur stay exact. */
  text-shadow: 0 1px 1.25px rgba(0,0,0,1), 0 1px 1.25px rgba(0,0,0,.12);
}
/* R89: sample 02, only the narration over a scene image.
 * Paint the fine outline behind the fill to preserve the existing white
 * letter strokes. Keep font metrics, room imagery and every control unchanged.
 * Browsers without text-stroke retain the existing shadow above. */
@supports (-webkit-text-stroke: .8px rgba(18,20,22,.95)) {
  .story-room.has-backdrop > .story-scroll .story-narrative {
    -webkit-text-stroke: .8px rgba(18,20,22,.95);
    paint-order: stroke fill;
    text-shadow: 0 1.2px 1.25px rgba(0,0,0,.97), 0 1.2px 1.25px rgba(0,0,0,.116);
  }
}
.story-room.has-backdrop > .story-scroll .story-first-scene > span,
.story-room.has-backdrop > .story-scroll .story-first-scene > strong,
.story-room.has-backdrop > .story-scroll .story-first-scene > p {
  text-shadow: 0 1px 1.25px rgba(0,0,0,1), 0 1px 1.25px rgba(0,0,0,.12);
}
.story-room.has-backdrop > .story-scroll .story-first-scene > span {
  color: #d9ebcb !important;
}
.story-room.has-backdrop > .story-scroll .story-first-scene > strong {
  color: #fff1d6 !important;
}
.story-room.has-backdrop > .story-scroll .story-first-scene > p {
  color: #e5eff7 !important;
}
.story-room.has-backdrop > #story-composer-wrap .story-error {
  color: #ffd2d2;
  text-shadow: 0 1px 3px rgba(0,0,0,1);
}

@media (prefers-reduced-motion: reduce) {
  .story-backdrop-preview img { transition: none; }
  .story-backdrop-asset:hover .story-backdrop-preview img { transform: none; }
}

@media screen and (max-width: 720px) {
  .story-backdrop-picker { padding: 13px; }
  .story-backdrop-picker-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .story-backdrop-picker-head > small { max-width: none; text-align: left; }
  .story-backdrop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-backdrop-category { min-height: 62px; }
  .story-backdrop-category strong { font-size: 14px; }
  .story-backdrop-category small { font-size: 11px; }
  .story-backdrop-variant-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .story-backdrop-asset-grid {
    margin: 0 -13px;
    padding: 2px 13px 8px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .story-backdrop-asset-grid::-webkit-scrollbar { display: none; }
  .story-backdrop-asset { flex: 0 0 min(70vw, 250px); scroll-snap-align: center; }
  .story-backdrop-status { font-size: 12px; }
}

/* Keep every button in normal flow, then reveal the row like the narrative tail. */
.story-suggestion-reveal-pending .story-suggestion,
.story-suggestion-revealing .story-suggestion {
  opacity: 0;
  transform: translateY(7px) scale(.985);
  -webkit-clip-path: inset(0 100% 0 0 round 999px);
  clip-path: inset(0 100% 0 0 round 999px);
  pointer-events: none;
  will-change: opacity, transform, clip-path;
}
.story-suggestion-revealing .story-suggestion {
  animation: story-suggestion-stream-in 300ms cubic-bezier(.2, .78, .24, 1) forwards;
}
.story-suggestion-revealing .story-suggestion:nth-child(2) { animation-delay: 95ms; }
.story-suggestion-revealing .story-suggestion:nth-child(3) { animation-delay: 190ms; }
.story-suggestion-revealing .story-suggestion:nth-child(4) { animation-delay: 285ms; }

@keyframes story-suggestion-stream-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    -webkit-clip-path: inset(0 0 0 0 round 999px);
    clip-path: inset(0 0 0 0 round 999px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-suggestion-reveal-pending .story-suggestion,
  .story-suggestion-revealing .story-suggestion {
    opacity: 1;
    transform: none;
    -webkit-clip-path: none;
    clip-path: none;
    animation: none !important;
    pointer-events: auto;
    will-change: auto;
  }
}

/* R32: small, read-only status drawer and server-result dice presentation. */
.story-room-quickbar { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; gap: 0 8px; min-width: 0; }
.story-room-quickbar > .story-room-menu-toggle { width: 56px; min-height: 44px; margin-left: auto; }
.story-status-toggle {
  min-width: 0; min-height: 44px; max-width: 100%; padding: 0 8px; justify-self: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-soft, #bbb);
  font: inherit; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; touch-action: manipulation;
}
.story-status-toggle::after { content: " ＋"; color: var(--accent, #b49b79); }
.story-status-toggle[aria-expanded="true"]::after { content: " −"; }
.story-status-toggle:hover { background: var(--surface-soft, rgba(255,255,255,.06)); }
.story-status-toggle:focus-visible,
.story-status-panel:focus-visible { outline: 2px solid var(--accent, #b49b79); outline-offset: -2px; }
.story-status-panel[hidden], .story-dice-notice[hidden] { display: none !important; }
.story-status-panel {
  min-width: 0; max-height: min(220px, 26dvh); overflow: auto; overscroll-behavior: contain;
  margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface, #161719); color: var(--text, #eee);
}
.story-status-character + .story-status-character { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.story-status-character h3 { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; font-size: 13px; overflow-wrap: anywhere; }
.story-status-character h3 > span { color: var(--accent, #b49b79); font-variant-numeric: tabular-nums; }
.story-status-items + .story-status-items { margin-top: 10px; }
.story-status-items h4 { margin: 0 0 6px; font-size: 12px; font-weight: 650; }
.story-status-items h4 small { color: var(--text-faint, #999); margin-left: 4px; }
.story-status-items ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.story-status-items li {
  max-width: 100%; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-soft, #bbb); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere;
}
.story-status-items p, .story-status-empty { margin: 0; color: var(--text-faint, #999); font-size: 12px; line-height: 1.6; }
.story-dice-heading, .story-dice-notice { display: flex; align-items: center; gap: 12px; min-width: 0; }
.story-dice-heading > div, .story-dice-notice > div { min-width: 0; display: grid; gap: 3px; }
.story-dice-heading strong, .story-dice-notice strong { font-size: 16px; color: var(--text, #eee); }
.story-dice-heading span:not(.story-dice-face), .story-dice-notice small { font-size: 11px; color: var(--text-soft, #bbb); }
.story-dice-notice {
  grid-column: 1 / -1;
  padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface, #161719); font-variant-numeric: tabular-nums;
}
.story-dice-result { overflow-wrap: anywhere; }
.story-rule-offer { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); overflow: hidden; }
.story-rule-offer > summary { position: relative; padding: 12px 36px 12px 16px; cursor: pointer; min-height: 48px; list-style: none; }
.story-rule-offer > summary::-webkit-details-marker { display: none; }
.story-rule-offer > summary::after { content: "＋"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--accent); }
.story-rule-offer[open] > summary::after { content: "−"; }
.story-rule-offer > summary span { display: block; color: var(--accent, #b49b79); font-size: 11px; margin-bottom: 5px; }
.story-rule-offer > summary strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.story-rule-offer-body { padding: 0 16px 16px; display: grid; gap: 12px; font-size: 13px; line-height: 1.7; }
.story-rule-offer-body p { margin: 0; }
.story-rule-offer-body > small { color: var(--text-soft); }
.story-rule-offer-body dl { margin: 0; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; }
.story-rule-offer-body dt { color: var(--accent, #b49b79); font-weight: 700; }
.story-rule-offer-body dd { margin: 0; overflow-wrap: anywhere; }
.story-rule-offer-body button { min-height: 48px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--accent, #b49b79); color: var(--bg, #111); font: inherit; font-weight: 700; cursor: pointer; }
.story-rule-offer summary:focus-visible, .story-rule-offer button:focus-visible, .story-rule-advanced summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.story-rule-odds { width: fit-content; border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; color: var(--text-soft); font-size: 12px; }
.story-rule-guide { grid-column: 1 / -1; flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.7; color: var(--text-soft); }
.story-rule-advanced { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--border); min-width: 0; }
.story-rule-advanced > summary { padding: 14px 0; cursor: pointer; font-size: 12px; color: var(--text-soft); }
.story-rule-participant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 45%); align-items: center; gap: 8px; grid-column: 1 / -1; }
.story-rule-participant span { overflow-wrap: anywhere; }
.story-rule-initiative { display: flex; gap: 6px; overflow-x: auto; grid-column: 1 / -1; padding: 2px 0 8px; }
.story-rule-initiative span { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 16px; padding: 5px 9px; font-size: 11px; }
.story-rule-initiative .current { border-color: var(--accent); color: var(--accent); }
.story-rule-initiative .downed { opacity: .5; text-decoration: line-through; }
.story-dice-face { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; color: var(--accent, #b49b79); }
.story-dice-face svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in srgb, currentColor 10%, transparent); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.story-dice-face b { position: relative; padding-top: 2px; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text, #eee); }
.story-dice-notice[data-outcome="critical"], .story-dice-result[data-outcome="critical"] { border-color: var(--accent, #b49b79); }
.story-dice-notice[data-outcome="success"], .story-dice-result[data-outcome="success"] { border-color: color-mix(in srgb, #79b986 60%, var(--border)); }
.story-dice-notice[data-outcome="failure"], .story-dice-result[data-outcome="failure"] { border-color: color-mix(in srgb, #d38484 60%, var(--border)); }
.story-dice-rolling .story-dice-face { animation: story-dice-tumble 650ms cubic-bezier(.18,.72,.25,1) both; }
.story-dice-rolling .story-dice-face b, .story-dice-rolling > div { animation: story-dice-reveal 650ms ease-out both; }
@keyframes story-dice-tumble {
  0% { transform: rotate(-160deg) scale(.72); }
  55% { transform: rotate(12deg) scale(1.06); }
  80% { transform: rotate(-5deg) scale(.98); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes story-dice-reveal { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
/* In short landscape windows, keep the reader visible with a single scrolling status row. */
@media (max-height: 500px) and (min-width: 620px) {
  .story-status-panel { max-height: 40px; padding: 4px 8px; white-space: nowrap; }
  .story-status-panel, .story-status-character, .story-status-items { display: flex; align-items: center; gap: 12px; }
  .story-status-character, .story-status-items { flex: 0 0 auto; }
  .story-status-character + .story-status-character { margin: 0; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--border); }
  .story-status-character h3, .story-status-items h4 { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
  .story-status-items + .story-status-items { margin-top: 0; }
  .story-status-items ul { flex-wrap: nowrap; }
  .story-status-items li { padding: 2px 7px; }
  .story-room-quickbar:has(.story-dice-notice:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 190px) auto 56px; }
  .story-room-quickbar:has(.story-dice-notice:not([hidden])) > .story-room-menu-toggle { grid-column: 4; grid-row: 1; }
  .story-room-quickbar:has(.story-dice-notice:not([hidden])) > #story-credit-peek { grid-column: 3; grid-row: 1; }
  .story-dice-notice { grid-column: 2; grid-row: 1; padding: 2px 6px; margin: 0; gap: 6px; }
  .story-dice-notice .story-dice-face { width: 30px; height: 30px; flex-basis: 30px; }
  .story-dice-notice .story-dice-face b { font-size: 12px; }
  .story-dice-notice strong { font-size: 12px; }
  .story-dice-notice small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-dice-rolling .story-dice-face,
  .story-dice-rolling .story-dice-face b,
  .story-dice-rolling > div { animation: none !important; transform: none; opacity: 1; }
}

/* R40: tap-to-run controls and structured setup fields, Story-only. */
.story-play-inline-select { display:flex; flex:0 1 auto; min-width:0; max-width:100%; align-items:center; gap:3px; color:var(--text); font-size:11px; }
.story-play-inline-select select { min-width:0; max-width:min(120px,100%); min-height:28px; border:1px solid var(--border); border-radius:8px; padding:2px 4px; font:inherit; font-size:16px; color:var(--text); background:var(--surface-solid,var(--bg)); }
.story-rule-editor { margin-top:12px; }
/* R57: Creator setup/edit share local, progressively disclosed card editors. */
/* R59: NPC cards are separate from lore, character sheets and chat layout. */
.story-npc-builder { min-width:0; }
.story-npc-builder [hidden] { display:none !important; }
.story-npc-group, .story-npc-card { min-width:0; border:1px solid var(--border); border-radius:16px; background:var(--surface,var(--bg)); }
.story-npc-builder summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:14px; cursor:pointer; list-style:none; }
.story-npc-builder summary::-webkit-details-marker { display:none; }
.story-npc-builder summary::before { content:"▸"; color:var(--accent); flex:none; }
.story-npc-builder details[open] > summary::before { content:"▾"; }
.story-npc-builder summary strong { flex:1; min-width:0; font-size:15px; overflow-wrap:anywhere; }
.story-npc-builder summary > span { flex:none; font-size:12px; color:var(--muted); }
.story-npc-body { display:grid; min-width:0; gap:10px; padding:0 14px 16px; }
.story-npc-list { display:grid; min-width:0; gap:12px; }
.story-npc-builder p { margin:0; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.story-npc-builder small { font-size:12px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.story-npc-body > label { margin:6px 0 0; font-size:14px; }
.story-npc-builder input, .story-npc-builder textarea { width:100%; min-width:0; box-sizing:border-box; margin:0; font-size:16px; }
.story-npc-builder input { min-height:44px; }
.story-npc-builder textarea { min-height:128px; resize:vertical; }
.story-npc-budget { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.story-npc-budget strong { flex:1 1 150px; font-size:14px; }
.story-npc-builder .is-over { color:var(--danger,#b33b3b); }
.story-npc-builder [data-story-npc-name-count], .story-npc-builder [data-story-npc-profile-count] { text-align:right; }
.story-npc-builder button { min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface,var(--bg)); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.story-npc-builder button:disabled { opacity:.45; cursor:default; }
.story-npc-builder :is(button,input,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.story-npc-remove, .story-npc-remove [data-story-npc-confirm] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; font-size:13px; }
.story-npc-remove { margin-top:4px; padding-top:10px; border-top:1px solid var(--border); }
.story-npc-error { color:var(--danger,#b33b3b); padding:10px; border:1px solid currentColor; border-radius:10px; }
.story-creator-builder { min-width:0; }
.story-creator-builder [hidden] { display:none !important; }
.story-creator-group, .story-creator-card { min-width:0; border:1px solid var(--border); border-radius:16px; background:var(--surface,var(--bg)); }
.story-creator-builder summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:14px; cursor:pointer; list-style:none; }
.story-creator-builder summary::-webkit-details-marker { display:none; }
.story-creator-builder summary::before { content:"▸"; color:var(--accent); flex:none; }
.story-creator-builder details[open] > summary::before { content:"▾"; }
.story-creator-builder summary strong { flex:1; min-width:0; font-size:15px; overflow-wrap:anywhere; }
.story-creator-builder summary > span { flex:none; color:var(--muted); font-size:12px; }
.story-creator-group-body, .story-creator-card-body { display:grid; min-width:0; gap:10px; padding:0 14px 16px; }
.story-creator-list { display:grid; gap:12px; min-width:0; }
.story-creator-builder p { margin:0; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.story-creator-builder small { color:var(--muted); font-size:12px; line-height:1.6; }
.story-creator-card-body > label { margin:6px 0 0; font-size:14px; }
.story-creator-builder input, .story-creator-builder select, .story-creator-builder textarea { width:100%; min-width:0; box-sizing:border-box; margin:0; font-size:16px; }
.story-creator-builder input, .story-creator-builder select { min-height:44px; }
.story-creator-builder textarea { min-height:120px; resize:vertical; }
.story-creator-builder [data-creator-length] { text-align:right; }
.story-creator-builder [data-creator-keywords] { display:grid; gap:8px; min-width:0; }
.story-creator-keyword-label { font-size:14px; }
.story-creator-keyword-input { display:flex; gap:8px; min-width:0; }
.story-creator-keyword-input input { flex:1; width:0; }
.story-creator-keyword-input button { flex:none; }
.story-creator-tools, .story-creator-tags, .story-creator-remove, .story-creator-keyword-help { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.story-creator-keyword-help small { flex:1 1 160px; }
.story-creator-builder button { min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface,var(--bg)); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.story-creator-builder button:disabled { opacity:.45; cursor:default; }
.story-creator-builder :is(button,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.story-creator-tag { display:inline-flex; align-items:center; gap:2px; max-width:100%; padding-left:10px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.story-creator-tag > span { overflow-wrap:anywhere; min-width:0; font-size:13px; }
.story-creator-tag button { flex:none; min-width:40px; min-height:40px; border:0; padding:4px 8px; background:transparent; font-size:18px; }
.story-creator-options { border-top:1px solid var(--border); margin-top:6px; }
.story-creator-options > summary { padding:12px 0; font-size:13px; }
.story-creator-options > .story-creator-card-body { padding:0 0 8px; }
.story-creator-error { color:var(--danger,#b33b3b); padding:10px; border:1px solid currentColor; border-radius:10px; }
.story-creator-remove { border-top:1px solid var(--border); padding-top:10px; margin-top:4px; }
.story-creator-remove [data-creator-confirm] { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; }
.story-rule-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.story-rule-editor-heading h3 { margin:0; font-size:16px; }
.story-rule-editor-list { display:grid; gap:12px; }
.story-rule-editor-card { min-width:0; border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--surface,var(--bg)); }
.story-rule-editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.story-rule-editor-fields label { display:grid; min-width:0; gap:6px; font-size:13px; }
.story-rule-editor-fields input,.story-rule-editor-fields select { width:100%; min-width:0; min-height:44px; margin:0; font-size:16px; }
.story-rule-editor-card details { margin-top:12px; }
.story-rule-editor-card summary { padding:8px 0; cursor:pointer; font-size:13px; }
.story-rule-editor-card [data-rule-remove] { min-height:44px; margin-top:8px; padding:6px 12px; }
.story-rule-editor-add { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.story-rule-editor-add button { min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface,var(--bg)); color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
.story-rule-editor-add button:disabled { opacity:.45; cursor:default; }
.story-rule-editor button:focus-visible,.story-rule-editor select:focus-visible,.story-play-inline-select select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* R44: scoped inventory reading, no viewport/keyboard overrides. */
.story-inventory-dialog { max-height: 85dvh; overflow-y: auto; }
.story-inventory-item { border: 1px solid var(--border-color, #8885); border-radius: 12px; padding: 12px; margin: 10px 0; overflow-wrap: anywhere; }
.story-inventory-item > summary { cursor: pointer; min-height: 36px; }
.story-inventory-item small { opacity: .75; font-size: .8em; }
.story-inventory-item p, .story-inventory-item li { line-height: 1.65; }
.story-item-content { white-space: pre-wrap; }
/* R46: a single upper status hub. No composer/viewport/stream overrides. */
.story-status-panel:has(.story-status-hub) {
  display: block; max-height: min(350px, 40dvh); white-space: normal;
  padding: 10px 12px; overflow-x: hidden; overflow-y: auto;
}
/* R54: all modes use an inset reader above the composer, without resizing it. */
.story-status-dialog {
  position: fixed; inset: auto; box-sizing: border-box;
  width: calc(100% - 16px); height: 70dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  background: var(--bg, #f1f3eb); color: var(--text, #242820);
  box-shadow: 0 16px 48px #0004;
}
.story-status-dialog::backdrop { background: #0005; }
.story-status-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.story-status-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--border); background: var(--bg, #f1f3eb);
}
.story-status-dialog-head h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.story-status-dialog-head > button {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; font-size: 24px; line-height: 1;
  cursor: pointer; touch-action: manipulation;
}
.story-status-dialog-head > button:hover { background: var(--surface-soft, #8881); }
.story-status-dialog-head > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#story-status-dialog > .story-status-panel {
  display: block; white-space: normal; overflow-x: hidden; overflow-y: auto;
  min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0;
  padding: 16px;
  overscroll-behavior: contain;
}
.story-status-dialog .story-status-hub { max-width: 960px; margin-inline: auto; }
.story-status-scene { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.story-status-scene h3 { margin: 0 0 10px; font-size: 14px; }
.story-status-scene .story-state { margin: 0; white-space: normal; }
.story-status-scene .story-state-chip { font-size: 12px; overflow-wrap: anywhere; }
.story-status-hub { min-width: 0; font-size: 12px; line-height: 1.6; }
.story-status-hub .story-status-character { display: block; white-space: normal; }
.story-status-hub .story-status-character + .story-status-character {
  margin-top: 10px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--border);
}
.story-status-hub .story-status-character h3 { flex-wrap: wrap; margin: 0; }
.story-status-hub p { margin: 6px 0; overflow-wrap: anywhere; }
.story-status-hint, .story-status-resource { color: var(--text-soft, #aaa); }
.story-status-section { border-top: 1px solid var(--border); margin-top: 8px; }
.story-status-section > summary, .story-status-sheet > summary {
  min-height: 44px; padding: 10px 2px; cursor: pointer; font-weight: 650;
  overflow-wrap: anywhere; touch-action: manipulation;
}
.story-status-section > summary small { margin-left: 6px; color: var(--text-faint, #999); }
.story-status-section > div { padding-bottom: 8px; }
.story-status-hub .story-status-items { display: block; white-space: normal; margin: 6px 0; }
.story-status-hub .story-status-items ul { flex-wrap: wrap; }
.story-status-hub .story-inventory-item { padding: 8px 10px; margin: 8px 0; }
.story-status-hub .story-inventory-item > summary { min-height: 44px; padding: 8px 0; }
.story-status-hub button {
  min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-soft, var(--surface)); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; white-space: normal; overflow-wrap: anywhere;
  touch-action: manipulation;
}
.story-status-hub button:disabled { opacity: .45; cursor: default; }
.story-status-hub button:focus-visible, .story-status-hub summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.story-status-recovery { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.story-status-hub .story-play-library { display: grid; gap: 10px; }
.story-status-hub .story-play-library article { border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.story-status-hub .story-play-library h3 { margin: 0 0 4px; font-size: 13px; overflow-wrap: anywhere; }
.story-status-hub .story-play-unavailable { color: var(--text-soft); }
.story-quick-dice-dialog > header > button[data-story-quick-dice-close] {
  position: relative; display: grid; place-items: center; flex: 0 0 36px;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 8px; box-shadow: none; background: transparent;
  font-size: 20px; font-weight: 400; line-height: 1;
}
.story-quick-dice-dialog > header > button[data-story-quick-dice-close]::after {
  content: ""; position: absolute; inset: -4px;
}
.story-quick-dice-dialog > header > button[data-story-quick-dice-close]:hover { background: var(--surface-soft, #8881); }
.story-quick-dice-dialog > header > h2[tabindex="-1"]:focus { outline: none; }
/* R45: setup-only preset cards; no room, stream or keyboard changes. */
/* R51: classic/creator item menus only; Rules status styles are untouched. */
.story-status-panel:has(> .story-narrative-items) { display: block; max-height: min(55vh, 600px); white-space: normal; }
.story-narrative-items { color: var(--text); width: 100%; min-width: 0; }
.story-narrative-items h4 { margin: 0 0 8px; }
.story-narrative-items small { font-size: 12px; font-weight: 400; color: var(--text-soft); }
.story-narrative-items-hint { font-size: 12px; line-height: 1.6; color: var(--text-soft); margin: 6px 0 10px; }
.story-narrative-item { border: 1px solid var(--border); border-radius: 12px; margin-top: 8px; padding: 0 12px; overflow-wrap: anywhere; }
.story-narrative-item > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.story-narrative-item > p { font-size: 13px; line-height: 1.6; margin: 4px 0 10px; }
.story-narrative-item-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.story-narrative-item-actions button { width: 100%; min-height: 44px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.story-narrative-item-actions button:disabled { opacity: .5; cursor: default; }
.story-narrative-item-actions button:focus-visible, .story-narrative-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-narrative-item-reason { display: block; line-height: 1.5; margin-top: 4px; }
.story-narrative-item-record { margin: 8px 0; font-size: 13px; }
.story-narrative-item-record > summary { cursor: pointer; padding: 8px 0; }
.story-narrative-item-record > div { white-space: pre-wrap; line-height: 1.7; padding: 8px 0; }
.story-trpg-presets-note { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--text-soft); }
.story-trpg-presets .story-quick-story-card { min-width: 0; overflow-wrap: anywhere; }
.story-trpg-presets .story-quick-story-card header strong { display: block; font-size: 15px; }
.story-trpg-presets .story-quick-story-card header > span { font-size: 22px; }
.story-trpg-presets .story-quick-story-card header small { font-size: 12px; }
.story-trpg-presets .story-quick-story-card > p { font-size: 13px; }
.story-trpg-presets .story-quick-story-card > .story-quick-story-cast { font-size: 12px; }
.story-trpg-preset-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: auto; }
.story-trpg-preset-actions > button { min-width: 0; min-height: 44px; padding: 10px 8px; white-space: normal; font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--border); border-radius: 11px; background: var(--accent, #b89a72); color: var(--bg, #111); cursor: pointer; }
.story-trpg-preset-actions > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-trpg-preset-actions > .story-trpg-preview { background: var(--surface); color: var(--text); border-color: var(--border); }
.story-trpg-preset-actions > button:disabled { opacity: .55; cursor: default; }
.story-trpg-presets:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 620px) {
  .story-trpg-presets .story-quick-story-grid { grid-template-columns: minmax(0, 1fr); }
}