:root{
  --bg:#0a0f0a; --scr:#0c140c; --fg:#7dfb9b; --dim:#3f7a52; --hot:#ffe066;
  --bad:#ff5c5c; --good:#63f2a0; --line:#1d3a26; --panel:#0e1a10;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Courier New",ui-monospace,Menlo,Consolas,"MS Gothic",monospace;
  font-size:16px; line-height:1.7; overflow:hidden;
}
#crt{
  position:fixed; inset:0; background:var(--scr);
  padding:env(safe-area-inset-top) 0 0 0;
  overflow:hidden;
}
#crt::after{ /* vignette */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  box-shadow:inset 0 0 90px 0 rgba(0,0,0,.35);
}
#scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:5; opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.25) 2px 4px);
  animation:flick 6s infinite steps(60);
}
@keyframes flick{ 0%,97%{opacity:.35} 98%{opacity:.22} 100%{opacity:.35} }
#app{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  padding:22px 18px 90px; max-width:820px; margin:0 auto;
  -webkit-overflow-scrolling:touch;
  text-shadow:0 0 4px rgba(125,251,155,.45);
}
#app::-webkit-scrollbar{width:8px}
#app::-webkit-scrollbar-thumb{background:var(--dim)}

h1,h2,h3{font-weight:normal; letter-spacing:.05em}
.head{border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:16px; color:var(--dim); font-size:13px; display:flex; justify-content:space-between}
.title-big{font-size:22px; color:var(--fg); margin:6px 0 2px; letter-spacing:.12em}
.sub{color:var(--dim); font-size:13px; margin-bottom:20px; white-space:pre-line}

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

/* buttons */
.btn{
  display:inline-block; border:1px solid var(--fg); color:var(--fg); background:transparent;
  padding:10px 18px; font:inherit; cursor:pointer; margin:8px 8px 0 0; letter-spacing:.08em;
}
.btn:hover,.btn:focus{background:var(--fg); color:var(--scr); outline:none}
.btn.ghost{border-color:var(--dim); color:var(--dim)}
.btn.wide{display:block; width:100%; text-align:left; margin:8px 0 0}

/* chat */
.msg{margin:14px 0; max-width:88%}
.msg .who{font-size:12px; color:var(--dim); margin-bottom:3px}
.msg .bub{border:1px solid var(--line); background:var(--panel); padding:10px 12px; white-space:pre-wrap}
.msg.me{margin-left:auto; text-align:right}
.msg.me .bub{border-color:var(--dim)}

/* case select */
.case-card{border:1px solid var(--line); background:var(--panel); padding:14px; margin:12px 0; cursor:pointer}
.case-card:hover{border-color:var(--fg); background:#12211640}
.case-card .code{color:var(--hot); font-size:13px}
.case-card .ct{font-size:18px; margin:2px 0 6px}
.case-card .cb{color:var(--dim); font-size:14px}
.case-card.seen .code::after{content:" ✓観測済"; color:var(--dim)}

/* document */
.doc-wrap{border:1px solid var(--line); background:#0b140d; padding:16px; margin-top:12px}
.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}
.hs{ cursor:default; padding:0 1px; border-radius:2px }
.hs:hover{ background:rgba(125,251,155,.07) }
.hs.checked{ opacity:.4 }
.hs.ok{ color:var(--hot); background:rgba(255,224,102,.16);
  box-shadow:0 0 0 1px rgba(255,224,102,.45);
  -webkit-box-decoration-break:clone; box-decoration-break:clone }
.hs.ok:hover{ background:rgba(255,224,102,.16) }
.hs.miss{ color:var(--bad); animation:shake .3s }

.prevdoc{ border:1px dashed var(--dim); background:#0b140d; padding:12px; margin-top:10px; max-height:44vh; overflow-y:auto }
.prevdoc-h{ color:var(--dim); font-size:12px; margin:10px 0 4px }
.prevdoc-h:first-child{ margin-top:0 }
.prevdoc-b{ white-space:pre-wrap; word-break:break-word; color:var(--dim); font-size:13.5px; line-height:1.9 }
@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.hunt-tag{color:var(--hot); font-size:13px; margin:10px 0}
.counter{color:var(--dim); font-size:13px; margin-top:14px}
.note-pop{border-left:3px solid var(--hot); padding:6px 10px; margin:10px 0; background:rgba(255,224,102,.06); font-size:14px}

/* quiz */
.q{margin:18px 0}
.q .qt{margin-bottom:8px}
.opt{border:1px solid var(--line); padding:10px 12px; margin:6px 0; cursor:pointer; background:var(--panel)}
.opt:hover{border-color:var(--fg)}
.opt.sel{border-color:var(--hot); color:var(--hot)}
.opt.right{border-color:var(--good); color:var(--good)}
.opt.wrong{border-color:var(--bad); color:var(--bad)}

/* keywords / board */
.kw{display:inline-block; border:1px solid var(--dim); padding:4px 10px; margin:5px; font-size:13px; border-radius:2px}
.board{position:relative; margin-top:16px; min-height:60px}
.board .kw{cursor:pointer; background:var(--panel)}
.board .kw.pick{border-color:var(--hot); color:var(--hot)}
.board .kw.done{border-color:var(--good); color:var(--good); opacity:.65}
svg.wires{position:absolute; inset:0; pointer-events:none; overflow:visible}

/* deduction */
.ded-sentence{border:1px solid var(--line); background:var(--panel); padding:14px; white-space:pre-wrap; line-height:2.1; margin:12px 0}
.slot{color:var(--dim); border-bottom:1px solid var(--dim)}
.slot.cur{color:var(--hot); border-color:var(--hot); animation:bl 1s steps(2) infinite}
.slot.set{color:var(--good); border-color:var(--good)}
.ask{color:var(--hot); margin:14px 0 6px}

#sound-toggle{
  position:fixed; right:14px; bottom:14px; z-index:20; width:40px; height:40px; line-height:38px;
  text-align:center; border:1px solid var(--dim); color:var(--dim); background:var(--scr);
  cursor:pointer; user-select:none;
}
#sound-toggle.off{opacity:.4}

@media(max-width:600px){
  body{font-size:15px}
  #app{padding:16px 12px 90px}
  .title-big{font-size:19px}
}