:root {
  --paper:#f0e3c8; --ink:#34291f; --muted:#74634e; --blue:#293e57;
  --red:#8f392b; --green:#395a43; --gold:#aa8846; --line:#c4ae80;
  --serif:Georgia,"Noto Serif CJK SC","Songti SC",SimSun,serif;
  --paper-wash:linear-gradient(#fff5dd64,#fff5dd64),var(--parchment) center / cover no-repeat,var(--paper);
}
* {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0;height:100dvh;display:flex;flex-direction:column;background:var(--parchment) center / cover no-repeat fixed,var(--paper);color:var(--ink);font:17px/1.55 var(--serif);overflow:hidden}
h1,h2,h3,p,figure {margin:0}
button,input,select {font:inherit;color:inherit}
button {cursor:pointer;border:1px solid transparent;background:transparent;padding:8px 12px;min-height:40px;transition:background .12s,color .12s,border-color .12s;text-align:center}
button:hover:not(:disabled) {color:var(--blue);background:#decda650;border-color:var(--gold)}
button:active:not(:disabled) {background:#d2bd8e;translate:0 1px}
button:disabled {color:#897c65;cursor:default}
button:disabled small {color:#897c65}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,#map:focus-visible,svg g:focus-visible {outline:2px solid #8a422e;outline-offset:3px}
button.primary {background:var(--blue);color:#fff0d1;border-color:var(--blue)}
button.primary:hover:not(:disabled) {background:#3b526a;color:#fff8e8;border-color:#b39250}
button.primary:disabled {background:#bcb5a3;border-color:#bcb5a3;color:#544e43}
button.primary small {color:#e2d7be}
input,select {min-height:38px;min-width:0;padding:4px 8px;border:1px solid #b09b72;background:#fff4ddaa}
input[type=number] {width:76px;font-variant-numeric:tabular-nums}
select {max-width:100%}
small,.muted {color:var(--muted);font-size:14px}
.warn {color:var(--red)!important}
.pack-alert {font-size:15px;margin-bottom:12px}
.good {color:var(--green)!important}
.full {width:100%}
.story {white-space:pre-line}
.initial {height:1.5em;width:1.5em;object-fit:contain;vertical-align:-.4em;margin-right:.18em}
.initial-label {white-space:normal}
:lang(zh-CN) .initial {margin-right:.14em}
#header {min-height:92px;display:flex;align-items:center;gap:28px;padding:12px 30px 14px}
.book-title {flex-shrink:0}
#book-subtitle {color:var(--red);font-size:12px;letter-spacing:.16em}
#title {color:var(--ink);font-size:30px;line-height:1.25;letter-spacing:.08em;font-weight:400}
#language {background:transparent;font-size:14px;border-color:#b3a181}
#app {flex:1;min-height:0;display:grid;grid-template-columns:clamp(410px,32vw,520px) minmax(0,1fr);margin:0 24px;border:3px solid var(--blue);box-shadow:0 6px 22px #4b3a2520}
#panel {grid-column:1;grid-row:1;min-height:0;display:flex;flex-direction:column;background:var(--paper-wash);position:relative;z-index:1;padding:12px;box-shadow:5px 0 12px #503e2c30}
/* Match the shared panel_frame3_9 contract: fixed 64px source corners. */
#panel::after {content:"";position:absolute;inset:-5px -8px;border:24px solid transparent;border-image:var(--panel-frame) 64 / 24px / 0 stretch;pointer-events:none;z-index:3}
.chapter-line {padding:17px 25px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--red);font-size:13px;letter-spacing:.13em}
.interlace {color:var(--gold);font-size:15px;white-space:nowrap;letter-spacing:3px}
#location-heading {padding:10px 25px 12px}
#location-heading h2 {font-size:34px;line-height:1.23;color:var(--ink);font-weight:400}
#location-heading p {margin-top:7px;font-size:16px;color:#66543d;line-height:1.6}
#pilgrimage-timing {margin:0 25px;padding:8px 0;border-block:1px solid var(--gold);font-size:15px}
#pilgrimage-timing>div {display:flex;justify-content:space-between;gap:8px;align-items:baseline}
#pilgrimage-timing strong {font-weight:400;color:var(--red);text-align:right}
#pilgrimage-timing small {display:block;font-size:13px;line-height:1.55}
#pilgrimage-timing .timing-date {margin-top:2px}
#party-stats {display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:12px 25px 10px}
.supply {display:flex;gap:6px;align-items:center;min-width:0}
.supply img {width:25px;height:28px;object-fit:contain}
.supply small {display:block;font-size:13px}
.supply strong {display:block;font-size:19px;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
#march-speed {margin:0 25px 9px;display:flex;align-items:baseline;gap:9px;color:var(--blue);font-variant-numeric:tabular-nums}
#march-speed strong {font-weight:400;font-size:21px}
#march-speed small {margin-left:auto}
#tabs {display:flex;flex-shrink:0;padding:0 14px;border-bottom:1px solid var(--line)}
#tabs:empty {display:none}
#tabs button {display:flex;align-items:center;justify-content:center;gap:5px;flex:1 1 auto;min-width:0;border:0;border-bottom:3px solid transparent;min-height:48px;font-size:17px;padding:6px 3px;color:var(--muted)}
#tabs button img {width:27px;height:27px;object-fit:contain;flex-shrink:0;pointer-events:none;transition:transform .12s ease,filter .12s ease}
#tabs button:hover img,#tabs button:focus-visible img {transform:scale(1.1);filter:brightness(1.2) drop-shadow(0 0 3px #e5bd6b88)}
#tabs button span {min-width:0}
#tabs button[aria-selected=true] {color:var(--blue);border-bottom-color:var(--blue)}
#panel-body {overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:18px 25px 24px;scrollbar-width:thin;scrollbar-color:#a98c56 #eadabc}
#panel-bottom {padding:10px 25px 14px;border-top:1px solid var(--line);background:var(--paper-wash)}
#panel-bottom .setup-total {padding:0 0 8px;font-size:15px}
#panel-bottom button {text-align:center}
#notice {font-size:15px;color:var(--red);padding:0 25px}
#notice:not(:empty) {padding-block:9px;border-top:1px solid var(--line)}
#save-notification {position:fixed;inset:18px 18px auto auto;margin:0;width:max-content;max-width:calc(100vw - 36px);padding:14px 20px;border:1px solid var(--gold);border-left:4px solid var(--blue);background:var(--paper-wash);color:var(--blue);font:17px/1.55 var(--serif);box-shadow:0 4px 18px #34291f40;pointer-events:none}
.section-title {font-size:19px;font-weight:400;color:var(--red);margin:21px 0 9px;display:flex;align-items:center;gap:10px}
.section-title:after {content:"";height:1px;background:var(--line);flex:1}
.section-title:first-child {margin-top:0}
.action-list {display:grid}
.action {display:block;width:100%;text-align:left;padding:10px 0;border:0;border-bottom:1px solid #c4ae805e}
.action strong {font-size:19px;font-weight:400;color:var(--blue)}
.action small {display:block;font-size:14px;line-height:1.65;margin-top:3px}
.action:hover:not(:disabled) {background:#d9c59c55;padding-inline:9px}
.action.primary {padding:11px 14px;margin-bottom:8px;border:1px solid var(--blue)}
.action.primary strong {color:#fff0d1}
.action:disabled strong {color:#897c65}
.action:disabled {border-bottom-style:dashed}
.route-row {padding:11px 0;border-bottom:1px solid var(--line)}
.route-row h3 {font-size:23px;font-weight:400;color:var(--blue)}
.route-row p {margin:4px 0 9px;font-size:15px;color:var(--muted)}
.route-row button {border:1px solid var(--line);width:100%;text-align:left}
.activity {min-height:0;overflow:auto;overscroll-behavior:contain;padding:5px 9px;scrollbar-width:thin}
.activity>strong {font-size:23px;font-weight:400;color:var(--blue)}
.activity p {font-size:15px;color:var(--muted);margin:6px 0}
.activity button {margin-top:8px}
meter,progress {width:100%;height:6px;accent-color:var(--blue);border:0;display:block;margin-top:10px}
progress::-webkit-progress-bar {background:#ccb78e65}
progress::-webkit-progress-value {background:var(--blue)}
.item-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 0;border-bottom:1px solid #c4ae8080}
.item-row .name {font-size:19px}
.item-row small {display:block;font-size:14px;margin-top:3px}
.item-row .buttons {display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.item-row button {border:1px solid var(--line);min-height:34px;font-size:15px;padding:3px 10px}
.item-row input {width:65px;text-align:center}
.item-row .quantity {min-width:48px;text-align:right;font-size:22px;color:var(--blue)}
.item-row .initial {height:1.2em;width:1.2em}
.ledger-head {display:flex;justify-content:space-between;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:5px}
.setup-stats {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.setup-stats label {display:grid;gap:5px;font-size:15px}
.setup-stats input {width:100%}
details {margin:16px 0 0}
.folio-section {margin:14px 0 0}
.folio-section:first-child {margin-top:0}
.folio-section>summary {display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 0;color:var(--red);font-size:19px;line-height:1.3;list-style:none}
.folio-section>summary::-webkit-details-marker {display:none}
.folio-section>summary:hover {color:var(--blue)}
.folio-section>summary .initial-label {min-width:0}
.divider-line {height:1px;min-width:12px;background:var(--gold);flex:1}
.divider-arrow {width:8px;height:8px;flex:none;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);margin:0 4px}
.folio-section[open]>summary .divider-arrow {transform:rotate(45deg)}
.section-body {padding:2px 0 4px}
.section-body .item-row:first-child {padding-top:7px}
summary {cursor:pointer;color:var(--blue);padding:7px 0;font-size:17px}
.metrics {display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:10px 0;font-size:15px}
.metrics>div {display:flex;justify-content:space-between;gap:9px}
.metrics.speed-breakdown {grid-template-columns:1fr}
.metrics b {font-weight:400;font-variant-numeric:tabular-nums;color:var(--blue)}
.context-art {width:100%;height:130px;object-fit:contain;object-position:center;margin:15px auto 3px;display:block;pointer-events:none}
.context-art.intro-art {height:100px;margin:0 auto 20px}
.rite-heading {text-align:center;padding:16px 0;border-block:1px solid var(--gold);margin:0 0 18px}
.rite-heading .interlace {display:block;margin-bottom:6px}
.rite-heading h3 {font-size:26px;font-weight:400}
.rite-heading p {font-size:15px;color:var(--muted);margin-top:6px}
.log {padding:0;list-style:none}
.log li {padding:13px 0;border-bottom:1px solid #c4ae8080;font-size:17px}
.log time {color:var(--red);font-size:14px;display:block;margin-bottom:4px}
.empty {color:var(--muted)}
#map-panel {grid-column:2;grid-row:1;position:relative;overflow:hidden;min-height:0;background:#d6bd90;display:flex;flex-direction:column}
#map-stage {position:relative;flex:1;min-height:0}
#map {position:absolute;inset:0;touch-action:none;cursor:grab;overflow:hidden}
#map,#map * {-webkit-user-select:none;user-select:none}
#map image {-webkit-user-drag:none}
#map.dragging {cursor:grabbing}
#atlas {display:block}
#basemap {filter:brightness(calc(1 - .24 * var(--map-darkness,0))) saturate(calc(1 - .15 * var(--map-darkness,0)))}
#edges path {fill:none;stroke:#654936;stroke-width:1.7;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;opacity:.75;pointer-events:none}
#edges path.route-active {stroke:var(--blue);stroke-width:3;opacity:1}
#nodes>g,#bandits>g,#road-parties>g {cursor:pointer}
.map-hit {fill:transparent;stroke:none}
#nodes .anchor {fill:#eedcb1;stroke:#68492d;stroke-width:1.5}
#nodes .town {fill:var(--blue);stroke:#f7e7bf}
#nodes .selection-ring {fill:none;stroke:var(--blue);stroke-width:2.5}
#nodes text,#bandits text,#player text,#road-parties text {font-family:var(--serif);font-size:15px;fill:#32251b;paint-order:stroke;stroke:#f4e3bc;stroke-width:4;stroke-linejoin:round;pointer-events:none}
#road-parties .party-anchor,#bandits .party-anchor {fill:var(--blue);stroke:#f5e3bb;stroke-width:1.5;pointer-events:none}
#road-parties .party-tether {stroke:#5a4a3670;stroke-width:1;pointer-events:none}
#map .map-marker image {pointer-events:none;transform-box:fill-box;transform-origin:center}
#map .map-marker:focus {outline:none}
#map .map-marker:focus-visible image,#map .map-marker.selected image {filter:brightness(1.15) drop-shadow(0 0 3px #fff0ca)}
#map .map-marker.selected image {scale:1.12}
#nodes .selected:not(.map-marker) text {fill:var(--blue);font-weight:bold}
#bandits text {fill:var(--red);font-weight:bold}
#bandits [data-disguised=true] text {fill:#32251b;font-weight:normal}
#bandits .enemy-anchor {fill:var(--red);stroke:#f5e3bb;stroke-width:1.5}
#player .player-anchor {fill:var(--blue);stroke:#fff0ca;stroke-width:2}
#player text {fill:var(--blue);font-weight:bold}
#sea-boats text,#player .aboard text {font:700 17px var(--serif);fill:#fff2ce;stroke:#253448;stroke-width:3.5;paint-order:stroke fill;stroke-linejoin:round}
.map-figure {pointer-events:none}
#map-heading {position:absolute;top:16px;left:18px;right:18px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;pointer-events:none;color:#49371e}
#map-title {font-size:23px;letter-spacing:.08em;text-shadow:0 1px 3px #fff0d8}
#map-mode {font-size:14px;background:#eddfbbbd;padding:2px 7px}
#map-tools {position:absolute;right:16px;bottom:46px;display:flex;gap:4px;z-index:2}
#map-tools button {min-width:37px;background:#f5e6c9e8;border:1px solid #ac8e58;font-size:15px;padding:5px 10px;box-shadow:0 2px 6px #49371e12}
#map-tools button:hover:not(:disabled) {background:#fff1d6}
#map-caption {position:absolute;bottom:8px;left:15px;max-width:calc(100% - 30px);padding:2px 7px;background:#f2e4c7cf;font-size:14px;color:#51412b;pointer-events:none}
#map-cards {--dock-bottom:116px;position:absolute;left:12px;bottom:var(--dock-bottom);width:330px;max-width:calc(100% - 24px);max-height:calc(100% - var(--dock-bottom) - 58px);display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none;z-index:3}
#map-cards:has(> #map-selection[hidden]) {width:265px}
#map-cards:not(:has(> :not([hidden]))) {display:none}
.map-card {min-width:0;min-height:0;display:flex;flex-direction:column;isolation:isolate;border:20px solid transparent;filter:drop-shadow(0 5px 7px #48361940);pointer-events:auto;max-height:min(48dvh,410px)}
#map-panel:has(#map-activity:not([hidden])) #map-caption {display:none}
/* Underlap the inner transparent rim; keep the scalloped outer silhouette clear. */
.map-card {position:relative}
.map-card::before {content:"";position:absolute;inset:-8px;border-radius:8px;background:var(--paper-wash);pointer-events:none;z-index:-1}
.map-card::after {content:"";position:absolute;inset:-20px;border:20px solid transparent;border-image:var(--selection-frame) 90 / 20px / 0 repeat;pointer-events:none;z-index:2}
.selection-content {min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 15px;scrollbar-width:thin;scrollbar-color:#a98c56 #eadabc}
#map-selection button:not(.close) {display:block;text-align:left}
#map-selection button:not(.close) strong,#map-selection button:not(.close) small {display:block}
#map-selection button:not(.close) small {font-size:14px;line-height:1.55;margin-top:5px}
#map-selection h3 {font-size:24px;color:var(--blue);font-weight:400;line-height:1.3}
#map-selection p {font-size:16px;margin:9px 0}
#map-selection .close {float:right;margin:-5px -6px 0 8px;border:0;font-size:25px;padding:0 8px;min-height:30px}
.selection-art {float:left;width:62px;height:62px;object-fit:contain;margin:0 12px 8px 0}
.selection-roster {clear:both;margin:8px 0;border-top:1px solid #775a3938;padding:6px 0;font-size:14px}
.selection-roster>div {display:flex;justify-content:space-between;gap:8px}
.selection-roster>div>b {flex:none}
/* The map is the pointer surface; only real HUD controls intercept it. */
.header-tools {margin-left:auto;display:flex;align-items:center;gap:18px}
#session-buttons {display:flex;gap:4px;border-right:1px solid var(--line);padding-right:14px}
#session-buttons button {font-size:15px;padding:4px 10px}
#session-buttons strong {font-weight:400}
#app {margin-bottom:14px}
#map-panel {container-type:inline-size}
#map-heading {right:auto;align-items:flex-start;flex-direction:column;gap:3px}
#map-tools {top:14px;bottom:auto}
#map-caption {bottom:10px;font-size:12px;max-width:calc(50% - 228px)}
@container (min-width:1120px) {
  #map-cards {--dock-bottom:12px}
}
@container (min-width:960px) and (max-width:1119px) {
  #map-cards:has(> #map-selection[hidden]) {--dock-bottom:12px;max-width:min(265px,calc(100% - 753px))}
}
#map-hud {position:absolute;inset:0;pointer-events:none;z-index:2}
#time-hud {position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(430px,100%);height:70px;color:#fff4d4;isolation:isolate}
.hud-center-bg {position:absolute;bottom:0;width:100%;height:auto;z-index:-1;filter:drop-shadow(0 -2px 3px #38291966)}
#time-label {position:absolute;bottom:1px;left:9%;width:32%;text-align:center;line-height:1.14;text-shadow:0 1px 2px #171e12}
#time-label strong,#time-label small {display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
#time-label strong {font-size:16px;font-weight:bold}
#time-label small {color:#fbf4d7;font-size:12px}
#sun-moon-button {position:absolute;left:50%;bottom:0;width:70px;height:70px;transform:translateX(-50%);padding:0;border:0;border-radius:50%;background:none;pointer-events:auto;isolation:isolate}
#sun-moon-button:disabled {pointer-events:auto}
.hud-dial-ring {position:absolute;inset:0;width:100%;height:100%}
.hud-dial-clip {position:absolute;left:50%;top:50%;width:50px;height:50px;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:#34485b}
.hud-dial-strip {position:absolute;inset:0;background-repeat:repeat-x;background-size:190px 52px;background-position-y:center}
#dial-action {position:absolute;right:0;bottom:3px;width:24px;height:24px;object-fit:contain;padding:4px;background:#34302a;border:1px solid #c6aa68;border-radius:50%}
#sun-moon-button:hover:not(:disabled) {filter:brightness(1.15)}
#time-buttons {position:absolute;left:58%;right:9%;bottom:0;height:36px;display:flex;align-items:stretch;pointer-events:auto}
#time-buttons button {flex:1;display:flex;align-items:center;justify-content:center;gap:3px;min-height:0;min-width:0;padding:0 2px;border:0;border-radius:2px;color:#342713;font:bold 14px/1 Georgia,serif}
#time-buttons img {width:15px;height:16px;object-fit:contain}
#time-buttons button[aria-pressed=true] {background:#4b351b;color:#fff4d5;box-shadow:inset 0 0 0 1px #d2b16e}
#time-buttons button:hover {background:#674a2a;color:#fff6d9}
#character-hud {position:absolute;right:0;bottom:0;width:312.4px;aspect-ratio:1764/891;filter:drop-shadow(-1px -2px 3px #38291955)}
.hud-right-clip {position:absolute;inset:0}
.hud-right-bg {position:absolute;top:0;left:0;width:100%;height:auto}
.hud-stat-grid {position:absolute;inset:38px 19px 19px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 5px;color:#fff0c9;text-shadow:0 1px 2px #182736}
.stat {pointer-events:auto;display:grid;grid-template-columns:24.2px minmax(0,1fr);grid-template-rows:auto 27.5px;align-content:center;align-items:center;gap:2px 5px;line-height:1.1}
.stat>div {display:contents}
.stat img {grid-column:1;grid-row:2;width:24.2px;height:27.5px;object-fit:contain}
.stat small,.stat b {display:block;white-space:nowrap}
.stat small {grid-column:1/-1;grid-row:1;font-size:13px;color:#f2e7ce}
.stat b {grid-column:2;grid-row:2;font-size:18.7px;font-weight:bold;font-variant-numeric:tabular-nums}
.stat.low b {color:#ffd29a;text-decoration:underline dotted}
@container (max-width:1100px) {
  #time-hud {left:clamp(205px,calc(100% - 527.4px),50%);width:410px}
  #map-caption {display:none}
}
@container (max-width:760px) {
  #time-hud {width:min(405px,100%);left:50%}
  #character-hud {bottom:75px;width:264px}
  .hud-stat-grid {inset:32px 17px 15px}
  .stat {grid-template-columns:19.8px minmax(0,1fr);grid-template-rows:auto 23.1px;column-gap:4px}
  .stat img {width:19.8px;height:23.1px}
  .stat b {font-size:16.5px}
  .stat small {font-size:12px}
  #map-cards,#map-cards:has(> #map-selection[hidden]) {position:static;flex:none;width:100%;max-width:100%;max-height:46%;padding:4px;background:var(--paper-wash)}
  .map-card {max-height:32dvh}
}
/* Match IdrisiAtlasFrameWidget: 90 source-pixel corners, repeated edges. */
dialog {color:var(--ink);background:transparent;border:0;width:min(1040px,calc(100vw - 40px));padding:22px;max-height:calc(100dvh - 40px);overflow:visible;isolation:isolate;filter:drop-shadow(0 18px 40px #10192588)}
dialog::before {content:"";position:absolute;inset:10px;border-radius:20px;background:var(--paper-wash);z-index:-1;pointer-events:none}
dialog::after {content:"";position:absolute;inset:0;border:29.25px solid transparent;border-image:var(--selection-frame) 90 / 29.25px / 0 repeat;pointer-events:none;z-index:2}
.encounter-content {padding:14px 20px 10px;max-height:calc(100dvh - 84px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
dialog::backdrop {background:#17222b99;backdrop-filter:blur(2px)}
.encounter-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
#event-language {background:transparent;font-size:14px}
.encounter-spread {display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:28px;align-items:center}
#event-illustration {min-width:0}
#event-art {width:100%;max-height:410px;object-fit:contain;display:block}
#event-art[hidden],#battle-lineup[hidden] {display:none}
#battle-lineup {display:grid;grid-template-columns:minmax(0,1fr) clamp(32px,12%,58px) minmax(0,1fr);align-items:center;gap:6px;padding:16px 8px;border-block:1px solid #b49a68;color:var(--blue);text-align:center}
.battle-side {display:grid;gap:5px;justify-items:center;min-width:0;overflow-wrap:anywhere}
.battle-side:last-child {color:var(--red)}
.battle-riders {display:flex;justify-content:center;align-items:end;width:100%;height:clamp(42px,7vw,94px)}
.battle-riders img {width:min(100%,94px);height:100%;min-width:0;object-fit:contain}
.battle-riders img:not(:only-child) {width:50%}
.battle-side:first-child img {transform:scaleX(-1)}
.battle-side small {display:grid;gap:2px;font-size:14px}
.battle-side small span {overflow-wrap:normal}
.battle-strike {width:100%;overflow:visible;color:#a24735;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#raid-marks {pointer-events:none}
#raid-marks .battle-strike {stroke-width:3}
.battle-strike .sparks {transform-box:fill-box;transform-origin:center;animation:battle-strike 1.75s ease-out infinite}
#battle-lineup[data-resolved] .sparks {animation:battle-impact .55s ease-out both}
@keyframes battle-strike {0%,100% {opacity:.28;transform:scale(.8)} 23% {opacity:1;transform:scale(1.22)} 58% {opacity:.4;transform:scale(1)}}
@keyframes battle-impact {0% {opacity:1;transform:scale(1.3)} 100% {opacity:.35;transform:scale(1)}}
@media(prefers-reduced-motion:reduce) {.battle-strike .sparks,#battle-lineup[data-resolved] .sparks {animation:none}}
.dialog-heading>span {font-size:14px;color:var(--red);letter-spacing:.1em}
dialog h2 {font-size:32px;font-weight:400;line-height:1.35;margin-top:7px}
/* Trim the existing Simple sprite's horizontal alpha padding, without distorting it. */
#event-title .initial {margin-left:calc(-1.5em * var(--initial-left,0));margin-right:calc(.06em - 1.5em * var(--initial-right,0))}
:lang(zh-CN) #event-title .initial {margin-right:calc(.12em - 1.5em * var(--initial-right,0))}
#event-text {white-space:pre-line;line-height:1.9;font-size:18px;margin-top:15px}
#event-details {font-size:16px;color:var(--red);margin-top:12px}
#event-options {display:grid;margin-top:19px;border-top:1px solid var(--line)}
#event-options button {text-align:left;font-size:19px;padding:12px 0;border:0;border-bottom:1px solid var(--line);color:var(--blue)}
#event-options button:hover:not(:disabled) {padding-inline:10px}
#event-options button:disabled {color:#85775f}
#event-options small {display:block;font-size:15px;margin-top:4px;color:var(--red)}
#event-options .action {padding:12px 0}
#event-options strong {font-weight:400}
#event-time {font-size:14px;text-align:center;margin-top:22px;color:var(--muted);border-top:1px solid #c4ae8070;padding-top:10px}
#loader {margin:10vh auto;padding:30px;background:var(--paper-wash);border:1px solid var(--gold);max-width:650px}
#loader p {margin-bottom:15px}
#load-files {overflow-wrap:anywhere;font-size:14px;color:var(--muted)}
@media(min-width:1600px) {
  #app {margin-inline:38px}
  #header {padding-inline:43px}
  #panel-body {padding:22px 32px}
  #location-heading {padding-inline:32px}
  .chapter-line {padding-inline:32px}
}
@media(max-width:1150px) {
  #header {padding:12px 20px;gap:16px}
  #app {grid-template-columns:390px minmax(0,1fr);margin-inline:14px}
  #title {font-size:26px}
  #tabs {padding-inline:8px}
  #tabs button {font-size:15px;gap:4px}
  #tabs button img {width:24px;height:24px}
}
@media(max-width:900px) {
  #app {grid-template-columns:355px minmax(0,1fr)}
  #tabs button {font-size:14px;gap:3px;padding-inline:2px}
  #tabs button img {width:22px;height:22px}
  #location-heading,.chapter-line {padding-inline:18px}
  #panel-body {padding-inline:18px}
  #party-stats,#pilgrimage-timing {margin-inline:18px}
  #party-stats {gap:7px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .supply {gap:4px}
  .supply img {width:20px;height:24px}
  .supply strong {font-size:17px}
  .supply small {font-size:12px}
  #map-title {font-size:19px}
  #map-mode {display:none}
  .encounter-spread {grid-template-columns:35% minmax(0,1fr);gap:18px}
}
@media(max-width:740px) {
  body {height:auto;min-height:100dvh;overflow:auto;padding-bottom:67px}
  .header-tools {display:contents}
  #language-label {grid-column:2;grid-row:1;justify-self:end}
  #session-buttons {grid-column:1/-1;justify-self:start;padding:0;border:0;gap:6px}
  #session-buttons button {padding:3px 6px;min-height:32px;font-size:14px}
  #map-panel {container-type:normal}
  #time-hud {position:fixed;left:50%;bottom:0;width:min(430px,100vw);z-index:5}
  #map-hud {z-index:auto}
  #character-hud {bottom:0;width:266.2px}
  .stat {grid-template-columns:19.8px minmax(0,1fr);grid-template-rows:auto 23.1px;column-gap:4px}
  .hud-stat-grid {inset:32px 17px 15px}
  .stat img {width:19.8px;height:23.1px}
  .stat b {font-size:16.5px}
  .stat small {font-size:12px}
  #map-caption {display:none}
  #app {margin-bottom:0}
  #header {display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 16px 6px}
  .book-title {grid-column:1;grid-row:1}
  #app {display:flex;flex-direction:column;margin:0 9px;flex:none;border-width:2px}
  #map-panel {order:-1;flex:none}
  #map-stage {flex:none;height:max(40dvh,270px)}
  #map-heading {top:10px;left:12px}
  #map-tools {right:8px;top:8px;bottom:auto;display:grid;grid-template-columns:auto auto;gap:2px}
  #map-tools button:nth-child(n+3) {grid-column:1/-1}
  #map-tools button {font-size:14px;min-width:34px;padding:4px 7px}
  #map-caption {left:9px;font-size:12px}
  #map-cards,#map-cards:has(> #map-selection[hidden]) {position:static;width:100%;max-width:100%;max-height:none;gap:4px;padding:4px;background:var(--paper-wash)}
  #map-cards>.map-card {max-height:32dvh}
  .selection-content {padding:12px 15px}
  #map-selection p {font-size:15px}
  #panel {min-height:500px;max-height:none}
  #panel-body {overflow:visible;flex:none;padding-bottom:20px}
  #panel-bottom {position:sticky;bottom:60px;z-index:2}
  dialog {padding:18px;width:calc(100vw - 22px);max-height:calc(100dvh - 30px)}
  dialog::after {border-width:24px;border-image-width:24px}
  .encounter-content {padding:12px;max-height:calc(100dvh - 66px)}
  .encounter-spread {grid-template-columns:1fr;gap:12px}
  #event-art {max-height:155px}
  .encounter-top {margin-bottom:5px}
  dialog h2 {font-size:27px}
  #event-text {font-size:17px;line-height:1.8;margin-top:10px}
  #event-options {margin-top:12px}
  #event-options button {font-size:18px;padding-block:10px}
  #event-time {margin-top:15px}
  #loader {margin:20px 12px;padding:20px}
}
@media(prefers-reduced-motion:reduce) {button,#tabs button img {transition:none}}

/* Same clock-adjacent placement and 30px icon scale as MapBarDisasterIndicatorInject. */
#weather-hud {position:absolute;left:calc(50% + 24px);bottom:48px;transform:translateX(-50%);pointer-events:auto;z-index:6}
#weather-button {display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:30px;padding:0;border:0;background:none;box-shadow:none;color:#f5e7c4;white-space:nowrap}
#weather-name {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#weather-button img {width:30px;height:30px;object-fit:contain;opacity:.92;transition:filter .12s}
#weather-button:hover,#weather-button:focus-visible {background:none;transform:scale(1.1)}
#weather-button:hover img,#weather-button:focus-visible img {filter:brightness(1.2) drop-shadow(0 0 4px #f2c66d88)}
#weather-tip {position:absolute;bottom:86px;left:50%;transform:translateX(-50%);width:290px;max-width:calc(100vw - 28px);padding:12px 15px;background:#10100ff5;border:1px solid #b99a5a;color:#e6ddc8;font-size:14px;line-height:1.5;text-shadow:none;box-shadow:0 4px 15px #0005;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s;max-height:min(440px,60dvh);overflow:auto;z-index:6}
#weather-tip strong {display:block;color:#e2bd75;font-weight:400;font-size:18px;margin-bottom:6px}
#weather-tip p {margin:3px 0}
#time-hud:has(#sun-moon-button:hover,#sun-moon-button:focus-visible,#weather-hud:hover,#weather-button:focus-visible,#weather-hud[data-open=true]) #weather-tip,#weather-tip:hover {visibility:visible;opacity:1;pointer-events:auto}
@media(max-width:740px) {#weather-tip {width:270px}}
@media(prefers-reduced-motion:reduce) {#weather-tip,#weather-button img {transition:none}}

#weather-hud[data-weather=sand] #weather-icon {filter:sepia(.85) saturate(.65)}
.sea-route {fill:none;stroke:#376e91;stroke-width:1.2;stroke-dasharray:4 5;opacity:.65;vector-effect:non-scaling-stroke;pointer-events:none}
.passage-card {margin:10px 0 16px;padding:10px 12px;border:1px solid #a58b55;background:#5f4a2310}
.passage-heading {display:flex;align-items:center;gap:10px}
.passage-heading img {width:82px;max-height:80px;object-fit:contain}
.passage-heading strong,.passage-heading small {display:block}
.passage-card p {font-size:13px;line-height:1.5;margin:8px 0}
.sea-selection {display:block;width:100px;height:90px;object-fit:contain;margin:8px auto}
.sea-art {max-height:220px;object-fit:contain}
.sea-boat image {transition:filter .15s}
.sea-boat:hover image {filter:brightness(1.15) drop-shadow(0 0 3px #f8e0a4)}