#SB_main {
	position: relative;
	height: 100%;
	color: rgb(255, 208, 208);
	font-family: 'Century Gothic', sans-serif;
	font-weight: bold;
	box-sizing: border-box;
	padding: 0.4em 0.8em;
	display: flex;
	flex-direction: column;

	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#SB_main:hover {
	box-shadow:
		0 0 0.5vw var(--neon-color-hover),
		0 0 1.5vw var(--neon-color-hover),
		inset 0 0 0.5vw var(--neon-color-hover),
		inset 0 0 1.5vw var(--neon-color-hover);
	background-color: rgba(0, 0, 0, 0.8);
}

#SB_main > hr {
	width: 100%;
	border-width: 0px;
	height: 0.1em;
	background-image: linear-gradient(
		to right, rgba(0, 0, 0, 0),
		rgba(255, 0, 0, 0.4),
		rgba(255, 0, 0, 0.4),
		rgba(0, 0, 0, 0));
}

#SB_version {
	text-align: left;
}

#SB_videologo {
	/*background-color: rgba(0, 0, 0, 0.8);*/
	position: relative;

	width: 100%;
	height: 0;
	padding-bottom: 32%; /* hack to set the aspect ratio */
}

#SB_videologo > video {
	/*background-color: rgba(255, 0, 0, 0.083);*/
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50.6%, -46%);
	width: 108%;
	max-width: unset; /* Twine overwrite */
}

/* ----------------------- Top Info ----------------------- */
#SB_topInfo {
	width: 100%;
	margin: 0.5em 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#SB_partOfDay {
	width: 50%;
}

#SB_partOfDay > images {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

#SB_partOfDay > images > img {
	width: 0%;
	opacity: 0;
	border-width: 0;

	border-style: solid;
	border-color: rgb(126, 30, 30);
	border-radius: 0.3em;

	transition: width 0.3s ease, opacity 0.3s ease;
}

#SB_partOfDay > images > img.side {
	width: 30%;
	opacity: 0.7;
	border-width: 0.2em;
}

#SB_partOfDay > images > img.active {
	width: 38%;
	opacity: 1;
	border-width: 0.2em;
}

#SB_partOfDay > arrow {
	width: 100%;
	text-align: center;
	font-size: 2em;
	font-weight: normal;
	line-height: 1em;
	color: rgb(126, 30, 30);
	text-shadow: 0 0 0.1em rgb(0, 0, 0);
}

#SB_timeDayLocation {
	color: rgb(127, 28, 28);
	width: 50%;
	padding: 0.3em;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

#SB_timeDayLocation > div > name {
	text-shadow: 0 0 0.1em rgb(0, 0, 0);
}

#SB_timeDayLocation > div > desc {
	color: rgb(255, 208, 208);
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	border: solid 0.2em rgb(126, 30, 30);
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 0.3em;
	padding: 0 0.3em;
	text-align: center;
}

#SB_timeDayLocation > div:not(:last-child) > desc {
	margin-bottom: 0.5em;
}

/* ----------------------- Player Info ----------------------- */
#SB_playerInfo {
	width: 100%;
	margin: 0.5em 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

#SB_player {
	width: 50%;
}

#SB_player > #SB_playerImage {
	margin: 0.3em;
	border: solid 0.2em rgb(126, 30, 30);
	border-radius: 0.6em;
	width: auto;
	aspect-ratio: 1;
	overflow: hidden;
}

#SB_player > #SB_playerImage > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.6em;
}

#SB_player > #SB_playerImage:active {
	transform: scale(1.01);
}

#SB_player > name {
	color: rgb(255, 208, 208);
	text-shadow: 0 0 0.1em rgb(0, 0, 0);
	text-align: center;
}

/* ----------------------- Buttom Attribute ----------------------- */
.SB_buttomAttribute {
	width: 100%;
	margin: 0.5em 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

.SB_playerAttribute {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 8vh;
}
.SB_playerAttribute_small {
	min-width: 7vh;
}

.SB_playerAttribute > div {
	position: relative;
	width: 4em;
	height: 4em;
	border: solid 0.2em rgb(126, 30, 30);
	background-color: rgba(19, 19, 19);
	border-radius: 50%;
	/* overflow: hidden; */
	transition: transform 0.3s ease, filter 0.3s ease;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}
.SB_playerAttribute_small > div {
	width: 3em;
	height: 3em;
}

.SB_playerAttribute > div > img {
	/* position: absolute; */
	/* top: 0; */
	/* left: 0; */
	width: 100%;
}
.SB_playerAttribute_small > div > img {
	width: 115%;
}

.SB_playerAttribute > div > qty {
	opacity: 0;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	white-space: nowrap;
	color: inherit;
	background-color: rgba(19, 19, 19, 0.8);
	border-radius: 50%;
	color: rgb(255, 255, 255);
	text-shadow: 0 0 0.1em rgb(0, 0, 0);
	transition: opacity 0.3s ease;
}
.SB_playerAttribute_small > div > qty {
	background: radial-gradient(#000000, transparent);
}

#SB_main:hover .SB_playerAttribute > div > qty {
	opacity: 0.8;
}

#SB_main .SB_playerAttribute > div:hover > qty {
	opacity: 1;
}

.SB_playerAttribute[danger] > div {
	animation: SB_blink2 0.5s infinite alternate;
}

.SB_playerAttribute[danger] > div > qty {
	opacity: 1;
	color: rgb(180, 23, 23);
	animation: SB_blink 0.5s infinite alternate;
}

@keyframes SB_blink {
	from {text-shadow: 0 0 0.2em rgb(252, 252, 252);}
	to {text-shadow: 0 0 0.2em rgb(180, 23, 23);}
}

@keyframes SB_blink2 {
	from {box-shadow: 0 0 1em rgb(252, 252, 252)}
	to {box-shadow: 0 0 0.5em rgb(180, 23, 23)}
}

.SB_playerAttribute > name {
	color: rgb(255, 208, 208);
	text-shadow: 0 0 0.1em rgb(0, 0, 0);
}

/* ----------------------- Buttom Buttons ----------------------- */
#SB_buttomButtons {
	width: 100%;
	margin: 0.5em 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

#SB_buttomButtons > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}

#SB_buttomButtons > div > div {
	width: 4em;
	height: 4em;
	border: solid 0.2em rgb(126, 30, 30);
	border-radius: 50%;
	transition: transform 0.3s ease, filter 0.3s ease;

	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}

#SB_buttomButtons > div:not(.disabled) > div:hover {
	transform: translate(0.1em, -0.2em) rotate(3deg);
	filter: drop-shadow(0 0 0.2em rgba(255, 255, 255, 0.429));
}

#SB_buttomButtons > div.disabled {
	cursor: default;
	color: rgb(139, 139, 139);
}

#SB_buttomButtons > div.disabled > div {
	border-color: rgb(139, 139, 139);
}

#SB_buttomButtons > div.disabled > div > img {
	filter: grayscale(100%);
}

#SB_buttomButtons > div > div > img {
	width: 70%;
}

#SB_buttomButtons > div#SB_save > div > img {
	width: 80%;
	filter: drop-shadow(0 200vh 0 rgb(126, 30, 30));
	transform: translateY(-200vh);
}

/* ----------------------- Links ----------------------- */
#SB_linksCont {
	/*position: absolute;
	bottom: 0;
	left: 0;*/
	width: 100%;
	height: 4.5vh;
	display: flex;
	justify-content: space-evenly;
	float: left;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#SB_linksCont > img {
	height: 100%;
	/*width: 20%;*/
	transition: opacity 0.3s ease;
}

#SB_linksCont > img:hover {
	opacity: 0.6;
	cursor: pointer;
}

/* ----------------------- Tips ----------------------- */

#SB_tipsCont {
	height: 6vh;
	width: 6vh;
	border: solid 0.3vh rgb(126, 30, 30);
    border-radius: 4vh;
	transition: all 0.3s ease;
	margin: auto;
	display: flex;
	text-align: center;
	align-items: center;
	flex-direction: row;
	font-size: 2vh;
	overflow: hidden;
	cursor: pointer;
}

/* The pulsing state class */
#SB_tipsCont.is-pulsing {
    animation: tipsPulse 2s ease-in-out infinite;
}

@keyframes tipsPulse {
    0% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0))
               drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))
               drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0))
               drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}


  #SB_tipsCont > img {
    width: 3vh;
	margin-left: 1.3vh;
	filter: brightness(10000%) saturate(0%);
  }

  #SB_buttomButtons name {
	font-size: 1.1vh;
  }

  #SB_tipsCont:hover {
	width: 90%;
	filter: drop-shadow(0 0 0.2em rgba(255, 255, 255, 0.429));
  }

  #SB_tipsCont:hover .SB_hover-text{
	display: block;
	text-align: center;
	width: 100%;
  }

  .SB_hover-text {
	display: none;
	text-wrap: none;
	white-space: nowrap;
  }

  .tips-blur-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(5px) brightness(0.7);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    animation: tipsFadeIn 0.5s ease forwards;
}

.tips-container {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 50%;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    animation: tipsFadeInUp 0.5s ease forwards;
}

.tips-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
}

.tips-text-container {
    position: absolute;
    top: 10%;
    left: 90%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    animation: tipsFadeIn 0.5s ease forwards;
    animation-delay: 0.25s;
    width: 70vh;
}

.tips-text {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: transform 1s ease-in-out, background 1s ease-in-out, color 1s ease-in-out, box-shadow 0.3s ease;
    box-shadow: 0 0 0.25vw var(--neon-color), 0 0 0.5vw var(--neon-color), 
                inset 0 0 0.25vw var(--neon-color), inset 0 0 0.5vw var(--neon-color);
    border-radius: 1vw;
    pointer-events: none;
    font-size: 2.5vh;
    padding: 1em;
	line-height: 1.3em;
    color: white;
    position: relative;
    min-width: 300px;
}

/* Animations */
@keyframes tipsFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tipsFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes tipsFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

.tips-close-button {
    position: fixed;
    top: 4vh;
    right: 4vh;
    width: 7vh;
    height: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    color: white;
    font-size: 3vh;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 0.25vw var(--neon-color), 0 0 0.5vw var(--neon-color), 
                inset 0 0 0.25vw var(--neon-color), inset 0 0 0.5vw var(--neon-color);
    pointer-events: auto;
    z-index: 1000;
}

.tips-close-button:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}
/* ----------------------- Twine Overwrite ----------------------- */
#ui-bar-body {
	margin: 0;
	height: 100%;
	padding: 0;
}

#ui-bar-body * {
	box-sizing: border-box;
}

#ui-bar.stowed #ui-bar-body {
	visibility: visible; /* was hidden */ /* for map and overlays */
}

#ui-bar-body>:not(:first-child) {
	margin-top: unset;
}

#ui-bar {
	font-size: 1.5vh;
	/*font-size: 3vh;*/
	background-color: rgba(0, 0, 0, 0.8);
	/*transition: all 0.3s ease;*/
	transition-property: background-color, box-shadow, left;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	box-shadow:
		0 0 0.25vw var(--neon-color),
		0 0 0.5vw var(--neon-color),
		inset 0 0 0.25vw var(--neon-color),
		inset 0 0 0.5vw var(--neon-color);
	/*width: 17.5em;*/
	width: 26vh;
	z-index: 50; /* was 50 */
}

#ui-bar-toggle:hover {
	background-color: transparent;
}

#ui-bar-toggle {
	position: absolute;
	right: -12%;
	background-image: url('../../ressources/maingui/ui/ui-arrow.webp');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	height: 5vh;
	width: 3vh;
	transform: rotate(180deg);
	transition: opacity 0.5s ease, rotate 0s ease;
	border: none;
	padding:  50vh 0;
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(61deg) brightness(105%) contrast(101%);
	opacity: 0.4;
}

#ui-bar-toggle:hover {
	opacity: 1;
}

#ui-bar-toggle:before {
	content: ""; /* content: "\e81d"; */
}

#ui-bar.stowed #ui-bar-toggle:before {
	content: ""; /* content: "\e81d"; */
}

#ui-bar.stowed #ui-bar-toggle {
	transform: rotate(360deg);
	transition: opacity 0.5s ease, rotate 0s ease;
	padding:  50vh 0;
}

#ui-bar.stowed {
	left: -17.5em;
}

#story-title {
	display: none;
}

#story-caption {
	position: relative;
	height: 100%;
	color: rgb(255, 208, 208);
	font-family: 'Century Gothic', sans-serif;
	font-weight: bold;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
}

#ui-bar-body>:not(:first-child) {
	margin-top: unset; /* was 2em */
}