/* The paper is the protagonist: each age gets a tactile close-up. */
.stage-direction { display:flex;justify-content:space-between;gap:18px;min-height:24px;margin-top:10px;color:#746047;font:16px/1.5 var(--serif); }
.stage-direction>.line-count { flex:none;align-self:center;margin-left:auto;color:#735f42;font:14px/1.7 var(--body);font-variant-numeric:tabular-nums; }
.media-status { position:fixed;z-index:70;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 14px;color:#fff4d8;background:#352b20f2;border:1px solid #ad9161;box-shadow:0 3px 12px #1b120c38;font:15px/1.5 var(--body);text-align:center; }
.media-status button { margin-left:10px;border:0;border-bottom:1px solid #dfbd7c;background:none;color:#ffe3a9;padding:4px 0;min-height:34px; }
@media (max-width:650px) {
  .stage-direction { font-size:15px;margin-top:8px;gap:10px; }
  body .prologue-screen .world-bg,body .arrival-screen .world-bg { filter:brightness(.4) saturate(.7); }
  .ending-screen .world-bg { filter:brightness(.45) saturate(.7); }
  .map-fog { filter:none; }
  .reading-dialog::backdrop { backdrop-filter:none; }
}
.origin-heading { position:absolute;z-index:2;top:5%;left:7%;right:7%;color:#fff0cd;text-shadow:0 2px 6px #211b16; }
.origin-heading .era { color:#dfc79a;font-size:19px;letter-spacing:3px; }
.origin-heading h1 { font-size:clamp(30px,3vw,46px);font-weight:400;margin-top:8px; }
.origin-prop { position:absolute;left:50%;top:20%;transform:translateX(-50%);width:280px;height:38%; }
.origin-object { width:100%;height:100%;padding:0;border:0;background:none;color:var(--paper-light);font:23px/1.5 var(--serif); }
.origin-object img { width:100%;height:95%;object-fit:contain;filter:drop-shadow(8px 14px 5px #120e0b88);transition:transform .7s; }
.origin-object span { display:inline-block;padding:3px 20px;border-bottom:1px solid #d8bc80; }
.lifted .origin-object img { transform:translateY(-30px) rotate(-9deg); }
.lifted .origin-object span { visibility:hidden; }
.weight-line { position:absolute;left:0;right:0;bottom:0;height:8px;background:#6a492f;box-shadow:0 3px 0 #292016;transform:rotate(4deg);opacity:0;transition:opacity .5s; }
.weight-line span { position:absolute;top:15px;width:100%;color:#ecd6ac;font:20px/1.5 var(--serif);text-align:center;transform:rotate(-4deg); }
.lifted .weight-line { opacity:1; }
.remittance { position:absolute;left:10%;right:10%;top:25%;height:30%;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#f6e7c5; }
.remit-place { font:27px/1.5 var(--serif);writing-mode:vertical-rl;letter-spacing:5px; }
.remit-thread { position:absolute;top:55%;left:7%;right:10%;border-top:2px dashed #e6c8918c;z-index:-1; }
.remit-voucher { position:relative;width:53%;height:100%;filter:drop-shadow(10px 15px 7px #140f0970); }
.remit-voucher img { width:100%;height:100%;object-fit:contain; }
.remit-voucher span { position:absolute;left:26%;right:26%;top:46%;text-align:center;font:clamp(18px,2vw,28px)/1.4 var(--serif);color:#5d3825; }
.redeemed .remit-voucher span { top:104%;left:0;right:0;color:#faeace; }
.remit-desk { padding:25px 15px;width:85px;border:4px double #d2b280;color:#ffedc5;background:#534530;box-shadow:8px 7px 0 #21190e66;font:28px/1.4 var(--serif);writing-mode:vertical-rl;letter-spacing:5px;white-space:nowrap; }
.remit-desk:hover:not(:disabled) { background:#815236;transform:translateY(-4px); }
.relay-notes { position:absolute;top:22%;left:20%;right:20%;height:36%;display:flex;justify-content:center;gap:40px; }
.relay-notes>div { width:28%;display:flex;align-items:center;flex-direction:column; }
.relay-notes>div>span { margin-top:12px;font:24px/1.4 var(--serif);color:#fae7c7; }
.specimen-art { position:relative;width:230px;max-width:100%;aspect-ratio:1122/1402;filter:drop-shadow(6px 10px 6px #20170b40); }
.specimen-art img { width:100%;height:100%;object-fit:contain; }
.specimen-heading { position:absolute;top:47%;left:15%;right:15%;font:30px/1.4 var(--serif);text-align:center;color:#3a2d21; }
.specimen-mark { position:absolute;top:61%;left:19%;right:19%;font:18px/1.6 var(--serif);text-align:center;color:#6c3529; }
.specimen-detail { position:absolute;left:15%;right:15%;top:76%;font:13px/1.4 var(--serif);text-align:center;color:#654733; }
.specimen-0 { aspect-ratio:1; }
.specimen-0 span { display:none; }
.specimen-1 { aspect-ratio:1816/866;width:360px; }
.specimen-1 .specimen-heading { top:34%;font-size:25px; }
.specimen-1 .specimen-mark { top:51%;font-size:14px; }
.specimen-3 .specimen-mark { border-bottom:2px solid #a65034; }
.specimen-4 .specimen-mark { border:2px solid #ad533b;left:28%;right:28%;padding:4px 2px;top:60%; }
.specimen-4 .specimen-detail { top:82%; }
.relay-notes .specimen-art { height:100%;width:auto; }
.relay-notes .specimen-heading { font-size:22px; }
.relay-notes .specimen-mark { font-size:13px; }
.relay-notes .specimen-detail { display:none; }
.arrival-screen { position:relative;isolation:isolate;height:100svh;min-height:690px;overflow:hidden;background:#4c4434; }
.arrival-screen .world-bg { filter:blur(3px) brightness(.4) saturate(.7); }
.arrival-shade { position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#221c1488,transparent 70%); }
.arrival-presentation { position:absolute;top:20%;bottom:31%;left:50%;width:min(620px,80%);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:50px; }
.arrival-presentation>.specimen-art { height:100%;width:auto;max-width:52%;transform:rotate(-4deg); }
.change-caption { color:#f6e4bf; }
.change-caption>span { display:inline-block;border-bottom:1px solid #ceae70;padding-bottom:8px;color:#d8bd8d;font-size:17px;letter-spacing:2px; }
.change-caption h2 { font:34px/1.5 var(--serif);margin-top:12px; }
.change-caption>p { margin-top:5px;font:20px/1.5 var(--serif); }
.earlier-note { display:flex;align-items:center;gap:12px;margin-top:24px;color:#c4ad85;font:16px/1.7 var(--serif); }
.earlier-note img { width:48px;transform:rotate(9deg);filter:sepia(.25) brightness(.8); }
.arrival-screen .speech-wrap { width:min(1050px,calc(100% - 100px)); }
.paper-transfer { margin-top:8px;font:17px/1.5 var(--body);color:#674d31; }
.paper-transfer b { color:#8d3826;font-weight:500;margin-right:12px; }
.pocket-note span { left:10%;right:10%;font-size:16px; }
.reading-dialog .specimen-art { margin:16px auto 25px; }
.reading-dialog .transfer-ledger { padding:12px 0;border-top:1px solid #b29b6b;border-bottom:1px solid #b29b6b;color:#823e2a;font:24px/1.5 var(--serif); }
.specimen-gallery { display:grid;grid-template-columns:1fr 1fr;gap:30px 26px; }
.specimen-gallery article { padding-top:16px;border-top:1px solid #c6ac7855; }
.specimen-gallery .specimen-art { width:160px;height:190px;margin:0 auto; }
.specimen-gallery .specimen-1 { width:230px; }
.specimen-gallery .specimen-heading { font-size:20px; }
.specimen-gallery .specimen-mark { font-size:13px; }
.specimen-gallery .specimen-1 .specimen-heading { top:38%; }
.specimen-gallery .specimen-1 .specimen-mark { top:51%; }
.specimen-gallery .specimen-detail { font-size:10px; }
.specimen-gallery h3 { margin-top:15px; }
.specimen-gallery p { font-size:17px; }
.unseen-paper { height:190px;display:grid;place-items:center;font:28px/1.5 var(--serif);color:#957e55;background:#d8c99f5c;border:1px dashed #b29a6d; }
.specimen-locked h3 { color:#826b47; }

/* A painting to travel through; controls remain on the parchment edge. */
.map-screen { position:relative;isolation:isolate;height:100svh;min-height:650px;overflow:hidden;background:#dcccaa; }
.map-viewport { position:absolute;inset:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#8f7250 #e6d7b5;overscroll-behavior:contain; }
.map-canvas { position:relative;width:max(100%,calc(100svh * 1.7778));min-width:1155px;height:100%;min-height:650px; }
.map-art,.map-ink { position:absolute;inset:0;width:100%;height:100%;max-width:none; }
.map-ink { pointer-events:none; }
.map-fog { fill:#e7dcc0;fill-opacity:.98; }
.map-road { fill:none;stroke:#727b69;stroke-width:3;stroke-dasharray:4 13;stroke-linecap:round; }
.trade-route { fill:none;stroke:#983e2a;stroke-width:3;stroke-dasharray:8 8;stroke-linecap:round; }
.map-heading { position:absolute;z-index:5;top:30px;left:38px;max-width:550px;padding:12px 42px 22px 24px;background:linear-gradient(90deg,#f8eccfeb 70%,#f8eccf00);border-left:4px solid #a03f2a;pointer-events:none; }
.map-heading h1 { font:40px/1.35 var(--serif);margin-top:4px; }
.map-heading>p:last-child { max-width:29em;margin-top:10px;color:#685338;font-size:17px; }
.map-heading .era { color:#7c5732;letter-spacing:4px; }
.map-tools { position:absolute;z-index:6;top:30px;right:30px;display:flex;gap:10px; }
.map-location { position:absolute;z-index:3;transform:translate(-50%,-50%); }
.map-pin { position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 18px;min-width:135px;min-height:96px;color:#3c3b32;border:1px solid #777261;background:#f8f1dfe8;box-shadow:2px 3px 0 #48341e23; }
.map-pin::after { content:'';position:absolute;bottom:-13px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:13px solid #f4e6c6; }
.map-pin strong { font:32px/1.2 var(--serif);letter-spacing:3px; }
.map-pin>span:last-child { font:14px/1.4 var(--body); }
.map-location-number { position:absolute;top:-22px;left:-15px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff2d3;background:#745737;border:2px solid #eee0be;font:21px/1 var(--serif); }
.map-pin:hover:not(:disabled) { transform:translateY(-5px);background:#fff1cb; }
.is-current .map-pin { border:2px solid #57584a;box-shadow:0 0 0 5px #f9f2df88,2px 3px 0 #3c2c1725; }
.is-current .map-location-number { background:#a13b28; }
.is-locked .map-pin { color:#887653;background:#e3d7b7a8;border-color:#b7a479;box-shadow:none; }
.is-locked .map-location-number { font-size:14px;background:#b2a383; }
.is-locked .map-pin::after { border-top-color:#e3d7b7; }
.map-journal { position:absolute;right:30px;bottom:32px;z-index:5;width:340px;padding:20px 23px;max-height:58%;overflow:auto; }
.map-journal h2 { font:29px/1.4 var(--serif);margin:5px 0 10px; }
.map-journal>.era { font-size:14px;color:#80603c; }
.map-journal>p { font:18px/1.6 var(--serif); }
.map-journal ol { list-style:none;margin:0;padding:0; }
.map-journal li { padding:9px 0;border-top:1px solid #b39a693b;font-size:15px; }
.map-journal li b { font-weight:500;color:#853d29; }
.map-journal li span { display:block;color:#806544;font-size:13px;margin-top:2px; }
.map-journal .advance-button { font-size:20px;padding-left:0;margin:6px 0; }
.map-journal .map-footnote { font:12px/1.7 var(--body);color:#806b48;border-top:1px solid #bca77855;padding-top:8px; }
.map-unlock { position:absolute;z-index:5;bottom:30px;left:40px;color:#5b4228;padding:9px 15px;background:#f6e9c8e0;border:1px solid #bca272;font-size:15px; }
.map-unlock span { color:#933e28;font:22px/1.2 var(--serif);margin-right:12px; }
.map-detail-label { position:absolute;background:#f7e9c9c9;color:#675131;writing-mode:vertical-rl;padding:10px 5px;letter-spacing:3px;font:15px/1.3 var(--serif); }
.tea-label { left:9%;top:38%; }
.dock-label { left:64%;top:57%; }
.money-label { left:86%;top:20%; }

@media (max-width:900px) {
  .game-tools { gap:5px; }.game-tools .icon-button { font-size:16px;padding:7px 9px; }
  .arrival-presentation { gap:25px; }.change-caption h2 { font-size:29px; }
  .map-heading h1 { font-size:32px; }.map-heading { max-width:450px;left:24px; }
  .map-journal { width:300px; }.map-tools { top:20px;right:20px; }
}
@media (max-width:650px) {
  .game-hud { flex-wrap:wrap;gap:8px; }.game-tools { position:absolute;right:0;top:95px;flex-direction:row;gap:5px; }
  .game-tools .icon-button { min-height:40px;min-width:50px;font-size:15px; }
  .game-tools [data-action="fullscreen"] { display:none; }
  .origin-heading { top:5%;left:7%; }.origin-heading h1 { font-size:30px; }.origin-heading .era { font-size:16px; }
  .origin-prop { width:190px;top:22%;height:30%; }
  .origin-screen .speech-text,.arrival-screen .speech-text { font-size:22px;line-height:1.55; }
  .origin-screen .speech-wrap,.arrival-screen .speech-wrap { width:calc(100% - 28px); }
  .origin-screen .dialogue-actions,.arrival-screen .dialogue-actions { gap:12px;flex-wrap:wrap; }
  .origin-screen .advance-button,.arrival-screen .seal-button { font-size:20px;letter-spacing:0;padding:10px 17px; }
  .origin-screen .text-button,.arrival-screen .text-button { font-size:16px; }
  .remittance { top:25%;left:5%;right:5%;height:22%;gap:12px; }
  .remit-place { font-size:20px;letter-spacing:2px; }.remit-desk { width:56px;font-size:21px;padding:15px 8px;letter-spacing:2px; }
  .remit-voucher { width:68%; }.remit-voucher span { font-size:16px;top:43%;left:26%;right:26%; }
  .redeemed .remit-voucher span { font-size:18px; }
  .relay-notes { left:5%;right:5%;gap:10px;top:23%;height:25%; }
  .relay-notes>div { width:32%; }.relay-notes>div>span { font-size:20px; }
  .relay-notes .specimen-heading { font-size:17px; }.relay-notes .specimen-mark { font-size:10px; }
  .arrival-screen { min-height:760px; }.arrival-presentation { top:20%;bottom:39%;width:90%;gap:18px; }
  .arrival-presentation>.specimen-art { max-width:50%;height:auto;width:170px; }
  .arrival-presentation .specimen-heading { font-size:25px; }.arrival-presentation .specimen-mark { font-size:14px; }.arrival-presentation .specimen-detail { font-size:11px; }
  .change-caption>span { font-size:14px; }.change-caption h2 { font-size:26px; }.change-caption>p { font-size:17px;max-width:8em; }
  .earlier-note { font-size:13px;gap:8px;margin-top:15px; }.earlier-note img { width:36px; }
  .paper-transfer { font-size:14px; }.paper-transfer b { margin-right:6px; }
  .specimen-gallery { gap:22px;grid-template-columns:1fr; }.specimen-gallery .specimen-art { height:auto;width:180px; }.specimen-gallery .specimen-1 { width:260px; }.specimen-gallery .specimen-1 .specimen-heading { top:34%; }
  .map-screen { min-height:760px; }.map-canvas { min-height:760px;width:1351px;min-width:1351px; }
  .map-heading { top:20px;left:16px;right:16px;padding:12px 15px 18px;max-width:none; }.map-heading h1 { font-size:29px; }.map-heading>p:last-child { font-size:16px;max-width:20em; }.map-heading .era { font-size:16px; }
  .map-tools { top:172px;right:16px;gap:8px; }.map-tools .icon-button { font-size:16px;min-height:44px;padding:8px 10px; }
  .map-journal { bottom:20px;left:16px;right:16px;width:auto;max-height:190px;padding:12px 17px; }.map-journal h2 { font-size:24px;margin:2px 0; }.map-journal>.era { font-size:13px; }
  .map-journal ol { max-height:62px;overflow:auto; }.map-journal li { padding:4px 0;font-size:14px; }.map-journal li span { display:none; }
  .map-journal .map-footnote { font-size:11px;padding-top:4px; }.map-journal .map-footnote br { display:none; }.map-journal .advance-button { margin:0;min-height:40px; }
  .map-unlock { top:26px;bottom:auto;right:22px;left:auto;font-size:0;padding:5px 7px;background:transparent;border:0; }.map-unlock span { font-size:17px;margin:0; }
  .map-location:last-of-type { margin-top:100px; }
  .map-pin { min-width:110px;padding:11px; }.map-pin strong { font-size:28px; }.map-pin>span:last-child { font-size:12px; }
}
@media (max-height:720px) and (min-width:651px) {
  .origin-heading { top:4%; }.origin-heading h1 { font-size:32px; }
  .arrival-screen { min-height:660px; }.arrival-presentation { top:20%;bottom:33%; }.arrival-presentation>.specimen-art { max-width:210px; }
  .map-heading { top:20px; }.map-heading h1 { font-size:32px; }.map-journal { bottom:20px;max-height:55%;padding:16px 20px; }
}

/* Quiet paper slips keep supporting text distinct from the spoken line. */
.outcome-lines { display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px; }
.outcome-lines p { flex:1 1 240px;margin:0;padding:8px 12px;border:1px solid #b9bea0;border-left:3px solid #677962;background:#e9ecdd;color:#414b3c; }
.outcome-lines p + p { border-color:#c5b48e;border-left-color:#967b4e;background:#f5e8cd;color:#69543b; }
.outcome-lines p + p strong { color:#69543b; }
.paper-transfer { display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;width:fit-content;max-width:100%;padding:8px 12px;border:1px solid #c3ae82;background:#faf2df;color:#514431; }
.paper-transfer b { flex:none;margin:0;padding-right:12px;border-right:1px solid #bfa275; }
.paper-transfer .transfer-status { padding:2px 7px;background:#e9dfc5;color:#60503a;font-size:.9em; }
.stage-note,.choice-tradeoff { padding:7px 11px;border:1px solid #cdbb97;background:#faf2df;color:#65513a; }
.stage-note { min-width:0; }
.choice-tradeoff { width:fit-content;max-width:100%;margin-top:10px; }
.map-journal>.era { width:fit-content;max-width:100%;padding:6px 9px;margin-bottom:8px;border:1px solid #c4b28e;background:#f8efdb;color:#65513b;letter-spacing:0; }
.map-journal li { margin-top:6px;padding:7px 9px;border:1px solid #cdbb94;background:#faf1dc;color:#58462e; }
.map-journal .map-footnote { padding:7px 9px;margin-top:8px;border:1px solid #cfbd96;background:#efe2c5;color:#675438; }
.reading-dialog .source-note { padding:12px 14px;border:1px solid #c7b389;background:#f0e2c5;color:#624e34; }
.memory-row .record-fate { padding:7px 10px;border:1px solid #ccb791;background:#f9eed5; }
@media (max-width:650px) {
  .outcome-lines { gap:6px;margin-top:10px; }
  .outcome-lines p { flex-basis:100%;padding:6px 9px; }
  .paper-transfer { padding:7px 9px;gap:5px 9px; }
  .paper-transfer b { padding-right:9px; }
  .stage-note,.choice-tradeoff { padding:6px 9px; }
  .map-journal>.era { font-size:14px;padding:5px 8px;margin-bottom:4px; }
  .map-journal li { padding:5px 8px;margin-top:4px; }
  .map-journal .map-footnote { padding:5px 8px;font-size:12px; }
}