.story-preview { --story-ink:#14242a;--story-cream:#f2ead2;--story-brass:#d6bc75; }
.story-welcome { background-image:linear-gradient(90deg,rgba(12,23,34,.98),rgba(15,28,39,.82) 52%,rgba(15,28,39,.22)),url('../art/img/ow_meadow_day.webp'); }
.story-preview .hs-cover { padding-bottom:max(20px,env(safe-area-inset-bottom)); }
.story-preview .hs-cover h1 em { color:#d8ca91; }
.story-welcome-actions { display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px; }
.story-travel-panel { text-align:left; }
.story-travel-panel .hs-primary { margin-top:24px; }
.story-current-goal { padding:16px 18px;border-left:3px solid var(--story-brass);background:#12262b; }
.story-destination { color:#e7d49c!important;font:700 14px/1.5 system-ui,sans-serif!important; }
.story-notes { display:grid;gap:8px;padding-left:25px; }
.story-notes li { padding:8px 12px;color:#d7ddd3;background:#16282d;border-radius:7px;font:14px/1.5 system-ui,sans-serif; }
.story-note-empty { color:#aeb8b4!important;font-style:italic; }
.story-safe-route { margin:22px 0;padding:18px;border:1px solid #8ba39a66;border-radius:12px;background:#102327; }
.story-safe-route h3 { margin:0 0 8px;color:#f2e5bf;font:600 20px/1.3 Georgia,serif; }
.story-safe-route p { margin:0 0 14px;font-size:15px; }
.story-safe-route .hs-button { display:block;width:100%;margin-top:8px; }
.story-work-objects { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:16px 0; }
.story-work-object { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:11px 13px;border:1px solid #9fb1a34a;border-radius:8px;background:#102326;font:13px/1.4 system-ui,sans-serif; }
.story-work-object b { color:#f0dfae; }
.story-work-object span { color:#bdcbc4;text-align:right; }
.story-work-log { max-height:116px;overflow:auto;margin:10px 0 17px;padding:10px 10px 10px 32px;border:1px solid #a8925e44;border-radius:8px;color:#c8d2ca;background:#0d1e21;font:12px/1.5 system-ui,sans-serif; }
/* the cards in reach as a hand: a small painting beside the name and rule, the
   places it can go beneath. As many columns as fit; one on a phone. */
.story-work-actions { display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;align-items:stretch; }
.story-work-action { display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid #bca56e;border-radius:11px;background:#ede6d1;color:var(--story-ink);box-shadow:0 3px 10px #0003; }
.story-work-card { display:flex;gap:12px;align-items:flex-start; }
.story-work-card-art { flex:none;width:60px;height:60px;object-fit:cover;border:1px solid #bca56e;border-radius:8px;background:#d9cfb2; }
.story-work-card-copy { min-width:0;padding-top:1px; }
.story-work-action h3 { margin:0 0 3px;font:700 16px/1.25 Georgia,serif; }
.story-work-cost { color:#76602f;font:600 12px/1 system-ui,sans-serif;white-space:nowrap; }
.story-work-action p { margin:0;color:#34443f;font:12.5px/1.4 system-ui,sans-serif; }
.story-work-targets { display:grid;gap:6px;margin-top:auto; }
.story-work-action .hs-button { width:100%;min-height:44px;padding:9px 12px;background:#294746;color:#fff5dc;font-size:15px;line-height:1.3; }
.story-ending { text-align:center;max-width:690px; }
.story-ending .hs-primary { margin-top:16px; }

@media(max-width:760px){
  .story-work-object { flex-direction:column;gap:4px; }
  .story-work-object span { text-align:left; }
}
/* the bed's two offers (sleep, a story first) sit apart */
.story-bedside .hs-button + .hs-button { margin-left:8px; }
@media(max-width:480px){
  .story-work-actions { grid-template-columns:1fr;gap:8px; }
  .story-work-objects { gap:6px;margin:10px 0; }
  .story-work-object { padding:9px;font-size:12px; }
  .story-preview .hs-work-heading .hs-text-button { min-width:68px;min-height:44px; }
  .story-work-action { gap:8px;padding:9px; }
  .story-work-card-art { width:48px;height:48px; }
  .story-work-action h3 { font-size:15px; }
  .story-work-action p { font-size:12px; }
  .story-work-object { flex-direction:column;gap:4px; }
  .story-work-object span { text-align:left; }
  .story-journal .hs-button { width:100%; }
  .story-bedside .hs-button + .hs-button { margin:8px 0 0; }
}

/* Story controls stay visible without the original campaign's overflow menu. */
@media(max-width:760px){
  #story-campaign .ow-hud { height:auto;padding-bottom:10px; }
  #story-campaign .ow-hud::after { display:none; }
  #story-campaign .ow-hud-in { display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;min-height:0;gap:6px;padding:10px 12px!important; }
  #story-campaign .ow-place { display:contents; }
  #story-campaign .ow-place-name { grid-area:1/1;line-height:1.2; }
  #story-campaign .ow-hud-right { grid-area:2/1;flex-wrap:wrap;justify-content:space-between;gap:6px!important; }
  #story-campaign .ow-goal { grid-area:3/1;position:static;width:auto;max-width:100%;margin:0; }
  /* one row of controls: at full size "Leave" wrapped to a row of its own and
     the bar took over a quarter of a phone's height */
  #story-campaign .ow-hud-right { flex-wrap:nowrap;gap:5px!important; }
  #story-campaign .ow-gbtn { padding:7px 9px;font-size:11px;white-space:nowrap; }
  #story-campaign .ow-dial { margin-left:56px; }   /* the time sits in this margin */
}
/* The dial's "Wait until morning" hung off the screen's left edge: the margin
   holds the time, not a line twice as long. On a phone the wait folds into
   two short lines under the time, inside the margin. */
@media (max-width:760px) {
  #story-campaign .ow-dial-wait { white-space:normal;width:50px;text-align:right;line-height:1.2;top:calc(50% + 1px); }
  #story-campaign .ow-dial:has(.ow-dial-wait) .ow-dial-label { transform:translateY(calc(-50% - 9px)); }
}
/* The bar is one row on a 390px phone with nothing to spare; on the common
   360px Android and a 320px SE, Leave ran off the right edge. Tighter
   buttons first; on the narrowest, the dial keeps its sun and moon and lets
   the hour go (the Field notes and the light in the world still tell it). */
@media (max-width:380px) {
  body #story-campaign .ow-gbtn { padding:7px 5px;font-size:10.5px; }
  body #story-campaign .ow-dial { margin-left:50px; }
  body #story-campaign .ow-dial-label { letter-spacing:.04em; }
  body #story-campaign .ow-dial-wait { width:46px;letter-spacing:.03em; }
}
@media (max-width:344px) {
  body #story-campaign .ow-gbtn { padding:6px 4px;font-size:10px; }
  body #story-campaign .ow-dial { margin-left:0; }
  body #story-campaign .ow-dial-label, body #story-campaign .ow-dial-wait { display:none; }
}

/* Save failure must remain visible above the game and its dialogue overlays. */
#story-save-alert { position:fixed;z-index:11000;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:680px;margin:auto;padding:14px 18px;border:1px solid #e2b873;border-radius:12px;background:#34281c;color:#fff1d3;box-shadow:0 8px 30px #0008;display:flex;align-items:center;gap:16px; }
#story-save-alert[hidden] { display:none; }
#story-save-alert p { flex:1;margin:0;font:15px/1.45 system-ui,sans-serif; }
#story-save-alert button { flex-shrink:0;min-height:44px; }
@media(max-width:480px){#story-save-alert{align-items:stretch;flex-direction:column;gap:10px;} }

/* ---- the ending: the dark, a few lines said over the night sky, the title,
   then the card, low enough that the stars are still falling above it */
.hs-overlay.overlay.story-finale { background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;align-items:flex-end;padding-bottom:max(28px,env(safe-area-inset-bottom)); }
.hs-overlay.overlay.story-finale-card-only { background:rgba(6,10,20,.66);align-items:center; }
/* opacity, not visibility: a child that sets its own visibility would show through */
body.story-finale-on .ow-hud,body.story-finale-on .ow-hint,body.story-finale-on .ow-camera-recenter,body.story-finale-on .ow-place { opacity:0 !important;pointer-events:none !important;transition:opacity .6s; }
/* a plate sets its own visibility, so the whole layer goes */
body.story-finale-on .w3-plates { display:none !important; }
/* the place's name and hour as you arrive: not over the night in the loft (it said 8:30 am at bedtime) */
body.story-finale-on .ow-arrival-stamp { display:none !important; }
.story-finale-black { position:fixed;inset:0;z-index:0;display:grid;place-items:center;background:#04060c;transition:opacity 2.8s ease; }
.story-finale-black.gone { opacity:0;pointer-events:none; }
.story-finale-later { margin:0;font:italic 22px/1.4 Georgia,serif;letter-spacing:.02em;color:#cdbf98;opacity:0;animation:story-later 2.2s .2s ease forwards; }
@keyframes story-later { to { opacity:1; } }
.story-finale-line { position:fixed;left:50%;bottom:calc(11% + env(safe-area-inset-bottom));z-index:1;width:min(720px,92vw);margin:0;padding:18px 28px;box-sizing:border-box;border-radius:40px;background:radial-gradient(closest-side,#02040acc,#02040a55 70%,transparent);transform:translateX(-50%);text-align:center;font:italic 23px/1.5 Georgia,serif;color:#f6eed6;text-shadow:0 2px 14px #000c,0 0 2px #000;opacity:0;transition:opacity 1.1s ease;pointer-events:none; }
.story-finale-line.on { opacity:1; }
.story-finale .story-finale-title { position:fixed;left:0;right:0;top:22%;z-index:1;margin:0;text-align:center;font:500 clamp(64px,12vw,128px)/1 Georgia,serif;letter-spacing:-.05em;color:#fff3cc;text-shadow:0 0 34px #ffe6a855,0 3px 20px #0009;opacity:0;transform:translateY(8px);transition:opacity 2.6s ease,transform 3.2s ease;pointer-events:none; }
.story-finale .story-finale-title.on { opacity:1;transform:none; }
.story-finale-skip { position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:2;min-height:40px;padding:8px 16px;border:1px solid #e6d9b255;border-radius:999px;background:#0b1320aa;color:#e9e0c6;font:600 13px system-ui,sans-serif;letter-spacing:.04em; }
.story-finale .story-ending { position:relative;z-index:2;width:min(820px,100%);max-height:calc(100dvh - 56px);padding:22px 30px;text-align:left;background:linear-gradient(180deg,#101a2bf2,#0c1522f7);border:1px solid #c8b27a66;border-top:3px solid #e2c98a;animation:story-card 1.2s ease both; }
@keyframes story-card { from { opacity:0;transform:translateY(18px); } }
.story-ending h2 { font-size:32px; }
.story-ending p { font-size:16.5px;line-height:1.6; }
.story-ending .story-ending-lead { color:#e6e2cf; }
.story-ending h3 { margin:22px 0 10px;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d9c48f; }
.story-ending-road { display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin:0;padding:0;list-style:none; }
.story-ending-road li { position:relative;padding-left:24px;font:15px/1.5 Georgia,serif;color:#e9e4d2; }
.story-ending-road li::before { content:'✦';position:absolute;left:2px;top:1px;font-size:13px;color:#e2c98a; }
.story-ending .story-ending-after { margin:20px 0 0;font-style:italic;color:#f3e7c1; }
.story-ending-actions { display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px; }
@media (max-width:600px) {
  .story-finale-line { bottom:calc(18% + env(safe-area-inset-bottom));font-size:19px; }
  .story-ending h2 { font-size:27px; }
  .story-ending-road { grid-template-columns:1fr; }
  /* on a phone the card scrolls; the way on stays in reach at its foot */
  .story-ending-actions { position:sticky;bottom:-22px;margin:18px -22px -22px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#0c1522 30%); }
  .story-finale .story-ending { padding:20px 22px; }
  .story-finale .story-ending { max-height:calc(100dvh - 90px); }
}
@media (prefers-reduced-motion:reduce) {
  .story-finale-black,.story-finale-line,.story-finale-title { transition-duration:.01s; }
  .story-finale-later,.story-finale .story-ending { animation:none;opacity:1; }
}
/* the field notes afterwards: who you have found again, place by place */
.story-afterwards { margin:18px 0 6px;padding-top:14px;border-top:1px solid #80938d40; }
.story-afterwards h3 { margin:0 0 4px;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d9c48f; }
.story-afterwards .story-after-count { margin:0 0 10px;font-size:15px;color:#c9d2c4; }
.story-after-places { display:grid;gap:10px;margin:0 0 14px;padding:0;list-style:none; }
.story-after-place { display:block;margin-bottom:2px;font:700 11px/1.4 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#aebaa9; }
.story-after-people { font:15px/1.6 Georgia,serif; }
.story-after-people .seen { color:#f1ead4; }
.story-after-people .unseen { color:#7f8d88; }
.story-after-again { display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px; }

/* the season, beside the sound */
#story-audio-dialog #story-season-title { margin-top:6px; }
#story-audio-dialog label[for="story-season"] { margin:0 0 8px; }
#story-season { display:block;width:100%;min-height:46px;padding:10px 14px;border:1px solid #b6c9b0;border-radius:10px;background:#263c3b;color:#fff4dd;font:16px system-ui,sans-serif;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#e6d7a6 50%),linear-gradient(135deg,#e6d7a6 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat; }
#story-season:focus-visible { outline:2px solid #d6bc75;outline-offset:2px; }
#story-season-note { margin:8px 0 20px;font-size:14px;color:#c9d2c4; }

/* ---- a card handed to you (js/story-campaign.js reveal): the page clears, the
   card comes up into your hands and settles, your mark writes itself in at its
   foot, then one plain line on what it is. Parchment and ink, like the hand at
   a working, only larger and alone. */
.hs-overlay.overlay.hs-reveal-on { background:radial-gradient(ellipse 60% 70% at 50% 46%,rgba(56,50,28,.5),rgba(8,14,20,.8) 70%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }
.hs-reveal { display:flex;flex-direction:column;align-items:center;width:min(380px,100%);margin:auto;text-align:center; }
.hs-reveal>.hs-eyebrow { margin:0 0 16px;color:#e2cf95;animation:hs-reveal-fade .8s .1s ease both; }
.hs-reveal-card { position:relative;box-sizing:border-box;width:min(300px,100%);margin:0;padding:12px 12px 14px;text-align:left;
  background:linear-gradient(170deg,#f5eeda,#e8dec1);color:#22332f;border:1px solid #b29a5f;border-radius:16px;
  box-shadow:inset 0 0 0 5px #f5eeda,inset 0 0 0 6px #c7b27a88,0 22px 60px #000a,0 0 90px #f3dd9a24;
  transform:rotate(-1.2deg);animation:hs-reveal-hand 1.3s cubic-bezier(.2,.75,.25,1) both; }
.hs-reveal-art { position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid #b29a5f;border-radius:10px;background:#d9cfb2; }
.hs-reveal-art img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:hs-reveal-fade 1.2s .35s ease both; }
.hs-reveal-cost { position:absolute;top:8px;left:8px;padding:2px 9px;border:1px solid #8c6a32;border-radius:20px;background:#f4d181;color:#473216;font:700 12px/1.5 system-ui,sans-serif; }
.hs-overlay .hs-reveal-name { margin:12px 6px 4px;font:600 30px/1.1 Georgia,serif;color:#1f302c;letter-spacing:-.01em; }
.hs-overlay .hs-reveal-rule { margin:0 6px;font:15.5px/1.5 Georgia,serif;color:#3a4843; }
.hs-reveal-mark { display:flex;align-items:center;gap:12px;margin:12px 6px 0;padding-top:10px;border-top:1px dashed #b29a5f99; }
.hs-reveal-ink { flex:none;width:96px;height:35px;margin-left:auto; }
.hs-reveal-ink svg { display:block;width:100%;height:100%;overflow:visible; }
.hs-reveal-ink path { fill:none;stroke:#2b3f5c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:0;animation:hs-reveal-ink .9s .9s ease-in-out both; }
.hs-reveal-ink path+path { animation-duration:.8s;animation-delay:1.6s; }
.hs-reveal-words { display:flex;flex-direction:column;min-width:0;line-height:1.3; }
.hs-reveal-words b { font:700 10.5px/1.5 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#76602f; }
.hs-reveal-words i { font:italic 14px/1.35 Georgia,serif;color:#4a5a54; }
.hs-reveal-words i span { white-space:nowrap; }
.hs-overlay .hs-reveal-what { max-width:32em;margin:22px 0 18px;font:14px/1.6 system-ui,sans-serif;color:#d3dacd;animation:hs-reveal-fade .9s 1.9s ease both; }
.hs-reveal .hs-primary { min-width:160px;animation:hs-reveal-fade .9s 2.1s ease both; }
@keyframes hs-reveal-hand { from { opacity:0;transform:translateY(46px) rotate(3deg) scale(.94); } 60% { opacity:1; } }
@keyframes hs-reveal-fade { from { opacity:0; } }
@keyframes hs-reveal-ink { from { stroke-dashoffset:130; } }
@media (max-width:640px) {
  .hs-reveal>.hs-eyebrow { margin-bottom:12px; }
  .hs-reveal-card { width:min(280px,100%); }
  .hs-overlay .hs-reveal-name { font-size:26px;margin-top:10px; }
  .hs-overlay .hs-reveal-rule { font-size:15px; }
  .hs-overlay .hs-reveal-what { margin:16px 4px 14px;font-size:13.5px; }
  .hs-reveal .hs-primary { width:100%; }
}
@media (max-height:620px) { .hs-reveal-art { aspect-ratio:16/9; } }
@media (prefers-reduced-motion:reduce) {
  .hs-reveal *,.hs-reveal-card { animation:none!important; }
}

/* the Field notes: the working cards you have made, small, in the hand's parchment */
.story-workings { margin:18px 0 22px;padding-top:14px;border-top:1px solid #80938d40; }
.story-workings h3 { margin:0 0 2px;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d9c48f; }
.story-journal .story-workings-note { margin:0 0 10px;font:13px/1.5 system-ui,sans-serif;color:#aeb8b4; }
.story-workings-list { display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:0;padding:0;list-style:none; }
.story-working-tile { display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid #bca56e;border-radius:11px;background:#ede6d1;color:var(--story-ink);box-shadow:0 3px 10px #0003; }
.story-working-art { flex:none;width:60px;height:60px;object-fit:cover;border:1px solid #bca56e;border-radius:8px;background:#d9cfb2; }
.story-working-copy { min-width:0; }
.story-working-copy b { display:block;margin:0 0 3px;font:700 16px/1.25 Georgia,serif; }
.story-journal .story-working-copy p { margin:0;color:#34443f;font:12.5px/1.4 system-ui,sans-serif; }

/* A field working on a phone: the header is a strip, not half the screen.
   The title, instruction, lamp meter and four status boxes took the top
   ~400px of an iPhone 15 and pushed every card below the fold; the cards
   are what you act with, so they come up into view. */
@media (max-width:640px) {
  .hs-work .hs-work-panel .hs-eyebrow { display:none; }
  .hs-work .hs-work-heading { align-items:center;gap:10px; }
  .hs-work .hs-work-panel h2 { font-size:19px;line-height:1.2;margin:0; }
  .hs-work .hs-work-heading .hs-text-button { font-size:11px;max-width:none;white-space:nowrap;padding:0 2px;min-height:44px; }
  .hs-work .hs-work-intro { font-size:13px;line-height:1.45;margin:4px 0 8px; }
  .hs-work .hs-reserve { flex-wrap:nowrap;gap:8px;padding:6px 10px; }
  .hs-work .hs-reserve meter { flex:1;width:auto;height:12px; }
  .hs-work .hs-reserve small { display:none; }
  .story-work-objects { grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 14px;margin:8px 0; }
  .story-work-object { flex-direction:column;gap:0;padding:3px 0;border:0;border-radius:0;background:none;font-size:12px;line-height:1.3; }
  .story-work-object b { font-size:11px;letter-spacing:.02em; }
  .story-work-object span { text-align:left; }
}

/* ---- the story in the main page (index.html; js/story-campaign.js enter).
   While its world or front page is up, the duel board and its chrome keep out
   of sight; a duel takes these classes off for the match and puts them back. */
.hs-welcome[hidden] { display:none !important; }
body.story-preview #app, body.story-preview #audio-ctrl, body.story-preview #chrome-btns,
body.story-preview #turn-pill, body.story-preview #ow-more, body.story-preview #ow-sheet,
body.story-preview #log-wrap, body.story-preview #target-banner { display:none !important; }
/* stardust buys packs now, so the purse is on the HUD as in the Campaign */
body.story-preview .ow-dust { display:flex; }

/* the end of a talk that offers a duel: the offer beside Finish */
.hs-transcript .hs-dialogue-foot .hs-button { flex:none;text-align:center; }
.hs-transcript .hs-dialogue-foot .hs-caption { margin-right:auto; }
@media(max-width:640px){ .hs-transcript .hs-dialogue-foot { flex-wrap:wrap;gap:8px 12px; } }

/* a scene's duel, lost: the story waits, and says so */
.story-duel-pause { width:min(560px,100%); }
.story-duel-pause .hs-spoken { font:19px/1.5 Georgia,serif;color:#faf0d6;margin:0; }
.story-duel-pause-note { color:#cfd8cc;font:15px/1.6 system-ui,sans-serif;margin:18px 0 0; }
.story-duel-pause-actions { display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:22px; }
/* On a phone the bar keeps one row: the purse and the deck are one tap away
   in the Satchel (its stardust line, its Edit deck), not two more controls. */
@media(max-width:760px){
  body.story-preview #story-campaign .ow-dust { display:none; }
  #story-campaign #lh-deck { display:none; }
  #story-campaign .ow-hud-right { gap:3px!important; }
  #story-campaign .ow-gbtn { padding:7px 7px; }
  #story-campaign .story-audio-word { display:none; }
}

/* ?tour=1 — the Places picker */
.story-places { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; max-height:60vh; overflow-y:auto; margin:12px 0; }

/* ---- the Wardrobe and the stalls (js/wardrobe.js): the satchel's navy and
   gold, with a small stage for your own figure and the wool as swatches */
.wr-overlay .wr-box { text-align:left; padding:24px 28px 20px; width:min(94vw,900px); }
.wr-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.wr-head h2 { margin:0 0 4px; font:400 28px/1.15 var(--ow-font-story); color:var(--gold); }
.overlay .wr-lead { margin:0 0 12px; font:15px/1.5 var(--ow-font-story); opacity:.85; }
.wr-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.wr-tab { padding:7px 14px; border-radius:999px; font-size:14px; font-weight:700; color:var(--cream);
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14); }
.wr-tab small { margin-left:6px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); opacity:.85; }
.wr-tab.on { background:rgba(255,214,107,.16); border-color:var(--gold); color:var(--gold); }
.wr-body { display:grid; grid-template-columns:minmax(200px,280px) 1fr; gap:20px; align-items:start; }
.wr-stage { position:sticky; top:0; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 18%,#3b4a74 0%,#232a4e 58%,#1a1d3c 100%); box-shadow:inset 0 0 0 1px rgba(255,214,107,.25); }
.wr-canvas { display:block; width:100%; height:340px; touch-action:none; cursor:grab; }
.wr-canvas:active { cursor:grabbing; }
.overlay .wr-caption { position:absolute; left:0; right:0; bottom:8px; margin:0; text-align:center; font-size:12px; opacity:.6; }
.wr-stage.wr-noview .wr-canvas { display:none; }
.wr-stage.wr-noview { min-height:80px; display:grid; place-items:center; }
.wr-stage.wr-noview .wr-caption { position:static; padding:16px; }
.wr-rows { display:flex; flex-direction:column; gap:10px; }
.wr-row { padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.wr-row.focus { border-color:rgba(255,214,107,.35); }
.wr-row h3 { margin:0 0 7px; font:700 12px/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,246,224,.7); }
.wr-chips { display:flex; flex-wrap:wrap; gap:6px; }
.wr-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 7px; border-radius:999px; font-size:13.5px; font-weight:700;
  color:var(--cream); background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12); }
.wr-chip.none { padding-left:11px; opacity:.85; }
.wr-chip.on { border-color:var(--gold); background:rgba(255,214,107,.14); color:#fff3c9; }
.wr-chip.keepsake span { font-style:italic; }
.wr-sw { width:18px; height:18px; border-radius:50%; flex:0 0 18px; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); }
.wr-dyes { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.wr-dyes-label { width:54px; font-size:12px; font-weight:700; opacity:.65; }
.wr-dye { width:24px; height:24px; padding:0; border-radius:50%; border:2px solid rgba(0,0,0,.25); box-shadow:0 0 0 0 transparent; }
.wr-dye.on { box-shadow:0 0 0 2px #1a1d3c,0 0 0 4px var(--gold); }
.overlay .wr-note { margin:8px 0 0; font-size:12.5px; opacity:.65; }
.wr-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.wr-text { padding:6px 2px; background:none; color:var(--gold); font-weight:700; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.overlay .wr-hint { flex:1 1 240px; margin:0; font-size:12.5px; opacity:.6; }
/* a stall */
.wr-seller { display:flex; gap:14px; align-items:center; }
.wr-seller img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 72px; box-shadow:0 0 0 2px var(--gold); }
.overlay .wr-eyebrow { margin:0 0 4px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); opacity:.9; }
.overlay .wr-said { margin:0; font:italic 16px/1.5 var(--ow-font-story); }
.overlay .wr-did { margin:0 0 4px; font:14px/1.45 var(--ow-font-story); opacity:.7; }
.overlay .wr-purse { margin:14px 0 10px; font-size:14px; }
.wr-goods { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; max-height:52vh; overflow-y:auto; padding:2px; }
.wr-good { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
.wr-good.have { opacity:.7; }
.wr-goodsw { width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:grid; place-items:center; font-style:normal; font-size:18px; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2); }
.wr-goodtext { flex:1; min-width:0; }
.wr-goodtext b { display:block; font-size:14px; }
.wr-goodtext small { display:block; font-size:12px; opacity:.65; line-height:1.35; }
.overlay .wr-buy { padding:7px 12px; font-size:13.5px; white-space:nowrap; }
.wr-owned { padding:7px 10px; font-size:12.5px; background:none; color:var(--gold); font-weight:800; }
/* a keepsake on the duel's end card */
.lh-keepsake { display:flex; gap:10px; align-items:flex-start; max-width:440px; margin:10px auto; padding:10px 12px; text-align:left;
  border-radius:12px; background:rgba(200,150,60,.1); border:1px solid rgba(190,140,50,.35); }
.lh-keepsake i { font-style:normal; font-size:22px; line-height:1; }
.overlay .lh-keepsake p, .lh-keepsake p { margin:0 0 3px; font:italic 14px/1.45 var(--ow-font-story); }
.lh-keepsake small { display:block; font-size:12px; color:#9a6a1c; font-weight:700; }
@media (max-width: 640px) {
  .wr-overlay .wr-box { padding:18px 16px 14px; }
  .wr-body { grid-template-columns:1fr; gap:12px; }
  .wr-stage { position:relative; }
  .wr-canvas { height:230px; }
  .wr-head h2 { font-size:24px; }
  .wr-goods { grid-template-columns:1fr; }
}

/* Campaign chrome: river ink, lamp brass, and a notebook that belongs to the
   traveller. Scope these finishes to story mode; the duel keeps its own skin. */
#story-campaign .ow-hud {
  height:auto;min-height:0;padding-bottom:0;
  background:linear-gradient(180deg,#172b34f2,#172b34da);
  border-bottom:1px solid #d0bd8740;box-shadow:0 4px 24px #15282825;
}
#story-campaign .ow-hud::after { display:none; }
#story-campaign .ow-hud-in {
  display:flex;flex-wrap:nowrap;gap:20px;max-width:none;min-height:58px;
  padding:7px 26px!important;
}
#story-campaign .ow-place { min-width:160px;flex:1 1 auto; }
#story-campaign .ow-place-name { font:500 22px/1.2 Georgia,serif;font-variant:normal;letter-spacing:-.015em;color:#f3e9cd; }
#story-campaign .ow-hud-right { flex-wrap:nowrap;gap:6px!important; }
#story-campaign .ow-hud-right .ow-gbtn {
  min-height:40px;padding:9px 12px;border-radius:5px;border-color:#bec8b635;
  background:#bfd1c309;color:#e6e7d3;font:500 13px/1.2 system-ui,sans-serif;letter-spacing:0;
}
#story-campaign .ow-hud-right .ow-gbtn:hover { background:#c5d5bf1c;border-color:#d4be8270;color:#fff4d6; }
#story-campaign .ow-hud-right #lh-notes { border-color:#cbb77d66;color:#f3e4b7;background:#d6be7712; }
#story-campaign .ow-hud-right #lh-leave { border-color:transparent;background:transparent;color:#b9c7bd; }
#story-campaign .ow-hud-right .story-music-toggle { border-color:#bec8b635;background:#bfd1c309;border-radius:5px;font-weight:500; }
#story-campaign .ow-dust { margin-right:7px; }
#story-campaign .ow-dust span { display:none; }
#story-campaign .ow-dial { width:54px;margin-left:92px;margin-right:8px;flex-shrink:0; }
#story-campaign .ow-dial[data-time="night"] .ow-dial-knob { transform:translateX(22px); }
#story-campaign .ow-dial-label { letter-spacing:0;font:600 11px/1 system-ui,sans-serif;color:#e5e2c7; }
#story-campaign .ow-dial-wait { letter-spacing:0;text-transform:none;font:10px/1 system-ui,sans-serif;color:#bdcbbd; }
#story-campaign .ow-goal {
  left:26px;top:calc(100% + 10px);max-width:min(58ch,calc(100vw - 52px));
  padding:8px 13px;border-radius:3px 8px 8px 3px;border-color:#d6bc754a;
  background:#183139e6;color:#f1ead4;font:500 12px/1.45 system-ui,sans-serif;
}
#story-campaign .smap-hud-chip { position:absolute;left:26px;top:calc(100% + 52px);margin:0;max-width:calc(100vw - 52px); }
#story-campaign .ow-hint { text-transform:none;letter-spacing:.02em;font:12px/1.6 system-ui,sans-serif;color:#e8ead9; }

/* Bound field notes. The chapter numbers still describe the road in order;
   the brass edge is the binding, and the sheet has room for real handwriting. */
.story-journal:has(.sj) {
  width:min(760px,100%);padding:28px 34px;border:1px solid #b7b499;border-left:7px solid #7e9584;
  border-top-width:1px;border-radius:3px 12px 12px 3px;background:#ede4cd;color:#304740;
  box-shadow:inset 3px 0 0 #d2c6a8,0 24px 90px #0e282866;
  scrollbar-color:#83937b #e0d6bc;
}
.story-journal:has(.sj)>.hs-eyebrow { color:#617967;font:italic 15px/1.4 Georgia,serif;letter-spacing:0;text-transform:none;margin:0 0 12px; }
.story-journal:has(.sj) h2 { color:#2e4941;font:500 31px/1.2 Georgia,serif;letter-spacing:-.02em; }
.story-journal:has(.sj) .story-current-goal { padding:12px 16px;background:#dce1cc;border-color:#799779;color:#344c42;font:17px/1.55 Georgia,serif; }
.story-journal:has(.sj) .story-destination { color:#61745a!important;font:13px/1.5 system-ui,sans-serif!important; }
.story-journal:has(.sj)>.hs-button { color:#395948;background:#e6e3cb;border-color:#a2ae8d;font:14px/1.4 system-ui,sans-serif; }
.story-journal:has(.sj)>.hs-primary { color:#fff1d3;background:#3f6559;border-color:#3f6559;margin-top:20px;font:15px/1.4 system-ui,sans-serif; }
.story-journal:has(.sj) .hs-text-button { color:#536b54; }
.story-journal:has(.sj) :is(button,summary):focus-visible { outline-color:#547859; }
.story-field-notes .story-notes-top {
  position:sticky;top:-28px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-28px -34px 20px;padding:14px 20px;background:#ede4cd;border-bottom:1px solid #b7b499;
  box-shadow:0 4px 8px #3047400c;
}
.story-field-notes .story-notes-top .hs-eyebrow { margin:0;color:#617967;font:italic 15px/1.4 Georgia,serif;letter-spacing:0;text-transform:none; }
.story-field-notes .story-notes-top .story-notes-back { min-height:44px;padding:10px 14px;margin:0;white-space:nowrap;background:#3f6559;border-color:#3f6559;color:#fff1d3;font:14px/1.4 system-ui,sans-serif; }
.story-journal .sj {
  --sj-brass:#7a6838;--sj-cream:#334c40;--sj-ink:#475b4a;--sj-dim:#67715d;--sj-faint:#68735e;
  --sj-leaf:#547859;--sj-card:#e5dfc9;--sj-line:#9da88770;
}
.story-journal .sj :is(.sj-eyebrow,.sj-part-head h4) { text-transform:none;letter-spacing:0;font:600 17px/1.4 Georgia,serif; }
.story-journal .sj .sj-lede { color:#62715d; }
.story-journal .sj-tally { border:0;border-radius:0;background:transparent;border-left:1px solid #a8b09580;padding:5px 12px; }
.story-journal .sj-tally:first-child { border-left:0;padding-left:0; }
.story-journal .sj-tally small { text-transform:none;letter-spacing:0;font:11px/1.35 system-ui,sans-serif; }
.story-journal .sj-chapter-row { border-color:#a7b29570;border-radius:5px;background:#e3dfc9; }
.story-journal .sj-chapter.ahead .sj-chapter-row,.story-journal .sj-row.ahead { border-color:#b8bba180; }
.story-journal .sj-chapter-row[open]>.sj-chapter-sum { border-bottom-color:#a7b29570; }
.story-journal .sj-num { border-color:#a7b295; }
.story-journal .sj-bar { background:#bdc5aa; }
.story-journal .sj-stages li,.story-journal .sj-what { color:#596e55; }
.story-journal .sj-person { border-left-color:#a7b29570; }
.story-journal .sj-place-name { color:#64735b; }
.story-journal .sj .sj-action { align-self:start;justify-self:start;min-height:44px;margin:3px 0 0;padding:7px 10px;color:#36594a;font:600 13px/1.4 system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px; }
.story-journal .sj-row:has(.sj-action) { grid-template-columns:18px minmax(0,1fr); }
.story-journal .sj-row:has(.sj-action) .sj-what,.story-journal .sj-row:has(.sj-action) .sj-action { grid-column:2; }
.story-recollection-line { margin:12px 0; }
.story-recollection-line>p { margin:3px 0; }
.story-recollection-choice { margin:9px 0;padding:10px 12px;border:1px solid #a7b295;border-radius:5px; }
.story-recollection-choice summary,.story-reading-history summary,.story-last-conversation summary { cursor:pointer;min-height:30px;line-height:1.5;color:#36594a;font-weight:600; }
.story-reading-history,.story-last-conversation { margin:8px 0;padding:8px 12px;background:#e5dfc9;border-radius:5px;color:#334c40; }
.story-reading-history { flex:none; }
.story-history-lines { max-height:180px;overflow:auto;overscroll-behavior:contain; }
.story-history-lines p { margin:8px 0;font:15px/1.5 Georgia,serif; }
.story-journal .sj-tally-link { text-align:left;cursor:pointer;border:1px solid #a7b295;border-radius:5px;min-height:70px; }
.story-journal .sj-tally-link:hover,.story-journal .sj-tally-link:focus-visible { background:#dce3bd;outline:2px solid #547859;outline-offset:2px; }
.story-related-tales { margin:18px 0;padding:12px 0;border-top:1px solid #a7b295; }
.story-related-tales summary { cursor:pointer;min-height:44px;font:600 17px/1.5 Georgia,serif;color:#36594a; }
.story-related-tales .hs-button { display:block;margin:8px 0;min-height:44px; }
.story-memories { margin:12px 0;color:#475b4a; }
.story-memories summary { cursor:pointer;min-height:44px;line-height:1.5;font-weight:600;color:#36594a; }
.story-journal .story-workings { border-top-color:#9da88770; }
.story-journal .story-workings h3 { color:#7a6838;text-transform:none;letter-spacing:0;font:600 17px/1.4 Georgia,serif; }
.story-journal .story-workings-note { color:#67715d; }
.story-journal .story-working-tile { background:#f4edd9;box-shadow:none;border-radius:5px; }
.story-journal .story-safe-route { background:#dce1cc;color:#304740;border-color:#a2ae8d; }
.story-journal .story-safe-route h3 { color:#304740; }
.story-journal .story-afterwards { border-color:#9da88770; }
.story-journal .story-afterwards h3,.story-journal .story-afterwards .story-after-count { color:#61745a; }

/* The card paintings deserve a collection spread, not a narrow utility box. */
body.story-preview #lh-satchel-overlay .obox {
  width:min(780px,calc(100vw - 32px));padding:26px 30px;border:1px solid #a79c74;border-left:5px solid #859782;
  border-radius:4px 12px 12px 4px;background:#1b3338;color:#ede4cd;box-shadow:0 24px 90px #0e282880;
}
body.story-preview #lh-satchel-overlay h2 { font:500 30px/1.2 Georgia,serif;color:#f3e9cd; }
body.story-preview #lh-satchel-overlay .satgrid { grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;max-height:58dvh;padding:3px;scrollbar-color:#859782 #1b3338; }
body.story-preview #lh-satchel-overlay .sattile { padding:8px 6px;background:#efe5cb;color:#344840;border:1px solid #c7b68b;border-radius:5px;box-shadow:none; }
body.story-preview #lh-satchel-overlay .satart { width:90px;height:90px;border-radius:3px; }
body.story-preview #lh-satchel-overlay .sattile b { font:600 12px/1.3 Georgia,serif; }
body.story-preview #lh-satchel-overlay .satcount { color:#7a6838;font:600 11px/1.5 system-ui,sans-serif; }
body.story-preview #lh-satchel-overlay :is(.obtn,.smallbtn) { border:1px solid #b4bc9b;border-radius:5px;min-height:44px;background:#dce3bd;color:#29463b;font:14px/1.4 system-ui,sans-serif; }
body.story-preview #lh-satchel-overlay .smallbtn { background:transparent;color:#d8dec6; }

@media(max-width:1100px) {
  #story-campaign .ow-hud-in { display:grid;grid-template-columns:1fr;gap:7px;padding:10px 16px!important; }
  #story-campaign .ow-place { display:contents; }
  #story-campaign .ow-place-name { grid-area:1/1;font-size:20px;max-width:calc(100% - 150px); }
  #story-campaign .ow-hud-right { grid-area:2/1;position:static;justify-content:flex-end;gap:5px!important; }
  #story-campaign .ow-dial { position:absolute;right:16px;top:12px;margin:0; }
  #story-campaign .ow-dust { position:absolute;left:16px;top:53px;margin:0; }
  #story-campaign .ow-goal { grid-area:3/1;position:static;max-width:100%;width:auto;margin:0; }
  #story-campaign .smap-hud-chip { grid-area:4/1;position:static;justify-self:start;max-width:100%; }
}
@media(max-width:760px) {
  #story-campaign .ow-hud { padding-bottom:0; }
  #story-campaign .ow-hud-in { padding:10px 12px!important;gap:7px; }
  #story-campaign .ow-place-name { font-size:18px;min-height:24px; }
  #story-campaign .ow-dial { right:12px;top:9px; }
  #story-campaign .ow-hud-right { justify-content:space-between;overflow-x:auto;scrollbar-width:thin;gap:4px!important;padding:1px 1px 3px; }
  #story-campaign .ow-hud-right .ow-gbtn { min-height:44px;padding:8px 8px;font-size:12px;white-space:nowrap; }
  #story-campaign .ow-goal { padding:6px 10px;font-size:11.5px;line-height:1.4; }
  #story-campaign .story-audio-control { position:static; }
  #story-campaign .story-volume-panel { top:78px;right:12px; }
  .story-journal:has(.sj) { padding:22px 20px;max-height:calc(100dvh - 24px); }
  .story-field-notes .story-notes-top { top:-22px;margin:-22px -20px 18px;padding:12px;gap:8px; }
  .story-journal:has(.sj) h2 { font-size:26px; }
  .story-journal:has(.sj) .story-current-goal { font-size:16px;padding:10px 12px; }
  body.story-preview #lh-satchel-overlay .obox { padding:22px 16px; }
  body.story-preview #lh-satchel-overlay .satgrid { grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px; }
  body.story-preview #lh-satchel-overlay .satart { width:74px;height:74px; }
}
.story-journal .sj-chapter.now .sj-num { background:#c5ad72;border-color:#c5ad72;color:#253c30; }
.story-journal .sj-chapter.done .sj-num { background:#a8bd92;border-color:#a8bd92;color:#253c30; }
@media(max-width:760px) {
  #story-campaign .ow-hud-in { padding:8px 12px!important;gap:5px; }
  #story-campaign .ow-place-name { min-height:22px; }
  #story-campaign .ow-dial { top:7px; }
  #story-campaign .ow-goal { padding:5px 10px; }
}
@media(max-height:500px) and (min-width:600px) {
  #story-campaign .ow-hud-in { display:flex;min-height:56px;gap:12px;padding:6px 12px!important; }
  #story-campaign .ow-place { display:block;min-width:130px; }
  #story-campaign .ow-place-name { max-width:none;font-size:17px; }
  #story-campaign .ow-hud-right { justify-content:flex-end;overflow:visible; }
  #story-campaign .ow-dial { position:relative;top:auto;right:auto;margin-left:78px;margin-right:4px;width:46px; }
  #story-campaign .ow-dial[data-time="night"] .ow-dial-knob { transform:translateX(14px); }
  #story-campaign .ow-goal { position:absolute;left:12px;top:calc(100% + 7px);width:max-content;max-width:calc(100vw - 24px); }
  #story-campaign .smap-hud-chip { position:absolute;left:12px;top:calc(100% + 44px); }
}
/* A chosen route shares the strip below the rail with the objective. Either
   can grow to two lines without covering the other. Portrait uses two rows. */
@media(min-width:1101px) {
  #story-campaign .smap-hud-chip { left:auto;right:26px;top:calc(100% + 10px);max-width:42vw; }
  #story-campaign .ow-place:has(.smap-hud-chip:not([hidden])) .ow-goal { max-width:46vw; }
}
@media(max-height:500px) and (min-width:600px) {
  #story-campaign .smap-hud-chip { left:auto;right:12px;top:calc(100% + 7px);max-width:43vw; }
  #story-campaign .ow-place:has(.smap-hud-chip:not([hidden])) .ow-goal { max-width:49vw; }
}

/* Campaign audit follow-up: a grid track may shrink beneath a long objective
   or guide name. Utility actions can scroll; guidance and its stop stay whole. */
@media(max-width:1100px) {
  #story-campaign .ow-hud-in { grid-template-columns:minmax(0,1fr); }
  #story-campaign .ow-goal,#story-campaign .smap-hud-chip { min-width:0; }
}
@media(max-width:760px) {
  #story-campaign .ow-hud-right .story-music-toggle { min-width:44px; }
}
/* Sightseeing keeps its Close control on the page while the place list scrolls. */
.story-journal:has(.story-places) { display:flex;flex-direction:column;overflow:hidden; }
.story-journal:has(.story-places)>:not(.story-places) { flex:none; }
.story-journal .story-places { min-height:0;max-height:none;flex:1 1 auto;grid-auto-rows:max-content;align-content:start;padding:8px;margin-inline:-8px;overscroll-behavior:contain; }
@media(max-height:500px) {
  .story-journal:has(.story-places) { padding:16px 22px; }
  .story-journal:has(.story-places)>.hs-eyebrow { margin-bottom:6px;font-size:11px; }
  .story-journal:has(.story-places)>h2 { margin-bottom:8px;font-size:25px; }
  .story-journal:has(.story-places)>p:not(.hs-eyebrow) { margin:0 0 8px;font-size:15px; }
  .story-journal .story-places { margin:8px 0; }
  .story-journal .story-places .hs-button { padding:10px 14px;font-size:14px; }
}