/* Shared production skin. Layout and gameplay controllers remain chapter-owned. */
body {background:radial-gradient(ellipse at 50% 15%,#30443a,var(--ui-warm-dark));color:var(--ui-ivory);font-family:var(--ui-font-body);}
main {width:min(1600px,96vw,calc((100svh - 120px)*16/9));margin:12px auto;}
#stage {container-type:inline-size;background:var(--ui-ink-deep);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow),0 0 0 1px var(--ui-line);}
main > header {min-height:48px;margin-bottom:12px;gap:16px;}
.brand {gap:10px;}.brand h1 {font:600 clamp(20px,1.7vw,28px)/1.2 var(--ui-font-title);color:var(--ui-ivory);letter-spacing:.1em;}.brand h1 span {font:inherit;}.brand p {font:500 13px/1.4 var(--ui-font-body);color:var(--ui-muted);letter-spacing:.08em;}.badge {display:none;}.seal {background:var(--ui-stamp);border-color:var(--ui-accent);color:var(--ui-ivory);border-radius:var(--ui-radius);}
#stage :is(h2,h3) {font-family:var(--ui-font-title);font-weight:600;}
#stage :is(button,[role="button"]) {font-family:var(--ui-font-body);}
/* Buttons: primary by default; named variants share the same state language. */
:is(#journey,#reset-confirm,.realm-actions,#lushan-finale,.mountain-journal-sheet) button,#journey-open,#lushan-book,#intro-play {min-height:var(--ui-button-height);border:var(--ui-border) solid var(--ui-line);border-radius:var(--ui-radius);padding:10px 22px;color:var(--ui-ivory);background:var(--ui-panel);box-shadow:var(--ui-inset),0 4px 12px #10221b44;font:600 var(--ui-body)/1.5 var(--ui-font-body);cursor:pointer;transition:background var(--ui-fast),border-color var(--ui-fast),box-shadow var(--ui-fast),transform var(--ui-fast);}
:is(#journey,#reset-confirm,.realm-actions,#lushan-finale,.mountain-journal-sheet) button:not(:disabled):hover,#journey-open:hover,#lushan-book:hover {border-color:var(--ui-gold);box-shadow:var(--ui-inset),var(--ui-glow);transform:translateY(-1px);}
:is(#journey,#reset-confirm,.realm-actions,#lushan-finale,.mountain-journal-sheet) button:focus-visible,#journey-open:focus-visible,#lushan-book:focus-visible {outline:2px dashed var(--ui-focus);outline-offset:4px;transform:none;}
:is(#journey,#reset-confirm,.realm-actions,#lushan-finale,.mountain-journal-sheet) button:not(:disabled):active {transform:translateY(1px);filter:brightness(.94);}
:is(#journey,#reset-confirm,.realm-actions,#lushan-finale,.mountain-journal-sheet) button:disabled {opacity:.45;cursor:default;box-shadow:none;transform:none;}
#journey button.quiet,.realm-actions button.quiet,.mountain-journal-sheet .journal-tabs button {background:#17382b65;box-shadow:none;color:var(--ui-muted);font-size:var(--ui-small);}
#reset-accept,#market-choice[data-mode="retry"] .answer-card {border-color:var(--ui-stamp);background:linear-gradient(125deg,#593e34,#24382d);}
#realm-replay,#observation-back {color:var(--ui-muted);}
/* One shell: frame, backdrop, type, padding and opening rhythm. */
:is(#market-choice,#lushan-finale,#lushan-journal,#reset-confirm) {background:var(--ui-backdrop);backdrop-filter:blur(2px);color:var(--ui-ivory);z-index:var(--ui-z-modal);}
#journey {z-index:var(--ui-z-menu);background:linear-gradient(#17382be0,#142e2bf0),url('/assets/maps/bg_wenjing_zhimi.png') center/cover;}
#reset-confirm {z-index:var(--ui-z-confirm);}
.ui-modal-shell {border:var(--ui-border) solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-inset),var(--ui-shadow);background:var(--ui-panel);animation:ui-open var(--ui-enter) ease-out both;}
#market-choice .market-card-sheet {width:min(94%,var(--ui-modal-width));min-height:0;margin:3% auto;padding:var(--ui-modal-pad);}
#market-choice .boss-card-sheet {width:100%;height:100%;margin:0;border:none;box-shadow:none;background:transparent;padding:1.5% 5%;animation:none;}
#market-choice[data-mode="boss"] {background:linear-gradient(0deg,#142e2bf2,transparent 64%);backdrop-filter:none;}
.lushan-finale-content.ui-modal-shell {width:94%;min-height:94%;margin:1.5% auto;padding:2% 3%;}
#lushan-finale[data-phase="memory"] .lushan-finale-content {height:94%;}
.mountain-journal-sheet.ui-modal-shell {width:94%;max-height:94%;padding:2%;}
#reset-confirm > .ui-modal-shell {width:min(90%,650px);padding:var(--ui-modal-pad);text-align:center;}
#reset-confirm p {font:500 var(--ui-body)/var(--ui-leading) var(--ui-font-body);color:var(--ui-ivory);}
#stage :is(#market-choice,#lushan-finale,.journey-sheet,.mountain-journal-sheet) h2 {font-size:var(--ui-h2);line-height:1.5;color:var(--ui-ivory);letter-spacing:.06em;}
#stage :is(#market-choice,#lushan-finale,.journey-sheet,.mountain-journal-sheet) p {font:500 var(--ui-body)/var(--ui-leading) var(--ui-font-body);letter-spacing:.025em;}
#stage :is(#market-choice,#lushan-finale,.journey-sheet,.mountain-journal-sheet) small {font:500 var(--ui-small)/1.5 var(--ui-font-body);color:var(--ui-muted);letter-spacing:.08em;}
/* One card structure, image/text content slots, and mutually distinct states. */
#stage .ui-card[class] {position:relative;color:var(--ui-ivory);border:var(--ui-border) solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);box-shadow:var(--ui-inset);font:600 var(--ui-body-large)/1.5 var(--ui-font-body);transition:border-color var(--ui-fast),box-shadow var(--ui-fast),transform var(--ui-fast),opacity var(--ui-fast);animation:ui-open var(--ui-enter) both;}
#stage .ui-card .ui-card-label {font:inherit;color:inherit;line-height:1.5;}
#stage .ui-card .ui-card-image {object-fit:contain;object-position:center;width:100%;background:var(--ui-ink-deep);}
@media(hover:hover) {#stage .ui-card[class]:hover:not(:disabled) {outline:none;border-color:var(--ui-gold);box-shadow:var(--ui-inset),var(--ui-glow);transform:translateY(-2px);}}
#stage .ui-card[class]:focus-visible {outline:2px dashed var(--ui-focus);outline-offset:4px;box-shadow:var(--ui-inset);transform:none;}
#stage .ui-card[class]:is(.card-selected,.memory-selected) {outline:2px solid var(--ui-gold);outline-offset:1px;border-color:var(--ui-gold);box-shadow:inset 0 0 20px var(--ui-accent-soft),var(--ui-glow);}
#stage .ui-card[class]:is(.card-selected,.memory-selected):focus-visible {outline:2px dashed var(--ui-focus);outline-offset:4px;}
#stage .ui-card[class].card-correct {animation:ui-confirm 500ms ease-out;}
#stage .ui-card[class].card-reconsider {border-color:var(--ui-stamp);opacity:.68;transform:translateX(-2px);}
#stage .ui-card[class]:disabled {opacity:.45;cursor:default;transform:none;box-shadow:none;}
#stage .ui-card[class].card-dragging {z-index:4;transition:none;animation:none;cursor:grabbing;box-shadow:0 14px 30px #10221b99;}
.ui-drag-handle::before {content:'⋮⋮';letter-spacing:3px;margin-right:8px;color:var(--ui-gold);}
.answer-feedback {font:600 var(--ui-body)/1.5 var(--ui-font-body);color:var(--ui-ivory);}
.boss-health {color:var(--ui-ivory);font:600 var(--ui-h3)/1.4 var(--ui-font-title);}
.boss-health [role="progressbar"] {height:14px;background:var(--ui-ink-deep);border:1px solid var(--ui-line);}
.boss-health i {background:linear-gradient(90deg,var(--ui-stamp),var(--ui-gold));transition:width var(--ui-enter);}
.boss-drop {border-color:var(--ui-line);}.boss-drop span {font:500 var(--ui-small)/1.4 var(--ui-font-body);background:var(--ui-ink);color:var(--ui-ivory);}.boss-drop.drop-ready {border-color:var(--ui-gold);box-shadow:inset 0 0 32px var(--ui-accent-soft);}
#market-choice[data-feedback="correct"] .answer-feedback {color:var(--ui-gold);animation:ui-damage 700ms ease-out;}
#market-choice[data-feedback="incorrect"] .answer-feedback {color:var(--ui-muted);animation:ui-damage 700ms ease-out;}
/* Dialogue is one fixed portrait stage with a compact lower text band. */
#story {z-index:var(--ui-z-story);background:linear-gradient(0deg,#10272490,transparent 70%);}
body:has(#stage.story-active) #journey-open {visibility:hidden;pointer-events:none;}
#story-portrait {height:82%;width:43%;bottom:6%;transition:transform var(--ui-enter),opacity var(--ui-enter);}
#story-portrait.portrait-momo {height:74%;width:38%;bottom:17%;}
#story-box {left:5%;width:90%;bottom:3%;min-height:25%;max-height:33%;overflow:auto;padding:1.4% 2.5%;border:1px solid var(--ui-line);border-block:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);box-shadow:var(--ui-inset),var(--ui-shadow);}
#story-box::before {background:var(--ui-accent);}
#story-name {display:inline-block;margin:0 0 .45em;padding:3px 12px;border-left:2px solid var(--ui-stamp);border-bottom:1px solid var(--ui-line);color:var(--ui-gold);font:600 var(--ui-h3)/1.3 var(--ui-font-title);letter-spacing:.08em;}
#story-text {font:600 var(--ui-body-large)/1.6 var(--ui-font-body);color:var(--ui-ivory);letter-spacing:.025em;}
#story-text.story-large {font:600 var(--ui-h2)/1.5 var(--ui-font-title);letter-spacing:.08em;}
#story-hint {font:500 var(--ui-small)/1.4 var(--ui-font-body);color:var(--ui-muted);margin-top:.5em;}
.story-next {color:var(--ui-gold);right:2%;bottom:12%;}
#stage :is(.reconstruction,.foot-meaning,.market-beat,#intro-whisper) {border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);color:var(--ui-ivory);box-shadow:var(--ui-inset),var(--ui-shadow);}
#stage :is(.reconstruction,.foot-meaning,.market-beat) h2 {font:600 var(--ui-h2)/1.5 var(--ui-font-title);letter-spacing:.08em;}
#stage :is(.reconstruction,.foot-meaning,.market-beat) p {font:500 var(--ui-body)/1.7 var(--ui-font-body);color:var(--ui-ivory);}
#stage .meaning-row {font:500 var(--ui-small)/1.6 var(--ui-font-body);}
#stage :is(.reconstruction,.foot-meaning) :is(em,small) {font:600 var(--ui-small)/1.5 var(--ui-font-body);color:var(--ui-gold);}
#stage :is(.chapter-page,.chapter-repair) {border-color:var(--ui-line);background:linear-gradient(110deg,var(--ui-paper),#d9decd);color:var(--ui-paper-text);box-shadow:var(--ui-shadow);}
/* Literary / reflection slots use restrained ivory rather than web-white cards. */
#lushan-finale .ui-literary,#lushan-finale .ui-info {border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:linear-gradient(125deg,#f1ead8,#e5e4d4);color:var(--ui-paper-text);box-shadow:var(--ui-shadow);}
#stage #lushan-finale :is(.ui-literary,.ui-info) :is(h2,p,small) {color:var(--ui-paper-text);}
#stage #lushan-finale .ui-literary h2 {font-size:var(--ui-h1);}
#stage #lushan-finale .ui-literary .finale-poem p {font:600 var(--ui-body-large)/1.9 var(--ui-font-title);letter-spacing:.12em;}
.ui-literary::before,.ui-literary::after,.ui-info::before,.ui-info::after {border-color:var(--ui-line);}
/* Identical completion hierarchy, with marks presented as stamped ink. */
#realm-complete {background:var(--ui-backdrop);backdrop-filter:blur(2px);z-index:var(--ui-z-modal);}
.ui-completion,.realm-summary.ui-completion {width:min(90%,860px);padding:3% 5%;margin:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);color:var(--ui-ivory);box-shadow:var(--ui-inset),var(--ui-shadow);text-align:center;animation:ui-open var(--ui-completion) both;}
#stage .ui-completion .ui-completion-title {font:600 var(--ui-h1)/1.5 var(--ui-font-title);margin:.3em 0;}
.ui-completion :is(.ui-repair-status,.ui-completion-description) {font:500 var(--ui-body)/1.7 var(--ui-font-body);color:var(--ui-muted);letter-spacing:.04em;}
.ui-mark-group {margin:20px auto;}.ui-mark-group small {display:block;color:var(--ui-muted);}
.ui-mark,.chapter-mark-award > strong,.guanzhao-mark {display:inline-block!important;border:2px double var(--ui-stamp);padding:10px 24px;margin:10px auto;color:var(--ui-gold);font:600 var(--ui-h1)/1.4 var(--ui-font-title);letter-spacing:.18em;box-shadow:inset 0 0 0 3px var(--ui-accent-soft);}
.ui-completion-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;}
#realm-return {margin:6px;}.realm-summary ul {font:500 var(--ui-small)/1.5 var(--ui-font-body);}
/* Journey is the same book's chapter index. */
.journey-sheet.ui-modal-shell {max-width:1160px;background:var(--ui-panel);}
.chapter-list {gap:var(--ui-space-4);}.chapter-list article {min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:linear-gradient(140deg,var(--ui-accent-soft),#10272450);box-shadow:var(--ui-inset);padding:24px 20px;}
.chapter-list article h3 {font:600 var(--ui-h2)/1.5 var(--ui-font-title);color:var(--ui-ivory);}
.chapter-list article[data-ui-theme="market"] {--ui-accent-soft:#b89a7526;--ui-stamp:#aa6c59;}
.chapter-list article[data-ui-theme="mountain"] {--ui-accent-soft:#91b6a526;--ui-stamp:#527e72;}
#journey .ui-chapter-mark {display:inline-block;padding:5px 12px;border:1px solid var(--ui-stamp);color:var(--ui-gold);font-size:var(--ui-small);}
.title-screen::before,.title-screen::after {color:var(--ui-gold);}.title-screen {border-color:var(--ui-line)!important;}
/* Shared HUD and contextual control line, never a list of ten keys. */
.quest-hud #task {font:600 var(--ui-small)/1.4 var(--ui-font-body);color:var(--ui-ivory);background:var(--ui-ink);border-color:var(--ui-line);}
.trail-sign.prompt-secondary {background:var(--ui-surface);color:var(--ui-ivory);border-color:var(--ui-line);box-shadow:var(--ui-inset),0 3px 10px #10221b55;}
.trail-sign.prompt-secondary.prompt-near {border-color:var(--ui-gold);box-shadow:var(--ui-inset),var(--ui-glow);}
main > footer {min-height:30px;margin-top:8px;justify-content:center;font:500 14px/1.5 var(--ui-font-body);color:var(--ui-muted);letter-spacing:.02em;text-align:center;}
#control-hint[data-context="explore"]::after {content:'';}.touch-control-hint {display:none;}
@keyframes ui-open {from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
@keyframes ui-confirm {50%{box-shadow:inset 0 0 22px var(--ui-accent-soft),0 0 16px #c8b58355;}}
@keyframes ui-damage {from{opacity:.5;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
@supports(transition-behavior:allow-discrete) {
  :is(#market-choice,#lushan-finale,#lushan-journal,#reset-confirm,#realm-complete) {opacity:1;transition:opacity var(--ui-enter),display var(--ui-enter) allow-discrete;}
  :is(#market-choice,#lushan-finale,#lushan-journal,#reset-confirm,#realm-complete)[hidden] {opacity:0;pointer-events:none;}
  @starting-style { :is(#market-choice,#lushan-finale,#lushan-journal,#reset-confirm,#realm-complete):not([hidden]) {opacity:0;} }
}
@media(max-width:900px) {main{width:min(98vw,calc((100svh - 110px)*16/9));}.header-journey button{font-size:15px!important;padding:8px 14px!important;}.brand p{font-size:12px;}.ui-modal-shell{--ui-modal-pad:18px;}.chapter-list article{padding:14px 12px;}#story-box{max-height:38%;}#story-text{font-size:20px;}.ui-completion,.realm-summary.ui-completion{padding:2% 4%;}.ui-mark-group{margin:8px auto;}}
@media(any-pointer:coarse) {#control-hint[data-context="explore"]{font-size:0;}#control-hint[data-context="explore"]::after{content:'搖桿移動 · 點按互動 · 「衝」衝刺';font-size:14px;}}
@media(max-height:600px) and (orientation:landscape) {main{width:min(98vw,calc((100svh - 86px)*16/9));margin:4px auto;}main>header{min-height:34px;margin-bottom:4px;}.brand h1{font-size:18px;}.brand p{display:none;}.seal{height:30px;width:28px;font-size:20px;}main>footer{min-height:24px;margin-top:4px;font-size:12px;}#story-box{max-height:43%;bottom:2%;}#story-text{font-size:18px;line-height:1.5;}#story-name{font-size:18px;}#story-hint{font-size:13px;}.ui-completion-actions{margin-top:8px;}#stage .ui-completion .ui-completion-title{font-size:26px;}.ui-mark{font-size:26px;padding:6px 18px;}}
@media(max-width:600px) and (orientation:portrait) {main{width:96vw;}main>header{gap:6px;}.brand h1{font-size:18px;}.brand h1 span{display:block;font-size:14px;}.brand p{display:none;}#journey-open{min-height:44px;}#story{position:fixed;inset:0;z-index:var(--ui-z-story);}#story-portrait{height:74%;width:68%;bottom:24%;}#story-portrait.portrait-momo{height:64%;width:65%;bottom:30%;}#story-box{left:4%;width:92%;bottom:max(3%,env(safe-area-inset-bottom));min-height:24%;max-height:40%;padding:18px;}#story-text{font-size:20px;}#story-name{font-size:21px;}#story-hint{font-size:14px;}.chapter-list{display:grid;grid-template-columns:1fr;}#journey{position:fixed;inset:0;}.journey-sheet.ui-modal-shell{width:94%;max-height:94%;}.lushan-finale-content.ui-modal-shell{min-height:96%;margin:2% auto;}#market-choice .market-card-sheet{margin:4% auto;}#market-choice .boss-card-sheet{margin:0;}.ui-completion{width:94%;}.ui-completion-actions button{width:100%;}.ui-mark{font-size:32px;}.ui-modal-shell{padding-bottom:max(18px,env(safe-area-inset-bottom));}}
@media(prefers-reduced-motion:reduce) {#stage *,main button{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
@media(max-width:600px) and (orientation:portrait) {#realm-complete{position:fixed;inset:0;overflow:auto;padding:24px 0;}.realm-summary.ui-completion{width:92%;}.ui-completion-description{max-width:30ch;margin:auto;}}