/* lantern-player — base + scare themes. Theme = body[data-scare]. */
:root { --bg:#fff7ea; --ink:#2b2118; --accent:#e07b24; --card:#ffffff; }
body[data-scare="spooky"]    { --bg:#1d1830; --ink:#efe9ff; --accent:#9d6bff; --card:#2a2344; }
body[data-scare="afterdark"]{ --bg:#0b0b10; --ink:#d8d4c8; --accent:#b8a86a; --card:#17171f; }

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--ink);
       font-size:19px; line-height:1.45; transition: background .4s; }
main { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.screen { display:none; } .screen.active { display:block; }
h1 { font-size: 2rem; } .story { font-style: italic; }
label { display:block; margin: 14px 0; }
input { width:100%; padding:12px; font-size:1rem; border-radius:10px; border:2px solid var(--accent);
        background:var(--card); color:var(--ink); margin-top:6px; }
button { background:var(--accent); color:#fff; border:0; border-radius:12px;
         padding:14px 20px; font-size:1.05rem; cursor:pointer; margin:8px 4px 8px 0; }
.card, .scare-card { background:var(--card); border-radius:14px; padding:16px; margin:12px 0;
                     box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.scare-card { display:block; width:100%; text-align:left; color:var(--ink); }
.scare-card span { display:block; font-size:.95rem; opacity:.85; margin-top:4px; }
#map { height: 320px; border-radius:14px; }
.fineprint, #hint-text { opacity:.85; }
#feedback { font-weight: 600; min-height: 1.5em; }