:root {
  --paper: #e9e1cc;
  --paper-dim: #a79f8c;
  --ink: #0a0c11;
  --accent: #d9a441;
  --danger: #c0392b;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "Courier New", Courier, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); font-family: var(--serif); overflow: hidden; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #05060a; outline: none; touch-action: none; cursor: none; }

/* The title over the first picture */
#title { position: fixed; left: 0; right: 0; top: 24vh; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; z-index: 3; }
#title.show { opacity: 1; }
#title .t { display: block; font-size: clamp(44px, 8vw, 92px); letter-spacing: .03em; text-shadow: 0 3px 18px #000, 0 0 50px rgba(0,0,0,.8); }
#title .s { display: block; margin-top: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--paper-dim); text-shadow: 0 1px 6px #000; }

/* HUD: the goal, notes, and a page of story. Nothing here fades by itself. */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#hud[hidden] { display: none; }
#title .k { display: block; margin-top: 34px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); text-shadow: 0 1px 6px #000; }
#goal { position: absolute; left: 22px; top: 18px; max-width: min(460px, 60vw); padding: 7px 12px 8px 26px; font-size: 16px; line-height: 1.35; color: var(--paper); background: rgba(8,9,13,.62); border-left: 2px solid var(--accent); border-radius: 0 3px 3px 0; text-shadow: 0 1px 2px #000; }
#goal::before { content: ""; position: absolute; left: 10px; top: 14px; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
#goal[hidden] { display: none; }
#goal.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { 0% { background: rgba(217,164,65,.45); transform: translateX(-6px); } 30% { transform: none; } 100% { background: rgba(8,9,13,.62); } }
#hints { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(720px, 86vw); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#hints p { margin: 0; padding: 7px 14px 8px; font-size: 18px; line-height: 1.38; text-align: center; color: var(--paper); background: rgba(8,9,13,.7); border-radius: 3px; text-shadow: 0 1px 2px #000; animation: note .25s ease-out; }
#hints p.urgent { border-left: 3px solid var(--danger); }
@keyframes note { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* a page of story: the scene behind it stands still until the key */
#story { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(640px, 90vw); padding: 20px 26px 16px; background: rgba(8,9,13,.86); border-top: 2px solid var(--accent); border-radius: 3px; box-shadow: 0 14px 50px rgba(0,0,0,.6); animation: page .3s ease-out; }
@keyframes page { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#story[hidden] { display: none; }
#story .head { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 6px; }
#story .title { font-size: 28px; margin-bottom: 10px; }
#story .who { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
#story .text { font-size: 19px; line-height: 1.5; color: var(--paper); white-space: pre-line; }
#story .key { margin-top: 14px; text-align: right; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--paper-dim); }
#story kbd { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; margin-right: 4px; border: 1px solid rgba(233,225,204,.6); border-bottom-width: 3px; border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--paper); }
#story.caught { border-top-color: var(--danger); }
#story.caught .head { color: var(--danger); }
#story.ending .text { font-size: 18px; }

/* What is left of a menu: a few lines of text over the dimmed scene */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,6,10,.72); z-index: 10; overflow: auto; }
.screen[hidden] { display: none; }
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 24px 32px; max-width: 92vw; }
.menu .where { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 18px; }
.menu button { font: inherit; font-size: 22px; color: var(--paper-dim); background: none; border: 0; padding: 5px 0 5px 22px; cursor: pointer; text-align: left; position: relative; outline: none; }
.menu button::before { content: ''; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--accent); transform: rotate(45deg) scale(0); transition: transform .15s; }
.menu button:focus, .menu button:hover { color: var(--paper); }
.menu button:focus::before { transform: rotate(45deg) scale(1); }
.menu.list button { font-size: 18px; padding-top: 4px; padding-bottom: 4px; }
.menu.list .n { display: inline-block; width: 2.2em; font-family: var(--mono); font-size: 13px; color: var(--paper-dim); }
.menu.list .d { display: inline-block; width: 13.5em; font-style: italic; font-size: 15px; color: var(--paper-dim); }
.screen kbd { display: inline-block; border: 1px solid rgba(42,36,25,.45); padding: 1px 7px; border-radius: 2px; font-family: var(--mono); font-size: 12px; font-style: normal; }

/* A paper she has picked up: just the paper */
.screen.note { background: rgba(5,6,10,.6); }
.screen .paper { width: min(560px, 90vw); font-family: var(--mono); font-size: 15px; line-height: 1.6; white-space: pre-wrap; background: #e9e1cc; color: #2a2419; padding: 26px 30px; transform: rotate(-.6deg); box-shadow: 0 16px 50px rgba(0,0,0,.7); position: relative; }
.screen .paper .title { font-family: var(--serif); font-style: italic; color: #6a6050; margin-bottom: 12px; }
.screen .paper small { display: block; margin-top: 14px; color: #7a7060; text-align: right; }

/* Touch: a stick under the left thumb, a few round buttons under the right. They borrow the look
   of the keycaps drawn in the world, and all but pause and crouch only exist while they can act. */
#touch { position: fixed; inset: 0; z-index: 5; pointer-events: none; user-select: none; -webkit-user-select: none; touch-action: none; }
#touch[hidden], #touch [hidden] { display: none; }
#touch.idle > * { display: none; }
#touch button { position: absolute; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; width: 66px; height: 66px; border-radius: 50%; padding: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--paper); background: rgba(12,14,20,.58); border: 1.5px solid rgba(233,225,204,.5); box-shadow: 0 2px 0 rgba(233,225,204,.35); }
#touch button:active { background: rgba(233,225,204,.2); transform: translateY(1px); }
#touch button.on { background: rgba(233,225,204,.85); color: var(--ink); }
#touch button.hint { animation: hint 1.1s ease-in-out infinite; }
@keyframes hint { 50% { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(217,164,65,.25); } }
#touch [data-t="use"] { right: calc(20px + env(safe-area-inset-right)); bottom: calc(92px + env(safe-area-inset-bottom)); width: 92px; height: 92px; font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: 0; line-height: 1.1; border-color: rgba(233,225,204,.8); }
#touch [data-t="crouch"] { right: calc(124px + env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom)); }
#touch [data-t="stone"] { right: calc(128px + env(safe-area-inset-right)); bottom: calc(106px + env(safe-area-inset-bottom)); }
#touch [data-t="bread"] { right: calc(34px + env(safe-area-inset-right)); bottom: calc(196px + env(safe-area-inset-bottom)); }
#touch [data-t="pause"], #touch [data-t="look"] { top: calc(10px + env(safe-area-inset-top)); width: 44px; height: 44px; font-size: 13px; }
#touch [data-t="pause"] { right: calc(10px + env(safe-area-inset-right)); }
#touch [data-t="look"] { right: calc(62px + env(safe-area-inset-right)); font-size: 18px; }
#stick { position: absolute; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; border: 1.5px solid rgba(233,225,204,.32); background: rgba(12,14,20,.22); }
#stick.run { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,164,65,.18); }
#stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(233,225,204,.42); }
/* the notes keep clear of the thumbs */
body.touch #hints { width: 46vw; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); }
body.touch #hints p { font-size: 15px; }

@media (max-height: 480px) {
  #story { bottom: 3vh; padding: 12px 18px 10px; }
  #story .title { font-size: 22px; margin-bottom: 6px; }
  #story .text { font-size: 16px; }
  #title { top: 16vh; }
  .menu button { font-size: 19px; padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 640px) {
  #hints p { font-size: 15px; }
  #goal { font-size: 14px; left: 10px; top: 10px; max-width: 70vw; }
  #story .text { font-size: 16px; }
  .menu.list .d { display: none; }
  body.touch #hints { width: 88vw; bottom: auto; top: calc(9vh + 104px); }
}