html, body { margin: 0; height: 100%; background: #1c1a16; overflow: hidden; overscroll-behavior: none; }
body { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: #f4ecd9; }
#stage { position: fixed; left: 0; top: 0; height: 100%; width: 100%; overflow: hidden; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; opacity: 0; transition: opacity 1.4s ease; }
#scene:active { cursor: grabbing; }
.ready #scene { opacity: 1; }

#title { position: absolute; left: 0; right: 0; top: 13%; text-align: center; pointer-events: none; text-shadow: 0 1px 18px rgba(20, 16, 8, .55); transition: opacity 1.6s ease, transform 1.6s ease; }
#title h1 { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(44px, 8vw, 104px); letter-spacing: .01em; line-height: 1; }
#title p { margin: .6em 0 0; font-size: clamp(13px, 1.5vw, 18px); letter-spacing: .28em; text-transform: uppercase; opacity: .85; }
.started #title { opacity: 0; transform: translateY(-12px); }

#load { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-style: italic; font-size: 20px; color: #cdbf9f; pointer-events: none; transition: opacity .8s ease; }
.ready #load { opacity: 0; }
.nohud #title { opacity: 0; }

#stick { position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 1px solid rgba(255, 250, 238, .45); background: rgba(20, 16, 10, .18); opacity: 0; pointer-events: none; transition: opacity .2s; }
#stick i { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgba(255, 250, 238, .7); }