/* 취조실 — 누아르: 잉크 블랙 + 호박색 취조등 */
:root{
  --bg:#0c0c11; --panel:#15151d; --panel2:#1b1b26; --line:#2b2b3a; --ink:#e8e6df; --sub:#a5a29a; --faint:#6e6c66;
  --amber:#e8a33d; --amber-d:#c9862a; --red:#e05252; --mint:#5fc9a0; --paper:#f2ead8; --paper-ink:#2c2820;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); background:
  radial-gradient(ellipse at 50% -20%, rgba(232,163,61,.09), transparent 55%), var(--bg);
  padding-bottom:86px;}
.wrap{max-width:640px; margin:0 auto; padding:0 16px;}

/* 인트로 */
.intro{text-align:center; padding:52px 0 8px;}
.intro h1{font-family:"Song Myung",serif; font-size:46px; margin:0; letter-spacing:8px; color:var(--ink);
  text-shadow:0 0 34px rgba(232,163,61,.3);}
.intro .en{color:var(--amber); font-size:11px; letter-spacing:7px; margin-top:8px;}
.intro .tag{color:var(--sub); font-size:14.5px; margin:16px 0 0; line-height:1.9;}
.intro .tag b{color:var(--ink)}
.startbtn{display:block; width:100%; max-width:340px; margin:26px auto 0; font:inherit; font-size:16.5px; font-weight:900;
  letter-spacing:2px; color:#231603; background:linear-gradient(180deg,#eab04e,#d18f28); border:0; border-radius:12px;
  padding:16px; cursor:pointer; box-shadow:0 6px 28px rgba(232,163,61,.25);}
.startbtn:disabled{opacity:.55}
.introfoot{color:var(--faint); font-size:12px; text-align:center; margin-top:14px; line-height:1.8;}
.rules{max-width:420px; margin:26px auto 0; text-align:left; color:var(--sub); font-size:13px; line-height:2.0;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.rules b{color:var(--amber)}

/* 로딩 씬 */
#boot{margin-top:30px; font-size:14px; color:var(--sub); line-height:2.2; white-space:pre-wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; min-height:120px;}
#boot .ok{color:var(--amber)}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}

/* 사건 헤더 */
.casehead{margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:15px 17px;}
.casehead .ct{font-family:"Song Myung",serif; font-size:20px; letter-spacing:1px;}
.casehead .cs{color:var(--faint); font-size:12px; margin-top:4px;}
.casehead .cb{color:var(--sub); font-size:13.5px; line-height:1.85; margin-top:10px; word-break:keep-all;}
.vrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.vtag{font-size:11.5px; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:3px 9px; color:var(--sub);}
.vtag b{color:var(--amber)}

/* 탭 */
.tabs{position:fixed; bottom:0; left:0; right:0; display:flex; background:#101018; border-top:1px solid var(--line); z-index:50;}
.tabs button{flex:1; font:inherit; font-size:12px; font-weight:700; color:var(--faint); background:none; border:0; padding:11px 0 13px; cursor:pointer;}
.tabs button .ti{display:block; font-size:19px; margin-bottom:2px;}
.tabs button.on{color:var(--amber)}
.tabs button .badge{position:relative;}
.tabs button .badge::after{content:""; position:absolute; top:-2px; right:-8px; width:7px; height:7px; border-radius:50%; background:var(--red);}

.pane{display:none; margin-top:14px;}
.pane.on{display:block;}

/* 용의자 선택 */
.susgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.suscard{background:var(--panel); border:1.5px solid var(--line); border-radius:13px; padding:13px 14px; cursor:pointer; text-align:left; font:inherit; color:var(--ink);}
.suscard.on{border-color:var(--amber); background:#1d1a12;}
.suscard .sn{font-weight:900; font-size:15.5px;}
.suscard .sj{color:var(--amber); font-size:11.5px; margin-top:2px;}
.suscard .sr{color:var(--faint); font-size:11.5px; margin-top:5px; line-height:1.6;}

/* 취조 채팅 */
#chat{margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; min-height:220px; max-height:52vh; overflow-y:auto;}
.msg{margin:9px 0; display:flex;}
.msg.det{justify-content:flex-end;}
.msg .bub{max-width:82%; font-size:14px; line-height:1.8; border-radius:13px; padding:9px 13px; white-space:pre-wrap; word-break:keep-all;}
.msg.det .bub{background:#26333f; color:#dce8f2; border-bottom-right-radius:4px;}
.msg.sus .bub{background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:4px;}
.msg .who{font-size:10.5px; color:var(--faint); margin-bottom:3px;}
.contra{margin:10px 0; background:#2a1616; border:1.5px solid #7a3a3a; border-radius:12px; padding:10px 13px; font-size:13px; color:#f2c7c7; line-height:1.7; animation:pop .3s;}
.contra b{color:#ff9d9d}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.askbar{display:flex; gap:8px; margin-top:10px;}
.askbar input{flex:1; font:inherit; font-size:14.5px; background:var(--panel2); border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:12px 13px; outline:none;}
.askbar input:focus{border-color:var(--amber)}
.askbar button{font:inherit; font-size:14px; font-weight:800; background:var(--amber); color:#231603; border:0; border-radius:11px; padding:0 18px; cursor:pointer;}
.askbar button:disabled{opacity:.5}
.quickq{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.qq{font-size:11.5px; color:var(--sub); background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:5px 10px; cursor:pointer;}
.qq:hover{border-color:var(--amber); color:var(--amber)}

/* 현장/증거 */
.placegrid{display:grid; grid-template-columns:1fr; gap:9px;}
.placecard{display:flex; align-items:center; gap:12px; background:var(--panel); border:1.5px solid var(--line); border-radius:13px; padding:14px 15px; cursor:pointer; font:inherit; color:var(--ink); text-align:left;}
.placecard:hover{border-color:var(--amber)}
.placecard .pi{font-size:24px}
.placecard .pn{font-weight:800; font-size:14.5px;}
.placecard .pd{color:var(--faint); font-size:12px; margin-top:2px;}
.narr{margin-top:12px; background:var(--panel2); border-left:3px solid var(--amber); border-radius:8px; padding:12px 14px; font-size:13.5px; color:var(--sub); line-height:1.9; font-style:italic;}
.evgrid{display:grid; grid-template-columns:1fr; gap:9px; margin-top:12px;}
.evcard{background:var(--paper); color:var(--paper-ink); border-radius:12px; padding:13px 15px; box-shadow:0 3px 10px rgba(0,0,0,.4); animation:pop .35s;}
.evcard .en{font-weight:900; font-size:14.5px;}
.evcard .eid{float:right; font-size:10.5px; color:#8a7d5e; font-weight:700;}
.evcard .ed{font-size:13px; line-height:1.75; margin-top:5px; color:#4b4232;}
.evcard .ef{margin-top:8px; background:#e5d9bd; border-radius:8px; padding:8px 11px; font-size:12.5px; line-height:1.7; color:#5c4c22;}
.evcard .ef b{color:#8a5a00}
.evcard button{margin-top:8px; font:inherit; font-size:12px; font-weight:800; background:#2c2820; color:#f2ead8; border:0; border-radius:8px; padding:7px 12px; cursor:pointer;}
.evempty{color:var(--faint); font-size:13.5px; text-align:center; padding:26px 0; line-height:1.9;}

/* 지목 */
.accusebox{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px;}
.accusebox textarea{width:100%; min-height:90px; font:inherit; font-size:14px; background:var(--panel2); border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:12px; margin-top:10px; resize:vertical; outline:none;}
.accusebox textarea:focus{border-color:var(--amber)}
.warn{color:var(--faint); font-size:12px; margin-top:8px; line-height:1.7;}
.accusebtn{width:100%; margin-top:12px; font:inherit; font-size:15.5px; font-weight:900; letter-spacing:2px; color:#2a0f0f; background:linear-gradient(180deg,#e06a6a,#c94848); border:0; border-radius:12px; padding:15px; cursor:pointer;}
.accusebtn:disabled{opacity:.5}

/* 판정 */
.verdict{margin-top:14px; border-radius:16px; padding:24px 20px; text-align:center; animation:pop .5s;}
.verdict.win{background:linear-gradient(170deg,#132a1e,#0f1f17); border:1.5px solid var(--mint);}
.verdict.lose{background:linear-gradient(170deg,#2a1313,#1f0f0f); border:1.5px solid var(--red);}
.verdict .vs{font-size:38px; font-weight:900; letter-spacing:4px;}
.verdict.win .vs{color:var(--mint)} .verdict.lose .vs{color:var(--red)}
.verdict .vg{font-size:15px; color:var(--sub); margin-top:6px;}
.verdict .vg b{font-size:26px; color:var(--amber);}
.verdict .vc{margin-top:10px; font-size:13.5px; color:var(--sub); line-height:1.8;}
.truth{margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:left;}
.truth .th{font-weight:900; font-size:14px; color:var(--amber); margin-bottom:8px;}
.truth .tm{font-size:13.5px; line-height:1.9; color:var(--sub);}
.truth .tl{margin-top:10px;}
.truth .tl div{font-size:12.5px; color:var(--faint); padding:3px 0; border-bottom:1px dashed var(--line); line-height:1.7;}
.truth .tl b{color:var(--sub)}
.statrow{display:flex; gap:8px; margin-top:12px;}
.stat{flex:1; text-align:center; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px;}
.stat .sk{font-size:10.5px; color:var(--faint);}
.stat .sv{font-size:17px; font-weight:900; margin-top:2px;}

.actions{display:flex; gap:9px; margin-top:14px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:14px; font-weight:800; padding:13px; border-radius:12px; border:1px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--amber); border-color:var(--amber); color:#231603;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}
.foot{margin-top:40px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.9;}
.hidden{display:none}
a{color:var(--amber)}