html,body{
  width:100%;height:100%;margin:0;overflow:hidden;
  font-family:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  background:#0d1b24;color:#20323a
}
#renderCanvas{width:100%;height:100%;display:block;touch-action:none;outline:none}

.screen{
  position:fixed;inset:0;display:grid;place-items:center;z-index:20;
  background:radial-gradient(120% 120% at 50% 0%,#a9d9e6cc 0%,#c9e8d6aa 55%,#f3ecd2bb 100%);
  backdrop-filter:blur(4px)
}
.hidden{display:none!important}

.panel{
  width:min(560px,calc(100vw - 44px));padding:34px 38px 30px;border-radius:24px;
  background:linear-gradient(#fffdf6f2,#fbf4e6f2);
  box-shadow:0 30px 80px #123a3540, 0 2px 0 #ffffff inset;
  border:1px solid #f0e4c6;text-align:center
}
.eyebrow{
  font-family:system-ui,Segoe UI,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:3px;color:#a98b3e
}
h1{
  font-size:clamp(46px,8vw,82px);margin:6px 0 8px;letter-spacing:-1px;
  color:#1f4a3f;font-weight:600;
  text-shadow:0 1px 0 #ffffff
}
.main-panel p,.panel>p{
  font-size:17px;line-height:1.5;color:#4a5b52;margin:2px auto 20px;max-width:40ch
}
button{
  font-family:system-ui,Segoe UI,sans-serif;
  border:0;border-radius:999px;padding:14px 28px;margin:7px;font-size:16px;font-weight:700;
  color:#fff;cursor:pointer;transition:transform .08s ease;
  background:linear-gradient(#3f8f6e,#2f7458);box-shadow:0 8px 0 #245a44,0 12px 22px #1c4a3833
}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(5px);box-shadow:0 3px 0 #245a44}
button.secondary{background:linear-gradient(#c9a24a,#b3872f);box-shadow:0 8px 0 #8a681f,0 12px 22px #7a5f1a33}

.bar{height:12px;background:#e7ecdf;border-radius:999px;overflow:hidden;margin-top:20px;border:1px solid #dfe6d3}
#barFill{height:100%;width:0;background:linear-gradient(90deg,#4fa07a,#8fce9c);transition:width .3s ease}
#loadError{color:#9c2d37;font-size:13px;margin-top:12px;white-space:pre-wrap;font-family:ui-monospace,monospace}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  font-family:system-ui,Segoe UI,sans-serif;
  background:#0e2a2380;color:#eafff6;padding:9px 16px;border-radius:999px;font-size:12.5px;
  white-space:nowrap;backdrop-filter:blur(6px);border:1px solid #ffffff22
}
.credits-panel{text-align:left;max-height:74vh;overflow:auto}
.credits-panel h2{text-align:center;font-size:36px;margin:0 0 10px;color:#1f4a3f;font-weight:600}
.credits-panel p{font-size:15px;line-height:1.55;color:#42514a;margin:8px 0}
.credits-panel button{display:block;margin:18px auto 0}
#muteBtn{
  position:fixed;top:16px;right:16px;z-index:30;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid #ffffff33;background:#0e2a23aa;color:#eafff6;
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:background .15s,transform .1s;
}
#muteBtn:hover{background:#14544399;transform:scale(1.06)}
#muteBtn.muted{opacity:.6;color:#ffb4b4;border-color:#ff888833}

/* ---------------- quest system ---------------- */
#nightVeil{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:#0a1240;opacity:0;transition:opacity 1.1s ease
}
#nightVeil.on{opacity:.5}

/* top-left HUD chip bar */
#qbar{position:fixed;top:16px;left:16px;z-index:30;display:none;gap:8px;align-items:center;flex-wrap:wrap}
#qbar.on{display:flex}
.qchip{
  font-family:system-ui,Segoe UI,sans-serif;
  height:40px;min-width:40px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid #ffffff33;background:#0e2a23aa;color:#eafff6;
  font-size:14px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;gap:6px;
  backdrop-filter:blur(6px);transition:background .15s,transform .1s,opacity .15s
}
.qchip:hover{background:#14544399;transform:scale(1.05)}
.qchip.static{cursor:default}
.qchip.static:hover{background:#0e2a23aa;transform:none}
.qchip.hidden{display:none!important}
#qCarry{background:#3a2a55cc;border-color:#c9a6ff55}

/* interaction prompt, just above the bottom hint */
#qprompt{
  position:fixed;left:50%;bottom:56px;transform:translateX(-50%);z-index:12;pointer-events:none;
  font-family:system-ui,Segoe UI,sans-serif;
  background:#1f4a3fdd;color:#fff;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;
  box-shadow:0 6px 18px #0b291f55;opacity:0;transition:opacity .12s;display:none
}
#qprompt.on{display:block;opacity:1}

/* modal popup */
#qmodal{
  position:fixed;inset:0;z-index:40;display:none;place-items:center;
  background:#08131a55;backdrop-filter:blur(2px)
}
#qmodal.on{display:grid}
#qpanel{
  width:min(520px,calc(100vw - 40px));padding:26px 28px 22px;border-radius:22px;
  background:linear-gradient(#fffdf6f5,#fbf4e6f5);
  box-shadow:0 26px 70px #123a3550,0 2px 0 #ffffff inset;
  border:1px solid #f0e4c6;text-align:center;
  font-family:system-ui,Segoe UI,sans-serif;color:#3a4a42
}
#qpanel .qname{
  font-size:12px;font-weight:800;letter-spacing:2px;color:#a98b3e;text-transform:uppercase;margin-bottom:8px
}
#qpanel .qtext{font-size:18px;line-height:1.55;color:#324439;margin:4px 0 18px}
#qpanel .qgap{font-size:20px;line-height:1.6;color:#1f4a3f;font-weight:600;margin:6px 0 14px}
#qpanel .qfeedback{font-size:15px;line-height:1.5;color:#7a5a2a;margin:0 0 16px;min-height:1.2em}
#qpanel .qfeedback.good{color:#2f7458}
#qpanel input.qinput{
  font-family:system-ui,Segoe UI,sans-serif;font-size:18px;text-align:center;
  padding:10px 14px;border-radius:12px;border:2px solid #cbb98a;width:min(240px,70%);
  background:#fffef9;color:#26382f;outline:none;margin-bottom:14px
}
#qpanel input.qinput:focus{border-color:#3f8f6e}
#qtiles,#qbankrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:2px 0 14px}
#qslot{
  min-height:44px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
  padding:6px 10px;margin:0 auto 12px;border-radius:12px;border:2px dashed #cbb98a;
  width:min(360px,80%);background:#fffef980
}
.qtile{
  font-family:system-ui,Segoe UI,sans-serif;font-size:16px;font-weight:700;
  padding:9px 15px;border-radius:999px;cursor:pointer;border:0;color:#26382f;
  background:linear-gradient(#f4e6c2,#e9d49b);box-shadow:0 4px 0 #c8ad6d;transition:transform .08s
}
.qtile:active{transform:translateY(3px);box-shadow:0 1px 0 #c8ad6d}
.qtile.placed{background:linear-gradient(#bfe3cf,#9fd2b4);box-shadow:0 4px 0 #6faf8c}
#qbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
#qpanel button.qact{margin:4px 2px;padding:12px 24px;font-size:15px}
#qpanel button.qskip{
  background:linear-gradient(#c98a8a,#b36f6f);box-shadow:0 6px 0 #8a4f4f,0 10px 18px #7a2a2a22
}
#qpanel button.qghost{
  background:transparent;color:#7a6a3a;box-shadow:none;border:1px solid #cbb98a;font-weight:700
}
#qpanel .qjournalDia{text-align:left;font-size:16px;line-height:1.5;color:#3a4a42;margin:2px 0 8px;
  padding:10px 14px;background:#fbf6e6;border-radius:12px;border:1px solid #eaddba}
#qpanel .qjournalExtra{text-align:left;font-size:14px;line-height:1.5;color:#6a5326;font-style:italic;margin:0 0 14px}