/* The companion folios, journal and Lodge share the same lantern-lit craft.
   This finishing layer keeps their existing layouts, artwork and state contracts. */

/* One quiet frame around every secondary journey; native dialogs retain scroll. */
:is(.game-dialog, .cg-dialog, .cp-dialog, .pg-dialog, .st-dialog, .ph-dialog, .af-dialog) {
  border-color: rgba(223, 185, 109, .43);
  box-shadow: 0 28px 100px #020c10b8, 0 0 0 1px #071412,
    inset 0 1px 0 #fff1c719;
  scrollbar-width: thin;
  scrollbar-color: #718776 #102320;
}

:is(.game-dialog, .cg-dialog, .cp-dialog, .pg-dialog, .st-dialog, .ph-dialog, .af-dialog)::backdrop {
  background: #050f13d9;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

:is(.cg-heading, .cp-heading, .pg-dialog-heading, .st-heading, .ph-header, .af-header) {
  background: radial-gradient(ellipse at 84% 0, #d5ad6314, transparent 65%),
    linear-gradient(115deg, #203b35, #12282b);
  border-bottom: 1px solid #d2b77c2b;
}

:is(.cg-heading, .cp-heading, .pg-dialog-heading, .st-heading, .ph-header, .af-header) h2 {
  color: var(--ui-text, #f3efdf);
  letter-spacing: -.025em;
  text-wrap: balance;
}

:is(.cg-heading, .cp-heading, .pg-dialog-heading, .st-heading, .af-header) p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ui-muted, #bbc9be);
}

:is(.cg-close, .cp-close, .pg-close, .st-close, .ph-close, .af-close),
.game-dialog .dialog-heading > .icon-button,
.game-dialog .story-close.icon-button {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  border: 1px solid #c8ba904a;
  border-radius: 14px;
  color: #f4ecd3;
  background: #102724;
}

:is(.cg-close, .cp-close, .pg-close, .st-close, .ph-close, .af-close):hover,
.game-dialog .dialog-heading > .icon-button:hover,
.game-dialog .story-close.icon-button:hover {
  background: #2a4438;
  border-color: #dfb96d;
}

:is(.game-dialog, .cg-dialog, .cp-dialog, .pg-dialog, .st-dialog, .ph-dialog, .af-dialog)
  :is(button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #f4d391;
  outline-offset: 3px;
}

:is(.cp-scroll, .ph-scroll) :is(button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #315e4d;
}

:is(.cp-person-hero, .cp-conversation, .ph-welcome)
  :is(button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #f4d391;
}

:is(.cg-content, .cp-scroll, .pg-dialog-content, .st-content, .ph-scroll, .af-content) {
  scroll-padding-block: 20px;
}

/* Tabs look selected without obscuring labels or changing their keyboard model. */
:is(.cg-detail-nav, .cp-tabs, .pg-tabs, .ph-tabs, .af-tabs) {
  background: #122925;
  border-bottom-color: #d5bd813d;
}

:is(.cg-tabs, .cp-tabs, .pg-tabs, .ph-tabs, .af-tabs) > button {
  min-height: 48px;
  font-size: 14px;
  line-height: 1.5;
}

:is(.cp-tabs, .pg-tabs, .ph-tabs, .af-tabs) > button[aria-selected="true"] {
  background: #d6be8014;
  color: #fff0c9;
}

:is(.cp-tabs, .pg-tabs, .ph-tabs, .af-tabs) > button[aria-selected="true"]::after {
  background: #dfb96d;
  height: 3px;
}

:is(.cg-tabs, .cp-tabs, .pg-tabs, .ph-tabs, .af-tabs) > button:not([aria-selected="true"]):hover {
  background: #c8d6b00d;
  color: #f2edd8;
}

/* Portraits remain the visual anchors; the surrounding facts get more air. */
.cg-dialog { --cg-paper: #f3efdf; --cg-muted: #bbc9be; }
.cg-roster { background: #102723; padding-block: 12px; }
.cg-roster-member { min-height: 66px; }
.cg-roster-member strong { font-size: 13px; }
.cg-roster-state { font-size: 10px; bottom: 5px; }
.cg-roster-member.is-current { box-shadow: inset 0 -3px 0 var(--cg-member); }
.cg-page-controls button { min-width: 44px; min-height: 48px; }
.cg-panel { padding: 26px; }
.cg-panel h4 { color: #f3ecd8; }
.cg-biography { max-width: 68ch; font-size: 16px; line-height: 1.85; }
.cg-story-notes p, .cg-gear p, .cg-strengths p, .cg-ability > p:not(.cg-footnote) {
  font-size: 14px;
  line-height: 1.8;
}
.cg-story-notes h5, .cg-gear strong, .cg-skill-option strong { font-size: 14px; }
.cg-gear article { padding: 14px; background: #102622; border-color: #b6c39a24; }
.cg-skill-option { padding: 12px; }
.cg-skill-option small { font-size: 12px; line-height: 1.65; }
.cg-skill-option.is-equipped { border-color: #dfbd7770; background: #354635; }
.cg-demo > button, .cg-action { min-height: 48px; font-size: 14px; }
.cg-unmet { border-style: dashed; }
.cg-footer, .pg-footer, .st-footer { font-size: 12px; line-height: 1.6; }

/* Parchment is reserved for the companion folio and Lodge's longer reading. */
.cp-scroll, .ph-scroll {
  background: radial-gradient(ellipse at 0 0, #fff9e87a, transparent 65%), #eee6d0;
}
.cp-content, .ph-content { color: #2d473b; }
.cp-next-step, .cp-swap-action { background: #f5edda; border-color: #87976b80; }
.cp-branch { background: #f8f0dc; box-shadow: 0 3px 10px #293d2210; }
.cp-branch[aria-pressed="true"], .cp-slot-picker > button[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 #55764c, 0 3px 12px #293d2214;
}
.cp-button, .ph-button { min-height: 48px; border-radius: 10px; }
.cp-button.cp-primary, .ph-button.ph-primary {
  background: linear-gradient(120deg, #3c6149, #244e3b);
  color: #fff5d9;
  border-color: #375b43;
}
.cp-button:disabled, .ph-button:disabled { opacity: .65; box-shadow: none; }
.cp-roster-member[aria-pressed="true"] { box-shadow: inset 0 -3px var(--cp-person); }
.cp-dialogue { background: #193329; border-top-color: #d2b77c55; }
.cp-dialogue p { color: #f0ead6; font-size: 17px; line-height: 1.85; }
.cp-dialogue strong { color: #dfbd7e; }
.cp-empty-state { border: 1px dashed #87976b80; border-radius: 14px; }

/* Growth choices keep equipped, selected and unavailable states visibly distinct. */
.pg-rewards {
  border-color: #d3ae6773;
  background: radial-gradient(ellipse at 50% 0, #c49a4a18, transparent 65%), #142b25;
}
.pg-reward-choice { background: #10261f; border-color: #b4ab7761; }
.pg-reward-choice > strong { font-size: 22px; line-height: 1.35; }
.pg-reward-choice > .pg-reward-effect { font-size: 14px; line-height: 1.7; }
.pg-reward-choice > .pg-card-impact { font-size: 12px; line-height: 1.65; }
.pg-reward-choice > .pg-compare-button,
.pg-reward-choice > .pg-reward-action {
  min-height: 48px;
  font-size: 14px;
  line-height: 1.5;
}
.pg-reward-note { font-size: 13px; line-height: 1.7; }
.pg-relic-card.is-equipped { border-color: #dfb96d; box-shadow: inset 0 -3px #dfb96d; }
.pg-stance-card[aria-pressed="true"] { box-shadow: inset 0 -3px #dfb96d; }
.pg-button { min-height: 48px; font-size: 14px; border-radius: 10px; }
.pg-relic-card.is-locked { border-style: dashed; }
.pg-build-inspector { background: #102620; border-color: #a8b88954; }
.pg-impact-method { font-size: 12px; line-height: 1.7; }
.pg-growth-receipt.has-level-up { border-color: #dfb96d80; background: #82652f22; }

/* The constellation stays geometrically stable; its detail pane carries the prose. */
.st-heading p, .st-hero-copy p, .st-build-rule p, .st-deferred,
.st-map-heading p, .st-detail-actions > p, .st-explanation > p,
.st-learning-note p, .st-innate p, .st-reset-panel p {
  font-size: 14px;
  line-height: 1.75;
  color: #c0cdb7;
}
.st-character-label strong { font-size: 13px; }
.st-character-label small { font-size: 11px; color: #b4c3a8; white-space: normal; }
.st-character { min-height: 78px; }
.st-loadout-slot { min-height: 72px; }
.st-loadout-slot strong { font-size: 14px; }
.st-loadout-slot small { font-size: 11px; color: #b5c4a5; }
.st-detail { background: #1a3027; border-color: #c4bb7e66; }
.st-detail-state { font-size: 12px; line-height: 1.5; }
.st-detail-state.is-equipped { color: #f4dc9e; border-color: #dfb96d7a; }
.st-primary, .st-secondary, .st-explanation > summary, .st-text-link {
  min-height: 48px;
  font-size: 14px;
  line-height: 1.5;
}
.st-primary:disabled { color: #bbc9ae; background: #354534; border-style: dashed; }
.st-node.is-selected { border-color: #dfb96d; background: #d5b36710; }
.st-requirement-chips > span { font-size: 12px; line-height: 1.6; }
.st-requirement-chips > span.is-unmet { color: #d0c5ae; }
.st-announcement { font-size: 14px; line-height: 1.7; }

/* Scene artwork is separate from an opaque, comfortable reading surface. */
.story-dialog .story-dialogue, .story-dialog[data-act] .story-dialogue {
  background: #eee5d0;
  border-top: 1px solid #d2bd8d;
  border-bottom: 1px solid #b5a574;
}
.story-dialog .story-words > strong, .story-dialog[data-act] .story-words > strong {
  color: #52613d;
  font-size: 13px;
  letter-spacing: .06em;
}
.story-dialog .story-words > p {
  color: #263d35;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.85;
  max-width: 65ch;
  text-wrap: pretty;
}
.story-controls :is(.primary-button, .secondary-button) { min-height: 48px; font-size: 14px; }
.story-backlog { border-color: #b8c89a39; }
.story-backlog summary { min-height: 48px; font-size: 14px; }
.story-backlog p { font-size: 14px; line-height: 1.85; }
.journal-tab { min-height: 48px; font-size: 14px; }
.journal-tab.active { background: #ddd2a6; border-color: #ddd2a6; color: #243c31; }
.journal-chapter { padding: 11px; min-height: 66px; border-color: #b1c09a35; }
.journal-chapter.selected { border-color: #dfb96d; background: #334437; box-shadow: inset 3px 0 #dfb96d; }
.journal-chapter:disabled { opacity: .65; border-style: dashed; }
.journal-entry > p, .journal-tactic > p, .companion-story p { font-size: 15px; line-height: 1.85; }
.journal-tactic { background: #112822; border-color: #a9bc933d; }
.companion-story details > summary { min-height: 48px; font-size: 13px; }
.ending-choice > p { font-size: 15px; line-height: 1.75; }
.ending-choice[aria-pressed="true"] { box-shadow: inset 0 -3px #f0d498, 0 0 0 1px #f0d498; }
.ending-confirm p { font-size: 15px; line-height: 1.75; }

/* A quieter Lodge: material previews stay colourful, settings stay legible. */
.ph-daily, .ph-profile, .ph-friend-code, .ph-goal, .ph-person {
  background-color: #f8f0de;
  border-color: #8e9d7461;
  box-shadow: 0 3px 12px #3146270a;
}
.ph-equipped-item { border-color: #8e9d746b; border-radius: 12px; }
.ph-product { border-radius: 12px; border-color: #8e9d7482; }
.ph-product.is-selected { outline: 3px solid #557247; outline-offset: 3px; }
.ph-filter { min-height: 48px; }
.ph-preview { box-shadow: 0 8px 24px #2e42251a; }
.ph-dialog input, .ph-dialog select { min-height: 48px; border-radius: 10px; background: #fff9ea; }
.ph-dialog input[aria-invalid="true"] { border-color: #9a4e35; box-shadow: 0 0 0 1px #9a4e35; }
.ph-status { background: #f3e4ba; color: #4f432c; border-top-color: #b99a55; font-size: 14px; }
.ph-empty { line-height: 1.8; }

/* Recovery controls keep the distinction between saved, pending and failed. */
.save-transfer-dialog { background: #142b2c; }
.save-current { background: #1b3532; border-color: #abc59b55; }
.save-import-preview { background: #303b2a; border-color: #dfb96d88; }
.save-error { background: #412e28; color: #ffdfc2; border-color: #d6997280; }
.save-persistence-status.save-warning { color: #f5d7a6; }
.save-transfer-dialog textarea { background: #0d211f; font-size: 14px; padding: 13px; }
.save-import input[type="file"] { font-size: 13px; }
.save-import input[type="file"]::file-selector-button { min-height: 48px; font-size: 14px; }
.save-columns p, .save-recovery p, .save-recovery-copy span, .save-privacy { font-size: 13px; line-height: 1.75; }
.save-code-details summary, .save-recovery summary { min-height: 48px; font-size: 14px; }
.save-confirm-actions button { min-height: 48px; font-size: 14px; }
.af-button { min-height: 48px; }
.af-footer p, .af-notice { font-size: 13px; line-height: 1.7; }

@media (min-width: 761px) {
  :is(.cg-heading, .cp-heading, .pg-dialog-heading, .st-heading, .ph-header, .af-header) {
    padding: 25px 28px 21px;
  }
}

@media (max-width: 760px) {
  .st-character { min-width: 112px; }
  .st-character-label strong { max-width: 67px; }
  .st-points > p, .st-next-point > small, .st-point-total small { font-size: 11px; }
  .st-build-row { grid-template-columns: 1fr; }
  .st-build-rule { grid-column: auto; }
  .st-innate { flex-wrap: wrap; }
  .st-innate > small { width: 100%; border-left: 0; padding-left: 49px; font-size: 12px; }
}

@media (max-width: 660px) {
  .cg-panel { padding: 22px 17px; }
  .cg-roster-member { min-width: 76px; }
  .cg-roster-member strong { font-size: 12px; }
  .cg-roster-state { font-size: 10px; }
  .cg-footer, .pg-footer, .st-footer { flex-wrap: wrap; gap: 4px 12px; }
  .cg-detail-nav { flex-wrap: wrap; gap: 8px; }
  .cg-tabs { flex: 1 1 230px; }
  .cg-tabs button { font-size: 13px; }
  .cg-page-controls { margin-left: auto; }
  .pg-reward-choice { grid-template-columns: 74px minmax(0, 1fr); gap: 7px 12px; }
  .pg-reward-choice > .pg-relic-art { width: 70px; height: 70px; }
  .pg-reward-choice > strong { font-size: 21px; }
  .pg-reward-choice > .pg-reward-effect { font-size: 14px; }
  .pg-reward-choice > .pg-card-impact { font-size: 12px; }
  .pg-reward-choice > .pg-compare-button { font-size: 13px; }
  .pg-reward-choice > .pg-reward-action { font-size: 14px; }
  .story-dialog .story-words > p { font-size: 17px; }
  .journal-chapter > strong { font-size: 13px; }
  .journal-chapter > small { font-size: 11px; }
}

@media (max-width: 420px) {
  .cp-tabs { padding-inline: 8px; }
  .cp-tabs > button { flex: 1; padding-inline: 7px; font-size: 13px; }
  .pg-tabs, .af-tabs { overflow-x: auto; padding-inline: 12px; }
  .pg-tabs > button, .af-tabs > button { flex: none; white-space: nowrap; padding-inline: 12px; }
  .ph-tabs { padding-inline: 10px; }
  .ph-tabs > button { padding-inline: 8px; }
  .ph-header-right { gap: 9px; }
  .ph-wallet { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
  .journal-act > div { grid-template-columns: 1fr; }
  .story-dialog .story-dialogue { gap: 12px; padding: 20px 16px; }
  .save-transfer-dialog { padding: 20px 16px; }
  .game-dialog .dialog-actions { grid-template-columns: 1fr; }
}

/* No new animation is introduced; reduced-motion also removes the overlay blur. */
@media (prefers-reduced-motion: reduce) {
  :is(.game-dialog, .cg-dialog, .cp-dialog, .pg-dialog, .st-dialog, .ph-dialog, .af-dialog)::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html[data-motion="reduced"] :is(.game-dialog, .cg-dialog, .cp-dialog, .pg-dialog, .st-dialog, .ph-dialog, .af-dialog)::backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}