:root{ color-scheme: light; }
*{box-sizing:border-box;}
body{
  margin:0; font-family: 'Georgia', 'Times New Roman', serif;
  background:#e9ddc7; color:#2b2320;
}
#app{ display:none; height:100vh; min-height:640px; }
#app.visible{ display:flex; }

.screen{ display:none; min-height:100vh; align-items:center; justify-content:center; background:#e9ddc7; }
.screen.visible{ display:flex; }
.authBox{ background:#372c22; color:#eadfc5; border-radius:10px; padding:28px 32px; width:360px; max-width:90vw; }
.authBox h1{ font-size:19px; margin:0 0 16px; }
.authBox h2{ font-size:14px; text-transform:uppercase; letter-spacing:.6px; color:#c9a24a; margin:18px 0 8px; }
.authBox input, .authBox select{
  width:100%; padding:8px; margin-bottom:8px; border-radius:6px; border:1px solid #6b5a3f;
  background:#241d15; color:#eadfc5; font-family:inherit; font-size:13px;
}
.error{ color:#e08a7a; font-size:12.5px; min-height:16px; }

/* ---------- Sidebar ---------- */
#sidebar{
  width:320px; min-width:280px; background:#2b2320; color:#eadfc5;
  padding:16px; overflow-y:auto; flex-shrink:0;
}
#sidebar h1{ font-size:19px; margin:0 0 4px; letter-spacing:.5px; }
#sidebar .sub{ font-size:12px; color:#b8a888; margin-bottom:14px; }
.panel{ background:#372c22; border:1px solid #55452f; border-radius:8px; padding:12px; margin-bottom:12px; }
.panel h2{ font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:#c9a24a; margin:0 0 8px; }
.chapter-row{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; font-size:13px; border-bottom:1px dashed #4a3c2a; }
.chapter-row:last-child{ border-bottom:none; }
.chapter-row input{ margin-top:3px; }
.chapter-row label{ cursor:pointer; line-height:1.35; }
.chapter-row.done label{ color:#8fae7a; text-decoration:line-through; opacity:.8; }
.btn{
  display:inline-block; background:#c9a24a; color:#241d15; border:none; border-radius:6px;
  padding:7px 11px; font-size:12px; font-weight:bold; cursor:pointer; margin:3px 4px 0 0;
  font-family:inherit;
}
.btn:hover{ background:#e0b95c; }
.btn.secondary{ background:#4a3c2a; color:#eadfc5; }
.btn.secondary:hover{ background:#5c4b34; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
textarea.notes{
  width:100%; min-height:70px; background:#241d15; color:#eadfc5; border:1px solid #55452f;
  border-radius:6px; padding:8px; font-family:inherit; font-size:12.5px; resize:vertical;
}

/* ---------- Corkboard ---------- */
#boardWrap{ flex:1; position:relative; overflow:auto; }
#board{
  position:relative; width:2000px; height:1500px;
  background-color:#b3803f;
  box-shadow: inset 0 0 120px rgba(0,0,0,.35);
  border:14px solid #5c4326;
}
#stringLayer{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }

.pin{
  position:absolute; width:150px; background:#f3ecd8; border:1px solid #b8a888;
  box-shadow:2px 3px 8px rgba(0,0,0,.35); border-radius:2px; padding:8px 8px 10px;
  cursor:grab; user-select:none; font-size:11.5px; line-height:1.3;
}
.pin.dragging{ cursor:grabbing; z-index:999 !important; box-shadow:4px 6px 16px rgba(0,0,0,.5); }
.pin .pinhead{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a7a, #a11a10 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.5);
}
.pin .portrait{ width:100%; border-radius:2px; display:block; margin-bottom:4px; background:#d8cba3; }
.pin .name{ font-weight:bold; font-size:12px; margin-bottom:1px; }
.pin .role{ font-style:italic; color:#5c4b34; font-size:10.5px; margin-bottom:3px; }
.pin .desc{ font-size:10.5px; color:#3a3025; }
.pin .note-text{ width:100%; border:none; background:transparent; font-family:inherit; font-size:11.5px; resize:vertical; min-height:40px; }
.pin .del{ position:absolute; top:2px; right:4px; cursor:pointer; color:#a11a10; font-weight:bold; font-size:12px; }
.pin.map{ width:210px; }
.pin.evidence{ background:#fff8e0; }
.pin.note{ background:#fff3a8; transform:rotate(-1.2deg); }
.pin.connect-select{ outline:3px solid #2f7a3d; }

/* ---------- Modal ---------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(20,15,8,.65); display:flex; align-items:center;
  justify-content:center; z-index:2000;
}
.modal{
  background:#f3ecd8; color:#241d15; border-radius:10px; padding:22px 26px; max-width:480px;
  width:90%; box-shadow:0 10px 40px rgba(0,0,0,.5); max-height:85vh; overflow-y:auto;
}
.modal.reading-modal{ max-width:640px; }
.modal h2{ margin-top:0; font-size:18px; border-bottom:2px solid #c9a24a; padding-bottom:8px; }
.opt{
  display:block; width:100%; text-align:left; background:#fff; border:1px solid #b8a888;
  border-radius:6px; padding:9px 12px; margin:6px 0; cursor:pointer; font-family:inherit; font-size:13px;
}
.opt:hover{ background:#f0e6c8; }
.opt.correct{ background:#cfe8c9; border-color:#2f7a3d; }
.opt.wrong{ background:#f0c9c4; border-color:#a11a10; }
.feedback{ margin-top:10px; font-size:13px; padding:10px; border-radius:6px; background:#eadfc5; }
.closeX{ float:right; cursor:pointer; font-size:20px; line-height:1; color:#5c4b34; }
.reading-body p{ font-size:14px; line-height:1.7; margin:0 0 12px; }
.reading-body .unavailable{ font-style:italic; color:#7a6a52; }