:root {
  --ink: #f4efe6;
  --ink-dim: rgba(244, 239, 230, 0.7);
  --veil: rgba(20, 18, 16, 0.55);
}
html, body { margin: 0; height: 100%; background: #1a1714; overflow: hidden; }
body { font-family: Georgia, 'Times New Roman', serif; color: var(--ink); }
#app, canvas { display: block; width: 100%; height: 100%; }

.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--veil); cursor: pointer; text-align: center;
  transition: opacity 0.4s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay h1 { font-weight: normal; font-size: clamp(28px, 5vw, 56px); margin: 0 0 8px; letter-spacing: 0.02em; }
.overlay p { margin: 6px 0; color: var(--ink-dim); font-size: 16px; }
.overlay .cta { margin-top: 24px; font-size: 18px; color: var(--ink); border: 1px solid var(--ink-dim); padding: 10px 22px; display: inline-block; background: none; font-family: inherit; cursor: pointer; }
.overlay .cta:focus-visible, .overlay a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.stats {
  position: fixed; top: 8px; left: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.5);
  font: 12px/1.4 ui-monospace, Menlo, monospace; color: #cfe; white-space: pre; pointer-events: none;
}
.stats.hidden { display: none; }

.overlay .panel { max-width: 640px; padding-inline: max(16px, 4vw); }
.overlay .hint { margin-top: 18px; }
.overlay .links a, .overlay .links a:visited { color: var(--ink-dim); font-size: 14px; }
.overlay .bar { width: 240px; height: 3px; margin: 24px auto 0; background: rgba(244, 239, 230, 0.2); }
.overlay .bar .fill { height: 100%; width: 0; background: var(--ink); transition: width 0.2s ease; }
.overlay .credits { text-align: left; cursor: default; }
.overlay .credits h2 { font-weight: normal; margin: 0 0 12px; }
.overlay .credits ul { padding-left: 18px; color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
.overlay .credits .dim { font-size: 13px; }
.overlay .credits .cta { cursor: pointer; }
.overlay [hidden] { display: none !important; }