:root{
--txt-alpha:0.7;
}

body{
background:#000;
color:rgba(180,180,180,var(--txt-alpha));
font-family:monospace;
margin:0;
overflow:hidden;
}

/* CRT scan lines */
body::after{
content:'';
position:fixed;
inset:0;
background:repeating-linear-gradient(
transparent 0px,transparent 2px,
rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px
);
pointer-events:none;
z-index:1000;
opacity:0.5;
}

/* canvas */
#room{
position:fixed;
inset:0;
width:100vw;
height:100vh;
display:block;
z-index:0;
}

/* floating text layer */
#textLayer{
position:fixed;
inset:0;
z-index:10;
pointer-events:none;
overflow:hidden;
}

.float-msg{
position:absolute;
font-family:monospace;
font-size:13px;
white-space:nowrap;
pointer-events:none;
text-shadow:0 0 4px currentColor;
}

/* voice colors */
.float-msg.voice-dsab{  color:rgba(180,180,180,var(--txt-alpha));}
.float-msg.voice-choir{ color:rgba(120,120,160,var(--txt-alpha));font-style:italic;}
.float-msg.voice-static{color:rgba(100,200,100,var(--txt-alpha));letter-spacing:2px;}
.float-msg.voice-body{  color:rgba(200,120,100,var(--txt-alpha));}
.float-msg.voice-you{   color:rgba(90,90,90,0.5);}

/* status */
#status{
position:fixed;
top:8px;
left:12px;
font-size:11px;
opacity:0.4;
letter-spacing:2px;
z-index:20;
}

/* input bar */
#inputRow{
position:fixed;
bottom:0;
left:0;
right:0;
display:flex;
z-index:20;
background:rgba(0,0,0,0.8);
border-top:1px solid rgba(40,40,40,0.6);
padding-bottom:env(safe-area-inset-bottom);
}

input,button{
background:transparent;
color:rgba(180,180,180,var(--txt-alpha));
border:none;
padding:10px 12px;
font-family:monospace;
font-size:13px;
transition:opacity 2s,letter-spacing 1s,font-size 1s;
}
#msg{flex:1;outline:none;}
#send{border-left:1px solid rgba(40,40,40,0.6);cursor:pointer;}

/* mode-driven input states */
body.sleep #msg{
opacity:0.25;
font-size:10px;
}
body.anxious #msg{
letter-spacing:3px;
}

.hidden{display:none!important;}

/* camera modal */
.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.92);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
z-index:500;
}
.modal p{
font-size:18px;
letter-spacing:3px;
margin-bottom:20px;
}
.modal button{
margin:5px;
cursor:pointer;
background:black;
color:#ccc;
border:1px solid #333;
padding:8px 16px;
font-family:monospace;
}

/* camera feed */
#cam{
position:fixed;
bottom:0;
right:0;
width:200px;
opacity:0.35;
filter:grayscale(0.8) contrast(2) brightness(0.6);
mix-blend-mode:screen;
transition:filter 3s,opacity 3s;
z-index:50;
}

/* antechamber */
.antechamber{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
flex-direction:column;
}
.center{text-align:center;}
.center p{
min-height:1.4em;
letter-spacing:2px;
}
.center button{
cursor:pointer;
margin-top:20px;
}
#count{
font-size:11px;
margin-top:15px;
letter-spacing:1px;
}