@font-face { font-family: 'Caveat'; font-weight: 400; src: url(/fonts/caveat-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Caveat'; font-weight: 700; src: url(/fonts/caveat-latin-700-normal.woff2) format('woff2'); font-display: swap; }
:root { --paper: #f4efe4; --ink: #1b1b1f; --red: #d42a2a; --pencil: #8a8a8a; --desk: #25221e; --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--hand); font-size: 20px; overscroll-behavior: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the paper is the whole screen; its content keeps the page's proportions */
#desk { height: 100svh; display: flex; justify-content: center; }
#sheet { position: relative; height: 100%; width: min(100%, calc(100svh * 0.74)); display: flex; flex-direction: column; justify-content: center; padding: 4px 10px max(4px, env(safe-area-inset-bottom)); }
#top, #bottom, #nav { width: var(--pw, 100%); max-width: 100%; margin: 0 auto; }
#top, #bottom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; flex: none; }
#top { font-size: clamp(19px, 5.6vw, 24px); padding: 4px 2px 2px; display: flex; justify-content: space-between; gap: 8px; }
#top .right { overflow: hidden; text-overflow: ellipsis; padding-right: 3px; }
#bottom { font-size: clamp(16px, 4.6vw, 19px); color: var(--pencil); padding: 2px 2px 0; }
.red { color: var(--red); } .pencil { color: var(--pencil); } .dim { color: var(--pencil); text-decoration: line-through; }
#top .red, #bottom .red { color: var(--red); }
#stage { position: relative; flex: none; min-height: 0; display: flex; align-items: center; justify-content: center; }
#paper { display: block; touch-action: none; cursor: crosshair; }
/* four words in the margin; each is a 44 px target even though it looks small */
#nav { flex: none; position: relative; z-index: 7; background: var(--paper); display: flex; justify-content: space-between; white-space: nowrap; }
#nav button { color: var(--pencil); font-size: clamp(18px, 5.4vw, 21px); min-height: 44px; min-width: 44px; padding: 0 4px; }
#nav button[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 4px 6px; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
.link { min-height: 44px; padding: 0 4px; text-decoration: underline; text-decoration-color: #8a8a8a99; text-underline-offset: 4px; }
/* the Game's actions: underlined red words written on the page */
#words { position: absolute; left: 6%; right: 6%; bottom: 3%; z-index: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; pointer-events: none; }
#words > * { pointer-events: auto; }
.act { color: var(--red); font-size: 1.25rem; min-height: 44px; padding: 0 2px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
input.hand { border: 0; border-bottom: 2px solid var(--red); background: transparent; padding: 2px 4px; width: 10rem; font-size: 1.3rem; color: var(--ink); border-radius: 0; }
input.hand::placeholder { color: var(--pencil); }
input.hand:focus-visible { outline: none; border-bottom-width: 3px; }
/* screens: a sheet slides up over the paper; tap above it or swipe down to close */
#scrim { position: absolute; inset: 0; z-index: 5; }
#screen { position: absolute; left: 0; right: 0; bottom: 0; top: 7%; background: var(--paper); z-index: 6; overflow-y: auto; padding: 10px 16px 64px; box-shadow: 0 -3px 14px #1b1b1f26; border-radius: 3px 5px 0 0; transform: translateY(102%); transition: transform .22s ease-out; }
#screen.up { transform: none; }
#screen h1 { font-size: 1.6rem; margin: 0 0 2px; } #screen h2 { font-size: 1.2rem; margin: 14px 0 2px; }
#screen p, #screen li { margin: 3px 0; } #screen ul { padding-left: 0; list-style: none; margin: 4px 0; }
#screen .close { position: sticky; top: 0; float: right; color: var(--pencil); font-size: 1.5rem; min-width: 44px; min-height: 44px; }
#screen li.tech { display: flex; gap: 10px; align-items: center; border-bottom: 1px dashed #8a8a8a55; padding: 5px 0; line-height: 1.15; }
#screen li.tech .mark { width: 26px; flex: none; text-align: center; font-size: 1.5rem; }
#screen li.tech .body { flex: 1; min-width: 0; }
#screen canvas.thumb { width: 66px; height: 88px; flex: none; }
#screen .logo { width: min(220px, 64%); display: block; margin: 4px 0 8px; }
#screen input { border: 0; border-bottom: 2px solid var(--ink); background: none; padding: 2px 4px; width: 10rem; }
#sheet.slide-out { animation: out .9s ease-in forwards; } #sheet.slide-in { animation: inn .7s ease-out; }
@keyframes out { to { transform: translateX(-120%) rotate(-4deg); } } @keyframes inn { from { transform: translateX(120%) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { #sheet.slide-out, #sheet.slide-in { animation: none; } #screen { transition: none; } * { scroll-behavior: auto !important; } }
input.hand.err::placeholder { color: var(--red); opacity: 1; }

#screen [tabindex="-1"]:focus { outline: none; } /* the title takes focus for screen readers, not for the eye */