:root{
  --leather: #241811;
  --leather-edge: #150d08;
  --parchment: #e8ddbe;
  --parchment-shadow: #cebd91;
  --ink: #2b2013;
  --ink-light: #5c4a30;
  --tab-home: #dcd0a6;
  --tab-evidence: #c9a24f;
  --tab-ghosts: #7796a8;
  --wax: #7c2a1d;
  --sage: #5c7a4a;
  --brass: #b98a44;
  --teal: #4fb3ac;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background: radial-gradient(ellipse at 50% 0%, #1c130c 0%, #0c0805 72%);
  color:var(--parchment);
  font-family:'Kalam', cursive;
  overflow-x:hidden;
}

.room{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 16px 48px;
}

.journal-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:1000px;
}

/* ---------- book ---------- */

.book{
  position:relative;
  width:min(94vw, 880px);
  aspect-ratio: 16 / 9.6;
  background:var(--leather);
  border-radius:6px;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.8),
    0 0 0 9px #3a2717,
    0 0 0 11px var(--leather-edge);
}

/* tabs sticking up above the page edge, like the in-game journal */
.tab-strip{
  position:absolute;
  top:-22px;
  left:14px; right:14px;
  height:34px;
  display:flex;
  z-index:10;
  pointer-events:none;
}
.tab{
  flex:1;
  margin:0 3px;
  border-radius:8px 8px 0 0;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(43,32,19,0.55);
  background:var(--tab-home);
  box-shadow:0 -3px 6px rgba(0,0,0,0.25);
  transform:translateY(10px);
  transition:transform .25s ease, box-shadow .25s ease;
  opacity:0.75;
}
.tab.evidence{ background:var(--tab-evidence); }
.tab.ghosts{ background:var(--tab-ghosts); color:rgba(20,25,30,0.55); }
.tab.active{
  transform:translateY(0);
  opacity:1;
  box-shadow:0 -6px 10px rgba(0,0,0,0.35);
  color:var(--ink);
}

.book-shadow{
  position:absolute;
  inset:14px;
  border-radius:2px;
  box-shadow: inset 0 0 44px rgba(0,0,0,0.5);
  pointer-events:none;
  z-index:5;
}

.spine-shadow{
  position:absolute;
  top:14px; bottom:14px; left:50%;
  width:28px;
  margin-left:-14px;
  background: linear-gradient(to right,
    rgba(0,0,0,0.38), rgba(0,0,0,0.08) 30%, transparent 50%,
    rgba(0,0,0,0.08) 70%, rgba(0,0,0,0.38));
  z-index:4;
  pointer-events:none;
}

.page-slot{
  position:absolute;
  top:14px; bottom:14px;
  width:calc(50% - 14px);
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(60,45,25,0.2) 100%),
    var(--parchment);
  background-blend-mode:multiply;
  overflow:hidden;
  cursor:pointer;
}
.page-slot.left{ left:14px; border-radius:3px 0 0 3px; }
.page-slot.right{ right:14px; border-radius:0 3px 3px 0; }

.flipper{
  position:absolute;
  top:14px; bottom:14px;
  left:50%;
  width:calc(50% - 14px);
  transform-style:preserve-3d;
  transform-origin:0% 50%;
  transform:rotateY(0deg);
  visibility:hidden;
  transition:transform 0.9s cubic-bezier(.4,.2,.2,1);
  border-radius:0 3px 3px 0;
  z-index:6;
}
.flipper.flipping{ visibility:visible; }

.face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  overflow:hidden;
  background:var(--parchment);
  box-shadow: 0 0 25px rgba(0,0,0,0.25) inset;
}
.front-face{ transform:rotateY(0deg); border-radius:0 3px 3px 0; }
.back-face{ transform:rotateY(180deg); border-radius:3px 0 0 3px; }

/* ---------- page content ---------- */

.page-content{
  position:relative;
  height:100%;
  padding:18px 20px 30px;
  color:var(--ink);
  font-size:13.5px;
  line-height:1.38;
  display:flex;
  flex-direction:column;
}
.page-content::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:0 0 34px rgba(90,70,45,0.2) inset;
}

.page-num{
  position:absolute;
  bottom:10px;
  left:0; right:0;
  text-align:center;
  font-family:'Caveat', cursive;
  font-size:14px;
  color:var(--ink-light);
  opacity:0.6;
}

.page-h{
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:21px;
  color:var(--ink);
  margin:0 0 6px;
  padding-bottom:4px;
  border-bottom:2px solid rgba(43,32,19,0.25);
}

/* ghost page header: name on the left, small photo on the right */
.ghost-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.ghost-head .page-h{ flex:1; }
.ghost-thumb-box{
  flex:0 0 auto;
  width:200px;
  height:200px;
  border-radius:4px;
  overflow:hidden;
  background:#d8cba3;
  border:2px solid rgba(43,32,19,0.35);
  box-shadow:0 3px 6px rgba(0,0,0,0.3);
  transform:rotate(2deg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ghost-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:sepia(0.25) contrast(1.05) brightness(0.95);
}
.ghost-thumb-box.no-img{
  border-style:dashed;
  color:rgba(43,32,19,0.4);
  font-family:'Caveat', cursive;
  font-size:22px;
  font-weight:700;
}

.tag-row{ display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.tag{
  font-family:'Kalam', cursive;
  font-weight:700;
  font-size:9.5px;
  padding:2px 7px;
  border:1.5px dashed rgba(43,32,19,0.4);
  border-radius:11px;
  color:#1f4a45;
  background:rgba(79,179,172,0.15);
}

.diff{
  display:inline-block;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:13px;
  padding:1px 11px;
  border-radius:11px;
  margin-bottom:7px;
  color:#fff;
}
.diff.easy{ background:var(--sage); }
.diff.standard{ background:var(--ink-light); }
.diff.hard{ background:var(--wax); }

.field-note{
  margin-top:auto;
  padding-top:8px;
  border-top:1.5px dotted rgba(43,32,19,0.35);
  font-size:12.5px;
  color:var(--ink-light);
  font-style:italic;
}

.stat-line{ margin:4px 0; font-size:13px; }
.stat-line b{ color:#1f4a45; }

.notes-lines{ margin-top:10px; flex:1; }
.notes-lines div{
  border-bottom:2px solid rgba(43,32,19,0.22);
  height:29px;
}

.ref-item{ margin-bottom:9px; }
.ref-item b{ font-family:'Caveat', cursive; font-weight:700; font-size:15px; color:#1f4a45; }
.ref-item p{ margin:1px 0 0; font-size:12.5px; }

/* title page: torn-paper banner like the in-game journal cover */
.title-face{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:34px 20px 20px;
  text-align:center;
}
.torn-banner{
  position:relative;
  background:#a89578;
  color:#2a2013;
  padding:14px 26px;
  font-family:'Permanent Marker', cursive;
  font-size:clamp(26px, 5vw, 34px);
  line-height:1.1;
  transform:rotate(-1.5deg);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  clip-path: polygon(2% 12%, 10% 0%, 25% 6%, 40% 0%, 58% 5%, 75% 0%, 90% 8%, 100% 2%,
                      98% 88%, 90% 100%, 74% 94%, 55% 100%, 38% 95%, 20% 100%, 8% 92%, 0 100%);
}
.title-sub{
  margin-top:18px;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:20px;
  color:var(--ink-light);
}
.title-contents{
  margin-top:26px;
  text-align:left;
  width:100%;
  max-width:230px;
}
.title-contents div{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color:var(--ink);
  border-bottom:1px dotted rgba(43,32,19,0.3);
  padding:4px 0;
}

.index-face .page-content{ padding-top:22px; }
.index-list{ overflow-y:auto; flex:1; }
.index-row{
  display:flex;
  justify-content:space-between;
  font-size:13.5px;
  padding:3px 0;
  border-bottom:1px dotted rgba(43,32,19,0.22);
}

.checklist{ list-style:none; padding:0; margin:12px 0 0; }
.checklist li{
  font-size:12.5px;
  margin-bottom:6px;
  padding-left:18px;
  position:relative;
}
.checklist li::before{
  content:"☐";
  position:absolute; left:0; top:0;
  color:var(--ink-light);
}

.inside-cover{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(232,221,190,0.35);
  font-family:'Caveat', cursive;
  font-size:16px;
  letter-spacing:.5px;
  text-align:center;
  padding:20px;
  background:var(--leather);
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 6px);
}

/* ---------- controls ---------- */

.controls{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:22px;
}

.clasp-btn{
  width:42px; height:42px;
  border-radius:50%;
  border:none;
  background: radial-gradient(circle at 35% 30%, #d8ab5f, var(--brass) 60%, #7a561f 100%);
  color:#2c1c12;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,0.5);
  transition:transform .15s ease, filter .15s ease;
}
.clasp-btn:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.08); }
.clasp-btn:active:not(:disabled){ transform:translateY(0); }
.clasp-btn:disabled{ opacity:0.3; cursor:default; }

.emf-meter{
  display:flex;
  gap:5px;
  padding:6px 10px;
  border-radius:20px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(79,179,172,0.3);
}
.emf-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(79,179,172,0.15);
  transition:background .25s ease, box-shadow .25s ease;
}
.emf-dot.lit{
  background:var(--teal);
  box-shadow:0 0 8px var(--teal), 0 0 2px var(--teal);
}

.hint{
  margin-top:12px;
  font-size:13px;
  font-family:'Caveat', cursive;
  color:rgba(232,221,190,0.45);
}

@media (max-width:640px){
  .page-content{ padding:16px 16px 30px; font-size:14px; }
  .page-h{ font-size:21px; }
  .tab-strip{ top:-16px; height:22px; }
  .tab{ font-size:10px; border-radius:5px 5px 0 0; }
}