*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
body{background:#0a0e1a;color:#e8e6f0}
#game{position:relative;width:100vw;height:100vh}
#title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#1a2547,#0a0e1a);z-index:10;text-align:center}
#title h1{font-size:2.2em;color:#ffd76e;margin-bottom:10px}
#title p{color:#9aa3c0;margin-bottom:24px;padding:0 20px}
.btn{background:#8e2418;color:#fff;border:2px solid #ffd76e;border-radius:8px;padding:12px 36px;font-size:1.1em;cursor:pointer;margin:6px}
.btn.small{font-size:.85em;padding:7px 16px}
#scene{position:absolute;inset:0;display:none;background:linear-gradient(#1a1447,#0a0e1a)}
#sceneName{position:absolute;top:16px;left:20px;background:#0a0e1acc;border-left:4px solid #ffd76e;padding:8px 16px}
.hotspot{position:absolute;width:46px;height:46px;border-radius:50%;background:#ffd76e33;border:2px solid #ffd76e;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px}
#mapBtns{position:absolute;bottom:150px;right:16px;display:flex;flex-direction:column;gap:8px}
.nav{background:#1a2547;border:1px solid #4a5a8a;color:#dfe4f5;border-radius:8px;padding:9px 14px;cursor:pointer}
#dlg{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(900px,96%);background:#0d1226ee;border:2px solid #4a5a8a;border-bottom:none;border-radius:14px 14px 0 0;padding:18px 24px;display:none;z-index:5;cursor:pointer}
#dlgName{color:#ffd76e;font-weight:bold;margin-bottom:8px}
#dlgText{line-height:1.7;min-height:60px}
#cluePop{position:absolute;top:20%;left:50%;transform:translateX(-50%);background:#1a2547f2;border:2px solid #ffd76e;border-radius:12px;padding:20px 26px;width:min(440px,90%);display:none;z-index:8;text-align:center}
#cluePop h3{color:#ffd76e;margin-bottom:8px}
#notebook{position:absolute;inset:0;background:#0a0e1af5;display:none;z-index:9;padding:40px;overflow-y:auto}
#notebook h2{color:#ffd76e;margin-bottom:16px}
.clueCard{background:#141b36;border:1px solid #4a5a8a;border-radius:10px;padding:12px px;margin-bottom:10px;max-width:720px}
#final{position:absolute;inset:0;background:#0a0e1af8;display:none;z-index:9;padding:30px;overflow-y:auto;text-align:center}
.qbox{max-width:640px;margin:0 auto 22px;text-align:left;background:#141b36;border:1px solid #4a5a8a;border-radius:12px;padding:16px}
.qbox select{width:100%;padding:9px;margin-top:8px;background:#0d1226;color:#fff;border:1px solid #4a5a8a;border-radius:8px}
#ending{position:absolute;inset:0;background:#0a0e1afa;display:none;z-index:9;padding:60px 30px;overflow-y:auto;text-align:center}
#ending h1{color:#ffd76e;margin-bottom:20px}
.story{max-width:700px;margin:0 auto;line-height:2;text-align:left}