/* ---------- Maren's transformation stages (0 = herself, 4 = the hag) ---------- */
body {
  --skin:#ecd0b6; --hair:#9a4426; --eye:#3f5a46; --dress:#56607a; --aura:#d8b878;
  --veins:0; --hat:0; --evil:0; --hag:0; --eyeglow:none;
}
/* --skin and --hair are set from the player's choice in game.js (hud), darkened per stage */
body[data-stage="1"] { --dress:#3a3450; --aura:#b49ad8; }
body[data-stage="2"] { --dress:#2e2238; --aura:#9070c8; --eye:#4f7a36; --hat:1; }
body[data-stage="3"] { --dress:#22172a; --aura:#6ad860; --eye:#b7ff3c;
  --eyeglow:drop-shadow(0 0 2px #b7ff3c); --hat:1; --veins:1; --evil:1; }
body[data-stage="4"] { --dress:#120b14; --aura:#3dd860; --eye:#d4ff00;
  --eyeglow:drop-shadow(0 0 3px #d4ff00); --hat:1; --veins:1; --evil:1; --hag:1; }

/* ---------- Theme ---------- */
:root {
  --bg:#0b080e; --ink:#e8dfcf; --dim:#9a8f86; --card:#17121b; --edge:#3a2f3a;
  --light:#d8b878; --dark:#7ad86a; --danger:#8e2f3a;
  --cw:min(100vw, calc((100dvh - 64px) * 9 / 16));   /* width of the game canvas */
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  background:var(--bg); color:var(--ink);
  font:1.0625rem/1.6 "IM Fell English", Georgia, serif;
  display:flex; flex-direction:column; align-items:center;
  min-height:100dvh; overflow:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select:none;
}
h1, h2, .btn, .meter-label, .label, #prompt, #sub .who { font-family:Cinzel, Georgia, serif; }
h1 { font-size:2.1rem; font-weight:500; margin:.2em 0; letter-spacing:.08em; }
h2 { font-size:1.25rem; font-weight:500; margin:.3em 0 0; letter-spacing:.05em; }
.sub { color:var(--dim); margin:.2em 0 1em; font-style:italic; }
.sub.small { font-size:.8rem; margin-top:2em; }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; } }

/* ---------- HUD ---------- */
#hud { width:var(--cw); display:flex; align-items:center; gap:10px; padding:6px 12px; height:64px; }
#hud[hidden] { visibility:hidden; display:flex; }
.mini { width:40px; height:50px; flex:none; }
.meter { flex:1; }
.meter-label { display:flex; justify-content:space-between; font-size:.62rem; color:var(--dim); letter-spacing:.12em; text-transform:uppercase; }
.bar { height:4px; margin-top:6px; position:relative; background:linear-gradient(90deg, var(--light), #5a4a66 50%, var(--dark)); opacity:.8; }
#mark { position:absolute; top:-5px; width:2px; height:14px; background:#fff; transform:translateX(-50%); transition:left 1s ease; }
.icon { background:none; border:0; font-size:1.2rem; cursor:pointer; padding:6px 8px; color:var(--ink); }
.icon.off { opacity:.3; text-decoration:line-through; }
.flash .mini { animation:flash 1.2s; }
@keyframes flash { 30% { filter:brightness(2.5) drop-shadow(0 0 6px var(--aura)); } }

/* ---------- Stage: the world canvas, with panels and subtitles over it ---------- */
#stage { position:relative; flex:1; width:100%; display:flex; justify-content:center; }
#world { display:block; width:var(--cw); aspect-ratio:9 / 16; height:auto; touch-action:none; }
#prompt { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap;
  padding:9px 18px; border:1px solid #e8dfcf55; background:#0b080ed0; color:var(--ink);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
#sub { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:var(--cw); z-index:3;
  padding:30px 22px 26px; min-height:110px; cursor:pointer; background:linear-gradient(#0b080e00, #0b080ef0 32%); }

#sub .who { margin:0; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--light); min-height:1em; }
#sub .text { margin:.25em 0 0; font-size:1.05rem; }
#sub .choices { display:flex; flex-direction:column; gap:8px; }
#sub .choices button { font:1rem "IM Fell English", Georgia, serif; color:var(--ink); background:#0b080ee0; border:1px solid var(--edge);
  padding:10px 14px; text-align:left; cursor:pointer; }
#sub .choices button:hover, #sub .choices button:active { border-color:var(--light); }
#scene { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:var(--cw); z-index:4; overflow-y:auto;
  padding:24px 22px 32px; text-align:center; background:#0b080ef2; }
#scene[hidden], #sub[hidden], #note[hidden], #hud [hidden] { display:none !important; }
#scene.title { background:linear-gradient(#0b080e44, #0b080eee 72%); display:flex; flex-direction:column; justify-content:flex-end; }
.fade { animation:fadein .5s ease; }
@keyframes fadein { from { opacity:0; } }
.shake { animation:shake .5s; }
@keyframes shake { 20%,60% { transform:translateX(calc(-50% - 6px)); } 40%,80% { transform:translateX(calc(-50% + 6px)); } }

.portrait { width:150px; height:190px; display:block; margin:4px auto 8px; }
.btn { display:block; width:100%; margin:10px 0; padding:13px 16px; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; background:none; border:1px solid var(--edge); transition:border-color .2s, background .2s; }
.btn:active { background:#ffffff08; }
.btn:hover { border-color:#e8dfcf88; }
.btn small { display:block; font-family:"IM Fell English", serif; text-transform:none; letter-spacing:0; color:var(--dim); font-size:.85rem; }
.btn.primary { border-color:var(--light); color:var(--light); }
.btn.danger { border-color:var(--danger); }
.btn.ghost { border-color:transparent; color:var(--dim); }
.btn.chosen { border-color:var(--light); background:#d8b8781a; }
.btn:disabled { opacity:.35; }
.btn .ico { vertical-align:middle; margin-right:6px; }

.label { font-size:.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:.2em; margin-top:18px; }
.ico { width:22px; height:22px; vertical-align:-6px; }
.big { width:96px; height:96px; }
.inv, .recipes { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0; }
.chip { padding:4px 10px 4px 6px; background:var(--card); border:1px solid var(--edge); font-size:.85rem; color:var(--ink); font-family:inherit; }
button.chip { cursor:pointer; }
.chip.sel { border-color:var(--light); }
.recipes .chip { font-size:.75rem; }
.clue { text-align:left; border-left:2px solid var(--edge); padding:6px 12px; margin:12px 0; }
.clue.truth { border-color:var(--light); font-style:italic; }
.lore { text-align:left; }
.whisper { color:var(--dark); font-style:italic; animation:jitter .15s infinite; }
@keyframes jitter { 50% { transform:translateX(1px); } }
.ghostline { color:#9fb8c9; font-style:italic; }
.msg { min-height:1.6em; color:var(--light); }
.book p { text-align:left; margin:10px 0; }
.delta { font-family:Cinzel, serif; letter-spacing:.08em; }
.delta.up { color:var(--dark); } .delta.down { color:var(--light); }

/* ---------- Detective work ---------- */
.icon.text { font:.62rem Cinzel, Georgia, serif; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--edge); padding:6px 8px; }
.said { text-align:left; font-size:1.05rem; margin:14px 0; }
.found { color:var(--light); font-style:italic; font-size:.9rem; text-align:left; }
.term { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline dotted var(--light); text-underline-offset:3px; }
#note { position:absolute; left:50%; transform:translateX(-50%); bottom:16px; width:calc(var(--cw) - 32px); z-index:5;
  background:#17121bf8; border:1px solid var(--light); padding:12px 14px; font-size:.95rem; cursor:pointer; }
#note b { display:block; font-family:Cinzel, serif; font-weight:500; letter-spacing:.1em; color:var(--light); margin-bottom:4px; }
.grading p { margin:8px 0; padding-left:10px; border-left:2px solid; }
.grading .right { border-color:var(--light); } .grading .wrong { border-color:var(--danger); }
#night { font:.62rem Cinzel, Georgia, serif; letter-spacing:.14em; text-transform:uppercase; color:var(--light); text-align:center; margin-top:6px; min-height:1em; }
.swatches { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px 0 4px; }
.swatch { width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer; box-shadow:inset 0 0 0 1px #0004; }
.swatch.on { border-color:var(--light); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--light); }

/* ---------- Settings ---------- */
html { font-size:16px; }
html[data-text="small"] { font-size:14.5px; }
html[data-text="large"] { font-size:19px; }
.seg { display:flex; border:1px solid var(--edge); margin:8px 0; }
.seg button { flex:1; padding:10px 4px; background:none; border:0; color:var(--dim); font:.75rem Cinzel, Georgia, serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.seg button + button { border-left:1px solid var(--edge); }
.seg button.on { color:var(--light); background:#d8b8781a; }
.slider { display:flex; align-items:center; gap:12px; text-align:left; margin:10px 0; font-size:.95rem; }
.slider input { flex:1; accent-color:var(--light); }
#scene a { color:var(--light); }
body.calm *, body.calm *::before { animation:none !important; transition:none !important; }
body.colorsafe .bar { background:linear-gradient(90deg, #f2c35a, #8a8a8a 50%, #2f5fd0); }
body.colorsafe .delta.up { color:#6f9bff; }
.tagline { font:.72rem Cinzel, Georgia, serif; letter-spacing:.22em; text-transform:uppercase; color:var(--light); margin:-.2em 0 1.2em; }