/* Campaign layout, with separate image layers and an optional layout sketch fallback. */
.in-campaign{background:#33271f;color:#f6edda}
.in-campaign>.wrap{display:none}
.campaign-screen{--paper:#f3e8ce;--ink:#493a28;--sage:#536c50;box-sizing:border-box;width:100%;max-width:570px;margin:0 auto;min-height:100svh;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background-image:var(--campaign-background,none),radial-gradient(ellipse at 40% 10%,#74604366,transparent 60%),repeating-linear-gradient(91deg,#47362a33 0 2px,transparent 2px 70px);background-size:cover,auto,auto;background-position:top center;}
.campaign-screen:is([data-view=stages],[data-view=chapters]){--campaign-gutter:18px;--campaign-nav-top:env(safe-area-inset-top,0px);--campaign-nav-clearance:calc(var(--campaign-nav-top) + 50px)}
.campaign-screen[data-view=stages]{max-width:960px;position:relative;isolation:isolate;background-image:none}
/* The desk is sized to the viewport, independent of the selected description. */
.campaign-screen[data-view=stages]::before{content:"";position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,960px);height:100vh;height:100lvh;z-index:-1;pointer-events:none;background-color:#33271f;background-image:var(--campaign-background,none);background-size:cover;background-position:center top;background-repeat:no-repeat}
.campaign-header{text-shadow:0 1px 3px #271b12;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;color:#d5c4a7;font-size:11px}
.campaign-screen button{font:inherit;min-height:44px;touch-action:manipulation}
.campaign-header button,.campaign-subnav button{border:1px solid #b89c6c66;background:#3b3027;color:#f7ecd6;padding:8px 13px;border-radius:10px;font-size:12px}
.campaign-screen h1{font-size:26px;text-align:center;line-height:1.5;letter-spacing:.1em;margin:0;color:#ffedc5}
.campaign-screen h1 .campaign-art{position:static;display:block;width:min(100%,280px);height:70px;object-fit:contain;margin:auto}
.campaign-subtitle{text-shadow:0 1px 3px #271b12,0 0 8px #271b1299;text-align:center;font-size:13px;line-height:1.8;margin:8px 0 24px;color:#e0d0b5}
.campaign-screen :is(button,summary):focus-visible{outline:3px solid #efbd5a;outline-offset:4px}
.campaign-screen :is(h1,h2)[tabindex="-1"]:focus{outline:none}
.campaign-paper{position:relative;background:var(--paper);color:var(--ink);border:1px solid #b29a69;border-radius:18px;box-shadow:0 12px 26px #100b0733,inset 0 0 0 5px #fff7e533;isolation:isolate}
.campaign-paper::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;border:0 solid transparent;border-image-source:var(--campaign-frame,none);border-image-slice:var(--campaign-frame-slice,0);border-image-width:var(--campaign-frame-width,0);border-image-outset:var(--campaign-frame-outset,0)}
.chapter-card{padding:10px}
.has-campaign-frame .campaign-paper{background:transparent;border-color:transparent;box-shadow:0 10px 25px #100b0722}
.has-campaign-frame .chapter-card{padding:28px}
.chapter-illustration{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:10px;background:linear-gradient(150deg,#e4e4c3,#aec1a2);border:1px solid #b5b68e}
.chapter-sketch{display:block;width:100%;height:100%}
.chapter-illustration.has-art .chapter-sketch{visibility:hidden}
.campaign-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.art-chapterIllustration{object-fit:cover}
.chapter-ribbon{position:absolute;top:14px;left:14px;padding:7px 13px;border:1px solid #d0b981;border-radius:5px;background:#4f654eee;color:#fff2d4;font-size:12px;letter-spacing:.15em;box-shadow:0 3px 9px #33432a22}
.chapter-copy{padding:23px 16px 14px}
.campaign-eyebrow{margin:0 0 9px;color:#716247;font-size:12px;letter-spacing:.07em;line-height:1.8}
.chapter-copy h2{font-size:29px;line-height:1.5;margin:0 0 12px;letter-spacing:.13em;color:#493a28}
.chapter-description{font-size:13px;line-height:1.95;margin:0;color:#64553f}
.campaign-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:23px 0;color:#706047;font-size:12px}
.campaign-progress strong{font-size:21px;color:#506a4b}.campaign-progress strong small{font-size:11px;color:#6a604b;font-weight:500}
.campaign-progress progress{grid-column:1/-1;display:block;appearance:none;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;background:#d9ccb0;color:#708563}
.campaign-progress progress::-webkit-progress-bar{background:#d9ccb0;border-radius:8px}.campaign-progress progress::-webkit-progress-value{background:#708563;border-radius:8px}.campaign-progress progress::-moz-progress-bar{background:#708563;border-radius:8px}
.campaign-screen .campaign-primary{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding:13px 14px;background:#536c50;color:#fff8e5;border:1px solid #8b9d6c;box-shadow:inset 0 0 0 3px #ffffff0b,0 3px 0 #354c34;border-radius:10px;font-size:15px;font-weight:700;line-height:1.6}
/* Center the visible arrow geometry, independent of the font's baseline. */
.campaign-chevron{display:block;flex:none;width:12px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.node-badge .campaign-chevron{width:12px;height:12px}
.campaign-primary:active{transform:translateY(1px)}
.chapter-coming{text-shadow:0 1px 3px #271b12;display:flex;justify-content:center;align-items:center;gap:15px;margin:26px 0 8px;padding:10px;color:#e2cfab;font-size:13px;line-height:1.8}
.chapter-coming>span{font-size:29px}.chapter-coming p{margin:0}.chapter-coming small{display:block;font-size:11px;color:#c3b59b}
.campaign-journey{display:grid;gap:10px;align-items:start}
.stage-list{min-width:0}
.campaign-map{position:relative;aspect-ratio:2/3;background:#e8dfbd;border:1px solid #d2c294;border-radius:12px;box-shadow:0 7px 18px #130d0529;margin:0;isolation:isolate}
.map-landscape,.map-route{position:absolute;inset:0;width:100%;height:100%;border-radius:11px;pointer-events:none}
.campaign-map.has-art .map-landscape,.campaign-map.has-art .map-route{display:none}
.art-map{border-radius:11px;object-fit:contain}
.map-route path{fill:none;stroke:#a29066;stroke-width:6;stroke-dasharray:10 14;stroke-linecap:round;opacity:.65}
.map-route path.is-open{stroke:#667f53;stroke-width:8;stroke-dasharray:0;opacity:.8}
.campaign-screen .map-node{position:absolute;left:var(--map-x);top:var(--map-y);transform:translate(-50%,-26px);display:flex;flex-direction:column;align-items:center;gap:4px;width:52px;height:52px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50%;color:#423922;line-height:1.4;z-index:1}
.map-node .stage-number{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#f8efd4;border:3px solid #a48a59;box-shadow:0 2px 0 #796540,0 4px 10px #43391c22;font-size:15px;font-weight:900;color:#594629}
.stage-number>span:not(.node-badge){position:relative;z-index:1}
.map-node .stage-number.has-art{border:0;box-shadow:none;background:transparent}
.map-node .stage-name{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:max-content;max-width:140px;pointer-events:none;display:block;padding:2px 5px;border-radius:5px;background:#f6efd8ed;font-size:12px;color:#473d29;font-weight:700}
.map-node em{position:absolute;top:75px;left:50%;transform:translateX(-50%);width:max-content;pointer-events:none;font-size:10px;font-style:normal;color:#5f5137;background:#efe4c8e8;border-radius:12px;padding:1px 6px}
.map-node.is-cleared .stage-number{border-color:#617c56;color:#425e3c}.map-node.is-cleared em{color:#35512d}
.map-node.is-next .stage-number,.map-node.is-story .stage-number{outline:3px solid #ba8c3a;outline-offset:4px;background:#fff4cf}
.map-node.is-next em,.map-node.is-story em{background:#5a704e;color:#fff9e6}
.map-node[aria-pressed=true] .stage-number{outline:3px solid #48673b;outline-offset:5px;box-shadow:0 0 0 9px #fff9db88}
.map-node[aria-pressed=true] .stage-name{background:#4c6544;color:#fffbe9}
.campaign-screen .map-node:disabled{opacity:1;cursor:not-allowed}
.map-node.is-locked .stage-number{background:#cfc5a9;border-color:#a39779;box-shadow:none;color:#70654e}
.map-node.is-locked .art-node{filter:saturate(.35) brightness(.78)}
.map-node.is-locked .stage-number.has-art{background:transparent}
.map-node.is-locked .stage-name{background:#eee4cbdd;color:#74694e}
.node-badge{position:absolute;right:-8px;bottom:-3px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:15px;background:#546e49;color:#fff9de;border:1px solid #fcf6df;z-index:2}
.is-locked .node-badge{background:#847658}
.map-lock{position:relative;width:11px;height:9px;border:2px solid #f3e6c8;border-radius:2px;margin-top:4px}
.map-lock::before{content:"";position:absolute;left:0;right:0;margin:auto;top:-8px;width:7px;height:7px;border:2px solid #f3e6c8;border-bottom:0;border-radius:5px 5px 0 0}
.map-lock.has-art{width:20px;height:20px;border:0;margin:0}.map-lock.has-art::before{display:none}
.campaign-map-header,.campaign-screen[data-view=chapters]>.campaign-header{position:sticky;top:var(--campaign-nav-top);z-index:10;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
/* Keep the navigation legible over the scrolling map, including the safe area. */
.campaign-map-header::before,.campaign-screen[data-view=chapters]>.campaign-header::before{content:"";position:absolute;inset:calc(-1 * var(--campaign-nav-top)) calc(-1 * max(var(--campaign-gutter),env(safe-area-inset-right))) -2px calc(-1 * max(var(--campaign-gutter),env(safe-area-inset-left)));z-index:-1;pointer-events:none;background-color:#38281e;background-image:linear-gradient(#38281eed,#493321ed),var(--campaign-background,none);background-size:auto,960px auto;background-position:center top;background-repeat:no-repeat;border-bottom:1px solid #bd996740;box-shadow:0 2px 6px #21150944}
.campaign-screen[data-view=stages] .map-node{scroll-margin-top:var(--campaign-nav-clearance);scroll-margin-bottom:12px}
.campaign-map-header nav{display:flex;align-items:center;gap:6px}
.campaign-screen .campaign-nav-button{--nav-wood-height:32px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:none;gap:3px;box-sizing:border-box;min-width:94px;height:44px;padding:8px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#fff0cf;font-size:12px;font-weight:700;line-height:1.4;text-shadow:0 1px 2px #201309;white-space:nowrap;cursor:pointer;transition:transform .12s}
/* Shared home footer frame: preserve both decorated ends; stretch only the wood. */
.campaign-nav-button::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:calc(6px - var(--nav-wood-height) * 95 / 152) calc(var(--nav-wood-height) * -31 / 152) calc(6px - var(--nav-wood-height) * 101 / 152) calc(var(--nav-wood-height) * -27 / 152);border-style:solid;border-color:transparent;border-width:0 calc(var(--nav-wood-height) * 120 / 152);border-image:var(--campaign-nav-frame,none) 0 120 0 120 fill / 0 calc(var(--nav-wood-height) * 120 / 152) stretch;filter:drop-shadow(0 2px 1px #20130888);transition:filter .12s}
.campaign-nav-icon{position:relative;display:block;flex:none;width:22px;height:24px;pointer-events:none}
.campaign-nav-label{position:relative;pointer-events:none}
.campaign-screen .campaign-nav-button:focus-visible{outline-offset:-2px}
.campaign-nav-button:enabled:hover::before{filter:brightness(1.12) drop-shadow(0 2px 1px #20130888)}
.campaign-nav-button:enabled:active{transform:translateY(1px)}
.campaign-nav-button:enabled:active::before{filter:brightness(.95) drop-shadow(0 1px 1px #20130866)}
.map-progress{flex:none;padding:5px 8px;border-radius:6px;background:#30261bdd;color:#f7e9cc;font-size:12px;white-space:nowrap}
.map-progress small{color:inherit;font-size:10px}
.campaign-screen[data-view=stages]{padding-top:max(2px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));padding-left:max(var(--campaign-gutter),env(safe-area-inset-left));padding-right:max(var(--campaign-gutter),env(safe-area-inset-right))}
.campaign-screen[data-view=chapters]{padding-top:max(2px,env(safe-area-inset-top));padding-left:max(var(--campaign-gutter),env(safe-area-inset-left));padding-right:max(var(--campaign-gutter),env(safe-area-inset-right))}
.campaign-screen[data-view=chapters]>.campaign-header{margin-bottom:14px}
.campaign-screen .campaign-map-title{font-size:18px;line-height:1.6;letter-spacing:.08em;margin:0 0 12px;text-shadow:0 1px 3px #271b12,0 0 8px #271b12}
.campaign-map-title small{font-size:11px;color:#ead4ae;letter-spacing:0;margin-right:5px}
.campaign-screen .map-story{--map-x:70%;--map-y:8%;z-index:2}
/* Reserve space below the last circle for its paper label, even on small maps. */
.campaign-screen .map-story[data-map-select=ending]{--map-x:18%;--map-y:min(91%,calc(100% - 50px))}
.story-book-icon{display:block;width:38px;height:38px;pointer-events:none}
.map-story.is-locked .story-book-icon{filter:saturate(.35) brightness(.78)}
.map-story:enabled .stage-number{transition:filter .12s,transform .12s}
.map-story:enabled:hover .stage-number{filter:brightness(1.08)}
.map-story:enabled:active .stage-number{transform:translateY(1px)}
.campaign-detail{--campaign-frame-width:28px;padding:20px;scroll-margin:12px;scroll-margin-top:var(--campaign-nav-clearance,12px);min-width:0}
.detail-deck{display:grid;min-width:0}
.detail-entry{grid-area:1/1;min-width:0;visibility:hidden;pointer-events:none;display:flow-root}
.detail-entry.is-selected{visibility:visible;pointer-events:auto}
.detail-heading{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.campaign-detail .campaign-eyebrow{flex:none;font-size:11px;letter-spacing:0;margin:0}
.campaign-detail h2{font-size:17px;line-height:1.5;margin:0;color:#493a28;overflow-wrap:anywhere}
.detail-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#5d6d4a;font-size:12px;line-height:1.8}
.detail-kind{display:inline-block;padding:1px 7px;background:#e3d8ba;border-radius:5px;color:#655536;font-size:11px}
.detail-description{font-size:13px;line-height:1.7;color:#66563d;margin:7px 0 10px}
.campaign-detail .campaign-primary{padding:8px 10px;font-size:14px;min-height:44px}
.campaign-map-hint{text-shadow:0 1px 3px #271b12,0 0 7px #271b12;text-align:center;color:#d6c8a9;font-size:12px;margin:25px 0 12px}
.campaign-note{text-shadow:0 1px 3px #271b12,0 0 7px #271b12;font-size:11px;color:#d5c5a8;line-height:1.9;text-align:center;margin:14px 0}
.campaign-options{max-width:530px;margin:6px auto 0;border-top:1px solid #96835c55;padding-top:10px;color:#caba9a;font-size:11px;line-height:1.9}
.campaign-options summary{cursor:pointer;min-height:44px;padding:10px 0}.campaign-storage-error{padding:8px;background:#48251de8;border-radius:6px}.campaign-options p{margin:6px 0}
.campaign-dev{margin-top:14px}.campaign-dev button{padding:10px 14px;border-color:#ba9480;color:#ffdebd;background:#4d392d;font-size:12px}
.chapter-completion{display:grid;gap:16px;padding:24px;background:#493b2e;border:1px solid #a68a5e;border-radius:15px}.chapter-completion p{line-height:1.9;font-size:14px}.chapter-completion button{background:#536c50;color:#fff4d8;border-color:#87976b}
.reset-confirm{border-color:#b98076;color:#ffd2c6}
@media(min-width:760px),(min-width:560px) and (max-height:540px){.campaign-journey{grid-template-columns:minmax(292px,1.15fr) minmax(220px,1fr);gap:20px}.stage-list{width:100%;max-width:420px;margin-inline:auto}.campaign-map{width:min(100%,max(292px,calc((100svh - 170px)*2/3)));margin-inline:auto}.campaign-detail{position:sticky;top:var(--campaign-nav-clearance,12px)}.campaign-screen[data-view=stages]{--campaign-gutter:20px}}
@media(min-width:560px) and (max-width:759px) and (max-height:540px){.campaign-screen[data-view=stages]{--campaign-gutter:12px}.campaign-journey{gap:12px}.campaign-detail{padding:20px 18px}.detail-heading{flex-wrap:wrap;gap:2px 8px}}
@media(max-width:360px){.campaign-screen:is([data-view=stages],[data-view=chapters]){--campaign-gutter:14px}.campaign-screen{padding-inline:14px}.campaign-header{font-size:10px;margin-bottom:18px}.campaign-screen h1{font-size:23px}.chapter-copy{padding:19px 10px 12px}.chapter-copy h2{font-size:26px}.chapter-description{font-size:12px}.campaign-detail{padding:20px}.campaign-map-header{gap:6px}.map-node .stage-name{max-width:132px}.map-node .stage-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){.campaign-screen *,.campaign-screen *::before{scroll-behavior:auto;transition:none;animation:none}}