/*
Theme Name: UPspace Theme
Theme URI: https://play-up.space
Author: Wandelstudios
Author URI: https://www.wandelstudios.de
Description: A fully gamified theme for UPspace E-Learning with API-Connectivity to the UPspace Game and the Companion App.
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
Copyright: Wandelstudios 2024
*/

@font-face {
    font-family: 'Roboto';    
    src: local('Roboto'), local('Roboto-Regular'), url('assets/font/Roboto-Regular.ttf'),
    url('roboto.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoMono';    
    src: local('RobotoMono'), local('RobotoMono-Bold'), url('assets/font/RobotoMono-Bold.ttf'),
    url('RobotoMono-Bold.ttf') format('truetype');
}

/* GENERAL */
body {
    font-family: 'Roboto';
    font-size: 0.85em;
    user-select: none; /* Verhindert die Auswahl */
    -webkit-user-select: none; /* Für WebKit-basierte Browser (Chrome, Safari) */
    -moz-user-select: none; /* Für ältere Firefox-Versionen */
    -ms-user-select: none; /* Für ältere IE-Versionen */
}

a {
    color: #fff;
}

.mono {
    font-family: 'RobotoMono' !important;
}

h2 {
    font-size: 25px;
}

h3 {
	font-size: 15px;
}

h5 {
    margin-left: 20px;
    font-size: 17px;
    font-style: italic;
    background-color:rgba(0, 0, 0, 0) !important;
}

span .mono {
    color: #8a8a8a;
}

.introduction {
    margin-left:40px;
    margin-right:40px;
}

.introductionEn {
    color: #cccc99;
    font-size: 13px;
    margin-left:50px;
    padding-right:30px;
}

.general {
    color: #fff;
    background-image: url('assets/img/background.webp');
    overflow:hidden;
}

#fullScreenButton {
    pointer-events: all;
}

.content_wrapper {
    position:fixed;
	top: 20px;
	left:70px;
	right:20px;
	bottom:20px;
	border-radius:15px;
	border: 1px solid #ccc;
	background:#121212;
	overflow:hidden;
    display: flex;
    flex-direction: column;
}

#inner_content {
    position: relative;
    flex:1;
    overflow:hidden;
}


/*

SIDEMENUE

*/

#sidemenues {
	position:fixed;
	top: 100px;
	}
	
.languageLevel_de {
	position:relative;
	top: -20px;
    background-image: url('assets/img/lang/de.webp');
	height:45px;
	align-content: center;
    text-shadow: 
        -1px -1px 0 #000,  /* Oben links */
        1px -1px 0 #000,   /* Oben rechts */
        -1px 1px 0 #000,   /* Unten links */
        1px 1px 0 #000;    /* Unten rechts */
}

#sidemenuecontainer {
	position:relative;
	left: 20px;
	width: 45px;
	height:200px;
 	background: linear-gradient(90deg, #2a2a2a, #1a1a1a);
 	transform: perspective(10px) rotateY(-1deg);
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding-top:20px;
	padding-bottom:5px;
	z-index: 2;
	overflow: hidden;
}	
	
#sidesettingscontainer {
	position:relative;
	top: -22px;
	left: 30px;
	width: 35px;
 	height: 150px;
 	background: linear-gradient(90deg, #1a1a1a, #151515);
 	transform: perspective(10px) rotateY(-1deg);
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	z-index: 1;
	padding-top: 40px;
	}
	
#sidesettingscontainer img {
    margin:0;
    width: 20px;
    padding-top: 5px;
    padding-bottom:5px;
}
	
/*

MAP

*/	
	
#map-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow:hidden;
	z-index:1;

}


.mapWrapper {
    position: absolute;
    left:0;
    top:0;
    z-index:1;
}

.mapIMG {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
z-index:1;
}

#pins {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.pin {
    z-index:99;
}

.deselected {
    opacity: 0.3;
}

.post-preview {
    width:300px;
    overflow:hidden;
}

.post-preview div {
    margin: 0;
    padding: 0;
}

.previewHeader {
    position: relative;
    width:300px;
    height: 85px;
}

.previewHeader img {
    width:300px;
    position: absolute;
    bottom: 0;
}

.previewContent {
    background-color: #212121;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-color:#fff;
    border-width: 0 1px 1px 1px;
    border-style: solid;
}

.previewContent p {
    padding: 20px;
    margin:0;
}


/* 

DETAILS AREA

*/


#details {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 1;
    pointer-events: none; 
}

.blur-effect {
    filter: blur(10px) brightness(0.5);
    pointer-events: none;
}

#post_info {
    width: 500px;
    height: 600px;
    margin-left: 20%;
    margin-right: 20%;
}

#post_details {
    width: 60vh;
}

#post_info.open {
    transform: translateX(0);
    opacity: 1;
}

.hacked-text {
    font-family: 'RobotoMono';
    white-space: pre-wrap;
}


/* FIXED CONTAINERS */

/*

Quests Container

*/

.fixedQuestsContainer {
    position: fixed;
	top: 0px;
    display: flex;
	flex-direction: column;
    align-items: flex-start;
	z-index:8;
}

.cityname {
	padding: 10px;
    height: 100px;
    display: flex;
    align-items: center; /* Zentriert Bild und Text vertikal */
	margin-bottom: -30px;
}

.cityname img {
    height: 50px; /* Passe die Bildgröße an, falls nötig */
    width: 50px;
    object-fit: contain;
	padding: 10px; /* Sorgt dafür, dass das Bild skaliert wird, ohne verzerrt zu sein */
}

.cityname h1 {
    margin: 0; /* Entfernt Standardabstände */
    display: flex;
    align-items: center; /* Zentriert den Text innerhalb des h1 */
}

.quests {
    margin-top: 6px;
    width: 230px;
    height: 402px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: rgba(26, 26, 26, 0.8); /* Halbtransparenter Hintergrund */
    backdrop-filter: blur(5px); /* Blur-Effekt */
    -webkit-backdrop-filter: blur(5px); /* Für Safari */
	overflow:hidden;
}

.questscategory {
position:absolute;
top:0;
    height: 47px;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.questheadertext {
//    color: #121212 !important;
}

.level {
    color: #166441;
}

.event {
    color:  #c4bb55;
}

.main {
    background-color: #990000;
}

.requirement {
    padding:10px;
    border-radius: 5px;
    color: #121212 !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

.earned {
    text-decoration: line-through;
}

.not_earned {
    background-color:#c4bb55 !important;
}

.questthumb img{
max-height: 250px;
	display:cover;
	align:center;
    
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.questtitle {
	position:relative;
	width: 100%;
	text-transform: uppercase;
	margin-bottom: -50px;
}

.questinfo {
	position:absolute;
	padding:20px;
}

.questdetails {
	position:absolute;
	top: 100px;
	width:100%;
}

.questnav {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	background-color: #121212;
	box-shadow: 0 -8px 4px rgba(0, 0, 0, 0.4);
}

.questminus, .questplus {
    width: 60px;
}

.openquestdetails {
    width: 50%;
}

.arrowright {
    margin: 10px;
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #ffffff;
}

.arrowleft {
    margin: 10px;
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 10px 5px 0;
    border-color: transparent #ffffff transparent transparent;
}

.circlenorm {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
}

.circlenorm:hover {
    width: 20px;
    height: 20px;
}

.circlebig {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
}

/*

POINTS Container

*/

.fixedPointsContainer {
	height:40px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
	padding-bottom:40px;
    z-index:1;
	background-color: #2b2b0b;
	overflow: hidden;
}

.fixedPointsContainer img {
    margin-top: 16px;
    margin-bottom: 16px;
}

.nav_icon {
    padding-left: 5px;
    padding-right: 5px;
}

.fixedPointsContainer div,
.fixedPointsContainer div > img {
    display: inline-block;
    height:25px;
    vertical-align: middle;
    margin-right:5px;
}

.fixedPointsContainer div > p {
	display: inline-block;
    height:25px;
	margin-top: 8px;
	padding: 6px 0px;
}

.freedecoder {
	font-weight: bold;
}

.prodecoder {
    font-weight: bold;
    color: white; /* Schrift bleibt weiß */
    background-color: green; /* Hintergrund wird grün */
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 4px 8px; /* Abstand innerhalb des Elements */
    display: inline-block; /* Sorgt dafür, dass es sich besser abhebt */
}

.city {
position:relative;
    top: 30px;
	height:80px !important;
    border: 1px solid #eee;
    border-radius: 15px;
    background-color: #002244;
    padding-left:10px;
    padding-right:10px;
}

#clock {
	margin-top: 40px;
}

/* 

BottomContainer & Bottom Nav 

*/

.fixedBottomContainer {
    position: absolute;
    right: 80px;
    bottom: -50px;
    height: 80px;
    width: 150px;
    display: flex;
    z-index:9;
}

.fixedBottomContainer img {
    margin-top: -30px;
    margin-bottom: 30px;
}

.navlink-div {
    background-color:#272838;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    justify-content: center;
    margin:5px;
    width: 100px;
    border: 1px solid #ccc;
}

/* WINDOW */

/* Grundlegender Stil für das futuristische Fenster */
.windowWrapper {
    position:absolute;
    background-color: rgba(26, 26, 26, 0.95); /* Dunkles, flaches Design */
    color: #ffffff; /* Weißer Text */
    border: 2px solid rgba(255, 255, 255, 0,8);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(226, 226, 226, 0.4);
    font-family: Arial, sans-serif;
  }
  
  /* Header-Bereich des Fensters */
  .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    padding: 10px 15px;
    border-bottom: 1px solid #333333;
  }
  
  /* Titel des Fensters */
  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .windowThumbnail {
    max-width:100%;
  }
  
  /* Schließen-Button */
  .close {
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .close:hover {
    color: #ff4d4d; /* Rotes Highlight beim Hover */
  }
  
  /* Inhaltsbereich des Fensters */
  .windowContent {
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
  }

  .windowBody {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .windowBody::-webkit-scrollbar {
    width:5px;
  }

  .windowBody::-webkit-scrollbar-thumb {
    background-color: #888;
  }

  .windowBody::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }