/* The approved title stays untouched. Story and in-world guidance share its wood. */
.story-layout{grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;padding-bottom:max(clamp(40px,12dvh,112px),env(safe-area-inset-bottom))}
.story-recipe .story-layout{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.story-top>div{display:flex;align-items:center;gap:12px}.story-top b{font-size:12px;color:#805534}
.story-vignette{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;isolation:isolate}
.story-vignette::before{content:"";position:absolute;z-index:-1;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f8d79b88 0 48%,#f8d79b00 70%)}
.story-vignette .story-art{height:100%;width:100%;max-height:440px;object-fit:contain;filter:drop-shadow(0 8px 0 #9b682b15);animation:story-arrive .6s ease-out both}
.story-tag{position:absolute;z-index:1;top:7%;left:50%;transform:translateX(-50%);padding:6px 12px;background:#fff5de;color:#926033;border:1px solid #c5a370;border-radius:3px;font-size:10px;white-space:nowrap;box-shadow:0 2px 0 #a67b3e22}
.story-recipe .story-art{width:60%;max-height:300px}.story-recipe .story-vignette::before{width:76%;background:radial-gradient(circle,#e8bf6c77 0 42%,#edca8911 69%,transparent 70%)}
.story-route{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 8%;margin:0;color:#865d35}.story-route li{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px}.story-route li+li::before{content:'›';position:absolute;left:-10px;color:#bb925a}.story-route img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.story-copy{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:14px;padding:16px 12px}.story-speaker{display:flex;flex-direction:column;align-items:center;gap:5px}.story-speaker canvas{width:48px;height:66px;image-rendering:pixelated}.story-speaker span{font-size:10px;color:#a5633b;font-weight:800}.story-copy p{white-space:pre-line;font-size:13px;line-height:1.9}.story-copy h2{font-size:16px;line-height:1.5;margin-bottom:8px}
.story-bottom{display:grid;grid-template-columns:auto 1fr;gap:8px}.story-back{align-self:center;background:none;border:0;color:#94704a;font-size:11px;padding:10px 6px;min-width:42px}.story-back[hidden]+button{grid-column:1/-1}
@keyframes story-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* Conversation has its own place in the layout, with the shop left in view. */
.tutorial-shade{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(to bottom,#30251255 0 calc(var(--guide-clear-top,120px) - 10px),transparent var(--guide-clear-top,120px) var(--guide-clear-bottom,420px),#30251255 calc(var(--guide-clear-bottom,420px) + 10px) 100%)}
.tutorial-shade[data-customer=true]{background:radial-gradient(ellipse var(--customer-rx) var(--customer-ry) at var(--customer-x) var(--customer-y),transparent 76%,#30251266 100%)}
.tutorial-customer{position:absolute;z-index:7;pointer-events:none;transform:translate(-50%,-50%);border:2px solid #ffea94;border-radius:50%;box-shadow:0 0 0 2px #a56b2e,0 0 12px #ffe7a077}
.tutorial-customer span{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:3px 6px;white-space:nowrap;border:1px solid #a16a37;background:#fff4d4;color:#77502f;border-radius:3px;font-size:9px;font-weight:700}
.tutorial-customer[hidden]{display:none}
.tutorial-locked{cursor:default!important}
button.tutorial-locked,a.tutorial-locked,summary.tutorial-locked{opacity:.46}
.quest.guide-active .quest-main.tutorial-locked{opacity:1}
.game-shell.with-guide .guide-target{outline:3px solid #f4b644;outline-offset:3px}
.game-shell.with-guide[data-guide-kind=opening] .bottom-tabs,.game-shell.with-guide[data-guide-kind=tree] .bottom-tabs,.game-shell.with-guide[data-guide-kind=pause] .wallet-bar{z-index:7}
.tutorial-complete{width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:22px 18px 18px}
.tutorial-complete::backdrop{background:#30251299}
.tutorial-complete-label{display:block;font-size:11px;color:#9b6a38;margin-bottom:16px}
.tutorial-final-copy{display:grid;grid-template-columns:48px minmax(0,1fr);gap:15px;align-items:center;margin-bottom:22px}
.tutorial-final-speaker{display:flex;flex-direction:column;align-items:center;gap:5px}
.tutorial-final-speaker canvas{width:48px;height:66px;image-rendering:pixelated}
.tutorial-final-speaker small{font-size:9px;color:#9b6a38}
.tutorial-final-copy h2{font-size:16px;line-height:1.6;color:#a94d2e;margin:0 0 10px}
.tutorial-final-copy p{font-size:12px;line-height:1.9;white-space:pre-line;margin:0;color:#795333}
.tutorial-complete #tutorial-finish{min-height:42px}
#workbench-guide,#feature-guide{position:fixed;top:var(--hint-dialog-top,30%);left:50%;right:auto;margin:0;transform:translateX(-50%);width:min(390px,calc(100vw - 28px));padding:16px 17px;border-radius:6px;box-shadow:0 5px 0 #75502c88,0 10px 24px #2d210755}
#workbench-guide::backdrop,#feature-guide::backdrop{background:linear-gradient(#302512aa 0 0) 0 0/100% var(--hint-top) no-repeat,linear-gradient(#302512aa 0 0) 0 var(--hint-bottom)/100% calc(100% - var(--hint-bottom)) no-repeat,linear-gradient(#302512aa 0 0) 0 var(--hint-top)/var(--hint-left) var(--hint-height) no-repeat,linear-gradient(#302512aa 0 0) var(--hint-right) var(--hint-top)/calc(100% - var(--hint-right)) var(--hint-height) no-repeat}
.workbench.hint-target{outline:3px solid #ffde75;outline-offset:4px;box-shadow:0 0 0 6px #a9682a,0 0 18px 7px #ffda73a8}
.workbench.hint-target #buy,.workbench.hint-target #cook{box-shadow:0 0 0 2px #ffde75,0 3px 0 #765232}
.workbench-guide-heading{display:flex;align-items:center;gap:7px;margin-bottom:7px}.workbench-guide-heading img{width:27px;height:27px;object-fit:contain;image-rendering:pixelated}.workbench-guide-heading h2{font-size:16px;color:#a94d2e;margin:0 0 0 4px}
#workbench-guide p,#feature-guide p{margin:0 0 13px;color:#795333;font-size:12px;line-height:1.75}#workbench-guide button,#feature-guide button{min-height:36px}
#special-order.hint-target,#campaign-start.hint-target{outline:3px solid #ffde75;outline-offset:4px;box-shadow:0 0 0 6px #a9682a,0 0 18px 7px #ffda73a8}
@media(max-width:370px){.tutorial-complete{padding:17px 12px 14px}.tutorial-final-copy{grid-template-columns:36px minmax(0,1fr);gap:10px}.tutorial-final-speaker canvas{width:36px;height:50px}.tutorial-final-copy h2{font-size:14px}.tutorial-final-copy p{font-size:11px}}
.game-shell.with-guide .management{z-index:auto}.game-shell.with-guide .quest{position:relative;z-index:7}.game-shell.with-guide[data-guide-kind=cook] .workbench,.game-shell.with-guide[data-guide-kind=supply] .workbench{position:relative;z-index:7}
.quest.guide-active{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:8px}.quest.guide-active .quest-label{grid-column:1/-1}.quest.guide-active .quest-main{grid-column:2;grid-row:2;padding-left:0}.quest.guide-active #store-guide-portrait{display:block;grid-column:1;grid-row:2;align-self:center;justify-self:end;width:42px;height:58px;margin-bottom:8px;image-rendering:pixelated}.quest.guide-active .quest-reward{grid-column:1/-1}
.quest.guide-active .quest-label{padding-right:0}
.quest.guide-active .quest-main{padding-top:5px;padding-bottom:10px}
.quest.guide-active .quest-main strong{font-size:12px;line-height:1.5}
.quest.guide-active .quest-main small{font-size:10.5px;line-height:1.65;margin-top:4px}
#quest-note{white-space:pre-line}
.quest-reward{display:block;padding:0 10px 8px;font-size:9px;line-height:1.5;color:#6c893b}
@media(max-width:370px){.story-layout{gap:11px}.story-copy{grid-template-columns:40px 1fr;gap:9px;padding:12px 9px}.story-speaker canvas{width:36px;height:50px}.story-copy h2{font-size:13px}.story-copy p{font-size:11px}.story-route{gap:9px;padding:0 3%}.story-route li{font-size:11px}.story-route img{width:26px;height:26px}.quest.guide-active .quest-main strong{font-size:11px}.quest.guide-active .quest-main small{font-size:9.5px}}
@media(max-height:600px){.story-layout{gap:7px;padding:10px 10px max(24px,env(safe-area-inset-bottom))}.story-tag{top:0;padding:4px 8px;font-size:8px}.story-top b{font-size:10px}.story-top .welcome-button{min-height:26px;font-size:9px}.story-copy{grid-template-columns:30px 1fr;padding:7px;gap:8px}.story-speaker canvas{width:27px;height:37px}.story-speaker span{font-size:8px}.story-copy h2{font-size:11px;margin-bottom:3px}.story-copy p{font-size:9px;line-height:1.55}.story-bottom{gap:4px}.story-route{padding:0 3%}.story-route li{font-size:9px;gap:4px}.story-route img{width:20px;height:20px}.story-bottom .welcome-button{min-height:30px}}
@media(prefers-reduced-motion:reduce){.story-vignette .story-art{animation:none}}
.story-route[hidden]{display:none}