:root { color-scheme: dark; --ink:#18130e; --cream:#f3ead8; --gold:#d3b47a; font-family:Georgia,'Times New Roman',serif; color:var(--cream); background:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none !important; }
main { max-width:1100px; margin:auto; padding:12px 12px; text-align:center; height:100vh; height:100dvh; display:flex; flex-direction:column; gap:8px; }
main > * { flex-shrink:0; }
header { flex-shrink:0; }
header { margin-bottom:20px; }
.eyebrow { font:11px/1.6 system-ui,sans-serif; letter-spacing:.17em; color:var(--gold); }
h1 { font-size:clamp(25px,5vw,40px); font-weight:400; margin:6px 0 10px; }
.place { font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
p { line-height:1.6; }
.small { font-size:14px; opacity:.8; }
#intro { max-width:550px; margin:0 auto 24px; }
#intro > p:first-child { font-size:21px; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:11px 18px; border:1px solid #94794d; border-radius:3px; background:#21190f; color:var(--cream); font:16px/1.4 Georgia,serif; cursor:pointer; text-decoration:none; touch-action:manipulation; }
button:hover,.button:hover { background:#4b3821; }
.primary { background:#c09a60; color:#18130e; }
.primary:hover { background:#d3b47a; color:#18130e; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,a:focus-visible { outline:3px solid #fff1c8; outline-offset:4px; }
.canvas { position:relative; width:100%; margin:auto; overflow:hidden; border-radius:2px; background:#21190f; flex-shrink:0; }
#art { width:100%; height:auto; display:block; user-select:none; }
#targets,#effects { position:absolute; inset:0; }
#targets { pointer-events:none; }
.target { position:absolute; pointer-events:auto; transform:translate(-50%,-50%); padding:0; min-width:44px; min-height:44px; background:transparent; border:0; border-radius:50%; }
.target:hover { background:transparent; }
.target:focus-visible,.target.hint { outline:2px solid var(--gold); outline-offset:2px; background:#d3b47a15; }
.target.found { pointer-events:none; cursor:default; opacity:1; min-width:0; min-height:0; width:22px !important; height:22px !important; border:1px solid #e8cf91a8; }
.target.found::after { content:'✓'; font:13px system-ui,sans-serif; color:#fff1c8; }
#effects { pointer-events:none; overflow:hidden; }
.flame { position:absolute; width:17%; aspect-ratio:1; background:radial-gradient(circle,#fff2b8aa 0%,#ffc54d65 22%,#ffb33525 43%,transparent 70%); mix-blend-mode:screen; animation:flicker 2.7s ease-in-out infinite; }
.candle-core { position:absolute; width:1.25%; height:4.6%; border-radius:65% 40% 55% 50%; background:radial-gradient(ellipse at 50% 72%,#fffdeacc,#ffe68d99 40%,#ffc34b33 65%,transparent 75%); transform-origin:50% 90%; mix-blend-mode:screen; animation:flame-sway 1.8s ease-in-out infinite; }
.spark { position:absolute; border-radius:50%; width:3px; height:3px; background:#ffe9a9; box-shadow:0 0 4px #f7cf7b; animation:float 5s linear infinite; opacity:0; }
@keyframes flicker { 0%,100% { opacity:.35; transform:translate(-50%,-50%) scale(.87); } 24% { opacity:.85; transform:translate(-50%,-50%) scale(1.08); } 39% { opacity:.48; transform:translate(-50%,-50%) scale(.94); } 65% { opacity:1; transform:translate(-50%,-50%) scale(1.16); } 82% { opacity:.55; transform:translate(-50%,-50%) scale(.98); } }
@keyframes flame-sway { 0%,100% { transform:translate(-50%,-70%) rotate(-5deg) scaleY(.92); opacity:.6; } 45% { transform:translate(-50%,-70%) rotate(7deg) scaleY(1.1); opacity:1; } 70% { transform:translate(-50%,-70%) rotate(-2deg) scaleY(.98); opacity:.75; } }
@keyframes float { 0% { transform:translateY(12px); opacity:0 } 35% { opacity:.6 } 100% { transform:translateY(-72px); opacity:0 } }
body:not(.playing) #effects { display:none; }
.fabric-motion,.turning-pages { position:absolute; inset:0; width:100%; height:100%; }
.fabric-motion { mask-image:radial-gradient(ellipse 16% 39% at 36% 91%,#000 48%,#000c 67%,transparent 100%); }
.fabric-motion img { width:100%; height:100%; transform-origin:40% 65%; animation:fabric-breath 5.8s ease-in-out infinite; }
.book-glow { position:absolute; left:47%; top:39%; width:14%; height:15%; background:radial-gradient(ellipse,#ffe4a345,transparent 68%); animation:book-breath 5s ease-in-out infinite; }
@keyframes fabric-breath { 0%,100% { transform:skewX(-2.2deg) rotate(-.35deg) scaleX(.99); } 50% { transform:skewX(2.8deg) rotate(.55deg) scaleX(1.025); } }
.target.soft-hint:not(.found)::before { content:''; position:absolute; inset:8%; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse,#fff4cdcc 0%,#f5d99b66 20%,#ebc77b22 45%,transparent 70%); opacity:0; animation:book-clue 5.5s ease-in-out infinite; }
@keyframes book-clue { 0%,76%,100% { opacity:0; transform:scale(.65); } 87% { opacity:.85; transform:scale(1.15); } 94% { opacity:.25; transform:scale(1.25); } }
@keyframes book-breath { 0%,100% { opacity:.2; } 50% { opacity:1; } }
.toolbar { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
#status { min-height:26px; margin:18px 0 12px; font-size:17px; }
dialog { background:#1a140ff5; color:var(--cream); border:1px solid #94794d; border-radius:6px; width:min(650px,calc(100% - 24px)); max-height:calc(100% - 24px); padding:26px; overflow-y:auto; text-align:center; box-shadow:0 16px 60px #0008; }
dialog::backdrop { background:#0e0a07c9; }
dialog h2 { font-weight:400; font-size:clamp(24px,5vw,34px); margin:18px 0; }
#story-text p { font-size:clamp(17px,3.2vw,21px); line-height:1.7; }
dialog button,dialog .button { margin-top:14px; width:100%; }
#cta { font-size:25px; color:var(--gold); margin-top:26px; }
#error { padding:18px; border:1px solid var(--gold); }
@media(max-width:420px) { main { padding:18px 10px; } dialog { padding:22px 16px; } .toolbar button { padding:10px; font-size:14px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
header { margin-bottom:0; }
.eyebrow,.place { margin:3px 0; }
h1 { font-size:clamp(22px,4vw,32px); margin:3px 0; }
#intro { margin:0 auto; }
#intro p { margin:4px 0 8px; }
#status { margin:4px 0; font-size:15px; }
#controls > .small { margin:4px 0 0; }
@media(max-height:500px) { main { padding:6px 10px; gap:4px; } .eyebrow,.place,#controls > .small { display:none; } h1 { font-size:22px; } #intro > p:first-child { display:none; } }