.commission-picker{position:relative;flex:none;width:100%;margin:8px 0 2px;padding:10px 14px;border:1px solid #a88b54;border-radius:18px;background:#f4e8d8cc;overflow:hidden}
.commission-picker::after{content:'';position:absolute;left:14%;right:14%;top:49px;height:2px;background:linear-gradient(90deg,transparent,#98713f,#2f7157,#98713f,transparent);opacity:.72}
.commission-picker h3{position:relative;z-index:1;margin:0 0 8px;text-align:center;font:28px PaperBrush,PaperCJK,serif;color:#173f32}
.commission-picker>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.commission-choice{position:relative;min-height:112px;padding:8px 7px;display:grid;grid-template-columns:38px 1fr 42px;align-items:center;gap:6px;border:2px solid #9b855b;border-radius:14px;background:#f7eedc;color:#17362b;text-align:left;overflow:hidden}
.commission-choice::after{content:'';position:absolute;left:-55%;bottom:2px;width:52%;height:3px;background:linear-gradient(90deg,transparent,#2c8062 45%,#d7ae54);opacity:0}
.commission-choice.selected{border-color:#1d7356;box-shadow:inset 0 0 0 2px #76a88c,0 2px 7px #173c2833;background:#edf4e7}
.commission-choice.selected::after{animation:contract-choice-ink .72s ease-out both}
.route-knot{display:grid;width:34px;height:34px;place-items:center;border:2px solid #9b855b;border-radius:50%;background:#f8edd5;font:700 19px/1 PaperBrush,PaperCJK,serif;color:#704521}
.commission-choice.quick .route-knot{border-color:#31775c;color:#24634b}.commission-choice.deep .route-knot{border-color:#9d3e31;color:#8b2c25}
.commission-choice b{display:block;font:22px PaperCJK,serif;white-space:nowrap}
.commission-choice small{display:block;font:18px PaperCJK,serif;line-height:1.35;white-space:nowrap}
.commission-choice em{display:block;margin-top:3px;font:normal 16px PaperCJK,serif;color:#6a4a2f}
.commission-choice.deep em{color:#8b2c25}
.choice-rewards{display:grid;gap:0}.choice-rewards .sigil-icon{width:38px;height:38px;transform:scale(.66);transform-origin:center}
@keyframes contract-choice-ink{0%{left:-55%;opacity:0}18%{opacity:1}100%{left:103%;opacity:0}}

.contract-path{position:absolute;left:105px;top:882px;width:570px;height:33px;padding:2px 13px;border:1px solid #927445;border-radius:16px;background:#f7eedce8;display:flex;align-items:center;color:#244236;z-index:6;overflow:hidden}
.contract-path>h3{display:flex;gap:6px;align-items:center;min-width:118px;font:20px/1 PaperBrush,PaperCJK,serif}.contract-path>h3 em{font:normal 14px PaperCJK,serif;color:#8b3326}
.contract-route{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.contract-stage{display:grid;grid-template-columns:19px 24px minmax(75px,1fr) 28px;align-items:center;gap:3px;min-width:0;opacity:.58}.contract-stage.active,.contract-stage.done{opacity:1}.contract-stage b{display:none}.contract-stage small{display:block;font:15px/1 PaperCJK,serif;white-space:nowrap}.contract-stage .contract-gem{width:22px;height:22px;object-fit:contain}.contract-stage .sigil-icon{width:27px;height:27px;transform:scale(.48)}
.contract-seal{display:grid;width:18px;height:18px;place-items:center;border:1px solid #947044;border-radius:50%;font:700 12px/1 PaperCJK,serif}.contract-stage.done .contract-seal{border-color:#24664d;background:#2c8062;color:#fff}
.contract-thread{font:normal 12px/1 PaperCJK,serif;color:#a57c3e}.echo-active .contract-thread{animation:echo-thread-awake 1.1s ease-in-out infinite alternate}.complete .contract-thread{color:#b02e29;text-shadow:0 0 8px #e5b65d}
.mobile-task-summary{display:none}
@keyframes echo-thread-awake{from{opacity:.3;transform:scale(.75)}to{opacity:1;transform:scale(1.18)}}

.result-commission{position:relative;z-index:2;width:390px;min-height:48px;margin:-8px auto 4px;padding:5px 12px;border:1px solid #9b855b;border-radius:18px;background:#f7eedccc;color:#493520;display:grid;grid-template-columns:34px 1fr 18px 34px 1fr;align-items:center;gap:4px;font:16px PaperCJK,serif;text-align:left}
.result-commission p{font-size:16px;line-height:1.2;text-align:left}.result-commission>i{font-style:normal;color:#9b7140;text-align:center}.result-contract-seal{display:grid;width:30px;height:30px;place-items:center;border:2px solid #a17143;border-radius:50%;font:700 17px/1 PaperBrush,PaperCJK,serif}.result-commission.earned,.result-commission.complete{border-color:#1d7356;color:#174535;background:#edf4e7dd}.result-commission.complete .result-contract-seal{background:#287458;color:#fff;box-shadow:0 0 0 3px #e6d197,0 0 12px #d6b655}

.modal.echo-choice{width:650px;min-height:690px;padding:72px 78px 60px}.modal.echo-choice h2{margin-bottom:10px}.echo-choice-lead{font-size:25px!important;line-height:1.4!important;margin:0 0 14px!important}.echo-choice-grid{width:100%;display:grid;gap:14px}.echo-choice-card{position:relative;min-height:132px;padding:13px 16px;display:grid;grid-template-columns:48px 1fr 62px;align-items:center;gap:12px;border:3px solid #347257;border-radius:18px;background:linear-gradient(100deg,#f8efdc,#e8f0df);color:#17362b;text-align:left;box-shadow:inset 0 0 0 3px #d5c49c,0 5px 12px #263c2d2b}.echo-choice-card.risk{border-color:#963d31;background:linear-gradient(100deg,#f8ead8,#f3ded2)}.echo-choice-card b{display:block;font:28px/1.2 PaperBrush,PaperCJK,serif}.echo-choice-card small{display:block;font:22px/1.3 PaperCJK,serif}.echo-choice-card em{display:block;margin-top:5px;font:normal 20px/1.25 PaperCJK,serif;color:#6e472f}.echo-choice-card.risk em{color:#8b2c25}.echo-choice-card .route-knot{width:44px;height:44px;font-size:24px}.echo-choice-card .sigil-icon{width:58px;height:58px;transform:scale(.8)}.echo-choice-card:focus-visible{outline:6px solid #d9b850;outline-offset:3px}.echo-choice-card:disabled{filter:grayscale(.65);opacity:.55}.modal.echo-choice .tip-note{font-size:22px!important;line-height:1.4;margin:16px 0 0}

/* r46: the contract occupies the former helper band on ordinary screens.
   Tool instructions and transient feedback temporarily take that band over,
   so the contract never touches or obscures the three tool medallions. */
#stage[data-tall=false][data-mode=playing] .hud-helper:not(.tool-instruction){display:none}
#stage[data-tall=false][data-mode=playing]:has(.hud-helper.tool-instruction) .contract-path,
#stage[data-tall=false][data-mode=playing]:has(#toast.show) .contract-path{visibility:hidden}

.commission-explainer{margin:1px 0 6px!important;font-size:20px!important;line-height:1.3!important;color:#5d4933}
.intro-world{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:18px;width:100%;margin-top:10px}
.intro-world .intro-hero{margin:0;width:190px;height:92px}
.intro-world>div>p{font-size:23px!important;line-height:1.3;text-align:left}
.intro-world ul{font-size:21px;line-height:1.35;margin:3px 0;padding-left:25px}

#stage[data-tall=true]{transform-origin:50% 50%;background-color:#efe2c8;background-repeat:repeat-y;background-size:780px 1080px}
#stage[data-tall=true]::after{content:'';position:absolute;left:0;right:0;top:1078px;bottom:0;pointer-events:none;z-index:-2;background:linear-gradient(#efe2c800,#efe2c8 68px),url('../assets/images/paper-texture.png') center top/780px 1080px repeat-y}
#stage[data-tall=true] #scenery{height:1080px;bottom:auto}
#stage[data-tall=true] #screen{bottom:auto;height:var(--logical-height)}
#stage[data-tall=true][data-mode=playing] .contract-path{left:52px;top:1000px;width:676px;height:360px;padding:34px 38px;display:block;border:0;border-radius:26px;background:linear-gradient(#f8eedeea,#efe0c6ed);box-shadow:inset 0 0 0 3px #376d57,inset 0 0 0 9px #d9c79f,0 14px 32px #243a2f2e;overflow:visible}
#stage[data-tall=true][data-mode=playing] .contract-path::before,#stage[data-tall=true][data-mode=playing] .contract-path::after{content:'';position:absolute;top:-12px;bottom:-12px;width:34px;border:4px solid #9b7040;border-radius:18px;background:#2f7056;box-shadow:inset 0 0 0 5px #d7c08a}
#stage[data-tall=true][data-mode=playing] .contract-path::before{left:-18px}#stage[data-tall=true][data-mode=playing] .contract-path::after{right:-18px}
#stage[data-tall=true] .contract-path>h3{width:100%;justify-content:space-between;font-size:34px;line-height:1.2;margin-bottom:20px}#stage[data-tall=true] .contract-path>h3 em{font-size:25px}
#stage[data-tall=true] .contract-route{height:118px;gap:13px}#stage[data-tall=true] .contract-stage{grid-template-columns:42px 56px minmax(150px,1fr) 58px;gap:8px;padding:12px;border:1px solid #aa9064;border-radius:18px;background:#fbf0dc;min-width:0}#stage[data-tall=true] .contract-stage.active{border:3px solid #2c7759;box-shadow:0 0 0 4px #e4d4a9,0 0 18px #376f5266}#stage[data-tall=true] .contract-stage b{display:block;font:25px/1.2 PaperBrush,PaperCJK,serif;white-space:nowrap}#stage[data-tall=true] .contract-stage small{font-size:22px;line-height:1.3}#stage[data-tall=true] .contract-seal{width:38px;height:38px;font-size:23px}#stage[data-tall=true] .contract-stage .contract-gem{width:52px;height:52px}#stage[data-tall=true] .contract-stage .sigil-icon{width:56px;height:56px;transform:scale(.82)}#stage[data-tall=true] .contract-thread{font-size:22px}
#stage[data-tall=true] .mobile-task-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}#stage[data-tall=true] .mobile-task-summary p{padding:13px 16px;border-top:1px solid #af9468;font-size:23px;line-height:1.35;text-align:left}#stage[data-tall=true] .mobile-task-summary b{display:block;font:27px/1.25 PaperBrush,PaperCJK,serif;color:#1e5542}#stage[data-tall=true] .mobile-task-summary span{display:block;margin-top:4px}
#stage[data-tall=true] .hud-helper{top:1395px;font-size:30px}#stage[data-tall=true] .tool-bar{top:1455px}#stage[data-tall=true] #feedback{height:var(--logical-height)}
#stage[data-tall=true] #overlay{height:var(--logical-height)}#stage[data-tall=true] .scrim{align-items:start;padding-top:120px}#stage[data-tall=true] .modal{max-height:calc(var(--logical-height) - 240px)}

/* The tall route decision keeps both complete choices in the initial viewport.
   At the 390px CSS boundary these sizes render at 12-14px, not the former 7-9px. */
#stage[data-tall=true] .modal.intro .commission-picker{margin-top:0;padding:14px 18px}
#stage[data-tall=true] .modal.intro .commission-picker h3{font-size:34px;margin-bottom:12px}
#stage[data-tall=true] .modal.intro .commission-picker>div{grid-template-columns:1fr;gap:10px}
#stage[data-tall=true] .modal.intro .commission-choice{min-height:118px;padding:10px 13px;grid-template-columns:48px 1fr 58px;gap:10px}
#stage[data-tall=true] .modal.intro .commission-choice b{font-size:27px}
#stage[data-tall=true] .modal.intro .commission-choice small{font-size:24px;line-height:1.3}
#stage[data-tall=true] .modal.intro .commission-choice em{font-size:22px}
#stage[data-tall=true] .modal.intro .route-knot{width:43px;height:43px;font-size:24px}
#stage[data-tall=true] .modal.intro .choice-rewards .sigil-icon{width:50px;height:50px;transform:scale(.8)}
#stage[data-tall=true] .modal.intro .commission-explainer{font-size:23px!important;margin:6px 0 4px!important}
#stage[data-tall=true] .modal.intro .intro-world{margin-top:8px}
#stage[data-tall=true] .modal.echo-choice{width:676px;min-height:780px;padding:90px 72px 70px}#stage[data-tall=true] .modal.echo-choice h2{font-size:45px}#stage[data-tall=true] .echo-choice-lead{font-size:30px!important}#stage[data-tall=true] .echo-choice-card{min-height:160px;grid-template-columns:58px 1fr 72px}#stage[data-tall=true] .echo-choice-card b{font-size:34px}#stage[data-tall=true] .echo-choice-card small{font-size:27px}#stage[data-tall=true] .echo-choice-card em{font-size:25px}#stage[data-tall=true] .modal.echo-choice .tip-note{font-size:27px!important}

/* The 1080px mother composition stays intact; on tall screens the complete
   result group moves as one unit into the otherwise empty lower parchment. */
#stage[data-tall=true][data-mode=result] .result-mother-heading,
#stage[data-tall=true][data-mode=result] .result-title,
#stage[data-tall=true][data-mode=result] .result-sub,
#stage[data-tall=true][data-mode=result] .result-scroll,
#stage[data-tall=true][data-mode=result] .result-buttons{transform:translateY(230px)}