/* v1.10.8 — unified paper containers, iPhone-safe copy affordances, compact review controls and contextual state display */

/* --------------------------------------------------------------------------
   1 / 10 / 11. One coherent paper surface instead of stacked floating layers
   -------------------------------------------------------------------------- */
.game-page .reading-shell{
  box-sizing:border-box;
  width:100%;
  max-width:none!important;
  padding-left:max(16px,env(safe-area-inset-left))!important;
  padding-right:max(16px,env(safe-area-inset-right))!important;
}
.game-page .story-stream{
  isolation:isolate;
  width:min(100%,760px)!important;
  max-width:760px!important;
  margin-inline:auto!important;
  padding:clamp(22px,4vw,34px)!important;
  border:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 88%,transparent)!important;
  border-radius:18px!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.43),rgba(255,255,255,.16)),
    var(--story-texture,url('/assets/atmosphere/paper_literary.webp'))!important;
  background-size:auto,520px 520px!important;
  background-repeat:repeat!important;
  background-blend-mode:normal,multiply;
  box-shadow:0 18px 48px rgba(74,50,31,.075),inset 0 1px rgba(255,255,255,.65)!important;
  overflow:hidden!important;
}
.game-page .story-stream::after{
  inset:8px!important;
  z-index:0!important;
  border-radius:12px!important;
  opacity:.48!important;
}
.game-page .story-stream>.node,
.game-page .story-stream>.empty{
  position:relative;
  z-index:2;
}
.game-page .node{
  margin:0!important;
  padding:0 0 30px!important;
}
.game-page .node+.node{
  padding-top:28px!important;
  border-top:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 62%,transparent);
}
.game-page .node:last-child{padding-bottom:0!important}
.game-page .story,
.game-page .story-paragraph,
.game-page .player-line{
  position:relative;
  z-index:1;
}
.game-page .story-paragraph{
  padding-inline:0!important;
  text-shadow:0 1px rgba(255,255,255,.26);
}
.game-page .player-line{
  padding:9px 12px!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--story-page,#f4ead8) 80%,white)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.42)!important;
}

/* The final action area is a quiet continuation of the same page, not a new frame. */
.game-page .interaction-panel{
  margin:18px 0 0!important;
  padding:10px 0 2px!important;
  border:0!important;
  border-top:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 74%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.game-page .interaction-panel::before{display:none!important}
.game-page .interaction-panel .next-step{margin:12px 0 6px!important}
.game-page .interaction-panel .options-wrap{padding-inline:0!important}
.game-page .interaction-panel .option{
  padding:12px 3px!important;
  border-bottom-color:color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 72%,transparent)!important;
}

/* --------------------------------------------------------------------------
   6. Speech / action / speech: narration sits between bubbles, not inside them
   -------------------------------------------------------------------------- */
.game-page .dialogue-narration{
  box-sizing:border-box;
  margin:7px 0 9px 44px!important;
  padding:6px 11px!important;
  border:0!important;
  border-left:2px solid color-mix(in srgb,var(--story-accent,#9a7655) 38%,transparent)!important;
  border-radius:0 8px 8px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--story-page,#f8efe2) 82%,white),transparent 92%)!important;
  color:color-mix(in srgb,var(--story-ink,#493d33) 82%,var(--story-muted,#887463))!important;
  font-size:.9em!important;
  line-height:1.68!important;
}
.game-page .dialogue-continuation{margin-top:3px!important}
.game-page .dialogue-continuation .npc-avatar{visibility:hidden!important}
.game-page .dialogue-continuation .npc-name{display:none!important}
.game-page .dialogue-continuation .npc-bubble{margin-top:0!important}
body[data-avatar-display="off"] .game-page .dialogue-narration{margin-left:0!important}

/* --------------------------------------------------------------------------
   7 / 12. State ribbon: core label + value, description only in expanded view
   -------------------------------------------------------------------------- */
.game-page .state-ribbon{
  display:flex!important;
  align-items:stretch!important;
  width:100%;
  min-width:0;
  min-height:38px!important;
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 62%,transparent)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--story-page,#fbf3e7) 91%,white)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.55)!important;
  overflow:hidden!important;
}
.game-page .state-ribbon-scroll{
  display:flex!important;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden!important;
}
.game-page .state-chip{
  appearance:none;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
  flex:1 1 0!important;
  min-width:0!important;
  max-width:154px!important;
  min-height:38px!important;
  padding:6px 9px!important;
  border:0!important;
  border-right:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 55%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left;
}
.game-page .state-chip b{
  display:block;
  min-width:0;
  max-width:none!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:color-mix(in srgb,var(--story-muted,#75604d) 92%,transparent)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:560!important;
}
.game-page .state-chip.is-long b{font-size:9.8px!important;max-width:none!important}
.game-page .state-chip em{
  flex:0 0 auto;
  color:var(--story-accent,#8f5649)!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-style:normal;
  font-weight:700!important;
  white-space:nowrap;
}
.game-page .state-expand{
  flex:0 0 auto;
  min-width:58px!important;
  padding:0 8px!important;
  border:0!important;
  border-left:1px solid color-mix(in srgb,var(--story-rule,rgba(139,101,66,.18)) 62%,transparent)!important;
  border-radius:0!important;
  background:color-mix(in srgb,var(--story-page,#fbf3e7) 74%,white)!important;
  color:color-mix(in srgb,var(--story-accent,#8f755d) 82%,var(--story-muted,#75604d))!important;
  font-size:9.5px!important;
  font-weight:560;
  white-space:nowrap;
}
.state-detail-main{display:grid!important;gap:3px!important;min-width:0}
.state-detail-main b{font-size:14px!important;line-height:1.35!important}
.state-detail-main small{display:block!important;color:#9b8877!important;font-size:10.5px!important;line-height:1.45!important}

/* --------------------------------------------------------------------------
   2 / 3 / 8. External-AI copy and strictly separated output/source cards
   -------------------------------------------------------------------------- */
.import-page .settings-shell,
.import-review-page .review-shell{
  box-sizing:border-box;
  padding-left:max(14px,env(safe-area-inset-left))!important;
  padding-right:max(14px,env(safe-area-inset-right))!important;
}
.import-page .settings-section.import-pane,
.import-review-page .review-paper{
  isolation:isolate;
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(139,103,72,.17)!important;
  background-image:
    linear-gradient(rgba(255,253,248,.82),rgba(250,244,233,.76)),
    url('/assets/library/library_paper_tile.webp')!important;
  background-size:auto,420px 420px!important;
  background-repeat:repeat!important;
  box-shadow:0 14px 34px rgba(76,52,32,.065),inset 0 1px rgba(255,255,255,.62)!important;
}
.import-page .settings-section.import-pane::before,
.import-review-page .review-paper::before{display:none!important}
.import-page .settings-section.import-pane>*,
.import-review-page .review-paper>*{position:relative;z-index:1}

.external-step-card,
.external-output-card,
.external-result-review,
.source-paper{
  box-sizing:border-box;
  width:100%;
  min-width:0;
}
.external-copy-card,.external-source-card,.external-return-card,
.external-split-preview>article,.external-result-review{
  margin-top:11px!important;
  padding:13px!important;
  border:1px solid rgba(143,104,70,.17)!important;
  border-radius:12px!important;
  background:rgba(255,252,246,.75)!important;
  box-shadow:inset 3px 0 rgba(153,108,67,.09)!important;
}
.external-split-preview{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin:12px 0!important;
}
.external-split-preview.is-hidden{display:none!important}
.external-output-card.is-result{
  border-color:rgba(126,94,59,.26)!important;
  background:rgba(255,249,238,.91)!important;
  box-shadow:inset 4px 0 rgba(139,99,60,.22)!important;
}
.external-output-card.is-source{
  background:rgba(248,246,239,.78)!important;
  box-shadow:inset 4px 0 rgba(111,119,103,.13)!important;
}
.external-copy-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:9px!important;
}
.external-copy-head>div{display:grid!important;gap:3px!important;min-width:0}
.external-copy-head strong{font-size:14px!important;line-height:1.35!important}
.external-copy-head small{font-size:10.5px!important;line-height:1.45!important}
.external-copy-action,
.external-result-review .mini-action,
.source-paper .mini-action{
  flex:0 0 auto;
  min-height:44px!important;
  padding:9px 13px!important;
  border:1px solid rgba(137,99,64,.24)!important;
  border-radius:999px!important;
  background:#fff9ef!important;
  color:#654d39!important;
  font-size:12px!important;
  font-weight:600!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.external-copy-action.primary-copy{
  background:#846246!important;
  border-color:#846246!important;
  color:#fffaf2!important;
}
.external-copy-action.is-copying,.mini-action.is-copying{opacity:.72}
.external-copy-action.is-copied,.mini-action.is-copied{background:#71806b!important;border-color:#71806b!important;color:white!important}
.external-copy-action.is-copy-failed,.mini-action.is-copy-failed{background:#9b674e!important;border-color:#9b674e!important;color:white!important}
.external-copy-card textarea,.external-source-card textarea,.external-return-card textarea,
.external-split-preview pre,.external-result-review pre,.source-paper pre{
  box-sizing:border-box!important;
  width:100%!important;
  border:1px solid rgba(143,104,70,.14)!important;
  border-radius:9px!important;
  background:rgba(250,244,233,.88)!important;
  color:#54463a!important;
  -webkit-user-select:text!important;
  user-select:text!important;
}
.external-split-preview pre,.external-result-review pre,.source-paper pre{
  margin:0!important;
  padding:13px!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  font:12.5px/1.72 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace!important;
}
.external-split-preview pre{max-height:340px!important;overflow:auto!important}
.external-result-review pre,.source-paper pre{max-height:none!important;min-height:42dvh!important}
.copy-fallback-text{
  min-height:48dvh!important;
  font-size:16px!important;
  line-height:1.6!important;
  -webkit-user-select:text!important;
  user-select:text!important;
}

/* --------------------------------------------------------------------------
   4 / 5 / 9. Compact review hierarchy, hidden numbering, actionable risks
   -------------------------------------------------------------------------- */
.import-review-page .review-paper{
  padding:18px!important;
  border-radius:15px!important;
}
.import-review-page .character-number,
.import-review-page .group-index{display:none!important}
.import-review-page .character-card-top,
.import-review-page .mechanic-group-head>div{grid-template-columns:minmax(0,1fr)!important}
.review-collapsible{padding:0!important}
.review-collapsible-head{
  appearance:none;
  box-sizing:border-box;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:64px;
  padding:13px 15px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.review-collapsible-head>span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 9px;min-width:0}
.review-collapsible-head small{grid-column:1;color:#967a61;font-size:10px;letter-spacing:.08em}
.review-collapsible-head strong{grid-column:2;color:#5d4938;font-size:15px;overflow-wrap:anywhere}
.review-collapsible-head em{grid-column:1/-1;color:#9a8877;font-size:10.5px;font-style:normal}
.review-collapsible-head>b{flex:0 0 auto;color:#86674e;font-size:18px;font-weight:400}
.review-collapsible-body{padding:0 15px 15px}
.review-collapsible.is-collapsed .review-collapsible-body{display:none!important}
.review-collapsible.is-open .review-collapsible-head{border-bottom:1px solid rgba(139,103,72,.12)!important;border-radius:14px 14px 0 0!important}

.recommendation-card-compact{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:0!important;
}
.recommendation-card-compact .recommendation-summary{min-width:0}
.recommendation-card-compact h2{margin:3px 0 5px!important;font-size:20px!important;line-height:1.3!important}
.recommendation-card-compact p{margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#7e6c5c;font-size:12px;line-height:1.55}
.compact-deep-analysis{
  min-width:118px!important;
  min-height:54px!important;
  padding:9px 11px!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  gap:1px 7px!important;
  align-items:center!important;
}
.compact-deep-analysis>span{grid-row:1/3}
.compact-deep-analysis>b{font-size:12.5px!important}
.compact-deep-analysis>small{font-size:9px!important;line-height:1.25!important}

.risk-card-heading{display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex-wrap:wrap}
.risk-card-heading strong{font-size:12px}
.risk-card-heading small{color:#9b8877;font-size:10px}
.risk-actions .risk-jump{
  background:#806047!important;
  border-color:#806047!important;
  color:#fff!important;
}
.review-anchor{scroll-margin-top:138px}
.review-target-flash{animation:review-target-flash-v1108 1.45s ease}
@keyframes review-target-flash-v1108{
  0%,100%{box-shadow:0 14px 34px rgba(76,52,32,.065),inset 0 1px rgba(255,255,255,.62)}
  35%{box-shadow:0 0 0 4px rgba(153,103,61,.20),0 18px 42px rgba(76,52,32,.11),inset 0 1px rgba(255,255,255,.68)}
}

/* --------------------------------------------------------------------------
   Dark mode parity
   -------------------------------------------------------------------------- */
body[data-resolved-theme="dark"] .game-page .story-stream{
  background-image:linear-gradient(rgba(37,34,31,.88),rgba(38,34,30,.89)),var(--story-texture)!important;
  border-color:rgba(215,178,140,.13)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.025)!important;
}
body[data-resolved-theme="dark"] .game-page .story-paragraph{text-shadow:none}
body[data-resolved-theme="dark"] .game-page .player-line,
body[data-resolved-theme="dark"] .game-page .state-ribbon{background:rgba(59,52,45,.74)!important}
body[data-resolved-theme="dark"] .game-page .dialogue-narration{background:linear-gradient(90deg,rgba(67,58,49,.7),transparent 92%)!important}
body[data-resolved-theme="dark"] .import-page .settings-section.import-pane,
body[data-resolved-theme="dark"] .import-review-page .review-paper{
  background-image:linear-gradient(rgba(48,43,37,.94),rgba(43,38,33,.94)),url('/assets/library/library_paper_tile.webp')!important;
  background-blend-mode:multiply,normal;
  border-color:rgba(215,178,140,.13)!important;
}
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{background:rgba(55,48,41,.79)!important}
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"] .source-paper pre{background:rgba(42,37,32,.86)!important;color:#e6d8c7!important}
body[data-resolved-theme="dark"] .review-collapsible-head strong{color:#ead9c5}
body[data-resolved-theme="dark"] .review-collapsible-head em,
body[data-resolved-theme="dark"] .risk-card-heading small{color:#b7a590}

@media(max-width:430px){
  .game-page .reading-shell{
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  .game-page .story-stream{
    padding:18px 15px!important;
    border-radius:14px!important;
  }
  .game-page .story-stream::after{inset:6px!important;border-radius:9px!important}
  .game-page .node{padding-bottom:24px!important}
  .game-page .node+.node{padding-top:23px!important}
  .game-page .story-paragraph{padding-inline:0!important}
  .game-page .dialogue-narration{margin-left:38px!important;padding:6px 9px!important}
  body[data-avatar-display="off"] .game-page .dialogue-narration{margin-left:0!important}
  .game-page .interaction-panel{margin-top:14px!important;padding-top:8px!important}
  .game-page .state-ribbon{min-height:36px!important}
  .game-page .state-chip{max-width:112px!important;min-height:36px!important;padding:5px 6px!important;gap:4px!important}
  .game-page .state-chip b{font-size:9.5px!important}
  .game-page .state-chip.is-long b{font-size:8.8px!important}
  .game-page .state-chip em{font-size:10.5px!important}
  .game-page .state-expand{min-width:52px!important;padding-inline:5px!important;font-size:8.8px!important}

  .import-page .settings-shell,
  .import-review-page .review-shell{
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  .import-review-page .review-paper{padding:14px 12px!important}
  .external-copy-card,.external-source-card,.external-return-card,
  .external-split-preview>article,.external-result-review{padding:11px!important}
  .external-copy-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .external-copy-head button{justify-self:start;width:100%;min-height:44px!important}
  .external-copy-card textarea{min-height:150px!important}
  .external-source-card textarea{min-height:130px!important}
  .external-return-card textarea{min-height:170px!important}
  .external-split-preview pre{max-height:310px!important}

  .recommendation-card-compact{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .recommendation-card-compact h2{font-size:18px!important}
  .compact-deep-analysis{width:100%!important;min-height:48px!important}
  .review-collapsible-head{min-height:58px;padding:11px 12px!important}
  .review-collapsible-head>span{grid-template-columns:1fr!important;gap:2px!important}
  .review-collapsible-head small,.review-collapsible-head strong,.review-collapsible-head em{grid-column:1!important}
  .review-collapsible-head strong{font-size:14px}
  .review-collapsible-body{padding:0 12px 12px}
  .review-anchor{scroll-margin-top:154px}
  .risk-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .risk-actions .risk-jump{grid-column:1/-1!important}
}

@media(max-width:360px){
  .game-page .reading-shell{
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
  }
  .game-page .story-stream{padding:16px 12px!important}
  .game-page .state-chip{max-width:101px!important;padding-inline:5px!important}
  .game-page .state-expand{min-width:48px!important}
}