/* NOIR / typography and composition */
:root{--bg:#0b1116;--panel:#142027;--panel2:#1b292e;--text:#eae4d8;--dim:#9caaa9;--accent:#ccad7b;--line:#ffffff18;--danger:#bb685e}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}
button,input,select{font:inherit}button{touch-action:manipulation}
#overlay{background:linear-gradient(90deg,#071015eb 0%,#071015c9 36%,#07101525 75%),url('pera-night.png') center/cover;align-items:center;justify-content:flex-start;padding:40px 7vw;overflow-y:auto}
#loginBox,#lobbyBox{background:transparent;border:0;box-shadow:none;text-align:left;padding:0;overflow:visible;width:100%;max-width:510px;margin:0}
#loginBox::before,#loginBox::after,#lobbyBox::before,#lobbyBox::after{display:none}
#loginBox .loginLogo,#loginBox .features{display:none}
.noirEyebrow{font:11px system-ui;letter-spacing:4px;color:#d7bc8b;margin-bottom:26px;text-transform:uppercase}
.noirTitle{font:normal clamp(48px,6.6vw,88px)/.97 Georgia,serif;letter-spacing:-3px;color:#eee9de;margin:0 0 24px}
.noirTitle em{display:block;font-weight:normal;color:#c8ac7b}
.noirIntro{color:#b3bfbd;font-size:15px;line-height:1.8;max-width:390px;margin-bottom:25px}
#loginBox .tagline{background:none;color:#c1b69e;font:italic 15px Georgia,serif;animation:none;margin-bottom:26px}
#loginBox .field{max-width:390px;background:#0c171daa;border:1px solid #ffffff26;border-radius:3px;padding:12px 14px;color:#ddd7cc}
#loginBox .bigBtn{border-radius:3px;font-size:13px;padding:12px 18px;margin-right:5px;box-shadow:none;transition:background .2s}
#loginBox button[onclick="guestLogin()"]{display:block;background:#c5a674;border:1px solid #d4b682;color:#132025;width:390px;max-width:100%;margin:18px 0 24px;opacity:1!important;font-weight:700;letter-spacing:.6px}
.noirFooter{color:#98a8a8;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-top:30px;border-top:1px solid #ffffff22;padding-top:20px}
#lobbyTitle{color:#eee6d9;background:none;animation:none;font:38px Georgia,serif;letter-spacing:-1px;margin:12px 0 20px}
#lobbyBox{max-width:680px;background:#091319d9;padding:26px 32px;border:1px solid #ffffff20;border-radius:4px;backdrop-filter:blur(16px)}
#lobbyChat{background:#060f1599;height:60px;border-radius:3px}
#howToPlay{border:0;background:transparent;padding:6px 0}.htpStep{animation:none;background:#fff03;border-radius:3px}.htpArrow{animation:none}
#lobbyBox .bigBtn[onclick="newGame()"]{display:block;width:100%;background:#c5a674;color:#142026;border:0;padding:14px;border-radius:2px;font-size:15px!important}
#app{grid-template-columns:1fr 340px;grid-template-rows:64px 1fr}
header{background:#0b141bea;box-shadow:none;border-bottom:1px solid #c8ac7b33;padding:0 24px;gap:15px}
header::before,header::after{display:none}header h1{font:17px Georgia,serif;letter-spacing:2px;color:#e0d7c6;background:none;white-space:nowrap}
header .info{font-size:11px;color:#9eacac}#clock{animation:none;background:none;border:0;font:16px monospace;padding:4px}
#apBadge{animation:none;border-radius:3px;background:#ffffff06;border:1px solid #ffffff15;font-size:11px;padding:7px 10px}#apBarFill{animation:none}
#side{background:#0c161deb;border-color:#c8ac7b22}#tabs{padding:9px 6px;background:none}#tabs button{font-size:11px;padding:13px 0}
#tabs button.active{background:#c8ac7b0a;text-shadow:none;color:#dac092;border-color:#dac092}#tabs button.active::after{display:none}
#tabContent{padding:16px}.card{border-radius:3px;border:1px solid #ffffff12;border-left:2px solid #c8ac7b55;background:#18232b7d;padding:14px;box-shadow:none;margin-bottom:12px}
.card:hover{transform:none;background:#1d2b3480}.card h3{font:18px Georgia,serif;color:#ddc6a0}.card p{font-size:12px;line-height:1.7}
.card.dossier{background:linear-gradient(145deg,#262a25,#151e21);border:1px solid #c8ac7b44}.card.dossier::after{font-size:8px;letter-spacing:1px;right:9px;top:9px}
.suspect{gap:12px}.avatarWrap{min-width:76px;height:98px}.avatar{width:70px;height:90px;left:3px;top:3px;border-radius:2px;box-shadow:none;border:1px solid #c8ac7b55;background-size:cover}.stressRing{border-radius:3px;opacity:.55}
.sHead b{font:18px Georgia,serif}.sHead .job{font:11px system-ui}.tag{font-size:9px;border-radius:2px;background:#ffffff06;border:1px solid #ffffff13;padding:3px 6px;animation:none}
#gameArea::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px #0006;z-index:2}
#roomLabel{top:24px;left:24px;background:#0a151dcc;border:1px solid #c8ac7b33;border-radius:2px;font:17px Georgia,serif;letter-spacing:.4px;padding:11px 17px}
#objective{border-radius:2px;background:#0a151ddd;border-color:#c8ac7b33;box-shadow:none}
#minimap{border-radius:3px;opacity:.83;border:1px solid #c8ac7b33}
#prompt{background:#0c181fed;border:1px solid #c8ac7b77;border-radius:3px;box-shadow:0 8px 35px #0005;padding:13px 20px;font-size:13px;z-index:4}
.keycap{border-radius:2px;background:#d0b78a;color:#112029;border:0;box-shadow:none}
#dialog{left:22px;right:22px;bottom:22px;width:auto;max-width:780px;margin:auto;border-radius:4px;background:#101c24f5;border:1px solid #c6a97877;box-shadow:0 20px 80px #0008;padding:20px;backdrop-filter:blur(20px)}
#dAvatar{width:78px;height:98px;border-radius:3px;border:1px solid #c8ac7b77;box-shadow:none}#dAvatar::before{display:none}
#dialog .npcName{font:24px Georgia,serif;background:none;color:#e1c79b;animation:none}#dialog .mood{font-size:12px;color:#9facb0}
#dialogText{font-size:14px;line-height:1.7}.opt{border-radius:3px;background:#21313c;border:1px solid #ffffff18;font-size:12px;padding:10px}
#introCard{border-radius:4px;background:#101d26f5;border:1px solid #c8ac7b66;box-shadow:0 20px 80px #0008}
#chat{opacity:.8;font-size:11px}#chatIn{border-radius:3px}
#visualPanel{display:none;position:absolute;right:16px;top:76px;width:280px;padding:22px;background:#111e27f5;border:1px solid #c8ac7b55;z-index:100;box-shadow:0 12px 40px #0008;border-radius:4px}
#visualPanel.open{display:block}#visualPanel h3{font:22px Georgia,serif;color:#d9c19c;margin:0 0 18px}#visualPanel label{display:block;color:#aeb9b9;font-size:12px;margin:14px 0 8px}#visualPanel input,#visualPanel select{width:100%;accent-color:#c8ac7b}#visualPanel select{padding:8px;background:#1b2a33;color:#ddd;border:1px solid #ffffff25}
#visualBtn{background:#15212b;color:#d2b684;border:1px solid #d2b68444;border-radius:3px;padding:8px 10px;font-size:11px;cursor:pointer}
#visualPanel p{color:#849898;font-size:11px;line-height:1.6;margin-top:15px}
@media(max-width:1000px){header .info{display:none}#app{grid-template-columns:1fr 295px}header{padding:0 12px;gap:8px}#overlay{padding:30px 5vw}.noirTitle{font-size:64px}}
@media(max-width:700px){#app{grid-template-columns:1fr 240px;grid-template-rows:54px 1fr}header h1{font-size:13px}#apBadge{padding:5px}#visualBtn{font-size:10px}#loginBox{max-width:400px}.noirTitle{font-size:56px}#overlay{background-position:60% center}#lobbyBox{padding:20px}#dialog{left:8px;right:8px;bottom:8px;padding:12px}#dAvatar{width:56px;height:72px}.avatarWrap{min-width:59px;height:79px}.avatar{width:53px;height:71px}#tabContent{padding:9px}.sHead b{font-size:16px}}
@media(max-width:480px){#app{grid-template-columns:1fr;grid-template-rows:54px 58vh 1fr}header{grid-column:1}#side{min-height:0;border-left:0}#tabs{padding:0}#tabContent{padding:10px}#roomLabel{top:12px;left:12px}header h1{letter-spacing:.4px}#clock{font-size:12px}#apBar{width:35px}#lobbyBox{padding:16px}#overlay{align-items:flex-start;padding:24px}.noirEyebrow{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#overlay #loginBox{background:transparent;border:0;border-radius:0;box-shadow:none;text-align:left;padding:0;max-width:510px;width:100%}
#overlay #lobbyBox{max-width:680px;background:#091319d9;padding:26px 32px;border:1px solid #ffffff20;border-radius:4px;text-align:left;width:100%}

.castLink{display:inline-block;color:#c8ac7b;text-decoration:none;font-size:12px;border-bottom:1px solid #c8ac7b55;padding-bottom:5px;margin:4px 0 16px}
/* Voice interrogation controls */
#voiceControls{border-top:1px solid #c8ac7b22;margin-top:14px;padding-top:12px}
.voiceButtons,.voiceOptions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.voiceButtons button{font:12px system-ui;padding:9px 12px;background:#20333e;color:#e3d4b8;border:1px solid #c8ac7b44;border-radius:4px;cursor:pointer}
.voiceButtons button[aria-pressed="true"]{background:#753d3c;color:#fff;border-color:#dc9a83}
.voiceButtons button:disabled{opacity:.45;cursor:default}.voiceOptions{margin:10px 0;gap:16px;font-size:11px;color:#b9c4c4}.voiceOptions label{display:flex;gap:6px;align-items:center;cursor:pointer}.voiceOptions input{accent-color:#c8ac7b}
#voiceStatus{font-size:12px;color:#d1c2a6;line-height:1.5;min-height:18px}
.voicePrivacy{font-size:10px;color:#91a1a7;line-height:1.5;margin-top:5px}
#dialog{max-height:calc(100% - 44px);overflow-y:auto}#askIn{min-width:0}#dialogText{min-height:40px}
#dialog{transform:none;animation:voiceDialogIn .2s ease-out}
@keyframes voiceDialogIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.scenarioPreview{padding:12px 14px;margin:14px 0;background:#c8ac7b0a;border-left:2px solid #c8ac7b88;color:#c5c8bc;font-size:13px;line-height:1.6}.storyBrief p{margin-top:8px}