:root {
    --bg-color: #fdfbf7;
    --side-bg-color:#2c3e55aa;
    --accent: #99999999;
    --text: #fff;
/*variable color for lingo game */
     --correct: #2ecc71;
     --misplaced: #f1c40f;
     --wrong: #34495e;
     --bg: #1a1a2e;
    }

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-color);
    margin: 0;
    display: block;
    overflow: scroll;
    height: 100vh;
    width: 100%;
    }

/* Αριστερό Μενού */
#sidebar{
    width: 10px;
    background: var(--side-bg-color);
    border-right: 1px solid #eee;
    padding: 40px 20px;
    display:inline-block;
    color: white;
    height:100%;
    vertical-align:top;

    }
#sidebar.transform .nav-item,#sidebar.transform h2{
     display:none;

}
.nav-item {
    font-size: 1.2rem;
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    transition: 0.3s;
    border-left: 0px solid var(--accent);
    }

.nav-item:hover {
    padding-left: 20px;
    color: var(--accent);
    border-left: 4px solid var(--accent);
    }

#right-area{
    width:calc(100% - 80px);
    display:inline-block;
    vertical-align:top;

    }

/* Τα Παιχνίδια */
#game-area{
    display: block;
    width:100%;
    height:50px;
    border-bottom:2px solid #2c3e55aa;
    margin:10px auto 40px auto;
    }

.games{
    padding:5px;
    display:inline-block;
    margin:10px;
    border:1px solid var(--accent);
    border-radius: 5px;
    text-shadow:1px 1px 3px var(--accent);
    cursor:pointer;
    color:#fff;
	background-color:#58a6ff;
    }

#informations{
    display: block;
    height:100%;
    }
#AI-message{
width: 600px;
margin:0 auto;
border:1px solid #2c3e55aa;
padding:30px;
border-radius:9px;
display:block;

}
.createdAI{
    text-align:center;

}
.mainAI{
    text-align:left;

}
.footerAI{
    width: 100%;
   text-align:right;

}
#gamePlace{
    display: none;
    height:100%;

    }


/* Δεξιό Μέρος (Πληροφορία) */
#display-area {
    display: block;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin:20px auto 80px auto;
    width: 100%;
    height: 90%;
    
    }

#welcome-msg{
    text-align:center;
	color:#58a6ff;
    }
	#welcome-msg p{
    text-align:center;
	color:#000;
    }
#game-welcome-msg{
    text-align:center;
	color:#58a6ff;
    }
	#game-welcome-msg p{
    text-align:center;
	color:#000;
    }
	#metric-welcome-msg h2{
   
	color:#58a6ff;
    }
	
/* Η Εικόνα - Επικεφαλίδα */
#content-image {
    display: block;
    width: 90%;
    transition: all 0.8s ease;
    margin: 10px auto;
    }

#content-image img{
    width: 100%;
    height: 200px;
    min-height: 200px;
    border-radius: 15px;
    opacity: 0.4; /* Αρχική διαφάνεια */
    }

/* Το Κείμενο */
#content-text {
    z-index:0;
    display: block;
    margin:20px auto;
    height:calc(90% - 200px);
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    text-align: left;
    line-height: 1.6;
    
    }

/* State όταν επιλεγεί κάτι */
.active-view #content-image img {
    height: 200px; /* Μικραίνει και γίνεται banner */
    opacity: 0.7; /* Χάνει τη διαφάνεια */
    max-width: 90%;
    }

.active-view #content-text {
    opacity: 1;
    transform: translateY(0);
    }

.active-view #welcome-msg {
    display: none;
    }

.active-view  #informations{
    display: block;
    }

.close-x {
    position: absolute;
    top: 50px;
    right: 40px;
    font-size: 2rem;
    cursor: pointer;
    display: none;
    }

.closeSIDE-x{
    font-size: 2rem;
    cursor: pointer;
    display: block;
    text-align:right;
    }

.game-view #gamePlace{
    display: block;
    }

.game-view #content-image{
    display: none;
    }

.game-view #content-text {
    display: none;
    }

.game-view #welcome-msg {
    display: none;
    }

.game-view  #informations{
    display: none;
    }

#gameLive{
    display: block;

    text-align:center;
    }

#gameScreen{
    display: none;
    width:100%;
    text-align:center;
    }
#metric_system{
    display: none;
    width:100%;
    text-align:center;
 
}
#metric_welcome-msg{
width:600px;
overflow:scroll;
margin:0 auto;
height:100%;
}
.live-game{
    padding:5px;
    display:inline-block;
    margin:10px;
    border:1px solid var(--accent);
    border-radius: 5px;
    text-shadow:1px 1px 3px var(--accent);
    cursor:pointer;
    color:#fff;
    padding:8px;
	background-color:var(--side-bg-color);
    }

.live-game:hover{
    color:var(--side-bg-color);
    scale:1.1;
}
#selectedGame{
    width:600px;
    height:100%;
    
    margin:0 auto;
    padding-bottom:50px;
    display:none;
}
#selectedGame11,#selectedGame12,#selectedGame13,#selectedGame21,#selectedGame22,#selectedGame23,#selectedGame31,#selectedGame32,#selectedGame33{
    display:none;
    text-align:center;
	
}

#selectedGame11 img,#selectedGame12 img,#selectedGame13 img,#selectedGame21 img,#selectedGame22 img,#selectedGame23 img{
    width:400px;
}
#metricINF-close-x{
	border:1px solid #000;
	cursor:pointer;
	width:120px;
	padding:10px;
	margin:0 auto;
	border-radius:25px;
}
#metric-system-info{
	
display:block;
}