/* Shared paper-and-rose theme, based on the user's pink-mystery reference. */
:root {
  --paper: #fffaf8;
  --card: #fffdfb;
  --ink: #382c30;
  --line: #91425e;
  --soft-line: #dec7cf;
  --muted: #78616a;
  --a: #52694b;
  --a-soft: #edf1e7;
  --b: #903c59;
  --b-soft: #f5e2e8;
  --gold: #bd6b86;
  --rose: #a83f61;
  --rose-dark: #83334e;
  --paper-shadow: 0 2px 0 #b68c9b38, 0 8px 22px #7049570c;
  --paper-mask: url('assets/scrapbook/paper-mask.svg');
  --font: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
}
body { background: var(--paper); -webkit-font-smoothing: antialiased; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/scrapbook/paper-grain.svg'); opacity: .13;
}
:is(button,a,input,textarea,select):focus-visible { outline-color: var(--rose-dark); }
.app-header { max-width: 1280px; padding: 22px 36px; border-color: var(--soft-line); }
.logo { color: var(--rose-dark); font-size: 23px; }
.logo-mark { border: 1px solid var(--rose); border-radius: 4px; transform: rotate(-6deg); background: #f8e7ec; }
.logo small { font-size: 11px; letter-spacing: 1px; }
.app-header nav { font-size: 13px; gap: 26px; }
.app-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.app-header nav a:hover { color: var(--rose); }
main { padding-top: 28px; }
.eyebrow { color: var(--rose-dark); font-size: 11px; letter-spacing: 1.6px; }
.button { background: var(--rose); border-color: var(--rose); color: #fff; border-radius: 3px 5px 4px 3px; box-shadow: 2px 3px 0 #d9b7c4; min-height: 46px; }
.button:hover { background: var(--rose-dark); filter: none; }
.button.secondary { border-color: #b78b9b; background: var(--card); color: var(--rose-dark); }
.button.secondary:hover { background: #faedf1; }
.button.soft { background: var(--a-soft); color: var(--a); border-color: #a5b29e; }
.button.soft:hover { background: #e3eadc; }
.text-link { color: var(--rose-dark); font-size: 13px; min-height: 44px; }
.pill { border-radius: 3px; font-size: 12px; }
.pill.b { border-color: #c99baa; }
.muted { font-size: 14px; }
.notice { background: #f7eaee; }
.error-box { background: #fcece8; border-color: #c27d69; }
.app-footer { font-size: 12px; padding: 24px 0 30px; }
.app-footer small { font-size: 11px; }

/* The cover is a collage of the supplied, unchanged character artwork. */
.hero { grid-template-columns: 1.05fr 1fr; gap: 38px; min-height: 440px; margin: 10px 0 36px; }
.hero h1 { font-size: clamp(36px, 3.6vw, 48px); line-height: 1.48; letter-spacing: 0; margin: 17px 0 20px; font-weight: 700; }
.hero h1 span { color: var(--rose-dark); position: relative; white-space: nowrap; }
.hero h1 span::after { content: ''; position: absolute; bottom: -6px; height: 5px; left: 2px; right: 12px; border-bottom: 2px solid #d598ac; border-radius: 50%; transform: rotate(-1deg); }
.hero p { max-width: 470px; line-height: 1.9; }
.hero .button-row { margin-top: 26px; }
.hero-meta { display: flex; gap: 0; margin-top: 23px; font-size: 12px; color: var(--muted); }
.hero-meta span + span { border-left: 1px solid var(--soft-line); margin-left: 18px; padding-left: 18px; }
.scrapbook-cover { position: relative; isolation: isolate; min-height: 430px; display: grid; place-items: center; }
.scrapbook-cover::before { content: ''; position: absolute; inset: 28px 10px 25px 8px; background: #f0d6e0 url('assets/scrapbook/paper-grain.svg'); mask: var(--paper-mask) center / 100% 100%; transform: rotate(4deg); z-index: -2; }
.scrapbook-cover::after { content: ''; position: absolute; inset: 42px 25px 14px 16px; background: #fffdf6 url('assets/scrapbook/paper-grain.svg'); mask: var(--paper-mask) center / 100% 100%; transform: rotate(-4deg); z-index: -1; }
.cover-characters { width: 88%; height: 370px; object-fit: contain; filter: drop-shadow(2px 5px 1px #80586618); }
.cover-tape { position: absolute; top: 17px; left: 39%; width: 110px; height: 31px; background: #df97b080; transform: rotate(-8deg); border-left: 2px dashed #fff7; border-right: 2px dashed #fff7; }
.cover-stamp { position: absolute; right: 5px; top: 28px; transform: rotate(9deg); border: 1px solid #aa5f79; outline: 1px solid #aa5f79; outline-offset: 4px; color: var(--rose-dark); padding: 6px 12px; font-size: 11px; letter-spacing: 1px; background: #fffaf8d9; }
.scrapbook-cover .cover-label { bottom: 8px; background: #fffdfb; border: 1px solid #c7a1af; color: var(--rose-dark); border-radius: 1px; font-size: 13px; padding: 9px 22px; box-shadow: 3px 4px 0 #d8b8c74d; }

/* A compact reading guide connects the cover to the input sheets. */
.story-guide { position: relative; margin: 20px 0 46px; padding: 29px 0 25px; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
.guide-label { position: absolute; top: -13px; left: 0; padding: 0 17px 0 0; background: var(--paper); font-size: 13px; color: var(--rose-dark); letter-spacing: 1px; }
.guide-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.guide-page { display: flex; gap: 17px; padding: 9px 0; align-items: flex-start; }
.guide-number { flex: none; width: 48px; height: 55px; display: grid; place-items: center; font-size: 24px; color: var(--rose-dark); background: #f3dce5; mask: var(--paper-mask) center / 100% 100%; transform: rotate(-5deg); }
.guide-page:nth-child(2) .guide-number { background: #ede8db; transform: rotate(4deg); }
.guide-page:nth-child(3) .guide-number { background: #e7ecdF; transform: rotate(-3deg); }
.guide-page h3 { font-size: 17px; margin-bottom: 6px; }
.guide-page p { font-size: 13px; color: var(--muted); line-height: 1.8; }
#our-pages { scroll-margin-top: 28px; }
.entry-title { margin-bottom: 26px; }
.entry-title h2 { font-size: 23px; }
.entry-title .eyebrow { margin-bottom: 6px; }
.accounts { gap: 27px; }
.account { border: 1px solid #d5b6c1; border-radius: 2px; padding: 28px; box-shadow: var(--paper-shadow); }
.account::before { content: ''; position: absolute; top: -9px; left: 35px; width: 78px; height: 18px; transform: rotate(-3deg); background: #e8b2c395; pointer-events: none; }
.account:nth-child(2)::before { background: #d9dfc9b3; transform: rotate(4deg); }
.account-top h3 { font-size: 18px; }
.account-top p { font-size: 12px; }
.account label.title { font-size: 14px; }
.account textarea { background: #fffcfb; border-radius: 3px; padding: 14px; min-height: 168px; font-size: 15px; }
.consent { font-size: 12px; line-height: 1.8; }
.consent input { width: 18px; height: 18px; accent-color: var(--rose); }
.submit-row { margin-top: 25px; }
.submit-row p { font-size: 12px; }
.resume-card { background: #f9edf1; border-color: #dcb5c3; border-radius: 3px; border-left: 4px solid var(--rose); }
.generation-steps li { border-radius: 3px; font-size: 13px; box-shadow: var(--paper-shadow); }
.generation-steps li.active { background: var(--b-soft); border-color: var(--rose); }

/* Game pages keep the original illustrated canvas inside a paper mount. */
.game-top { padding-top: 12px; }
.game-top .eyebrow { font-size: 11px; }
.game-top h1 { font-size: 27px; }
.chapter-rail { gap: 8px; margin: 22px 0 30px; }
.chapter-rail span { height: 6px; border-radius: 0; background: #ebdbe1; }
.chapter-rail span.current { background: var(--rose); }
.chapter-rail span.done { background: #a9b39c; }
.game-layout { gap: 30px; }
.stage-frame { border: 1px solid #c9a4b2; border-radius: 2px; padding: 12px 12px 25px; background: #fffdfb; box-shadow: 4px 6px 0 #ead5dd; }
.stage-frame canvas { border-radius: 1px; }
.theatre::before { content: ''; position: absolute; top: -10px; left: 43%; width: 88px; height: 22px; background: #dfa5b99c; transform: rotate(-4deg); z-index: 1; pointer-events: none; }
.stage-footer, .stage-footer .text-link { font-size: 12px; }
.moment-note { background: #faedf1; border-left-color: #bb6d88; font-size: 14px; }
.moment-note strong { font-size: 12px; }
.story-card { border: 1px solid #c9a4b2; border-radius: 2px; box-shadow: 4px 6px 0 #ead5dd; padding: 27px; background: var(--card); }
.role-heading { border-bottom: 1px dashed var(--soft-line); padding-bottom: 17px; }
.role-heading small { font-size: 12px; }
.narrative { font-size: 18px; }
.story-card .question { font-size: 14px; }
.choice { border-radius: 3px; font-size: 14px; background: #fffaf8; }
.choice.selected { background: var(--b-soft); border-color: var(--rose); }
.choice>span { font-size: 12px; }
.feedback { background: #f8edf1; border-left-color: #bb6d88; font-size: 14px; }
.feedback small { font-size: 12px; }
.button.swap { background: var(--b-soft); color: var(--rose-dark); border-color: #bb879b; }
.button.swap:hover { background: #ecd0da; }
.role-progress { flex-wrap: wrap; font-size: 12px; gap: 6px 15px; }
.scene-nav .button { font-size: 13px; }
.draft-label { font-size: 12px; }
.recap { border-radius: 2px; box-shadow: var(--paper-shadow); }
.recap-grid p { font-size: 14px; }
.reflection-form { background: #f7e8ee; border-color: #d7b3c1; border-radius: 3px; }
.reflection-form textarea { font-size: 14px; border-radius: 3px; }
dialog { border-radius: 4px; border-width: 1px; box-shadow: 7px 9px 0 #d9b7c44d; }
dialog p, dialog li { font-size: 14px; }
dialog::backdrop { background: #382c3066; }

/* The studio uses the same material with quieter, aligned work surfaces. */
.studio-page { background-color: #faf4f5; }
.studio-page .app-header { max-width: 1460px; }
.studio-intro { padding: 15px 0 29px; border-bottom: 1px solid var(--soft-line); }
.studio-intro h1 { font-size: 34px; }
.studio-intro p { font-size: 14px; }
.studio-intro .pill { color: var(--rose-dark); border: 1px solid #c69aa9; padding: 8px 13px; transform: rotate(3deg); background: #fffdfb; }
.studio-sidebar { background: #f1e2e8; border-color: #d5b8c3; border-radius: 3px; box-shadow: 3px 4px 0 #e7d4dc; }
.studio-sidebar nav a { font-size: 13px; min-height: 43px; border-radius: 2px; }
.studio-sidebar nav span { font-size: 11px; color: var(--rose-dark); }
.studio-sidebar nav a:hover { color: var(--rose-dark); }
.studio-sidebar>p, .run-summary p { font-size: 12px; }
.studio-sidebar .button { font-size: 12px; min-height: 44px; }
.node { position: relative; border-radius: 3px; border-color: #d8bec8; box-shadow: var(--paper-shadow); margin-bottom: 26px; }
.node-heading { border-bottom: 1px dashed var(--soft-line); padding-bottom: 19px; }
.node-heading h2 { font-size: 22px; }
.node-heading p { font-size: 12px; }
.node-number { border-radius: 2px; background: #f4dfe7; color: var(--rose-dark); border-color: #c79aaa; }
.status-badge { font-size: 11px; border-radius: 3px; }
.status-badge.completed { border-color: #a8b89e; }
.input-pair label:not(.consent) { font-size: 14px; }
.input-pair textarea { background: #fffcfb; font-size: 14px; border-radius: 3px; }
.node-footnote { font-size: 12px; }
.io-label { font-size: 12px; color: var(--rose-dark); }
.node pre { font-size: 13px; background: #f6f1f3; border-color: #e1d2d8; border-radius: 3px; }
.node pre.prompt { background: #f8edf1; }
.empty-output { background: #faf6f7; border-radius: 3px; font-size: 13px; }
.node-card h3 { font-size: 17px; }
.node-card p { font-size: 14px; }
.node-card .label { font-size: 12px; }
.story-table { font-size: 13px; }
.story-table th { font-size: 12px; }
.asset-preview canvas, .asset-preview select { border-radius: 3px; }
.asset-preview .button { font-size: 12px; min-height: 44px; }
.asset-preview p, .character-card p { font-size: 13px; }
.character-card a { font-size: 12px; }
.character-card { border-radius: 3px; background: #faf1f4; }

@media (max-width: 1050px) {
  .hero { gap: 22px; min-height: 380px; }
  .scrapbook-cover { min-height: 365px; }
  .cover-characters { height: 315px; }
  .hero h1 { font-size: 36px; }
  .hero-meta { flex-wrap: wrap; row-gap: 8px; }
  .guide-pages { gap: 18px; }
  .guide-page { gap: 12px; }
  .guide-number { width: 38px; height: 48px; font-size: 21px; }
  .game-layout { gap: 22px; }
  .story-card { padding: 21px; }
}
@media (max-width: 720px) {
  .app-header { padding: 16px 19px; gap: 13px; }
  .logo { font-size: 19px; gap: 9px; }
  .logo small { font-size: 10px; letter-spacing: 0; }
  .app-header nav { font-size: 12px; gap: 12px; }
  .app-header nav .button { font-size: 12px; min-height: 44px; padding: 8px 11px; }
  .studio-page .app-header { flex-wrap: wrap; }
  .studio-page .app-header nav { margin-left: auto; }
  main { padding: 27px 19px; }
  .hero { grid-template-columns: 1fr; gap: 24px; margin: 0 0 35px; }
  .hero h1 { font-size: clamp(29px, 7.7vw, 38px); line-height: 1.5; }
  .hero p { font-size: 14px; }
  .hero .button-row { gap: 14px; margin-top: 22px; }
  .hero .button { padding: 11px 15px; font-size: 13px; }
  .hero-meta { font-size: 12px; }
  .hero-meta span + span { margin-left: 12px; padding-left: 12px; }
  .scrapbook-cover { min-height: 320px; max-width: 440px; width: 100%; margin: auto; }
  .cover-characters { height: 290px; }
  .cover-stamp { right: 5px; top: 14px; font-size: 10px; padding: 4px 8px; }
  .scrapbook-cover .cover-label { font-size: 12px; padding: 7px 16px; }
  .story-guide { margin: 30px 0 35px; padding-bottom: 15px; }
  .guide-pages { grid-template-columns: 1fr; gap: 9px; }
  .guide-page { gap: 16px; align-items: center; }
  .guide-page h3 { font-size: 16px; margin-bottom: 2px; }
  .guide-page p { font-size: 13px; }
  .guide-number { width: 45px; height: 50px; }
  .entry-title { flex-wrap: wrap; gap: 2px; margin-bottom: 23px; }
  .entry-title h2 { font-size: 21px; }
  .accounts { gap: 26px; }
  .account { padding: 22px 18px; }
  .account-top { gap: 10px; }
  .account-top h3 { font-size: 17px; }
  .account-top .pill { font-size: 11px; }
  .account-top p { font-size: 12px; }
  .account textarea { min-height: 160px; }
  .consent { font-size: 12px; }
  .submit-row { gap: 20px; }
  .app-footer { align-items: flex-start; }
  .app-footer small { font-size: 11px; }
  .game-top { display: block; }
  .game-top h1 { font-size: 24px; }
  .game-top .button-row { margin-top: 10px; justify-content: space-between; }
  .game-top .pill, .game-top .text-link { font-size: 12px; }
  .game-layout { grid-template-columns: 1fr; gap: 23px; }
  .stage-frame { padding: 7px 7px 16px; }
  .stage-footer, .stage-footer .text-link { font-size: 12px; }
  .moment-note { font-size: 14px; }
  .story-card { padding: 22px 19px; }
  .role-heading h2 { font-size: 21px; }
  .narrative { font-size: 18px; }
  .draft-label { font-size: 12px; }
  .generation-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .generation-steps li { font-size: 13px; }
  .ending-head h1 { font-size: 28px; }
  .studio-intro { padding-top: 0; padding-bottom: 23px; }
  .studio-intro h1 { font-size: 28px; }
  .studio-intro p { font-size: 14px; }
  .studio-sidebar nav a { min-height: 44px; font-size: 13px; }
  .node { padding: 20px 16px; }
  .node-heading { gap: 9px; flex-wrap: wrap; }
  .node-heading > div { flex: 1; min-width: 130px; }
  .node-heading h2 { font-size: 20px; }
  .node-heading p { font-size: 12px; }
  .node pre { font-size: 12px; }
  .story-table { font-size: 12px; }
}