/* The field board is brass, dark wood and glass; dialogue leaves the town visible. */
/* body.: the duel board's day phases (body.phase-morning) set dark ink on the
   body, and in index.html they share the page with the story */
body.hs-preview,.hs-preview { background:#141b29; color:#fff4d9; }
.hs-preview button:not(.w3-plate) { font:inherit; cursor:pointer; }
.hs-preview button:focus-visible { outline:3px solid #aee6d1; outline-offset:4px; }
.hs-preview [hidden] { display:none !important; }
.hs-welcome { position:fixed;inset:0;z-index:100;display:grid;align-items:center;padding:clamp(24px,6vw,90px);background:linear-gradient(90deg,rgba(15,24,34,.97),rgba(15,24,34,.83) 48%,rgba(15,24,34,.23)),url('../art/img/ow_hollow_beacon.webp') center/cover;overflow:auto; }
.hs-cover { max-width:630px; }
.hs-eyebrow { text-transform:uppercase;letter-spacing:.18em;font:700 11px/1.7 system-ui,sans-serif;color:#b3d5c8;margin:0 0 16px; }
.hs-cover h1 { font:500 clamp(42px,6vw,84px)/1.06 Georgia,serif;letter-spacing:-.04em;margin:24px 0; }
.hs-cover h1 em { color:#bbd9b6;font-weight:400; }
.hs-cover>p:not(.hs-eyebrow):not(.hs-caption):not([role="status"]) { max-width:490px;margin:0 0 24px;font:18px/1.7 Georgia,serif;color:#e4dfd0; }
.hs-preview .hs-caption { font:12px/1.6 system-ui,sans-serif;color:#b8bdb9; }
.hs-cover>.hs-caption { max-width:490px;margin:18px 0 0;font:13px/1.6 system-ui,sans-serif; }
.hs-cover>p[role="status"] { margin:16px 0 0;font:13px/1.6 system-ui,sans-serif; }
.hs-cover>p[role="status"]:empty { display:none; }
.hs-primary,.hs-button { border:1px solid #b6c9b0;border-radius:10px;padding:13px 20px;min-height:46px;line-height:1.4;transition:background .16s,transform .16s; }
.hs-primary { background:#dce9ca;color:#182e29;font-weight:800 !important; }
.hs-primary:hover { background:#f1f7dc;transform:translateY(-1px); }
.hs-button { background:#263c3b;color:#fff4dd;text-align:left; }
.hs-button:hover { background:#365250; }
.hs-text-button { border:0;background:none;color:#c7cfbf;text-decoration:underline;text-underline-offset:4px;padding:10px;min-height:44px; }
.hs-overlay.overlay { z-index:10000;padding:24px;display:flex;justify-content:center;align-items:center;background:rgba(8,16,23,.62);backdrop-filter:blur(5px);overflow:auto; }
.hs-reading.overlay { align-items:flex-end;padding-bottom:max(30px,env(safe-area-inset-bottom));background:linear-gradient(transparent 5%,rgba(8,16,23,.25) 35%,rgba(8,16,23,.92));backdrop-filter:none; }
.hs-dialogue { width:min(850px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:#1c2e33;border:1px solid #7c9684;border-top:3px solid #bdcc9b;border-radius:15px;padding:26px 32px;box-shadow:0 24px 100px #0008; }
.hs-dialogue-top { display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:20px; }
.hs-dialogue-top .hs-eyebrow { margin:0; }
.hs-dialogue h2 { font:500 30px/1.2 Georgia,serif;margin:0 0 14px;color:#faf0d6; }
.hs-dialogue p { font:18px/1.65 Georgia,serif; }
.hs-speaker { display:flex;align-items:flex-start;gap:24px; }
.hs-speaker img { width:76px;height:76px;object-fit:cover;border:2px solid #baad79;border-radius:50%;background:#4e6258;flex:none; }
.hs-speaker .hs-person { color:#e4d2a2;font:700 13px/1.4 system-ui,sans-serif;letter-spacing:.07em;margin-bottom:8px; }
.hs-spoken { margin:0;min-height:58px; }
.hs-narration { color:#d0d8ca;font-style:italic; }
.hs-dialogue-foot { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px;padding-top:18px;border-top:1px solid #80938d40; }
/* A conversation page (js/story-campaign.js reading): the lines said so far, the
   older ones dimmed and slipping up under a soft edge, then what you can do.
   One column of text like a script; narration italic, with no name. */
.hs-transcript { display:flex;flex-direction:column;width:min(760px,100%);max-height:min(calc(100dvh - 48px),680px); }
.hs-transcript>:not(.hs-lines) { flex:none; }
.hs-transcript .hs-dialogue-top { margin-bottom:0; }
.hs-lines { position:relative;flex:0 1 auto;min-height:0;max-height:min(42dvh,400px);overflow-y:auto;overscroll-behavior:contain;padding:18px 6px 2px 0;scrollbar-width:thin;scrollbar-color:#7c968466 transparent;
  -webkit-mask-image:linear-gradient(transparent,#000 16px);mask-image:linear-gradient(transparent,#000 16px); }
.hs-lines:empty { display:none; }
.hs-line { display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;margin:0 0 16px;transition:opacity .6s ease; }
.hs-line:last-child { margin-bottom:4px; }
.hs-face { grid-row:1/span 2;width:44px;height:44px;border:2px solid #baad79;border-radius:50%;overflow:hidden;background:#4e6258;box-sizing:border-box; }
.hs-face img { display:block;width:100%;height:100%;object-fit:cover; }
.hs-line .hs-person { grid-column:2;margin:1px 0 2px;color:#e4d2a2;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.08em; }
.hs-line .hs-spoken { grid-column:2;min-height:0; }
.hs-line-narration .hs-spoken { color:#cdd6c7; }
.hs-line-more .hs-face,.hs-line-more .hs-person { display:none; }
.hs-line.hs-said { opacity:.45; }
.hs-new { animation:hs-line-in .5s ease both; }
.hs-new+.hs-new { animation-delay:.14s; }.hs-new+.hs-new+.hs-new { animation-delay:.28s; }.hs-new+.hs-new+.hs-new+.hs-new { animation-delay:.42s; }
@keyframes hs-line-in { from{opacity:0;transform:translateY(6px)} }
.hs-choice { margin-top:12px;padding-top:16px;border-top:1px solid #80938d40; }
.hs-lines:empty+.hs-choice { margin-top:20px;padding-top:0;border-top:0; }
.hs-dialogue .hs-choice .hs-prompt { font:500 21px/1.4 Georgia,serif;margin:0 0 12px; }
/* side by side where there is room, so the choice does not lift the page over the world */
.hs-choice .hs-options { margin-top:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.hs-transcript .hs-dialogue-foot { margin-top:14px; }
.hs-options { display:grid;gap:10px;margin-top:20px; }
.hs-options button { padding:14px 18px; }
.hs-note { padding-top:16px;border-top:1px solid #83928940; }
.hs-work-panel { width:min(1000px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:26px 32px;background:linear-gradient(130deg,#223339,#142a2c);border:1px solid #ab9562;border-radius:18px;box-shadow:0 30px 100px #0009; }
.hs-work-panel>.hs-eyebrow { margin-bottom:6px; }
.hs-work-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.hs-work-panel h2 { font:500 32px/1.15 Georgia,serif;color:#f3e8c7;margin:0 0 8px; }
.hs-work-intro { color:#c4d1c7;font:14px/1.55 system-ui,sans-serif;margin:8px 0 15px; }
.hs-reserve { display:flex;gap:12px;align-items:center;padding:10px 16px;border:1px solid #a49b744a;border-radius:8px;font:12px/1.4 system-ui,sans-serif;color:#e1d4a8;background:#132525; }
.hs-reserve meter { width:140px;height:18px;accent-color:#d8c482; }
.hs-reserve small { margin-left:auto;color:#c2caba; }
.hs-circuit { height:180px;position:relative;width:min(650px,100%);margin:4px auto 0; }
.hs-wires { position:absolute;inset:0;width:100%;height:100%;overflow:visible; }
.hs-wires path { fill:none;stroke:#686351;stroke-width:3;stroke-linecap:round; }
.hs-wires path.flow { stroke:#e9cf82;filter:drop-shadow(0 0 4px #e9cf8277); }
.hs-wires path.reserve { stroke:#507376;stroke-dasharray:5 6; }
.hs-wires path.reserve.flow { stroke:#aad5dc; }
.hs-lamp { position:absolute;width:130px;top:15px;transform:translateX(-50%);text-align:center;font:12px/1.4 system-ui,sans-serif; }
.hs-lamp.left { left:16.67%; }.hs-lamp.middle { left:50%; }.hs-lamp.right { left:83.33%; }
.hs-handle { width:25px;height:20px;border:3px solid #ac956a;border-bottom:0;border-radius:15px 15px 0 0;margin:0 auto; }
.hs-glass { position:relative;width:60px;height:74px;margin:0 auto 7px;border:3px solid #b6a27e;border-top:8px solid #b6a27e;border-bottom:8px solid #b6a27e;border-radius:9px;background:#213b3c;transition:background .5s,box-shadow .5s; }
.hs-lamp.lit .hs-glass { background:#b6e1de;box-shadow:0 0 27px #8fd8db55; }
.hs-lamp.middle.lit .hs-glass { background:#b4e49b;box-shadow:0 0 27px #a0d37870; }
.hs-flame { position:absolute;bottom:12px;left:17px;width:20px;height:28px;background:#ffffe7;border-radius:70% 30% 65% 35%;opacity:0; }
.hs-lamp.lit .hs-flame { opacity:1;box-shadow:0 0 20px #ffffc8; }
.hs-lamp.held .hs-glass { outline:2px solid #b3e4ed;outline-offset:6px; }
.hs-lamp b { display:block;color:#f0e5cc; }.hs-lamp small { display:block;color:#adc7bf;font-size:11px; }
.hs-reading-status { min-height:44px;font:16px/1.5 Georgia,serif;color:#f4eacb;background:#0d202266;border-left:3px solid #c1b376;padding:10px 15px;margin:10px 0 16px; }
.hs-hand { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:stretch; }
.hs-working-card { position:relative;display:flex;flex-direction:column;align-items:stretch;padding:0 0 12px;text-align:left;border:2px solid #c9b780;border-radius:12px;overflow:hidden;background:#ede7d1;color:#253b37;box-shadow:0 5px 12px #0003; }
.hs-working-card.selected { outline:3px solid #a0e0cc;outline-offset:3px; }
.hs-working-card:hover { transform:translateY(-3px); }
.hs-working-card img { width:100%;height:85px;object-fit:cover; }
.hs-card-cost { position:absolute;top:7px;left:7px;background:#f4d181;color:#473216;padding:2px 8px;border:1px solid #8c6a32;border-radius:20px;font:700 13px/1.4 system-ui,sans-serif; }
.hs-working-card b { margin:9px 12px 5px;font:700 16px/1.2 Georgia,serif; }
.hs-card-rule { margin:0 12px;font:12px/1.45 system-ui,sans-serif; }
.hs-targets { display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:16px 0 5px; }
.hs-work-footer { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0 8px; }
.hs-live { position:relative;max-width:750px;text-align:center; }
.hs-live .hs-reading-status { text-align:left; }
.hs-released-star { position:absolute;top:100px;left:50%;color:#e0f1b0;font-size:46px;animation:hs-release 2.5s ease-out both;pointer-events:none; }
@keyframes hs-release { from{transform:translate(-50%,90px) scale(.35);opacity:0}35%{opacity:1}to{transform:translate(190px,-70px) scale(.75);opacity:0} }
.hs-preview .ow-dust,.hs-preview .ow-place-sub { display:none; }
.hs-preview .ow-place-name { font-size:22px; }
.hs-preview .ow-goal { max-width:650px; }
@media(max-width:640px){
 .hs-overlay.overlay { padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom)); }
 .hs-dialogue { padding:18px;max-height:calc(100dvh - 28px); }
 .hs-dialogue-top { margin-bottom:12px;gap:10px; }.hs-dialogue-top .hs-text-button { font-size:11px; }
 .hs-dialogue-top .hs-eyebrow { font-size:9px; }
 .hs-speaker { gap:12px; }.hs-speaker img { width:46px;height:46px; }
 .hs-dialogue p { font-size:17px;line-height:1.55; }.hs-dialogue-foot { margin-top:17px; }.hs-dialogue-foot .hs-caption{display:none;}
 .hs-dialogue-foot .hs-primary { margin-left:auto; }
 .hs-transcript { max-height:calc(100dvh - 24px); }
 .hs-lines { max-height:46dvh;padding-top:14px;-webkit-mask-image:linear-gradient(transparent,#000 12px);mask-image:linear-gradient(transparent,#000 12px); }
 /* a phone gives the words the full width: the face sits small beside the name */
 .hs-line { grid-template-columns:26px minmax(0,1fr);column-gap:9px;margin-bottom:12px; }
 .hs-face { grid-row:1;width:26px;height:26px;border-width:1.5px; }
 .hs-line .hs-person { align-self:center;margin:0;font-size:11px; }
 .hs-line .hs-spoken { grid-column:1/-1;margin-top:3px; }
 .hs-line-narration .hs-spoken,.hs-line-more .hs-spoken { margin-top:0; }
 .hs-transcript .hs-spoken { font-size:16.5px;line-height:1.5; }
 /* with a choice under them the lines give way, so the page leaves the world in view */
 .hs-transcript:has(.hs-choice) .hs-lines { max-height:26dvh; }
 .hs-dialogue .hs-choice .hs-prompt { font-size:18px;margin-bottom:10px; }.hs-choice { margin-top:8px;padding-top:12px; }
 .hs-choice .hs-options { gap:8px; }.hs-choice .hs-options button { padding:10px 14px; }
 .hs-transcript .hs-dialogue-foot { margin-top:10px;padding-top:12px; }
 .hs-work-panel { padding:17px;max-height:calc(100dvh - 28px); }
 .hs-work-panel h2 { font-size:26px; }.hs-work-heading { align-items:flex-start; }.hs-work-heading .hs-text-button { font-size:10px;max-width:82px;padding:0 0 8px; }
 .hs-reserve { flex-wrap:wrap;gap:7px;padding:8px; }.hs-reserve meter { width:100px; }.hs-reserve small { margin-left:0;flex-basis:100%; }
 .hs-circuit { height:181px; }.hs-lamp { width:100px;top:8px; }.hs-glass{width:43px;height:58px;}.hs-flame{left:10px;width:15px;height:22px;bottom:8px;}.hs-lamp b{font-size:10px;}.hs-lamp small{font-size:9px;}
 .hs-hand { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.hs-working-card img { height:58px; }.hs-working-card b { font-size:15px; }.hs-card-rule { font-size:11px; }
 .hs-reading-status { font-size:15px; }.hs-work-intro { font-size:12px; }.hs-work-footer { flex-direction:column;align-items:stretch;gap:10px; }
 .hs-preview .ow-hud-in { padding:10px 14px; }.hs-preview .ow-place-name{font-size:18px;}
 .hs-preview .ow-hud .ow-gbtn { display:inline-flex;align-items:center;min-height:44px; }
 .hs-cover>p:not(.hs-eyebrow):not(.hs-caption):not([role="status"]){font-size:16px;}.hs-cover h1{font-size:47px;}
}
@media(prefers-reduced-motion:reduce){.hs-preview *, .hs-preview *::before, .hs-preview *::after{animation:none!important;transition:none!important}.hs-released-star{opacity:1;transform:translate(60px,-40px);}}

.hs-reserve meter::-webkit-meter-optimum-value { background:#d8c482; }
.hs-hand:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,210px));justify-content:center; }

/* Native modal keeps sound settings usable above story dialogue and encounters. */
#story-audio-dialog { width:min(360px,calc(100vw - 32px));box-sizing:border-box;margin:auto;padding:24px;border:1px solid #a9b99a;border-radius:16px;background:#1c2e33;color:#fff4d9;box-shadow:0 20px 80px #0008;font:16px/1.5 system-ui,sans-serif; }
#story-audio-dialog::backdrop { background:#081017aa; }
#story-audio-dialog h2 { margin:0 0 20px;font:500 28px/1.2 Georgia,serif; }
#story-audio-dialog label { display:flex;justify-content:space-between;margin-top:20px; }
#story-audio-dialog input { display:block;width:100%;min-height:44px;margin:0 0 20px;accent-color:#d6bc75; }
#story-audio-dialog button { width:100%; }

@media(max-width:760px){
  .hs-preview .ow-hud-right { flex-wrap:wrap; }
  .hs-preview .ow-hud-right .ow-gbtn { min-width:0;padding:8px 10px;font-size:13px; }
  .hs-preview .ow-dial { width:54px;flex-shrink:0; }
  .hs-preview .ow-dial[data-time="night"] .ow-dial-knob { transform:translateX(22px); }
}

/* Match the main game's recognizable music toggle and nearby volume control. */
.story-audio-control {position:relative;flex-shrink:0;}
.hs-preview .ow-hud-right .story-music-toggle {
  background:#514b91;border:1px solid #8278b0;border-radius:14px;
  color:#fff8e9;font-weight:750;white-space:nowrap;
}
.hs-preview .ow-hud-right .story-music-toggle[aria-pressed="true"] {background:#353047;color:#ddd5e7;}
.story-volume-panel {
  display:none;position:absolute;z-index:130;top:100%;right:0;
  width:170px;padding:14px;border:1px solid #8278b0;border-radius:14px;
  background:#252139;color:#fff8e9;box-shadow:0 8px 24px #0006;
}
.story-volume-panel label {display:flex;justify-content:space-between;font:600 13px/1.4 system-ui,sans-serif;}
.story-volume-panel input {display:block;width:100%;height:36px;margin:4px 0 0;accent-color:#f0d477;cursor:pointer;}
.story-volume-panel .story-voice-row {align-items:center;margin-top:10px;cursor:pointer;}
.story-volume-panel .story-voice-row input {width:20px;height:20px;margin:0;}
.story-audio-control:hover .story-volume-panel,
.story-audio-control:focus-within .story-volume-panel,
.story-audio-control.open .story-volume-panel {display:block;}

@media(max-width:760px){
  .hs-preview .ow-hud-right {position:relative;}
  .story-audio-control {position:static;}
}

/* Story conversations are a quiet writing desk beneath the moving world. */
.story-preview .hs-dialogue:not(.story-journal):not(.story-ending) {
  background:#193238f2;border:1px solid #b2ad8266;border-left:5px solid #b7a46f;
  border-top-width:1px;border-radius:4px 12px 12px 4px;box-shadow:0 18px 80px #102d3266;
}
.story-preview .hs-reading.overlay { padding-bottom:max(28px,env(safe-area-inset-bottom));background:linear-gradient(transparent 12%,#112a3029 48%,#0c222de6); }
.story-preview .hs-transcript { width:min(740px,100%);padding:22px 28px; }
.story-preview .hs-transcript .hs-eyebrow { font:italic 14px/1.4 Georgia,serif;letter-spacing:0;text-transform:none;color:#bbcdb9; }
.story-preview .hs-transcript .hs-text-button { color:#bdcbbd;font:12px/1.4 system-ui,sans-serif; }
.story-preview .hs-transcript .hs-spoken { font:18px/1.6 Georgia,serif;max-width:64ch;color:#f2e9d0; }
.story-preview .hs-transcript .hs-person { font:600 12px/1.4 system-ui,sans-serif;letter-spacing:0;color:#d7c38a; }
.story-preview .hs-line.hs-said { opacity:.68; }
.story-preview .hs-transcript :is(.hs-button,.hs-primary) { border-radius:5px;font:14px/1.4 system-ui,sans-serif;padding:11px 18px; }
.story-preview .hs-work-panel { background:#193238f5;border:1px solid #b2ad8266;border-left:5px solid #b7a46f;border-radius:4px 12px 12px 4px; }
.story-preview .hs-work-panel>.hs-eyebrow { color:#b8cbb7;font:italic 14px/1.4 Georgia,serif;letter-spacing:0;text-transform:none; }
.story-preview .hs-work-panel h2 { font-weight:500;letter-spacing:-.015em; }
.story-preview .hs-work-panel .hs-text-button { font:13px/1.4 system-ui,sans-serif; }
.story-preview .hs-work-panel .story-work-action { border-radius:5px;box-shadow:none; }
.story-preview .hs-work-panel .story-work-action .hs-button { border-radius:4px;font:14px/1.4 system-ui,sans-serif; }
@media(max-width:640px) {
  .story-preview .hs-transcript { padding:17px 18px; }
  .story-preview .hs-transcript .hs-spoken { font-size:16.5px;line-height:1.55; }
  .story-preview .hs-work-panel .hs-text-button { font-size:11px; }
}

/* Campaign audit follow-up: the cards may scroll, but a working always leaves
   its title and safe stop in reach, including when focus brings a card up. */
.story-preview .hs-work-panel { scroll-padding-top:76px; }
.story-preview .hs-work-heading {
  position:sticky;top:-26px;z-index:2;margin-inline:-32px;padding:8px 32px;
  background:#193238;box-shadow:0 7px 10px #193238d9;
}
.story-preview .hs-work-heading h2 { margin:0; }
.story-preview .hs-work-panel .story-work-actions button { scroll-margin-top:76px; }
@media(max-width:640px) {
  .story-preview .hs-work-heading { top:-17px;margin-inline:-17px;padding:6px 17px; }
}