:root {
  --serif: "Baskerville", "Baskerville Old Face", "Libre Baskerville", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Noto Serif", "DejaVu Serif", serif;
  --display: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, "Noto Serif", "DejaVu Serif", serif;
  --sans: "Futura", "Avenir Next", "Trebuchet MS", "Segoe UI", "DejaVu Sans", sans-serif;
  --paper: #ece4d2; --dim: #9d998f; --ink: #1b1820; --lamp: #f2b45c; --night: #0c0e16;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #020204; overflow: hidden; color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; user-select: none; }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; background: var(--night); cursor: none; }
#stage.cursor { cursor: default; }
#view { position: absolute; inset: 0; width: 1280px; height: 720px; display: block; }
#hud, #ui, #fade { position: absolute; inset: 0; }
#ui, #fade { overflow: hidden; }
#hud { pointer-events: none; }
#ui { pointer-events: none; }
#ui > * { pointer-events: auto; }
#fade { background: var(--night); opacity: 1; pointer-events: none; transition: opacity .6s ease; }

/* ---------- in-scene text ----------
   #stage is CSS-scaled by --s to fit the window, text included. Sizes are written max(design size, N * --px):
   the design size in stage px at large windows, and never less than N px as actually drawn on screen.
   Separation from the picture is a soft dark halo (layered shadows, a feathered band) with no edge to it. */
#stage { --s: 1; --px: calc(1px / var(--s)); --bar: 0px;
  --halo: 0 0 1px rgba(4,4,8,.95), 0 1px 2px rgba(4,4,8,.9), 0 0 7px rgba(4,4,8,.75), 0 0 16px rgba(4,4,8,.6), 0 0 34px rgba(4,4,8,.36);
  --band: radial-gradient(closest-side, rgba(5,6,12,.62), rgba(5,6,12,.42) 45%, rgba(5,6,12,.14) 78%, rgba(5,6,12,0)); }
#hud > * { text-shadow: var(--halo); }
#stage.screen-up #hud { visibility: hidden; }

#objective { position: absolute; left: 40px; top: 24px; max-width: 290px; text-wrap: balance; font: max(18px, calc(14.5 * var(--px)))/1.3 var(--serif); color: var(--paper); opacity: 0; transition: opacity .3s; }
#objective.on { opacity: 1; }

/* Ada's thoughts: the words that matter most. Upright semibold holds up over a sunset where the thin italic did not. */
#ada { position: absolute; left: 50%; top: 16px; width: min(26em, 680px); transform: translateX(-50%); isolation: isolate;
  text-align: center; text-wrap: balance; font: italic 600 max(26px, calc(19 * var(--px)))/1.3 var(--serif); color: #f7f0e2; opacity: 0; transition: opacity .25s; }
#ada::before { content: ''; position: absolute; inset: -34px -110px -30px; z-index: -1; background: var(--band); }
#ada.on { opacity: 1; }

/* What she reads off a mouth: the easiest thing on screen to read. */
#lip { position: absolute; left: 50%; bottom: 24px; width: 700px; transform: translateX(-50%); isolation: isolate; text-align: center; opacity: 0; transition: opacity .15s; }
#lip::before { content: ''; position: absolute; inset: -26px -100px -24px; z-index: -1; background: var(--band); }
#lip.on { opacity: 1; }
#lip .name { display: block; font: italic max(17px, calc(14 * var(--px)))/1.3 var(--serif); color: var(--lamp); margin-bottom: 1px; }
#lip .line { display: block; text-wrap: balance; font: 600 max(27px, calc(20 * var(--px)))/1.3 var(--serif); color: #fffaf0; }
#lip .line.masked { font-weight: 400; font-style: italic; color: var(--paper); }

#who { position: absolute; left: 40px; bottom: 26px; max-width: 250px; opacity: 0; transition: opacity .15s; font: 600 max(20px, calc(16 * var(--px)))/1.25 var(--serif); color: #fff8ec; }
#who.on { opacity: 1; }
#who span { display: block; margin-top: 1px; font: italic max(16px, calc(13.5 * var(--px)))/1.3 var(--serif); color: rgba(236,228,210,.86); }

#tip { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); font: max(20px, calc(16 * var(--px)))/1.4 var(--serif); color: #f7f0e2; text-align: center; opacity: 0; transition: opacity .3s; white-space: nowrap; isolation: isolate; }
#tip.on { opacity: 1; }
#tip b { color: var(--lamp); font-weight: 600; }
#tip .keys { margin: 5px 0 0; font: italic max(16px, calc(13.5 * var(--px)))/1.4 var(--serif); color: rgba(240,233,218,.9); }
#hud.paused #tip { opacity: 0; transition-duration: .1s; }

/* Letterboxed (the window is taller than 16:9 and the band is deep enough): Ada's thoughts go up into the black above
   the picture and the lip line down into the black below it, centred in the band (no further than 170px from the picture).
   A thought too tall for the band starts at the top of the window and runs down into the picture, with its halo. */
#stage.lb #ada { top: calc(-1 * min(var(--bar), 170px)); min-height: min(var(--bar), 170px); width: min(28em, 1120px); padding: 6px 0; display: flex; flex-direction: column; justify-content: center; }
#stage.lb #lip { bottom: calc(-1 * min(var(--bar), 170px)); min-height: min(var(--bar), 170px); width: 1120px; padding: 6px 0; display: flex; flex-direction: column; justify-content: center; }
#stage.lb #ada::before, #stage.lb #lip::before { inset: 0 -60px; }
#stage.lb #who { max-width: 520px; }
#stage.lb #objective { max-width: 420px; }
#stage.lb #tip { top: 120px; }

/* ---------- screens: one typeface, one column, text you can click ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: rise .5s ease both; font-family: var(--serif); }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
.col { position: absolute; left: 96px; bottom: 84px; width: max(560px, calc(430 * var(--px))); text-align: left; }
.screen h1 { font: 400 112px/0.9 var(--serif); letter-spacing: -0.015em; margin: 0 0 0 -6px; color: var(--paper); }
.screen h2 { font: 400 52px/1.05 var(--serif); letter-spacing: -0.01em; margin: 0 0 18px -2px; color: var(--paper); }
.screen .sub, .screen .day { font: italic max(20px, calc(16.5 * var(--px))) var(--serif); color: #b4afa3; margin: 8px 0 0; }
.screen nav { display: flex; flex-direction: column; align-items: flex-start; margin-top: 34px; }
.link { font: max(24px, calc(18.5 * var(--px)))/1.5 var(--serif); color: #b4afa3; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: color .15s; }
.link:hover, .link:focus-visible { color: var(--paper); outline: none; text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.screen nav .link:first-child { color: var(--paper); }
.link:disabled { color: rgba(236,228,210,.22); pointer-events: none; }
.link.back { margin-top: 18px; }

#title-screen { background: linear-gradient(90deg, rgba(12,14,22,.88), rgba(12,14,22,.62) 30%, rgba(12,14,22,0) 62%); }
#pause-screen, #end-screen { background: rgba(12,14,22,.9); }
#chapter-screen { background: var(--night); } #chapter-screen .day { margin: 0 0 6px; } #chapter-screen h2 { font-size: 76px; margin-bottom: 0; }
#fail-screen { background: rgba(12,14,22,.84); } #fail-screen .line { font: italic max(27px, calc(20 * var(--px)))/1.45 var(--serif); color: var(--paper); margin: 0; }
#pause-screen .col { width: max(700px, calc(610 * var(--px))); bottom: 64px; }
#pause-screen dl { display: grid; grid-template-columns: 8.6em 1fr; gap: .3em 0; margin: 0; font: max(18px, calc(15.5 * var(--px)))/1.38 var(--serif); color: #b4afa3; } #pause-screen dt { color: var(--paper); } #pause-screen dd { margin: 0; }
#end-screen .tally { font: max(20px, calc(17 * var(--px)))/1.6 var(--serif); color: var(--paper); margin: 0; } #end-screen .credits { font: italic max(15px, calc(13.5 * var(--px)))/1.5 var(--serif); color: #b4afa3; margin: 34px 0 0; } #end-screen a { color: inherit; }

#card-screen { justify-content: flex-end; background: linear-gradient(180deg, rgba(12,14,22,0) 300px, rgba(12,14,22,.9) 540px); }
#card-screen .text { width: 30.5em; min-height: 6em; margin-bottom: 48px; font: max(26px, calc(19.5 * var(--px)))/1.5 var(--serif); color: #f7f0e2; text-align: left; text-shadow: 0 0 1px rgba(4,4,8,.9), 0 1px 3px rgba(4,4,8,.8), 0 0 14px rgba(4,4,8,.6); }

#note-screen { background: rgba(12,14,22,.78); }
.note { width: 25.7em; padding: 2.1em 2.4em 1.8em; font-size: max(21px, calc(18 * var(--px))); background: #ece3cc; color: #241f1b; transform: rotate(-1.2deg); box-shadow: 0 2px 0 rgba(0,0,0,.3), 0 24px 50px rgba(0,0,0,.5); }
.note p { margin: 0 0 .66em; font: 1em/1.5 "Bradley Hand", "Segoe Print", "Segoe Script", "Lucida Handwriting", "Ink Free", cursive; }
.note.fish p { font-family: "American Typewriter", "Courier New", "Liberation Mono", "DejaVu Sans Mono", Consolas, monospace; font-size: .86em; line-height: 1.6; }
.note.teddy p { font-family: "Marker Felt", "Bradley Hand", "Ink Free", "Segoe Print", "Segoe Script", "Lucida Handwriting", cursive; font-size: 1.05em; }
.note.ada p { font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Lucida Handwriting", "Segoe Print", "Ink Free", cursive; font-size: 1.19em; line-height: 1.42; }
.note .sign { text-align: right; margin-top: 1em; }
#note-screen .link, #gazette-screen .link { margin-top: 28px; color: var(--paper); }
#gazette-screen .link { margin-top: 14px; }

/* ---------- the Gazette ---------- */
#gazette-screen { background: rgba(12,14,22,.6); }
.gazette { width: min(1220px, 56em); font-size: max(14.5px, calc(15.5 * var(--px))); background: #e9e0cb; color: #1d1a1e; padding: 1em 2em 1.1em; transform: rotate(.5deg); box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 0 90px rgba(110,80,30,.18); animation: drop .7s cubic-bezier(.2,.9,.3,1) both; }
@keyframes drop { from { transform: translateY(-40px) rotate(-3deg) scale(1.06); opacity: 0; } to { transform: rotate(.5deg); opacity: 1; } }
.gazette .mast { text-align: center; font: 700 2.3em/1 var(--serif); letter-spacing: .01em; }
.gazette .dateline { display: flex; justify-content: space-between; border-top: 3px double #1d1a1e; border-bottom: 1px solid #1d1a1e; margin: .5em 0 .75em; padding: .25em 2px; font: 600 .74em var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.gazette h3 { font: 700 2em/1.02 var(--display); margin: 0 0 .25em; text-align: center; letter-spacing: -.005em; }
.gazette .deck { font: italic 1.12em/1.36 var(--serif); text-align: center; margin: 0 2em .6em; padding-bottom: .5em; border-bottom: 1px solid rgba(29,26,30,.4); }
.gazette .cols { display: grid; grid-template-columns: 2fr 1.22fr; gap: 1.4em; }
.gazette .cols > div:first-child { column-count: 2; column-gap: 1.6em; column-rule: 1px solid rgba(29,26,30,.25); }
.gazette .cols p { font: 1em/1.44 var(--serif); margin: 0 0 .55em; text-align: justify; hyphens: auto; }
.gazette .cols p:first-child::first-letter { font: 700 3.05em/.82 var(--display); float: left; padding: .1em .12em 0 0; }
.gazette .side { border-left: 1px solid rgba(29,26,30,.4); padding-left: 1.4em; }
.gazette .side h4 { font: 700 1.07em/1.2 var(--display); margin: 0 0 .45em; letter-spacing: .02em; }
.gazette .side p { font-size: .96em; text-align: left; hyphens: manual; }
.gazette .side p:first-child::first-letter { font: inherit; float: none; padding: 0; }
.gazette .weather { margin-top: .8em; padding-top: .6em; border-top: 1px solid rgba(29,26,30,.4); font: 600 .7em/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- the mission flow: cards, the briefing, a line on black, the place, the verdict ----------
   Words come up whole and quickly; once they are up, a small plain cue says a click goes on. */
#card-screen, #note-screen, #brief-screen, #line-screen, #verdict-screen { animation-duration: .3s; cursor: default; }
.cue { position: absolute; right: 96px; bottom: 40px; margin: 0; font: italic max(18px, calc(15 * var(--px)))/1.3 var(--serif); color: #d8d0c0; opacity: 0; transition: opacity .25s; text-shadow: 0 0 1px rgba(4,4,8,.9), 0 1px 3px rgba(4,4,8,.8); }
.cue.on { opacity: 1; }
.caption { position: absolute; left: 96px; bottom: 40px; margin: 0; font: italic max(19px, calc(15.5 * var(--px)))/1.3 var(--serif); color: #b4afa3; text-shadow: 0 0 1px rgba(4,4,8,.9), 0 1px 3px rgba(4,4,8,.8); }
.caption span { margin: 0 .45em; }

#brief-screen { background: none; }
#brief-screen .desk { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 10px; }
#brief-screen .note { transform: rotate(-1.4deg); }
#brief-screen .desk.with-sketch .note { margin-right: -14px; }
#brief-screen .sketch { position: relative; z-index: 1; transform: rotate(3.2deg) translateY(26px); flex: none; }
.note.ruth p { font-family: "Savoye LET", "Snell Roundhand", "Apple Chancery", "Segoe Script", "Lucida Handwriting", "Segoe Print", "Ink Free", cursive; font-size: 1.3em; line-height: 1.35; }

#line-screen { background: var(--night); }
#line-screen .line, #verdict-screen .line { position: absolute; left: 96px; bottom: 140px; width: max(640px, calc(520 * var(--px))); margin: 0; font: max(28px, calc(21 * var(--px)))/1.45 var(--serif); color: var(--paper); }
#verdict-screen { background: rgba(12,14,22,.6); }
#verdict-screen .line { font-style: italic; }
#verdict-screen .line.verdict { font-style: normal; font-size: max(34px, calc(26 * var(--px))); }

#place-screen { background: var(--night); animation-duration: .12s; transition: opacity .25s; }
#place-screen.out { opacity: 0; }
#place-screen .place { position: absolute; left: 96px; bottom: 84px; margin: 0; font: italic max(28px, calc(22 * var(--px)))/1.3 var(--serif); color: var(--paper); }


/* ---------- missions: nine pictures, three by three ----------
   The pictures carry the screen; the type under them stays quiet. The mission to play next is in full colour, the
   played ones a little quieter, the ones not reached yet dark and grey with only their number. */
#chapters-screen { background: rgba(9,10,16,.95); }
#chapters-screen h2 { position: absolute; left: 96px; top: 58px; margin: 0; }
#chapters-screen .back { position: absolute; left: 96px; bottom: 52px; }
#chapters-screen .grid { position: absolute; right: 96px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 256px); column-gap: 28px; row-gap: 16px; }
.tile { display: block; width: 256px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--serif); color: var(--paper); outline: none; }
.tile .pic { display: block; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: #11131b; }
.tile canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease, filter .15s ease; }
.tile .pic.on canvas { opacity: 1; }
.tile .name { display: block; margin-top: 8px; font: max(20px, calc(16 * var(--px)))/1.3 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .15s; }
.tile .small { display: block; font: italic max(16px, calc(13.5 * var(--px)))/1.3 var(--serif); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.played canvas, .tile:not(.next):not(.locked) canvas { filter: saturate(.78) brightness(.8); }
.tile.played .name, .tile:not(.next):not(.locked) .name { color: #c9c3b6; }
.tile:not(:disabled):hover canvas, .tile:focus-visible canvas { filter: brightness(1.12); }
.tile:not(:disabled):hover .name, .tile:focus-visible .name { text-decoration-color: var(--lamp); }
.tile.locked { cursor: default; }
.tile.locked canvas { filter: grayscale(1) brightness(.3); }
.tile.locked .name { color: rgba(236,228,210,.32); }
.tile.locked .small { color: rgba(236,228,210,.22); }

/* ---------- films (src/game/cutscene.js) ----------
   The one word a film may say about itself: shown only after a click that came too soon to skip. */
#film-skip { position: absolute; right: 40px; bottom: 26px; font: italic max(16px, calc(13.5 * var(--px)))/1.3 var(--serif); color: rgba(236,228,210,.72); opacity: 0; transition: opacity .3s; }
#film-skip.on { opacity: 1; }
#hud.paused #film-skip { opacity: 0; }