.hidden {
    display: none;
}

#page-header .title{
width: 800px;
margin: 0 auto 90px;
}


.chat-window{
height:420px;
overflow-y:auto;
background:#111;
padding:15px;
border:1px solid #333;
margin-top:20px;
font-size:15px;
}

.msg{margin-bottom:12px;
word-break: normal;
overflow-wrap: break-word;
	}

.claire{color:#8fd3ff;}

.amara{color:#ffffff;}
.npc{color:#ffffff;}
.thought{
color:#9a9a9a;
font-style:italic;
}

.ending {
    color: #ffd700;
    font-style: italic;
}

strong {
text-shadow: none;
}

.entry p {
    text-align: justify;
    margin-bottom: 20px;
}


.timestamp {
    color: #00ff00;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
}

.chat-input{
margin-top:10px;
display:flex;
gap:8px;
}

.chat-input input{
flex:1;
padding:10px;
background:#1b1b1b;
border:1px solid #333;
color:white;
}

.chat-input button{
padding:10px 14px;
background:#333;
color:white;
border:0;
cursor:pointer;
margin-top:10px;
}

.clue{
color:#ffd166;
font-weight:bold;
}

.unknownIcon{
color:#ff6b6b;
margin-right: 7px;
margin-left: 2px;
font-weight: bold;
font-size:20px;
letter-spacing:1px;
text-shadow:0 0 6px rgba(255,80,80,.6);
font-family: 'Courier New'
}

.thinking{
color:#777;
font-style:italic;
}

.summary::before{
content:"◆ ";
color:#ffd166;
}

.summary{
color:#f0d47a;
background:#161616;
border-left:4px solid #ffd166;
padding:12px;
margin:16px 0;
font-style:italic;
}

.clueItem{
color:#f5c04a;
margin:6px 0;
font-weight:500;
}

#cluePopupContent h3{
margin-bottom:18px;
}

.clueItem::before{
content:"⭐ ";
}

#metaUI{
display:flex;
justify-content:space-between;
margin-top:20px;
gap:14px;
max-width:800px;

}

#cluePopupContent{
animation:popupIn .25s ease;
}

@keyframes popupIn{
0%{
opacity:0;
transform:scale(.95);
}
100%{
opacity:1;
transform:scale(1);
}
}

.metaCard{
flex:1;
background:#151515;
border:1px solid #333;
cursor:pointer;

display:flex;
flex-direction:column;
justify-content:space-between;

padding:16px 12px;
min-height:170px;
}

.metaCard img{

object-fit:contain;
margin:auto;
}

.metaCard div{
text-align:center;


}
.revealed{
box-shadow:0 0 14px rgba(255,210,120,0.35)
}

.metaCard{
transition:transform .15s ease, border-color .15s ease;
}

.metaCard:hover{
transform:translateY(-3px);
border-color:#00eaff;
}

.metaTitle{
font-size:18px;
font-weight:600;
margin-top:10px;
}

.metaCount{
font-size:14px;
opacity:0.8;
margin-top:4px;
}

#cluePopup button{
display:block;
margin:24px auto 0;
padding:10px 22px;
font-size:15px;
}

#cluePopup{
z-index:99;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
align-items:center;
justify-content:center;
}

#cluePopupContent{
background:#111;
padding:20px;
width:360px;
max-width:90%;
border:1px solid #444;
}

#cluePopup button{
padding:8px 16px;
font-size:14px;
}

#popupClues div{
display:flex;
align-items:center;
gap:8px;
margin:7px 0;

font-size:15px;
}


@keyframes starFlash{

0%{transform:scale(1)}
50%{transform:scale(1.35)}
100%{transform:scale(1)}

}

#story{
max-width:800px;
margin:auto;
margin-bottom: 100px;
}

.star{
color:#ffd166;
margin-right:6px;
}

.starFlash{
animation:starFlash 0.6s ease;
}

@keyframes starFlash{

0%{
transform:scale(1);
filter:brightness(1);
}

40%{
transform:scale(1.35);
filter:brightness(2);
}

100%{
transform:scale(1);
filter:brightness(1);
}

}

.clueReveal{
animation:clueReveal 0.7s ease;
}

@keyframes clueReveal{

0%{
opacity:0;
transform:translateY(6px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


.approachBtn.active{
box-shadow:0 0 12px #00eaff;
transform:scale(1.05);
}

.approachBtn.disabled{
opacity:0.4;
pointer-events:none;
}

.recordingBox{
background:#111;
border-left:3px solid #5ee;
padding:14px;
margin:20px 0;
font-family:Courier New, monospace;
font-size:0.95em;
animation:clueReveal 0.4s ease;
}

.recordingBox p{
margin:8px 0;
}

.recordingLabel{
color:#00eaff;
font-size:0.85em;
letter-spacing:1px;
margin-bottom:10px;
opacity:0.8;
}

#epilogueButtons {
display:flex;
gap:12px;
width:100%;
}

#epilogueButtons    button{
flex:1;
padding: 0.55em 1em 0.55em; 
}

@media (max-width:700px){
.botton{
padding: 0.55em 1em 0.55em;
	
}
#epilogueButtons {
flex-direction:column;
}

}

 #wyborpodejscia{
display:flex;
gap:12px;
width:100%;
}

  #wyborpodejscia  button{
flex:1;
padding: 0.55em 1em 0.55em; 
justify-content: center;
}

@media (max-width:700px){

 #wyborpodejscia{
flex-direction:column;
}

}

 #argumentButtons {
display:flex;
gap:12px;
width:100%;
}

#argumentButtons  button{
flex:1;
padding: 0.55em 1em 0.55em; 
justify-content: center;
}

@media (max-width:700px){

#argumentButtons {
flex-direction:column;
}

}

  .approachBtn{
display:flex;
gap:12px;
width:100%;
}

 .approachBtn button{
flex:1;
padding: 0.55em 1em 0.55em; 
}

@media (max-width:700px){

 .approachBtn{
flex-direction:column;
}

}


.section{
opacity:0;
transform:translateY(8px);
transition:opacity .35s ease, transform .35s ease;
will-change: opacity, transform;
}

.section.visible{
opacity:1;
transform:translateY(0);
}


/* Inline variant – obok timestampu */
.story-progress {
  max-width: 220px;           /* węższy pasek */
  margin: 0 0 0 auto;         /* do prawej */
  position: relative;
  top: -6px;                  /* podciągnięcie do linii timestampu */
}

/* Tekst progresu w jednej linii */
.story-progress .progress-text {
  font-size: 12px;
  margin-bottom: 4px;
  justify-content: flex-end;
}

/* Pasek trochę cieńszy */
.story-progress .progress-bar {
  height: 10px;
}

/* Mniej agresywny glow */
.story-progress .progress-fill {
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
}
.story-progress {
  transform: translateY(-35px);
}

@media (max-width:700px){
.story-progress {
  transform: translateY(-75px);
}
}

button{
transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:active{
transform:translateY(1px);
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.storyImage{
width:100%;
max-width:800px;
display:block;
margin:30px auto;
border-radius:6px;
}