:root { --ink: #f4efe4; --dim: #b9b1a1; --gold: #e0b45a; --panel: rgba(14, 12, 10, 0.82); font-family: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0a09; color: var(--ink); }
body.world { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font-size: 20px; color: var(--dim); background: #0b0a09; z-index: 20; }
header { position: fixed; left: 0; right: 0; top: 0; display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: linear-gradient(#000a, #0000); pointer-events: none; z-index: 5; }
header > * { pointer-events: auto; }
header b { display: block; font-size: 17px; letter-spacing: .02em; }
header span { font-size: 13px; color: var(--dim); }
a { color: var(--gold); text-decoration: none; }
.back { font-size: 14px; white-space: nowrap; }
#styles { position: fixed; right: 10px; top: 10px; display: flex; gap: 4px; z-index: 6; flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; }
#styles a { padding: 6px 10px; border-radius: 999px; background: var(--panel); font-size: 13px; color: var(--dim); border: 1px solid #ffffff1a; }
#styles a.on { color: #111; background: var(--gold); }
#notes { position: fixed; left: 12px; top: 70px; background: var(--panel); padding: 8px 12px; border-radius: 8px; font-size: 13px; border-left: 3px solid var(--gold); z-index: 5; }
#notes div { color: var(--dim); }
#prompt { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); padding: 12px 20px; font: 600 16px Georgia, serif; color: #111; background: var(--gold); border: 0; border-radius: 999px; box-shadow: 0 4px 18px #0008; z-index: 6; }
#card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; max-width: min(440px, 90vw); background: #f3ead6; color: #2a2118; border: 0; border-radius: 4px; padding: 22px 24px; box-shadow: 0 12px 40px #000a; z-index: 9; }
#card .k { font: 700 11px system-ui; letter-spacing: .14em; text-transform: uppercase; color: #9a3a1a; }
#card h3 { margin: 4px 0 8px; font-size: 22px; }
#card p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
#card small { color: #8a7a64; }
#talk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(620px, 94vw); background: var(--panel); border-radius: 10px; padding: 14px 18px; z-index: 7; border-top: 2px solid var(--gold); }
#talk .who { font: 700 12px system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
#talk .line { font-size: 18px; line-height: 1.4; margin: 6px 0 10px; }
#talk .opts { display: flex; flex-wrap: wrap; gap: 6px; }
#talk button { font: 15px Georgia, serif; padding: 8px 12px; border-radius: 6px; border: 1px solid #ffffff2a; background: #ffffff10; color: var(--ink); }
#stick { position: fixed; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #ffffff40; display: none; z-index: 4; pointer-events: none; }
#stick i { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; border-radius: 50%; background: #ffffff50; }
#help { position: fixed; left: 12px; bottom: 10px; font: 12px system-ui; color: #ffffff70; z-index: 3; }
@media (pointer: coarse) { #help { display: none; } }