/* v1.10.7 — unified reading surface, reliable external-AI copy flow, targeted review fixes and contextual status chips */

/* ---------- Story reading hierarchy ---------- */
.game-page .reading-shell{
  box-sizing:border-box;
  padding-inline:max(18px,env(safe-area-inset-left),env(safe-area-inset-right))!important;
}
.game-page .story-stream{
  width:min(100%,720px);
  box-sizing:border-box;
  padding-inline:0!important;
}
.game-page .node,
.game-page .story,
.game-page .player-line,
.game-page .interaction-panel{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.game-page .node{padding-inline:0!important}
.game-page .story{
  padding-left:0!important;
  padding-right:0!important;
  margin-inline:0!important;
}
.game-page .story::before{display:none!important}
.game-page .story-paragraph{
  box-sizing:border-box;
  max-width:100%;
  margin-inline:0!important;
  padding-inline:2px!important;
  text-wrap:pretty;
}
.game-page .player-line{
  margin-inline:0!important;
  padding-inline:2px!important;
}
.game-page .npc-dialogue{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  align-items:start;
}
.game-page .npc-dialogue-copy{max-width:100%;min-width:0}
.game-page .npc-bubble{
  box-sizing:border-box!important;
  max-width:100%!important;
  margin-inline:0!important;
  padding-inline:16px!important;
}
.game-page .dialogue-narration{
  margin:8px 0 10px!important;
  padding:7px 12px!important;
  border-left:2px solid color-mix(in srgb,var(--story-accent,#9a7655) 42%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--story-page,#f8efe2) 78%,white),transparent 88%);
  color:color-mix(in srgb,var(--story-ink,#493d33) 86%,var(--story-muted,#887463));
  font-size:.93em;
  line-height:1.72;
}
.game-page .dialogue-continuation{margin-top:7px!important}

/* The status, next-step divider and options are one coherent interaction module. */
.game-page .interaction-panel{
  position:relative;
  z-index:6;
  margin:14px 0 2px;
  padding:10px 10px 8px;
  border:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 76%,transparent);
  border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--story-page,#fbf3e7) 88%,white),color-mix(in srgb,var(--story-page,#fbf3e7) 95%,transparent));
  box-shadow:0 10px 28px rgba(76,49,29,.055),inset 0 1px rgba(255,255,255,.58);
  overflow:hidden;
}
.game-page .interaction-panel::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 42%,transparent);
  border-radius:10px;
  pointer-events:none;
}
.game-page .interaction-panel>.state-ribbon,
.game-page .interaction-panel>.next-step,
.game-page .interaction-panel>.options-wrap{position:relative;z-index:1}
.game-page .interaction-panel .next-step{
  margin:7px 0 3px!important;
  padding-inline:4px;
}
.game-page .interaction-panel .options-wrap{
  box-sizing:border-box;
  margin:0!important;
  padding:0 5px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.game-page .interaction-panel .option{
  box-sizing:border-box;
  width:100%;
  padding-inline:4px!important;
}

/* ---------- Contextual status ribbon ---------- */
.game-page .state-ribbon{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:stretch!important;
  min-width:0;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 74%,transparent)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--story-page,#fbf3e7) 86%,white)!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px rgba(255,255,255,.62);
}
.state-ribbon-scroll{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.state-ribbon-scroll::-webkit-scrollbar{display:none}
.game-page .state-chip{
  appearance:none;
  display:inline-flex!important;
  flex:0 0 auto;
  align-items:center!important;
  justify-content:center;
  gap:6px!important;
  min-width:86px;
  max-width:132px;
  min-height:40px;
  padding:7px 10px!important;
  border:0!important;
  border-right:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 68%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit;
  box-shadow:none!important;
  white-space:nowrap;
  cursor:pointer;
}
.game-page .state-chip:active{background:color-mix(in srgb,var(--story-accent,#987052) 8%,transparent)!important}
.game-page .state-chip b{
  min-width:0;
  max-width:78px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px!important;
  line-height:1.15;
  font-weight:600!important;
  color:var(--story-muted,#75604d)!important;
}
.game-page .state-chip.is-long b{font-size:10px!important;max-width:72px}
.game-page .state-chip em{
  flex:0 0 auto;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:12px!important;
  font-style:normal;
  font-weight:650;
  color:var(--story-accent,#8f5649)!important;
}
.game-page .state-expand{
  flex:0 0 auto;
  align-self:stretch;
  min-width:54px;
  margin:0!important;
  padding:0 9px!important;
  border:0!important;
  border-left:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 78%,transparent)!important;
  border-radius:0!important;
  background:color-mix(in srgb,var(--story-page,#fbf3e7) 70%,white)!important;
  color:var(--story-accent,#8f755d)!important;
  font-size:10px!important;
  white-space:nowrap;
}
.state-empty-chip{display:flex;align-items:center;padding:0 12px;color:var(--story-muted,#75604d);font-size:11px}

/* State details show core label first and auxiliary meaning as a quiet second line. */
.state-detail-row[type="button"],button.state-detail-row{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(145,105,72,.08);
  border-radius:0;
  background:transparent;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.state-detail-row[type="button"]:last-child,button.state-detail-row:last-child{border-bottom:0}
.state-detail-main{display:grid;gap:3px;min-width:0}
.state-detail-main b{font-size:14px;font-weight:600;color:#67584c;overflow-wrap:anywhere}
.state-detail-main small{font-size:10.5px;line-height:1.35;color:#988575;overflow-wrap:anywhere}
.state-item-detail{display:grid;gap:10px}
.state-item-detail>div{padding:12px 13px;border:1px solid rgba(145,105,72,.14);border-radius:10px;background:rgba(255,250,241,.66)}
.state-item-detail small{display:block;margin-bottom:5px;color:#927a65;font-size:10px;letter-spacing:.08em}
.state-item-detail p{margin:0;line-height:1.65;color:#65574b}
.state-item-value{display:flex!important;align-items:center;justify-content:space-between;gap:14px}
.state-item-value small{margin:0!important}.state-item-value strong{font-size:22px;color:#925b4c}

/* ---------- External AI intake and mobile copy ---------- */
.external-copy-card,.external-source-card,.external-return-card,
.external-split-preview>article,.external-result-review{
  position:relative;
  min-width:0;
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(143,104,70,.18);
  border-radius:12px;
  background:rgba(255,252,246,.72);
  box-shadow:inset 3px 0 rgba(153,108,67,.10);
}
.external-copy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.external-copy-head>div{display:grid;gap:3px;min-width:0}
.external-copy-head strong{font-family:"Noto Serif SC","Songti SC",serif;color:#4f3d30;font-size:15px}
.external-copy-head small{color:#8a7867;font-size:10.5px;line-height:1.4}
.external-copy-head button{
  flex:0 0 auto;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(145,108,72,.22);
  border-radius:999px;
  background:#fff9ef;
  color:#684f3b;
}
.external-copy-card textarea,.external-source-card textarea,.external-return-card textarea{
  width:100%;
  box-sizing:border-box;
  min-height:180px;
  margin:0;
  padding:13px;
  border:1px solid rgba(143,104,70,.17);
  border-radius:9px;
  background:#fbf4e8;
  font-size:13px;
  line-height:1.65;
  resize:vertical;
}
.external-source-card textarea{min-height:150px}
.external-return-card textarea{min-height:190px}
.external-split-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.external-split-preview.is-hidden{display:none}
.external-split-preview>article{margin:0}
.external-split-preview pre,.external-result-review pre{
  max-height:360px;
  margin:0;
  padding:13px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border:1px solid rgba(143,104,70,.14);
  border-radius:9px;
  background:#f9f1e4;
  color:#54463a;
  font:12.5px/1.7 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  -webkit-user-select:text;
  user-select:text;
}
.copy-fallback-text{font-size:16px!important;line-height:1.55!important;min-height:48dvh!important;-webkit-user-select:text!important;user-select:text!important}

/* ---------- Import review navigation ---------- */
.import-review-page .review-tabs button span{display:none!important}
.import-review-page .review-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;box-sizing:border-box}
.import-review-page .review-tabs.tabs-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.import-review-page .review-tabs button{min-width:0!important;padding-inline:8px!important;white-space:normal;line-height:1.25}
.import-review-page .review-paper{
  padding-left:32px!important;
}
.import-review-page .review-paper::before{display:none!important}
.import-review-page .review-shell{counter-reset:none!important}
.import-review-page .character-number,
.import-review-page .group-index{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  font-size:9px!important;
  box-shadow:none!important;
  background:rgba(247,234,214,.75)!important;
}
.review-anchor{scroll-margin-top:132px}
.review-target-flash{animation:review-target-flash 1.4s ease}
@keyframes review-target-flash{
  0%,100%{box-shadow:0 16px 38px rgba(65,41,24,.09),inset 0 0 0 5px rgba(255,255,255,.23)}
  35%{box-shadow:0 0 0 4px rgba(166,112,65,.20),0 18px 44px rgba(65,41,24,.12),inset 0 0 0 5px rgba(255,255,255,.28)}
}
.risk-card>div{min-width:0;flex:1}
.risk-actions{flex-wrap:wrap}
.risk-actions .risk-jump{background:#8b6849!important;color:#fff!important;border-color:#8b6849!important}
.external-result-review pre{max-height:none;min-height:48dvh}

/* ---------- Dark mode ---------- */
body[data-resolved-theme="dark"] .interaction-panel,
body[data-resolved-theme="dark"] .external-copy-card,
body[data-resolved-theme="dark"] .external-source-card,
body[data-resolved-theme="dark"] .external-return-card,
body[data-resolved-theme="dark"] .external-split-preview>article,
body[data-resolved-theme="dark"] .external-result-review{
  background:rgba(54,47,40,.78);
  border-color:rgba(215,178,140,.14);
}
body[data-resolved-theme="dark"] .external-copy-card textarea,
body[data-resolved-theme="dark"] .external-source-card textarea,
body[data-resolved-theme="dark"] .external-return-card textarea,
body[data-resolved-theme="dark"] .external-split-preview pre,
body[data-resolved-theme="dark"] .external-result-review pre,
body[data-resolved-theme="dark"] .state-item-detail>div{
  background:rgba(45,39,33,.82);color:#e4d5c3;border-color:rgba(215,178,140,.12)
}
body[data-resolved-theme="dark"] .state-detail-main b{color:#e1d0bd}
body[data-resolved-theme="dark"] .state-detail-main small{color:#b9a791}

@media(max-width:430px){
  .game-page .reading-shell{
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  .game-page .story-stream{padding-inline:0!important}
  .game-page .story-paragraph{padding-inline:1px!important}
  .game-page .npc-dialogue{grid-template-columns:34px minmax(0,1fr)!important;gap:8px!important}
  .game-page .npc-bubble,
  body[data-dialogue-style="bubble"] .game-page .npc-bubble,
  body[data-dialogue-style="card"] .game-page .npc-bubble{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .game-page .dialogue-narration{padding:6px 10px!important;margin:7px 0 9px!important}
  .game-page .interaction-panel{
    margin:10px 0 0;
    padding:7px 6px 6px;
    border-radius:11px;
  }
  .game-page .interaction-panel::before{inset:4px;border-radius:8px}
  .game-page .state-ribbon{min-height:38px!important}
  .game-page .state-chip{min-width:78px;max-width:112px;min-height:38px;padding:6px 8px!important;gap:4px!important}
  .game-page .state-chip b{font-size:10px!important;max-width:64px}
  .game-page .state-chip.is-long b{font-size:9px!important;max-width:60px}
  .game-page .state-chip em{font-size:11px!important}
  .game-page .state-expand{min-width:49px;padding-inline:6px!important;font-size:9.5px!important}
  .game-page .interaction-panel .option{padding-left:2px!important;padding-right:2px!important}
  .state-detail-main b{font-size:13px}.state-detail-main small{font-size:10px}

  .external-copy-card,.external-source-card,.external-return-card,.external-split-preview>article{padding:11px;margin-top:10px}
  .external-copy-head{align-items:flex-start;gap:8px}
  .external-copy-head button{min-height:36px;padding:7px 10px;font-size:12px}
  .external-copy-card textarea{min-height:150px}
  .external-source-card textarea{min-height:130px}
  .external-return-card textarea{min-height:170px}
  .external-split-preview{grid-template-columns:1fr;gap:9px}
  .external-split-preview pre{max-height:280px}

  .import-review-page .review-tabs,
  .import-review-page .review-tabs.tabs-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:3px;
    padding:6px max(8px,env(safe-area-inset-left))!important;
  }
  .import-review-page .review-tabs button{min-height:38px!important;padding:7px 4px!important;font-size:11.5px!important}
  .import-review-page .review-shell{padding-top:11px!important}
  .import-review-page .review-paper{padding:15px 12px!important}
  .review-anchor{scroll-margin-top:151px}
  .risk-card{padding:12px 10px!important;gap:8px!important}
  .risk-card>span{flex-basis:21px!important;height:21px!important}
  .risk-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important}
  .risk-actions .risk-jump{grid-column:1/-1}
  .risk-actions button{min-width:0!important;white-space:normal}
}

@media(max-width:360px){
  .game-page .reading-shell{padding-inline:max(9px,env(safe-area-inset-left))!important}
  .game-page .interaction-panel{padding-inline:4px}
  .game-page .state-chip{min-width:72px;max-width:102px;padding-inline:6px!important}
  .game-page .state-expand{min-width:46px}
  .external-copy-head{display:grid;grid-template-columns:1fr}
  .external-copy-head button{justify-self:start}
}

/* The old 01/02 visual sequence is decorative rather than functional. Hide it by default so mobile edit cards keep their full width. */
.import-review-page .character-number,
.import-review-page .group-index{display:none!important}
.import-review-page .character-card-top{
  grid-template-columns:minmax(0,1fr)!important;
}
.import-review-page .character-card-top>div,
.import-review-page .character-card-actions{
  grid-column:1!important;
  width:100%;
  min-width:0;
}
.import-review-page .character-card-actions{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.import-review-page .mechanic-group-head>div{
  grid-template-columns:minmax(0,1fr)!important;
}
.import-review-page .mechanic-group-head .group-title-edit,
.import-review-page .mechanic-group-head>div>small{
  grid-column:1!important;
}