:root{
  --bg:#161311; --paper:#1c1815; --ink:#d8cdbd; --dim:#8a7c6a; --hot:#c98a4b;
  --bad:#a5433a; --good:#8fae7a; --line:#3a332b; --panel:#211c18;
  --accent:#c9a45f;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Courier New",ui-monospace,Menlo,Consolas,"MS Gothic",monospace;
  font-size:16px; line-height:1.8;
}
#paper{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,164,95,.06), transparent 60%),
    var(--bg);
}
#paper::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  box-shadow:inset 0 0 140px 10px rgba(0,0,0,.55);
}
#grain{
  position:absolute; inset:0; pointer-events:none; z-index:5; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  padding:24px 18px 100px; max-width:760px; margin:0 auto;
  -webkit-overflow-scrolling:touch;
}
#app::-webkit-scrollbar{width:8px}
#app::-webkit-scrollbar-thumb{background:var(--line)}

h1,h2,h3{font-weight:normal; letter-spacing:.04em}
.head{
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:20px;
  color:var(--dim); font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
}
.head-right{display:flex; align-items:center; gap:10px}
.title-big{font-size:21px; color:var(--accent); margin:6px 0 10px; letter-spacing:.1em}
.sub{color:var(--dim); font-size:13px; margin-bottom:18px; white-space:pre-line}
.section-label{font-size:12px; letter-spacing:.1em; margin:18px 0 8px}

.mono-block{white-space:pre-wrap; word-break:break-word; margin-bottom:8px}
.dim{color:var(--dim)}
.hot{color:var(--hot)}
.blink{animation:bl 1.1s steps(2) infinite}
@keyframes bl{50%{opacity:.3}}

.warn-box{
  border:1px dashed var(--line); color:var(--dim); font-size:12px; padding:10px 12px; margin:16px 0 22px;
  white-space:pre-line;
}

/* buttons */
.btn{
  display:inline-block; border:1px solid var(--accent); color:var(--accent); background:transparent;
  padding:10px 18px; font:inherit; font-size:14px; cursor:pointer; margin:8px 8px 0 0; letter-spacing:.06em;
}
.btn:hover,.btn:focus{background:var(--accent); color:#1b1611; outline:none}
.btn.ghost{border-color:var(--dim); color:var(--dim)}
.btn.ghost:hover{background:var(--dim); color:#1b1611}
.btn.sm{padding:6px 10px; font-size:12px; margin:0}
.btn-row{margin-top:14px}

.title-screen{padding-top:10vh}

/* 記事カード */
.case-card{
  border:1px solid var(--line); background:var(--panel); padding:13px 14px; margin:10px 0; cursor:pointer;
}
.case-card:hover{border-color:var(--accent)}
.case-card .code{color:var(--hot); font-size:12px; letter-spacing:.08em}
.case-card .ct{font-size:16px; margin-top:3px}
.case-card.seen{opacity:.75}
.case-card.seen .code::after{content:" ✓読了"; color:var(--good)}

.outro-box{
  border:1px solid var(--accent); background:rgba(201,164,95,.05); padding:14px 16px; margin:18px 0;
}

/* 調査地点詳細 */
.tabs{display:flex; gap:6px; margin:14px 0 12px; flex-wrap:wrap}
.tab{
  border:1px solid var(--line); background:transparent; color:var(--dim);
  padding:8px 14px; font:inherit; font-size:13px; cursor:pointer;
}
.tab.active{border-color:var(--accent); color:var(--accent)}
.tab.locked{opacity:.55}

.doc-wrap{border:1px solid var(--line); background:var(--panel); padding:16px; margin-top:4px}
.doc-meta{color:var(--dim); font-size:12px; border-bottom:1px dashed var(--line); padding-bottom:8px; margin-bottom:12px}
.doc-body{white-space:pre-wrap; word-break:break-word; line-height:2.1}
.locked-msg{border:1px dashed var(--line); color:var(--dim); padding:16px; font-size:13px}

.hs{ cursor:pointer; padding:0 1px; border-bottom:1px dotted var(--hot); }
.hs:hover{ background:rgba(201,138,75,.12) }
.hs.found{ color:var(--hot); border-bottom:1px solid var(--hot); }

.note-box{
  border-left:2px solid var(--hot); background:rgba(201,138,75,.06);
  padding:10px 12px; margin-top:10px; font-size:13.5px; color:var(--ink); white-space:pre-wrap;
}

/* 検索 */
.search-box{display:flex; gap:8px; margin:14px 0 18px; flex-wrap:wrap}
.search-box input{
  flex:1; min-width:180px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:10px 12px; font:inherit; font-size:14px;
}
.search-box input:focus{outline:none; border-color:var(--accent)}
.search-log-item{border-top:1px dashed var(--line); padding:12px 0}
.search-q{color:var(--accent); font-size:13px; margin-bottom:4px}
.search-r{white-space:pre-wrap; font-size:13.5px; color:var(--ink)}
.search-link a{color:var(--hot); word-break:break-all}

/* エンディング */
.ending-screen{padding-top:8vh}
.ending-screen .title-big{font-size:24px}
.tier-true .title-big{color:var(--good)}
.tier-bad .title-big{color:var(--bad)}

@media (max-width:480px){
  .title-big{font-size:19px}
  body{font-size:15px}
}