/* =====================================================================
   G FOR GEORGE — gouache on airmail paper.
   The page is a thin cream airmail sheet on a dark desk; the scene art
   is a gouache painting taped to it; the HUD is a pencil ledger in the
   margin. Registers (lark/ache/dread/elegy) tint the paper — and the
   sand-yellow is reserved for danger, per the bible.
   ===================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:#221d17;
  background-image:radial-gradient(ellipse at 50% 20%, #2b251d 0%, #1c1813 70%);
  /* the shelf's book stack: a true old-style serif where the OS has one,
     Georgia as the universal fallback */
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  color:#2c2a22;
  overflow-x:hidden;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; }
.hidden{ display:none !important; }
kbd{ font-family:'Courier New',monospace; background:#00000018; padding:0 4px; border-radius:3px; }

#app{ min-height:100%; display:flex; justify-content:center; padding:18px 10px 30px; }

/* ------- the airmail sheet ------- */
.screen{ position:relative; width:min(920px,100%); }
.paper{
  position:relative; background:#efe6cf; min-height:calc(100vh - 60px);
  box-shadow:0 12px 40px #000a, 0 2px 8px #0008;
  border:1px solid #d8ceb2;
  padding:0 0 34px;
}
.paper::before{ /* airmail border stripes */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:4;
  border:7px solid transparent;
  border-image:repeating-linear-gradient(45deg,
    #8c2f24 0 14px, #efe6cf 14px 26px, #33507a 26px 40px, #efe6cf 40px 52px) 7;
  opacity:.75;
}
.paper::after{ /* paper grain */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:repeating-linear-gradient(0deg, #0000 0 2px, #00000004 2px 3px),
    repeating-linear-gradient(90deg, #0000 0 3px, #5a4a2008 3px 4px);
}

/* ------- registers: the paper takes the weather ------- */
#app[data-reg="lark"]  .paper{ background:#f1e7cd; }
#app[data-reg="ache"]  .paper{ background:#eae2cf; filter:saturate(.92); }
#app[data-reg="dread"] .paper{ background:#e2dcc9; filter:saturate(.82) brightness(.94); }
#app[data-reg="elegy"] .paper{ background:#eddfc2; }
#app[data-reg="dread"] .paper::before{ opacity:.4; }
#app[data-reg="dread"] #scene-wrap::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 60px 18px #d9b13b2e, inset 0 0 120px 40px #12161f55;
}
#app[data-reg="elegy"] #scene-wrap::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 80px 26px #d8a24a26;
}

/* ------- title screen ------- */
#title-screen .paper{ display:flex; flex-direction:column; }
#title-art{ position:relative; height:295px; margin:26px 26px 0; overflow:hidden;
  box-shadow:0 3px 12px #0006; background:#1d2430; }
#title-art svg{ width:100%; height:100%; display:block; }
.tape{ position:absolute; width:74px; height:22px; background:#e8ddb8cc;
  box-shadow:0 1px 3px #0004; z-index:3; }
.title-inner{ padding:22px 40px 10px; text-align:center; position:relative; z-index:2; }
.title-eyebrow{ font-family:'Courier New',monospace; font-size:12px; letter-spacing:3px;
  color:#655f4e; text-transform:uppercase; }
.game-title{ font-family:'Courier New',monospace; font-weight:900; font-size:clamp(34px,7vw,58px);
  letter-spacing:6px; color:#2c2a22; margin:8px 0 2px; }
.title-sub{ font-style:italic; color:#6d675a; font-size:17px; }
.title-contract{ margin:14px auto 0; max-width:560px; font-size:13.5px; color:#5a5340;
  border-top:1px solid #c9c1a4; border-bottom:1px solid #c9c1a4; padding:9px 6px; font-style:italic; }
.title-residue{ margin:12px auto 0; max-width:540px; font-size:14px; color:#8c2f24; font-style:italic; }
.names-row{ display:flex; gap:14px; justify-content:center; margin:16px 0 4px; flex-wrap:wrap; }
.names-row label{ font-family:'Courier New',monospace; font-size:11px; letter-spacing:2px;
  color:#655f4e; text-transform:uppercase; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.names-row input{ font-family:Georgia,serif; font-size:16px; padding:5px 9px; width:170px;
  background:#f7f0dd; border:1px solid #b3ab8f; color:#2c2a22; }
.title-menu{ display:flex; flex-direction:column; gap:9px; align-items:center; margin-top:16px; }
.menu-btn{
  font-family:'Courier New',monospace; letter-spacing:2px; text-transform:uppercase;
  font-size:15px; padding:11px 34px; background:#2c2a22; color:#efe6cf;
  border:1px solid #2c2a22; min-width:280px;
}
.menu-btn:hover{ background:#8c2f24; border-color:#8c2f24; }
.menu-btn.small{ font-size:12px; padding:7px 20px; background:none; color:#5a5340;
  border:1px solid #b3ab8f; min-width:280px; }
.menu-btn.small:hover{ color:#8c2f24; border-color:#8c2f24; background:none; }
.shelf-line{ margin-top:16px; font-size:13px; color:#655f4e; text-align:center; }
.shelf-link{ color:#33507a; }
.title-foot{ margin-top:8px; padding-bottom:10px; font-size:12px; color:#a39a7c; text-align:center; }

/* ------- game screen ------- */
#scene-wrap{ position:relative; margin:26px 26px 0; height:min(300px,34vh);
  box-shadow:0 3px 12px #0006; background:#8d8676; overflow:hidden; }
#scene-art, #scene-art svg{ width:100%; height:100%; display:block; }
.scene-img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0;
  transition:opacity .8s ease; }
#scene-wrap, #title-art, #ending-art{ position:relative; }
#title-art .scene-img, #ending-art .scene-img{ position:absolute; inset:0; }
#day-stamp{
  position:absolute; top:12px; right:-4px; z-index:5; transform:rotate(3deg);
  font-family:'Courier New',monospace; font-weight:bold; letter-spacing:3px; font-size:13px;
  color:#8c2f24; border:2px solid #8c2f24; padding:3px 10px; background:#efe6cfd9;
  opacity:0; pointer-events:none;
}
#day-stamp.show{ animation:stamp 3.2s ease forwards; }
@keyframes stamp{ 0%{opacity:0; transform:rotate(3deg) scale(1.6);}
  12%{opacity:.95; transform:rotate(-2deg) scale(1);} 80%{opacity:.95;} 100%{opacity:0;} }

#clock-rail{ position:absolute; left:-2px; top:340px; width:42px; height:460px; z-index:3; opacity:.9; }
#clock-rail svg{ width:100%; height:100%; }

/* the ledger */
#hud{ position:relative; margin:10px 44px 0 58px; z-index:2; }
.hud-panel{ border-bottom:1px solid #c9c1a4; padding-bottom:8px; }
.hud-tunnel{ margin:2px 0 4px; }
.tun-svg{ width:100%; max-width:640px; height:56px; display:block; }
.hud-row{ display:flex; gap:22px; flex-wrap:wrap; align-items:center;
  font-family:'Courier New',monospace; }
.meter{ display:flex; align-items:center; gap:7px; }
.m-name{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:#655f4e; }
.m-val{ font-size:13px; font-weight:bold; color:#33507a; }
.heatm .m-dots{ display:flex; gap:3px; }
.heatm .m-dots i{ width:9px; height:9px; border:1px solid #b3ab8f; border-radius:50%; display:block; }
.heatm .m-dots i.on{ background:#d9b13b; border-color:#c29a25; box-shadow:0 0 5px #d9b13b88; }
.crewm .m-segs{ display:flex; gap:3px; }
.crewm .m-segs i{ width:14px; height:7px; border:1px solid #b3ab8f; display:block; }
.crewm .m-segs i.on{ background:#33507a; border-color:#33507a; }
.nervem .nv{ font-size:11px; padding:1px 8px; border:1px solid #b3ab8f; border-radius:9px; color:#5a5340; }
.nervem .nv.nv1{ color:#8c6f1d; border-color:#c29a25; }
.nervem .nv.nv2{ color:#8c2f24; border-color:#8c2f24; background:#8c2f2412; }

.delta-float{ position:absolute; right:6px; top:-6px; font-family:'Courier New',monospace;
  font-size:12.5px; font-weight:bold; opacity:0; animation:dfloat 2.1s ease forwards; }
.delta-float.gain{ color:#3c6b38; } .delta-float.loss{ color:#8c2f24; }
@keyframes dfloat{ 0%{opacity:0; transform:translateY(6px);} 15%{opacity:1;}
  75%{opacity:1; transform:translateY(-12px);} 100%{opacity:0; transform:translateY(-20px);} }

/* the prose */
#story-layer{ position:relative; z-index:2; }
#text-panel{ padding:16px 44px 6px 58px; max-width:860px; }
#region-name{ font-family:'Courier New',monospace; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:#655f4e; }
#node-title{ font-family:'Courier New',monospace; font-size:clamp(19px,3vw,25px); font-weight:bold;
  letter-spacing:1px; color:#2c2a22; margin:4px 0 14px; text-wrap:balance; }
/* MEASURE: the prose was running ~100 characters a line. A book sets 60–75. */
#node-text, #ending-text{ max-width:66ch; }
#node-text p{ margin:0 0 0.95em; line-height:1.68; font-size:17px; color:#33301f;
  text-wrap:pretty; hanging-punctuation:first last; }
#node-text em{ color:#8c2f24; font-style:italic; }
.unfurl{ opacity:0; animation:unfurl .7s ease forwards; }
@keyframes unfurl{ from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;} }

#choices{ display:flex; flex-direction:column; gap:9px; margin:20px 0 10px; }
.choice{
  text-align:left; background:none; border:none; border-left:3px solid #b3ab8f;
  padding:9px 14px; font-size:15.5px; line-height:1.45; color:#33301f;
  transition:border-color .15s, background .15s;
}
.choice:hover, .choice:focus{ border-left-color:#8c2f24; background:#8c2f240d; outline:none; }
.c-pre{ display:block; font-family:'Courier New',monospace; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:#655f4e; margin-bottom:2px; }
.choice:hover .c-pre{ color:#8c2f24; }

/* ------- ending screen ------- */
#ending-screen .paper{ text-align:center; }
#ending-art{ position:relative; height:280px; margin:26px 26px 0; overflow:hidden;
  box-shadow:0 3px 12px #0006; background:#2b2016; }
#ending-art svg{ width:100%; height:100%; display:block; }
.ending-inner{ padding:22px 52px; position:relative; z-index:2; }
#ending-kind{ font-family:'Courier New',monospace; font-size:12px; letter-spacing:3px;
  text-transform:uppercase; color:#655f4e; }
#ending-kind.k-pause{ color:#33507a; }
#ending-title{ font-family:'Courier New',monospace; font-size:clamp(22px,4vw,30px);
  letter-spacing:2px; margin:8px 0 14px; color:#2c2a22; }
#ending-text{ max-width:640px; margin:0 auto; text-align:left; }
#ending-text p{ margin:0 0 12px; line-height:1.6; font-size:16px; color:#33301f; }
#ending-text em{ color:#33507a; }
#ending-meta{ margin:10px 0 6px; font-family:'Courier New',monospace; font-size:13px; color:#655f4e; }
#ending-her{ max-width:560px; margin:6px auto 16px; text-align:left; font-style:italic;
  font-size:14.5px; line-height:1.55; color:#5a5340; border-top:1px solid #c9c1a4; padding-top:10px; }
#ending-her:empty{ display:none; }
.j-head{ font-family:'Courier New',monospace; letter-spacing:2px; text-transform:uppercase;
  color:#2c2a22; font-weight:bold; margin:20px 0 4px; border-top:1px solid #c9c1a4; padding-top:14px; }
.j-entry{ padding:6px 2px; border-bottom:1px dashed #d8ceb2; font-size:14px; color:#33301f; }
.j-n{ font-family:'Courier New',monospace; font-size:11px; color:#655f4e; margin-right:8px; }
.j-title{ cursor:pointer; border-bottom:1px dotted #8c2f24; }
.j-title:hover{ color:#8c2f24; }
.j-was{ font-size:12px; font-style:italic; color:#655f4e; margin-left:8px; }
.j-input{ font-family:Georgia,serif; font-size:14px; padding:2px 7px; width:min(280px,60vw);
  background:#f7f0dd; border:1px solid #b3ab8f; color:#2c2a22; }

/* ------- galleries ------- */
#gallery{ position:fixed; inset:0; z-index:30; background:#221d17d9; display:flex;
  align-items:center; justify-content:center; padding:20px; }
.gallery-box{ background:#efe6cf; max-width:720px; width:100%; max-height:86vh; overflow-y:auto;
  padding:26px 30px; box-shadow:0 14px 50px #000c; border:1px solid #d8ceb2; }
.gallery-box h2{ font-family:'Courier New',monospace; letter-spacing:2px; color:#2c2a22; margin-bottom:6px; }
.gallery-sub{ font-size:13.5px; font-style:italic; color:#655f4e; margin-bottom:14px; }
.grid-cells{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px; }
.cell{ border:1px solid #b3ab8f; padding:9px 11px; font-size:13.5px; color:#33301f; }
.cell .ek{ display:block; font-family:'Courier New',monospace; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:#655f4e; margin-bottom:2px; }
.cell.k-pause .ek{ color:#33507a; }
.cell.k-got .ek{ color:#3c6b38; }
.cell.locked{ color:#a39a7c; font-style:italic; }
.crew-entry{ border-bottom:1px solid #d8ceb2; padding:10px 2px; overflow:hidden; }
.log-face{ float:right; width:72px; height:72px; object-fit:cover; margin:2px 0 6px 12px;
  border:1px solid #b3ab8f; box-shadow:0 2px 6px #0003; filter:sepia(.10) saturate(.92); }
.crew-entry.locked{ color:#a39a7c; font-style:italic; }
.crew-name{ font-weight:bold; color:#2c2a22; }
.log-fate{ font-family:'Courier New',monospace; font-size:11px; color:#8c2f24; letter-spacing:1px; }
.crew-role{ font-family:'Courier New',monospace; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:#33507a; margin:2px 0 4px; }
.crew-note{ font-size:14px; line-height:1.5; color:#5a5340; }
#gallery-close{ margin-top:16px; }
.afterword h3{ font-family:'Courier New',monospace; letter-spacing:3px; color:#8c2f24; margin-bottom:10px; }
.afterword p{ margin:0 0 12px; line-height:1.6; font-size:14.5px; color:#33301f; }
.afterword .af-close{ border-top:1px solid #c9c1a4; padding-top:10px; color:#5a5340; }
#btn-lastpage.urgent{ border-color:#8c2f24; color:#8c2f24; animation:urge 2.4s ease infinite; margin-top:8px; }
@keyframes urge{ 0%,100%{ background:none; } 50%{ background:#8c2f2414; } }
#ending-kind.k-home{ color:#3c6b38; } #ending-kind.k-true{ color:#8c2f24; }
#ending-kind.k-dark{ color:#5a5340; } #ending-kind.k-survive{ color:#33507a; }
.cell.k-home .ek{ color:#3c6b38; } .cell.k-true .ek{ color:#8c2f24; }
.cell.k-dark .ek{ color:#5a5340; } .cell.k-survive .ek{ color:#33507a; }

/* ------- toast ------- */
.gg-toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:40;
  background:#2c2a22; color:#efe6cf; font-family:'Courier New',monospace; font-size:13px;
  letter-spacing:1.5px; padding:10px 22px; opacity:0; transition:all .5s ease;
  border-left:4px solid #d8a24a; box-shadow:0 6px 24px #000a; }
.gg-toast.on{ opacity:1; transform:translate(-50%,0); }

/* ------- debug ------- */
#debug-panel{ position:fixed; right:12px; bottom:12px; z-index:50; background:#2c2a22ee;
  color:#efe6cf; font-family:'Courier New',monospace; font-size:12.5px; padding:12px 14px;
  border:1px solid #8a8266; max-width:420px; }
#debug-panel b{ color:#d8a24a; }
.dbg-row{ margin-top:7px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#debug-panel select,#debug-panel input{ background:#1c1813; color:#efe6cf;
  border:1px solid #8a8266; font-family:inherit; font-size:12px; padding:2px 5px; }
#debug-panel button{ background:#8c2f24; color:#efe6cf; border:none; padding:3px 10px;
  font-family:inherit; font-size:12px; }

/* ------- responsive ------- */
@media (max-width:720px){
  #clock-rail{ display:none; }
  #hud{ margin:10px 22px 0; }
  #text-panel{ padding:14px 22px 6px; }
  #scene-wrap{ margin:18px 14px 0; height:200px; }
  #title-art{ margin:18px 14px 0; height:210px; }
  .ending-inner{ padding:18px 22px; }
}
/* ------- M13: the Reader's Companion (the true spine) ------- */
.cmp-key{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.cmp-tag{ font-family:'Courier New',monospace; font-size:10.5px; letter-spacing:1px;
  text-transform:uppercase; padding:4px 9px; border:1px solid; border-radius:2px; }
.cmp-tag em{ opacity:.65; text-transform:none; letter-spacing:0; }
.cmp-line{ position:relative; padding-left:18px; }
.cmp-line::before{ content:''; position:absolute; left:4px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(#c9c1a4,#c9c1a4); }
.cmp-ev{ position:relative; padding:10px 0 14px 14px; }
.cmp-ev::before{ content:''; position:absolute; left:-18px; top:16px; width:9px; height:9px;
  border-radius:50%; border:2px solid #efe6cf; background:#8a8266; }
.cmp-date{ font-family:'Courier New',monospace; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:#655f4e; margin-bottom:3px; }
.cmp-book{ display:block; font-family:'Courier New',monospace; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:4px; }
.cmp-body{ font-size:14.5px; line-height:1.58; color:#33301f; }
.cmp-body b{ color:#2c2a22; }
.cmp-body em{ color:#5a5340; }
.cmp-x{ display:block; margin-top:7px; padding-left:10px; border-left:3px solid #33507a;
  font-style:italic; color:#33507a; font-size:14px; }
.b1 .cmp-book,.cmp-tag.b1{ color:#8c2f24; border-color:#8c2f24; }
.b2 .cmp-book,.cmp-tag.b2{ color:#8c6f1d; border-color:#8c6f1d; }
.b3 .cmp-book,.cmp-tag.b3{ color:#33507a; border-color:#33507a; }
.b0 .cmp-book,.cmp-tag.b0{ color:#5a5340; border-color:#b3ab8f; }
.cmp-ev.b1::before{ background:#8c2f24; } .cmp-ev.b2::before{ background:#8c6f1d; }
.cmp-ev.b3::before{ background:#33507a; } .cmp-ev.b0::before{ background:#8a8266; }

/* ------- M11: focus-visible ring (keyboard nav made visible) ------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid #8c2f24; outline-offset:2px; border-radius:1px;
}
.choice:focus-visible{ outline-offset:-2px; background:#8c2f2412; }
#node-title:focus-visible{ outline:none; } /* the passage receives focus silently */
body.contrast a:focus-visible, body.contrast button:focus-visible,
body.contrast .choice:focus-visible{ outline-color:#701f16; outline-width:3px; }

/* ------- M11: choice numbers (opt-in) ------- */
.c-num{ display:inline-block; min-width:1.4em; margin-right:8px; font-family:'Courier New',monospace;
  font-size:12px; font-weight:bold; color:#655f4e; border:1px solid #b3ab8f; border-radius:3px;
  text-align:center; padding:0 3px; vertical-align:1px; }
.choice:hover .c-num, .choice:focus-visible .c-num{ color:#8c2f24; border-color:#8c2f24; }

/* ------- M11: the notebook keeps (export/import) ------- */
.opt-row.col{ flex-direction:column; align-items:stretch; }
.nb-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:flex-start; }
.opt-btn.wide{ white-space:nowrap; }
.nb-code{ flex:1; min-width:180px; font-family:'Courier New',monospace; font-size:11px;
  background:#f7f0dd; border:1px solid #b3ab8f; color:#5a5340; padding:5px 8px; resize:vertical;
  word-break:break-all; }
.nb-in{ flex:1; min-width:180px; font-family:'Courier New',monospace; font-size:12px;
  background:#f7f0dd; border:1px solid #b3ab8f; color:#2c2a22; padding:6px 9px; }

/* ------- M10: completion strip + Keeper ------- */
.title-completion{ margin:12px auto 0; max-width:520px; }
.comp-pillars{ display:flex; gap:10px; justify-content:center; margin-bottom:6px; }
.comp-dot{ width:13px; height:13px; border:1.5px solid #b3ab8f; border-radius:50%;
  display:inline-block; transition:all .3s; }
.comp-dot.on{ background:#8c2f24; border-color:#8c2f24; box-shadow:0 0 6px #8c2f2466; }
.comp-note{ font-size:12.5px; font-style:italic; color:#655f4e; }
.comp-note.ready{ color:#8c2f24; }
.comp-note.keeper{ color:#3c6b38; font-weight:bold; font-style:normal; letter-spacing:.5px; }

/* ------- M9: options ------- */
.opt-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 2px;
  border-bottom:1px solid #d8ceb2; }
.opt-name{ font-family:'Courier New',monospace; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:#655f4e; min-width:150px; }
.opt-btn{ font-family:'Courier New',monospace; font-size:12.5px; letter-spacing:1px;
  padding:5px 14px; background:none; border:1px solid #b3ab8f; color:#5a5340; }
.opt-btn.on{ background:#2c2a22; color:#efe6cf; border-color:#2c2a22; }
.opt-note{ width:100%; font-size:12.5px; font-style:italic; color:#655f4e; margin-top:4px; }

/* text size */
body.text-lg #node-text p{ font-size:18.5px; line-height:1.68; }
body.text-lg .choice{ font-size:17px; }
body.text-lg #ending-text p{ font-size:18px; }
body.text-lg .crew-note,body.text-lg .afterword p{ font-size:16px; }

/* high contrast */
body.contrast .paper{ background:#f7f1de !important; filter:none !important; }
body.contrast #node-text p,body.contrast #ending-text p{ color:#17150e; }
body.contrast .choice{ color:#17150e; border-left-color:#6d675a; }
body.contrast .m-name,body.contrast #region-name{ color:#5a5340; }
body.contrast #node-text em{ color:#701f16; }

/* cold telling */
body.cold-hud #hud{ display:none; }

/* ------- M9: presentation ------- */
.scene-img{ animation: kb 26s ease-in-out infinite alternate; }
#scene-art svg, #title-art svg, #ending-art svg{ animation: kb 30s ease-in-out infinite alternate; }
@keyframes kb{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.07) translate(1.2%,-0.8%); } }
#page-turn{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0; }
#page-turn.go{ animation:pturn .7s ease; }
@keyframes pturn{ 0%{ opacity:0; background:linear-gradient(105deg,#0000 -20%,#fff8e4cc 0%,#0000 12%);}
  50%{ opacity:1; } 100%{ opacity:0; background:linear-gradient(105deg,#0000 88%,#fff8e4cc 100%,#0000 120%); } }
#ending-art{ border:10px solid #f7f2e4; box-shadow:0 4px 16px #0007; transform:rotate(-.4deg); }
#ending-caption{ font-family:'Courier New',monospace; font-size:12px; letter-spacing:1.5px;
  color:#655f4e; margin:10px 0 0; font-style:italic; }
/* =====================================================================
   M16 — THE VISUAL PASS. No new art: this is craft on what's already
   here. The page should read like a real sheet of airmail paper with a
   painting mounted on it, and the prose should read like a book.
   ===================================================================== */

/* ---- 1. the drop cap: every passage opens like a chapter ---- */
#node-text p:first-child::first-letter,
#ending-text p:first-child::first-letter{
  float:left; font-size:3.05em; line-height:.84; font-style:normal; font-weight:400;
  margin:.04em .09em 0 0; padding-right:.03em; color:#8c2f24;
  text-shadow:0 1px 0 #fff6, 0 -1px 1px #0000000f;   /* pressed into the paper */
}
/* a paragraph that opens on a tag (an em, a quote) must not inherit its slant */
#node-text p:first-child::first-letter{ font-family:inherit; }

/* ---- 1b. the teller's marginal note, from the second telling on ---- */
#retold{ display:none; }
#retold.on{ display:block; margin:0 0 16px; padding:9px 0 9px 16px;
  border-left:2px solid #8c2f2455; }
#retold p{ margin:0; font-size:14.5px; line-height:1.55; font-style:italic; color:#5f5847;
  max-width:60ch; }
#retold p::before{ content:'✒ '; font-style:normal; color:#8c2f24; opacity:.75; }
body.contrast #retold p{ color:#3a3529; }

/* ---- 2. the paper: fibre, foxing, a fold, and a curl ---- */
.paper::after{
  background-image:
    /* age spots, softest at the corners */
    radial-gradient(52px 40px at 6% 3%,   #7a5a2010 0%, #7a5a2000 70%),
    radial-gradient(64px 46px at 96% 12%, #7a5a200d 0%, #7a5a2000 72%),
    radial-gradient(46px 38px at 3% 88%,  #7a5a2010 0%, #7a5a2000 70%),
    radial-gradient(70px 50px at 92% 97%, #7a5a200c 0%, #7a5a2000 72%),
    /* the fold this sheet arrived in */
    linear-gradient(180deg, #0000 calc(33% - 14px), #5a4a2008 33%, #fff5 calc(33% + 1px), #0000 calc(33% + 14px)),
    /* laid-paper fibre */
    repeating-linear-gradient(0deg,  #0000 0 2px, #00000005 2px 3px),
    repeating-linear-gradient(90deg, #0000 0 3px, #5a4a2009 3px 4px);
}
/* the sheet lifts very slightly off the desk at its foot */
.paper{ box-shadow:0 14px 44px #000b, 0 3px 10px #0009, inset 0 -26px 30px -26px #5a4a2033; }

/* ---- 3. the mount: the painting sits IN the page, not on top of it ---- */
#scene-wrap::before, #title-art::after, #ending-art::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  /* the paper's own grain carried over the art, so they share a surface */
  background-image:
    repeating-linear-gradient(0deg,  #0000 0 2px, #00000008 2px 3px),
    repeating-linear-gradient(90deg, #0000 0 3px, #5a4a200a 3px 4px);
  box-shadow:inset 0 0 0 1px #2c2a2233, inset 0 2px 14px #2c2a2240,
             inset 0 -14px 26px -18px #2c2a2255;
}
#scene-wrap, #title-art, #ending-art{ border-radius:1px; }

/* ---- 4. the ledger, on squared paper ---- */
.hud-panel{
  background-image:
    repeating-linear-gradient(0deg,  #0000 0 13px, #33507a0d 13px 14px),
    repeating-linear-gradient(90deg, #0000 0 13px, #33507a0d 13px 14px);
  padding:6px 8px 9px; margin-left:-8px;
  border-bottom:1px solid #c9c1a4;
}

/* ---- 5. choices: the nib mark and the ink bleed ---- */
.choice{ position:relative; transition:border-color .18s ease, background .18s ease, padding-left .18s ease; }
.choice::before{
  content:''; position:absolute; left:0; top:50%; width:0; height:1px; background:#8c2f24;
  transform:translateY(-50%); transition:width .22s ease; opacity:.55;
}
.choice:hover, .choice:focus-visible{ padding-left:20px; }
.choice:hover::before, .choice:focus-visible::before{ width:12px; }
.choice:hover{ background:linear-gradient(90deg,#8c2f2412,#8c2f2400 70%); }
.c-pre{ text-shadow:0 1px 0 #fff7; }

/* the ending card is set to the same book measure (its old 640px ran ~79 chars) */
#ending-text{ max-width:62ch; }

/* ---- 6. small type, set properly ---- */
.game-title{ text-shadow:0 1px 0 #fff8, 0 -1px 1px #0000000d; }
#ending-title{ text-wrap:balance; }
#region-name{ text-shadow:0 1px 0 #fff6; }
#node-text em, #ending-text em{ font-style:italic; }
::selection{ background:#d8a24a55; color:#2c2a22; }

/* ------- M13: touch tap targets (pointer:coarse = any touch device) -------
   Measured before: small menu buttons 30px, option buttons 26px, inputs 28px —
   all under the 44px guidance. Sized up without touching the desktop look. */
@media (pointer: coarse), (max-width: 720px){
  .menu-btn{ min-height:48px; }
  .menu-btn.small{ min-height:44px; padding:11px 20px; }
  .opt-btn{ min-height:44px; padding:10px 16px; }
  .names-row input, .nb-in{ min-height:44px; font-size:16px; } /* 16px stops iOS zoom-on-focus */
  .nb-code{ min-height:56px; font-size:12px; }
  .choice{ padding:12px 14px; }
  #gallery-close{ min-height:44px; }
  .j-title{ display:inline-block; padding:6px 0; }   /* rename target, not a hairline */
  .j-input{ min-height:44px; font-size:16px; }
}
/* short screens: give the prose more room before it needs a scroll */
@media (max-height:740px) and (max-width:720px){
  #scene-wrap{ height:150px; }
  #title-art{ height:170px; }
}

@media (max-width:480px){
  .game-title{ letter-spacing:3px; }
  .title-inner{ padding:16px 16px 8px; }
  .names-row input{ width:130px; }
  .menu-btn, .menu-btn.small{ min-width:230px; }
  #node-text p{ font-size:15.5px; }
  .choice{ font-size:14.5px; padding:8px 10px; }
  .hud-row{ gap:12px; }
  .paper::before{ border-width:5px; }
  .gallery-box{ padding:18px 16px; }
  .log-face{ width:56px; height:56px; }
}
/* comprehensive reduced-motion: no continuous or attention-grabbing motion.
   The recommended global neutralizer + explicit kills for the infinite ones
   (the Ken Burns drift, the page-turn sweep, the Keeper's urge pulse). */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .scene-img,#scene-art svg,#title-art svg,#ending-art svg,
  #page-turn.go,#btn-lastpage.urgent{ animation:none !important; }
}