:root { --ink: #e6e6ee; --dim: #8a8aa8; --blue: #3d5cff; --yolk: #ffe14d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #03030a; color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; overscroll-behavior: none; }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#hud { display: flex; gap: 14px; align-items: flex-end; padding: 10px 14px 6px; }
.h { display: flex; flex-direction: column; } .h b { font-size: 10px; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; } .h span { font-size: 20px; font-weight: 700; }
#lives { color: var(--yolk); letter-spacing: 2px; }
.sp { flex: 1; }
#hud button { background: transparent; color: var(--ink); border: 1px solid #2a2a44; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
#hud button.on { border-color: var(--blue); color: #c9d3ff; }
#game { flex: 1; width: 100%; touch-action: none; display: block; }
#note { text-align: center; color: var(--dim); font-size: 13px; min-height: 18px; padding: 4px 10px 10px; }
.overlay { position: fixed; inset: 0; overflow-y: auto; background: rgba(3, 3, 10, 0.93); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 24px; text-align: center; z-index: 5; }
.overlay[hidden] { display: none; }
.overlay > :first-child { margin-top: auto; } .overlay > :last-child { margin-bottom: auto; } /* centred while it fits, scrollable when it doesn't */
.overlay h1 { font-size: 44px; margin: 0; color: var(--yolk); letter-spacing: 0.08em; }
.overlay h2 { font-size: 11px; margin: 0; color: var(--dim); letter-spacing: 0.2em; font-weight: 600; }
.overlay p { max-width: 520px; line-height: 1.55; margin: 0; color: #c8c8da; font-size: 14px; }
.overlay p b { color: var(--ink); }
.overlay .accent { color: #c496ff; }
.overlay button { background: var(--yolk); color: #111; border: 0; border-radius: 12px; padding: 12px 22px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.overlay a { color: #9fb0ff; }