:root{
  --bg:#030504;--panel:#0b120f;--panel2:#101815;--gold:#b99355;
  --muted:#9f9788;--line:rgba(185,147,85,.28);--green:#16382d;
  --paper:#d8c6a0;--ink:#20170d;--red:#8f3028;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 40% -10%,#173226,#030504 55%,#000);color:#efe6d2;font-family:Georgia,"Times New Roman",serif}
button,input{font:inherit}
.hidden{display:none!important}
.screen{min-height:100vh}
.boot{display:grid;place-items:center;padding:28px}
.bootbox{width:min(760px,92vw);border:1px solid var(--line);background:rgba(5,9,7,.92);padding:32px;box-shadow:0 40px 120px #000}
.bootbox h1{margin:0;color:var(--gold);font-size:48px;letter-spacing:4px}
.muted{color:var(--muted)}
.log{font-family:monospace;background:#020403;border:1px solid #1c5b3c;color:#9efac4;padding:16px;white-space:pre-line;line-height:1.6;margin:22px 0}
.btn{background:var(--green);border:1px solid var(--gold);color:white;padding:12px 16px;cursor:pointer}
.btn:hover{filter:brightness(1.15)}
.login{display:grid;place-items:center;padding:28px}
.loginbox{width:min(460px,92vw);border:1px solid var(--line);background:rgba(8,12,10,.94);padding:28px}
.loginbox h2{color:var(--gold);letter-spacing:2px;margin-top:0}
.field{margin:12px 0}
.field label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.field input{width:100%;background:#020302;border:1px solid var(--line);color:#efe6d2;padding:12px}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
aside{border-right:1px solid var(--line);background:rgba(4,6,5,.92);padding:20px}
.brand{border:1px solid var(--line);padding:18px;text-align:center;margin-bottom:18px}
.brand b{font-size:34px;color:var(--gold)}
.brand h2{font-size:18px;color:var(--gold);letter-spacing:2px}
nav{display:grid;gap:8px}
nav button{background:#070b09;border:1px solid var(--line);color:#efe6d2;padding:12px;text-align:left;cursor:pointer}
nav button.on,nav button:hover{background:var(--green);border-color:var(--gold)}
main{padding:24px;max-width:1400px}
.top{display:flex;gap:10px;margin-bottom:18px}
.search{flex:1;background:#020302;border:1px solid var(--line);color:#efe6d2;padding:13px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));padding:18px;margin-bottom:16px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.card h1,.card h2,.card h3{color:var(--gold);margin-top:0;text-transform:uppercase;letter-spacing:1px}
.stat{border:1px solid var(--line);padding:14px;background:rgba(0,0,0,.2)}
.stat b{font-size:30px;color:var(--gold)}
.list{display:grid;gap:10px}
.item{border:1px solid var(--line);background:rgba(0,0,0,.25);padding:13px;cursor:pointer}
.item:hover{background:rgba(22,56,45,.6)}
.paper{background:var(--paper);color:var(--ink);border:1px solid #806c45;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.paper h1,.paper h2,.paper h3{color:#2a1c0c}
.stamp{display:inline-block;color:var(--red);border:2px solid var(--red);padding:5px 10px;transform:rotate(-3deg);font-weight:bold}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px;margin-top:16px}
.kv b{color:#674516}
.node{display:inline-block;border:1px solid var(--line);padding:8px 10px;margin:5px;background:rgba(0,0,0,.24);cursor:pointer}
.paper .node{border-color:#7e5a2a;color:#43280c;background:rgba(255,255,255,.16)}
.page{display:none}
.page.on{display:block}
.terminal{font-family:monospace;background:#020403;color:#9efac4;border:1px solid #1c5b3c;padding:16px;white-space:pre-line;line-height:1.55}
.foldergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.folder{border:1px solid var(--line);min-height:120px;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,rgba(216,198,160,.12),rgba(0,0,0,.22));cursor:pointer}
.folder:hover{background:rgba(22,56,45,.55)}
.timeline{border-left:2px solid var(--gold);padding-left:18px}
.timeline p{margin:0 0 18px}
@media(max-width:850px){.app{grid-template-columns:1fr}aside{position:relative}.grid,.grid3{grid-template-columns:1fr}}

.related-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:10px;
 margin-top:10px;
}

.graph{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:12px;
 margin-top:12px;
}
.graph-node{
 border:1px solid var(--line);
 background:rgba(0,0,0,.28);
 padding:14px;
 text-align:center;
 cursor:pointer;
 position:relative;
}
.graph-node:hover{
 background:rgba(22,56,45,.7);
 border-color:var(--gold);
}
.graph-node b{
 color:var(--gold);
}
.graph-line{
 color:var(--muted);
 font-size:12px;
 margin-top:6px;
}
.paper{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.04), transparent 40%),
    linear-gradient(#e8d9b7,#dfcda7);

  color:#2b2015;

  padding:34px;

  border:1px solid #8a7455;

  box-shadow:
      0 10px 40px rgba(0,0,0,.28),
      inset 0 0 40px rgba(255,255,255,.18),
      inset 0 0 120px rgba(80,50,20,.08);
}

.paper::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  bottom:12px;
  border:1px solid rgba(70,45,20,.25);
  pointer-events:none;
}

.paper::after{
  content:"";
  position:absolute;
  left:-80px;
  top:-80px;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(120,90,50,.10), transparent 70%);
  pointer-events:none;
}
/* Coffee stain */

.paper .coffee{
position:absolute;

width:170px;
height:170px;

border:7px solid rgba(90,45,20,.12);
border-radius:50%;

top:90px;
right:120px;

pointer-events:none;

transform:rotate(-18deg);
}

.paper .coffee::after{
content:"";

position:absolute;

left:18px;
top:18px;

width:105px;
height:105px;

border:5px solid rgba(90,45,20,.07);
border-radius:50%;
}
.photo-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:30px;
}

.photo-modal.hidden{
  display:none;
}

.photo-modal img{
  max-width:92vw;
  max-height:88vh;
  border:10px solid #111;
  box-shadow:0 0 40px rgba(0,0,0,.8);
}
#endingOverlay{
position:fixed;
inset:0;
background:#000;
color:#d9c59b;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
font-family:Georgia,serif;
z-index:99999;
opacity:0;
pointer-events:none;
transition:opacity 2s;
}

#endingOverlay.show{
opacity:1;
pointer-events:auto;
}

#endingOverlay h1{
font-size:54px;
letter-spacing:8px;
margin-bottom:18px;
}

#endingOverlay p{
font-size:20px;
letter-spacing:3px;
opacity:.85;
}

/* CRT monitor effect */
#app::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background:
    linear-gradient(rgba(255,255,255,.025) 50%, rgba(0,0,0,.08) 50%),
    linear-gradient(90deg, rgba(255,0,0,.015), rgba(0,255,0,.01), rgba(0,0,255,.015));
  background-size:100% 4px, 6px 100%;
  mix-blend-mode:screen;
  opacity:.22;
}

#app::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9997;
  background:radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.35) 100%);
  animation:crtFlicker 4s infinite;
}

@keyframes crtFlicker{
  0%,100%{opacity:.18}
  50%{opacity:.28}
  52%{opacity:.12}
  54%{opacity:.24}
}


/* STRONG CRT monitor effect */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:99998;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.055) 0px,
      rgba(255,255,255,.055) 1px,
      rgba(0,0,0,.12) 2px,
      rgba(0,0,0,.12) 4px
    );
  opacity:.28;
  mix-blend-mode:overlay;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:99997;
  background:
    radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.42) 100%);
  animation:crtPulse 2.8s infinite;
}

@keyframes crtPulse{
  0%,100%{opacity:.28}
  50%{opacity:.45}
  52%{opacity:.20}
  55%{opacity:.38}
}


/* VISIBLE CRT DEBUG EFFECT */
.crt-lines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999999;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.045) 0px,
    rgba(255,255,255,.045) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity:.22;
}
/* Paper open animation */
.paper{
  animation:paperOpen .55s ease-out;
  transform-origin:top center;
}

@keyframes paperOpen{
  from{
    opacity:0;
    transform:translateY(-35px) scale(.96) rotateX(8deg);
    filter:blur(4px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1) rotateX(0);
    filter:blur(0);
  }
}

.card{
  animation:panelOpen .2s ease-out;
}

@keyframes panelOpen{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* Forced document reveal animation */
.reveal-open{
  animation:revealOpen .7s ease-out both !important;
  transform-origin:top center;
}

@keyframes revealOpen{
  0%{
    opacity:0;
    transform:translateY(-45px) scale(.94);
    filter:blur(5px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}


/* Investigation board */
.investigation-board{
  position:relative;
  min-height:520px;
  background:
    radial-gradient(circle at center, rgba(185,147,85,.08), transparent 55%),
    linear-gradient(135deg, rgba(60,35,18,.65), rgba(10,8,6,.92));
  border:1px solid var(--line);
  overflow:hidden;
  padding:28px;
}

.board-line{
  position:absolute;
  height:2px;
  background:rgba(180,40,32,.75);
  transform-origin:left center;
  box-shadow:0 0 8px rgba(180,40,32,.4);
}

.board-node{
  position:absolute;
  width:150px;
  min-height:86px;
  padding:12px;
  border:1px solid rgba(216,198,160,.55);
  background:#e8d9b7;
  color:#20170d;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
  cursor:pointer;
  text-align:center;
  transform:rotate(-1deg);
}

.board-node:hover{
  transform:scale(1.04) rotate(0deg);
  z-index:5;
}

.board-node b{
  display:block;
  color:#5b1c16;
  font-size:14px;
}

.board-node small{
  display:block;
  margin-top:6px;
  color:#3b2b18;
  font-size:12px;
}

.board-pin{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#8f3028;
  margin:-20px auto 8px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
mark{
  background:rgba(185,147,85,.45);
  color:#fff3c4;
  padding:0 3px;
  border-bottom:1px solid var(--gold);
}
/* v1.0.1 Investigation Board Upgrade */
.investigation-board{
  position:relative;
  min-height:560px;
  background:
    radial-gradient(circle at 30% 20%, rgba(185,147,85,.12), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(143,48,40,.10), transparent 35%),
    linear-gradient(135deg, rgba(58,35,18,.88), rgba(9,7,5,.96));
  border:1px solid rgba(185,147,85,.35);
  overflow:hidden;
  padding:28px;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.45),
    0 20px 40px rgba(0,0,0,.25);
}

.investigation-board::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:36px 36px;
  opacity:.35;
  pointer-events:none;
}

.board-string{
  position:absolute;
  height:2px;
  background:rgba(160,35,28,.85);
  transform-origin:left center;
  box-shadow:0 0 10px rgba(180,40,32,.45);
  z-index:1;
}

.board-note,
.board-photo{
  position:absolute;
  width:155px;
  min-height:88px;
  padding:13px;
  background:#e8d9b7;
  color:#20170d;
  border:1px solid rgba(90,60,30,.55);
  box-shadow:0 14px 28px rgba(0,0,0,.5);
  cursor:pointer;
  text-align:center;
  z-index:2;
  transition:transform .15s ease, box-shadow .15s ease;
}

.board-note:hover,
.board-photo:hover{
  z-index:6;
  box-shadow:0 18px 36px rgba(0,0,0,.65), 0 0 20px rgba(185,147,85,.25);
}

.board-note b,
.board-photo b{
  display:block;
  color:#5b1c16;
  font-size:14px;
}

.board-note small,
.board-photo small{
  display:block;
  margin-top:7px;
  color:#3b2b18;
  font-size:12px;
}

.main-note{
  width:165px;
  background:#f0e2bd;
}

.red-note{
  background:#d8b1a0;
  border-color:#8f3028;
}

.ia-note{
  background:#d7d2c2;
}

.zero-note{
  background:#1a0b08;
  color:#f0d8bd;
  border-color:#8f3028;
  box-shadow:0 0 28px rgba(143,48,40,.35);
}

.zero-note b{
  color:#f0b0a0;
}

.zero-note small{
  color:#d9c59b;
}

.board-photo{
  background:#f4ead0;
  padding-bottom:18px;
}

.photo-frame{
  background:#111;
  color:#d9c59b;
  border:8px solid #2b2015;
  padding:18px 8px;
  font-family:monospace;
  font-size:13px;
  margin-bottom:10px;
}

.board-pin{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#8f3028;
  margin:-21px auto 8px;
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}