:root { --px: 2px; --paper: #efe3c6; --ink: #2a1c16; --edge: #3d2a1f; }
html, body { margin: 0; height: 100%; background: #04060d; overflow: hidden; }
body { font-family: 'Pixelify Sans', system-ui, sans-serif; color: var(--paper); -webkit-font-smoothing: antialiased; }
#stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#c { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--px) * 7); overflow: hidden; }
#ui button { pointer-events: auto; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* title */
#title { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; padding: calc(var(--px) * 26) calc(var(--px) * 28);
  background: linear-gradient(90deg, rgba(4, 7, 16, .78), rgba(4, 7, 16, .2) 60%, transparent); transition: opacity 1.4s; }
#title.gone { opacity: 0; pointer-events: none; }
#title h1 { margin: 0; font-weight: 500; font-size: calc(var(--px) * 30); line-height: 1; color: #f3e6c8; letter-spacing: .02em; text-shadow: 0 calc(var(--px) * 2) 0 rgba(0, 0, 0, .5); }
#title .sprig { color: #d6be5a; margin: calc(var(--px) * 4) 0 calc(var(--px) * 6) calc(var(--px) * 20); letter-spacing: .3em; }
#title .sub { font-family: 'Silkscreen', monospace; font-size: calc(var(--px) * 5.5); letter-spacing: .22em; line-height: 1.7; margin: 0 0 calc(var(--px) * 8); color: #c9c4b6; }
#title .tag { margin: 0; color: #e8e2d0; }
#title .start { position: absolute; bottom: calc(var(--px) * 22); left: calc(var(--px) * 28); margin: 0; font-family: 'Silkscreen', monospace; font-size: calc(var(--px) * 5.5); letter-spacing: .2em; color: #ffcf72; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* toasts */
#toasts { position: absolute; top: calc(var(--px) * 8); left: calc(var(--px) * 8); display: flex; flex-direction: column; gap: calc(var(--px) * 3); }
.toast { background: var(--paper); color: var(--ink); padding: calc(var(--px) * 2.5) calc(var(--px) * 5); font-size: calc(var(--px) * 6);
  border: var(--px) solid var(--edge); box-shadow: 0 var(--px) 0 var(--px) rgba(0, 0, 0, .4); animation: slide .5s steps(5); transition: opacity .8s, transform .8s; }
.toast span { color: #b8461a; }
.toast.out { opacity: 0; transform: translateX(calc(var(--px) * -8)); }
@keyframes slide { from { transform: translateX(calc(var(--px) * -20)); opacity: 0; } }

/* prompt */
#prompt { position: absolute; transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--px) * 2); font-size: calc(var(--px) * 5.5); color: #e8e2d0; text-shadow: 0 var(--px) 0 #000; white-space: nowrap; }
#prompt .key { display: inline-grid; place-items: center; width: calc(var(--px) * 9); height: calc(var(--px) * 9); background: var(--paper); color: var(--ink);
  border: var(--px) solid var(--edge); box-shadow: 0 var(--px) 0 var(--edge); font-family: 'Silkscreen', monospace; font-size: calc(var(--px) * 5.5); }

/* dialog */
#dialog { position: absolute; max-width: calc(var(--px) * 170); min-width: calc(var(--px) * 90); background: var(--paper); color: var(--ink);
  padding: calc(var(--px) * 5) calc(var(--px) * 7) calc(var(--px) * 6); border: var(--px) solid var(--edge);
  box-shadow: 0 0 0 var(--px) var(--paper), 0 calc(var(--px) * 3) 0 var(--px) rgba(0, 0, 0, .35); line-height: 1.3; pointer-events: auto; cursor: pointer; }
#dialog .name { font-family: 'Silkscreen', monospace; font-size: calc(var(--px) * 5); color: #9a2420; margin-bottom: calc(var(--px) * 1.5); letter-spacing: .08em; }
#dialog.narrate { background: #1a1f2e; color: #e8e2d0; border-color: #46455c; box-shadow: 0 0 0 var(--px) #0b0d14, 0 calc(var(--px) * 3) 0 var(--px) rgba(0, 0, 0, .35); font-style: italic; }
#dialog .more { position: absolute; right: calc(var(--px) * 4); bottom: calc(var(--px) * 2); animation: blink 1s steps(2) infinite; }

/* hud */
#hint { position: absolute; bottom: calc(var(--px) * 8); left: 50%; transform: translateX(-50%); font-family: 'Silkscreen', monospace; font-size: calc(var(--px) * 5); letter-spacing: .12em; color: #c9c4b6; text-shadow: 0 var(--px) 0 #000; transition: opacity 2s; white-space: nowrap; }
#hint.out { opacity: 0; }
#journalBtn { position: absolute; right: calc(var(--px) * 8); top: calc(var(--px) * 8); background: rgba(10, 14, 26, .7); color: #e8e2d0; border: var(--px) solid #46455c;
  padding: calc(var(--px) * 2) calc(var(--px) * 4); font-family: 'Silkscreen', monospace !important; font-size: calc(var(--px) * 5) !important; letter-spacing: .08em; }
#journalBtn:hover { border-color: #ffcf72; color: #ffcf72; }

/* journal */
#journal { position: absolute; inset: 0; background: rgba(3, 5, 12, .72); display: grid; place-items: center; pointer-events: auto; }
.book { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: calc(var(--px) * 360); height: calc(var(--px) * 215);
  background: #6f4e34; padding: calc(var(--px) * 4); box-shadow: 0 calc(var(--px) * 5) 0 rgba(0, 0, 0, .5); margin-right: calc(var(--px) * 26); }
.page { background: var(--paper); color: var(--ink); padding: calc(var(--px) * 9) calc(var(--px) * 11); overflow: hidden; min-width: 0;
  background-image: repeating-linear-gradient(transparent 0 calc(var(--px) * 11 - 1px), rgba(61, 42, 31, .12) calc(var(--px) * 11 - 1px) calc(var(--px) * 11)); }
.page.left { border-right: calc(var(--px) * 2) solid #d9c7a0; }
.page h2, .page h3 { margin: 0 0 calc(var(--px) * 5); font-weight: 500; font-size: calc(var(--px) * 9); line-height: 1.1; }
#jSketch { display: block; width: 100%; image-rendering: pixelated; border: var(--px) solid #a88a5c; background: var(--paper); }
#jNote { margin: calc(var(--px) * 5) 0 0; font-size: calc(var(--px) * 6.5); line-height: 1.4; color: #4a3624; }
#jList { list-style: none; margin: 0; padding: 0; max-height: calc(var(--px) * 150); overflow: auto; }
#jList li { display: flex; gap: calc(var(--px) * 4); padding: calc(var(--px) * 2) 0; font-size: calc(var(--px) * 6.5); border-bottom: 1px dashed rgba(61, 42, 31, .25); cursor: pointer; }
#jList li:hover, #jList li.sel { color: #9a2420; }
#jList li.done span:last-child { text-decoration: line-through; opacity: .6; }
#jList .tick { color: #b8461a; width: calc(var(--px) * 6); flex: none; }
#jList .empty { cursor: default; font-style: italic; opacity: .6; }
#jCount { position: absolute; bottom: calc(var(--px) * 10); right: calc(var(--px) * 12); font-family: 'Silkscreen', monospace; font-size: calc(var(--px) * 4.5); color: #8a7355; }
.tabs { position: absolute; right: calc(var(--px) * -26); top: calc(var(--px) * 16); display: flex; flex-direction: column; gap: calc(var(--px) * 3); }
.tabs button { width: calc(var(--px) * 30); text-align: left; padding: calc(var(--px) * 3) calc(var(--px) * 4); background: #2d5941; color: #e8e2d0; border: none;
  font-size: calc(var(--px) * 5.5) !important; box-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(0, 0, 0, .35); }
.tabs button.t-notes { background: #d6be5a; color: var(--ink); }
.tabs button.on { transform: translateX(calc(var(--px) * 4)); outline: var(--px) solid var(--paper); }

/* touch */
#touch { position: absolute; inset: auto 0 calc(var(--px) * 6) 0; display: flex; gap: calc(var(--px) * 4); padding: 0 calc(var(--px) * 8); }
#touch button { width: calc(var(--px) * 26); height: calc(var(--px) * 26); background: rgba(239, 227, 198, .18); color: var(--paper); border: var(--px) solid rgba(239, 227, 198, .4); font-size: calc(var(--px) * 9); touch-action: none; }
#touch .act { margin-left: auto; }