/* =========================================================
   GAMEOTHEQUE PAGE
   ========================================================= */

/* Page parallax layout */
#gameotheque-page .parallax-item:nth-child(1) {
	position: relative;
	min-height: 600px;
	overflow: hidden;
}

#gameotheque-page .parallax-item:nth-child(2) {
	min-height: 30vh;
	height: auto;
	margin-top: 10vh;
	margin-bottom: 10vh;
	z-index: 2;
}

#gameotheque-page .parallax-item:nth-child(3) {
	min-height: 50vh;
	justify-content: flex-start;
	height: auto;
	z-index: 2;
}

#gameotheque-page .parallax-item .row {
  position: relative;
  max-width: var(--xds-page-max-width);
  width: min(100%, var(--xds-page-max-width));
  margin-inline: auto;
}

#gameotheque-page .parallax-item:nth-child(2) .row {
  position: relative;
  max-width: var(--xds-page-max-width);
}


.my-wrapper {
  width: 100%;
  margin: 8vh auto 5vh auto;
}

.gameotheque-richtext--lead p,
.gameotheque-richtext--lead li {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}

.gameotheque-richtext img {
	max-width: 100%;
	height: auto;
	border-radius: 15px;
	margin: 20px 0;
	filter: drop-shadow(0 5px 15px #00000038);
}

.gameotheque-richtext iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 15px;
}

.is-hidden {
	display: none;
}

/* Sidebar & Offcanvas */
.bg-custom-filters {
	background-color: #ffffff;
}

@media (max-width: 991.98px) {
	.sidebar {
		display: none;
	}
}

@media (max-width: 459.98px) {
	.display-3 {
		font-size: calc(1.325rem + 1vw);
	}
}

/* Cards and rating */
.btn-primary {
	background-color: #0d6efd;
	border-color: #0d6efd;
}

.card-game:hover {
  box-shadow: var(--xds-shadow-mini);
}

#gameotheque-page .card-game .card-img {
  transform: scale(1);
  transition: transform 0.35s ease;
}

#gameotheque-page .card-game:hover .card-img {
  transform: scale(1.015);
  will-change: transform;
}

@media screen and (max-width: 769px) {
  #gameotheque-page .card-game:hover .card-img {
    transform: none;
  }
}

.star-rating {
	color: gold;
	font-size: 1.2em;
}

/* Star Rating */
.star-rating-display {
	font-size: 1.5em;
	unicode-bidi: bidi-override;
	color: #414141;
	display: inline-block;
	position: relative;
}

.star-rating-display:before,
.star-rating-display:after {
	font-family: "FontAwesome";
	content: "    ";
	display: inline-block;
	white-space: nowrap;
}

.star-rating-display:before {
	color: #ffd200;
	position: absolute;
	z-index: 1;
	left: 0px;
	overflow: hidden;
}

.star-rating-display:after {
	z-index: 0;
}

.star-rating-display[data-average-score="0"]:before {
	width: 0%;
}

.star-rating-display[data-average-score="1"]:before {
	width: 20%;
}

.star-rating-display[data-average-score="2"]:before {
	width: 40%;
}

.star-rating-display[data-average-score="3"]:before {
	width: 60%;
}

.star-rating-display[data-average-score="4"]:before {
	width: 80%;
}

.star-rating-display[data-average-score="5"]:before {
	width: 100%;
}

.star-filter i {
	cursor: pointer;
	color: #ccc;
	font-size: 1.5rem;
	transition: color 0.2s;
}

.star-filter i.active {
	color: #ffd200;
}

/* Modal Gameotheque */
#gameModal .modal-content,
#gameModal .modal-header,
#gameModal .modal-body,
#gameModal .modal-title,
#gameModal .game-modal-meta-label,
#gameModal #modalGameTime,
#gameModal #modalGameDesc {
	color: var(--bs-body-color);
}

#gameModal #modalGameDesc {
	font-size: 1rem;
}

[data-bs-theme="dark"] #gameModal .star-rating-display {
	color: rgba(255, 255, 255, 0.38);
}

[data-bs-theme="dark"] #gameModal #modalGameDesc pre,
[data-bs-theme="dark"] #gameModal #modalGameDesc .page-break__label,
[data-bs-theme="dark"] #gameModal #modalGameDesc .image > figcaption,
[data-bs-theme="dark"] #gameModal #modalGameDesc .table > figcaption,
[data-bs-theme="dark"] #gameModal #modalGameDesc figure.table > table > caption {
	color: var(--bs-body-color);
}

#gameModal .modal-title {
	line-height: 1.1;
	word-break: break-word;
}

.game-modal-close-overlay {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: rgb(169 169 169 / 22%);
    backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.game-modal-close-overlay svg {
	color: #fff !important;
}

.modal .inner {
	position: relative;
}

#modalGameBg,
#gameotheque-page .card-game img {
	display: block;
}

#gameotheque-page .card-game button > img {
	transform: scale(1.05);
}

.game-modal-meta-time {
	flex-wrap: wrap;
	align-items: center;
}

.game-modal-meta-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}

.card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

@media (max-width: 575.98px) {
	#gameModal .modal-title {
		font-size: 1.35rem;
	}

	.game-modal-meta {
		gap: 0.35rem;
	}

	.game-modal-meta-time {
		margin-right: 0 !important;
	}

	#gameModal .star-rating-display {
		font-size: 1.15em;
	}
}