#game-section {
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.error-message {
  color: var(--lightColor);
  padding: 2rem;
}

.game-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--lightColor);
  font-size: 1.1rem;
  gap: 0.75rem;
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.game-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--lightColor);
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}

.game-error-container img {
  width: 7.5rem;
  opacity: 0.6;
}

.game-error-container h2 {
  font-size: 1.25rem;
}

.game-error-container p {
  color: var(--tertiaryColor);
}

.game-error-container a {
  color: var(--primaryColor);
  text-decoration: underline;
}

/* ion-grid  → centered content area */
.game-grid {
  width: 100%;
  box-sizing: border-box;
}

/* ion-grid[fixed]  → fixed-width grid for vertical/portrait games */
.game-grid-fixed {
  max-width: 80rem;
  margin: 0 auto;
}

/* ion-row.centered-row  → flex row, centers the card horizontally */
.centered-row {
  display: flex;
  justify-content: center;
}

/* ion-col[size=auto]  → column that only takes as much space as its content */
.game-col-auto {
  width: auto;
  flex: 0 0 auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* =============================================
   GAME CARD  (= ion-card#card in Angular)
   display: flex, flex-direction: row
   [game-area | ion-card-content > .more-options]
   ============================================= */
#game-card {
  background-color: var(--greyBackgroundLight);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  position: relative;
  /* JS sets width/height dynamically via recalculateGameSize() */
  overflow: hidden;
  /* Safety: never exceed viewport */
  max-width: 100vw;
  max-height: calc(100dvh - 5.5rem);
}

/* =============================================
   GAME CONTAINER  (iframe / ruffle wrapper)
   JS drives width/height — CSS only provides fallback
   ============================================= */
#game-container {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* Prevent sidebar from squashing the game */
  max-width: calc(100vw - 4.5996rem);
  max-height: 100%;
}

#game-container>div {
  height: 100%;
  width: 100%;
}

#game-container iframe,
#game-container object,
#game-container ruffle-object {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =============================================
   GAME CARD CONTENT  (= ion-card-content)
   Wraps the .more-options sidebar
   ============================================= */
.game-card-content {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  padding: 0;
}

/* =============================================
   MORE-OPTIONS SIDEBAR  (= .more-options in Angular)
   Identical to Angular's ion-card-content > .more-options
   ============================================= */
.more-options {
  display: flex;
  justify-content: flex-end;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.4rem;
  width: 4.5996rem;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
}

/* Separator line between button groups (= <p class="separation"> in Angular) */
.separation {
  border-top: 0.0625rem solid var(--greyBackgroundLightest);
  width: 2.6rem;
  margin: 0;
  height: 0;
  padding: 0;
  display: block;
}

/* =============================================
   ASPECT-RATIO RESOLUTION CLASSES
   (mirrors game-container.component.scss)
   ============================================= */
.res21by9 {
  aspect-ratio: 21/9;
}

.res16by7 {
  aspect-ratio: 16/7;
}

.res25by11 {
  aspect-ratio: 25/11;
}

.res20by9 {
  aspect-ratio: 20/9;
}

.res19by9 {
  aspect-ratio: 19/9;
}

.res35by17 {
  aspect-ratio: 35/17;
}

.res18by9 {
  aspect-ratio: 18/9;
}

.res39by20 {
  aspect-ratio: 39/20;
}

.res27by14 {
  aspect-ratio: 27/14;
}

.res21by11 {
  aspect-ratio: 21/11;
}

.res17by9 {
  aspect-ratio: 17/9;
}

.res26by14 {
  aspect-ratio: 26/14;
}

.res9by5 {
  aspect-ratio: 9/5;
}

.res16by9 {
  aspect-ratio: 16/9;
}

.res7by4 {
  aspect-ratio: 7/4;
}

.res12by7 {
  aspect-ratio: 12/7;
}

.res22by13 {
  aspect-ratio: 22/13;
}

.res5by3 {
  aspect-ratio: 5/3;
}

.res13by8 {
  aspect-ratio: 13/8;
}

.res8by5 {
  aspect-ratio: 8/5;
}

.res19by12 {
  aspect-ratio: 19/12;
}

.res11by7 {
  aspect-ratio: 11/7;
}

.res17by11 {
  aspect-ratio: 17/11;
}

.res20by13 {
  aspect-ratio: 20/13;
}

.res29by19 {
  aspect-ratio: 29/19;
}

.res6by4 {
  aspect-ratio: 6/4;
}

.res64by43 {
  aspect-ratio: 64/43;
}

.res65by44 {
  aspect-ratio: 65/44;
}

.res32by22 {
  aspect-ratio: 32/22;
}

.res10by7 {
  aspect-ratio: 10/7;
}

.res7by5 {
  aspect-ratio: 7/5;
}

.res11by8 {
  aspect-ratio: 11/8;
}

.res4by3 {
  aspect-ratio: 4/3;
}

.res21by16 {
  aspect-ratio: 21/16;
}

.res9by7 {
  aspect-ratio: 9/7;
}

.res14by11 {
  aspect-ratio: 14/11;
}

.res10by8 {
  aspect-ratio: 10/8;
}

.res11by9 {
  aspect-ratio: 11/9;
}

.res18by15 {
  aspect-ratio: 18/15;
}

.res20by17 {
  aspect-ratio: 20/17;
}

.res18by16 {
  aspect-ratio: 18/16;
}

.res11by10 {
  aspect-ratio: 11/10;
}

.res14by13 {
  aspect-ratio: 14/13;
}

.res18by17 {
  aspect-ratio: 18/17;
}

.res33by34 {
  aspect-ratio: 33/34;
}

.res1by1 {
  aspect-ratio: 1/1;
}

.res17by18 {
  aspect-ratio: 17/18;
}

.res16by18 {
  aspect-ratio: 16/18;
}

.res15by18 {
  aspect-ratio: 15/18;
}

.res17by21 {
  aspect-ratio: 17/21;
}

.res8by10 {
  aspect-ratio: 8/10;
}

.res15by19 {
  aspect-ratio: 15/19;
}

.res7by9 {
  aspect-ratio: 7/9;
}

.res15by20 {
  aspect-ratio: 15/20;
}

.res5by7 {
  aspect-ratio: 5/7;
}

.res9by13 {
  aspect-ratio: 9/13;
}

.res17by25 {
  aspect-ratio: 17/25;
}

.res4by6 {
  aspect-ratio: 4/6;
}

.res15by23 {
  aspect-ratio: 15/23;
}

.res10by15 {
  aspect-ratio: 10/15;
}

.res10by16 {
  aspect-ratio: 10/16;
}

.res11by18 {
  aspect-ratio: 11/18;
}

.res9by15 {
  aspect-ratio: 9/15;
}

.res10by17 {
  aspect-ratio: 10/17;
}

.res16by28 {
  aspect-ratio: 16/28;
}

.res9by16 {
  aspect-ratio: 9/16;
}

.res10by18 {
  aspect-ratio: 10/18;
}

.res18by33 {
  aspect-ratio: 18/33;
}

.res8by15 {
  aspect-ratio: 8/15;
}

.res12by23 {
  aspect-ratio: 12/23;
}

.res18by35 {
  aspect-ratio: 18/35;
}

.res8by16 {
  aspect-ratio: 8/16;
}

.res7by16 {
  aspect-ratio: 7/16;
}

/* not-display: mobile games — iframe hidden until fullscreen (= .not-display in Angular) */
.not-display {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  flex: 0 !important;
}

/* =============================================
   IMAGE + PLAY BUTTON  (pre-game cover)
   = #game-image-container in Angular
   ============================================= */
#game-image-container {
  position: relative;
  flex: 1;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#game-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  display: block;
}

/* h4 warning (Angular uses <h4> for "no mobile" message) */
#game-image-container .not-mobile-warning {
  position: absolute;
  top: calc(50% - 0.625rem);
  left: calc(50% - 2.5rem);
  transform: translate(-50%, -50%);
  color: var(--lightColor);
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  padding: 1rem 2rem;
  max-width: 90%;
  line-height: 1.5;
}

/* Play button (ion-button equivalent) */
#btn-play {
  position: absolute;
  top: 50%;
  left: calc(50% - 2.5996rem);
  transform: translate(-50%, -50%);
  background-color: var(--primaryColor);
  color: var(--lightColor);
  border: none;
  border-radius: 3.125rem;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s, transform 0.15s;
  white-space: nowrap;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
  margin-bottom: 0;
}

#btn-play:hover {
  background-color: var(--secundaryDarkColor);
  transform: translate(-50%, -50%) scale(1.05);
}

#btn-play svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* =============================================
   ICON BUTTONS  (= ion-button in .more-options)
   ============================================= */
.game-option-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0.0625rem solid;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.313rem;
  margin: 0;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  text-decoration: none;
}

.game-option-btn img,
.game-option-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Normal buttons — share, favourite, fullscreen */
.game-option-btn.btn-normal {
  border-color: var(--primaryColor);
  color: var(--primaryColor);
}

.game-option-btn.btn-normal img,
.game-option-btn.btn-normal svg {
  filter: invert(56%) sepia(51%) saturate(3015%) hue-rotate(189deg) brightness(101%) contrast(102%);
}

.game-option-btn.btn-normal:hover {
  border-color: var(--secundaryColor);
  color: var(--secundaryColor);
}

.game-option-btn.btn-normal:hover img,
.game-option-btn.btn-normal:hover svg {
  filter: invert(24%) sepia(97%) saturate(1236%) hue-rotate(190deg) brightness(89%) contrast(103%);
}

/* Alert button — report */
.game-option-btn.btn-alert {
  border-color: var(--alertColor);
  color: var(--alertColor);
}

.game-option-btn.btn-alert:hover {
  border-color: var(--alertDarkColor);
  color: var(--alertDarkColor);
}

.game-option-btn.btn-alert:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Favourite button active state (= .confirmation in Angular) */
.game-option-btn.btn-favourite-active {
  border-color: var(--alertColor) !important;
  color: var(--alertColor) !important;
}

.game-option-btn.btn-favourite-active img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(6011%) hue-rotate(345deg) brightness(91%) contrast(106%) !important;
}

/* Favourite icon width (1.5744rem as Angular) */
.favourite-icon img,
#btn-favourite img {
  width: 1.5744rem;
  height: 1.5744rem;
}

/* =============================================
   TOAST / POPOVER NOTIFICATION
   (= ion-popover in Angular)
   ============================================= */
#favourite-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1.25rem);
  background-color: var(--greyBackgroundLightest);
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-weight: bold;
  font-size: 0.9rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#favourite-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#favourite-toast.toast-added {
  color: var(--alertColor);
}

#favourite-toast.toast-removed {
  color: var(--primaryColor);
}

/* =============================================
   RESPONSIVE — mobile adjustments
   ============================================= */
@media (max-width: 47.9375rem) {
  /* JS handles sizing on desktop only */
}

/* =============================================
   GAME INFORMATION SECTION
   ============================================= */
#more-information {
  background-color: var(--greyBackgroundLight);
  border-radius: 0.5rem;
  margin: 2rem auto;
  width: 100%;
  max-width: 96vw;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 1rem var(--boxShadow);
}

.info-header {
  display: flex;
  align-items: center;
  flex-flow: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.info-title {
  color: var(--lightColor);
  font-size: 1.75rem;
  font-weight: bold;
  margin: 0;
}

.info-title-badges {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.info-badge {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
}

.info-badge.secondary {
  background-color: #3dc2ff;
  /* ion-color-secondary equivalent */
}

.info-badge.tertiary {
  background-color: #5260ff;
  /* ion-color-tertiary equivalent */
}

.info-badge svg {
  width: 0.875rem;
  height: 0.875rem;
}

.content-section {
  margin-top: 2rem;
}

.content-section:first-child {
  margin-top: 0;
}

.content-section h2 {
  color: var(--lightColor);
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 0.0625rem solid var(--greyBackgroundLightest);
}

.content-section p {
  color: var(--tertiaryColor);
  font-size: 1rem;
  line-height: 1.5;
}

.categoryChips {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: .5rem;
  gap: .25rem;
}

.category-chip {
  font-size: 1rem;
  height: max-content;
  background-color: var(--primaryColor);
  color: var(--lightColor);
  padding: 0.4rem 0.8rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: opacity 0.2s;
  border: none;
  text-decoration: none;
}

.category-chip:hover {
  opacity: .8;
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: .5rem;
  gap: .5rem;
}

.download-button {
  background-color: var(--greyBackground);
  color: var(--lightColor);
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
  width: 100%;
}

.download-button:hover {
  background-color: var(--greyBackgroundDark);
}

.download-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Instructions */
.instructions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.instruction {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
}

.instruction.line-break {
  width: 100%;
}

.instruction p {
  color: var(--tertiaryColor);
  font-size: 1rem;
  padding-right: .5rem;
  width: fit-content;
  font-weight: bold;
  margin: 0;
}

.instruction .actions {
  display: flex;
  flex-direction: row;
  gap: .5rem;
}

.instruction .element,
.instruction .element-child {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: max-content;
}

.instruction .actions p {
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  font-weight: bold;
}

.instruction .element-child p {
  font-weight: normal !important;
  padding-right: 0 !important;
}

.instruction img {
  height: 2rem;
  width: auto;
}

/* =============================================
   SIMILAR GAMES SECTION (app-games-row-section)
   ============================================= */
.similar-games-section {
  background-color: var(--greyBackgroundLight);
  border-radius: 0.5rem;
  margin: 2rem auto;
  width: 100%;
  max-width: 96vw;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 1rem var(--boxShadow);
  position: relative;
  box-sizing: border-box;
}

.similar-games-section h5 {
  margin: 0 0 1rem 0.5rem;
  font-weight: bold;
  color: var(--lightColor);
  font-size: 1.25rem;
}

.similar-games-row-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.similar-games-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 1rem;
  padding: 0.5rem;
  width: 100%;
}

.similar-games-row::-webkit-scrollbar {
  display: none;
}

.similar-game-item {
  flex: 0 0 9rem;
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  text-align: center;
}

.similar-game-item:hover {
  transform: scale(1.05);
}

.similar-game-item img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  display: block;
}

.similar-game-overlay {
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--boxShadowHover);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
  border-radius: 0.5rem;
}

.similar-game-item:hover .similar-game-overlay {
  visibility: visible;
  opacity: 1;
}

.similar-game-name {
  height: fit-content;
  text-align: start;
  padding: 0.5rem;
  margin: 0;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--lightColor);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.scroll-arrow {
  position: absolute;
  width: 3rem;
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.3s;
  top: 50%;
  transform: translateY(-50%);
}

.scroll-arrow.left {
  left: 0;
  background: linear-gradient(to left, transparent, var(--greyBackgroundLight));
  justify-content: flex-start;
}

.scroll-arrow.right {
  right: 0;
  background: linear-gradient(to right, transparent, var(--greyBackgroundLight));
  justify-content: flex-end;
}

.scroll-arrow i {
  color: var(--lightColor);
  filter: drop-shadow(0.1875rem 0.3125rem 0.125rem rgb(0 0 0 / 0.4));
}

.scroll-arrow i svg {
  width: 2rem;
  height: 2rem;
}

@media (max-width: 62rem) {
  .similar-games-section {
    padding: 1rem;
    margin: 1.5rem auto;
  }

  .similar-game-item {
    flex: 0 0 8rem;
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
  }
}

/* =============================================
   REPORT GAME MODAL
   ============================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(0.25rem);
}

.modal-overlay.show {
  display: flex;
}

.modal-container {
  background-color: var(--greyBackground);
  width: 90%;
  max-width: 31.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.5);
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(1.875rem);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  background-color: var(--greyBackground);
  color: var(--lightColor);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.0625rem solid var(--greyBackgroundLightest);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--lightColor);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.modal-close:hover {
  opacity: 0.7;
}

.modal-body {
  padding: 2rem;
  color: var(--lightColor);
}

.modal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.modal-icon {
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.5rem;
}

.modal-icon.error-icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(6011%) hue-rotate(345deg) brightness(91%) contrast(106%);
}

.modal-state h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.modal-state p {
  color: var(--lightColor);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 1rem;
}

.modal-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 0.25rem;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-btn.confirm {
  background-color: var(--primaryColor);
  color: var(--lightColor);
  border: none;
}

.modal-btn.confirm:hover {
  background-color: var(--secundaryDarkColor);
}

.modal-btn.cancel {
  background-color: transparent;
  color: var(--primaryColor);
  border: 0.125rem solid var(--primaryColor);
}

.modal-btn.cancel:hover {
  background-color: rgba(61, 194, 255, 0.1);
}

@media (max-width: 36rem) {
  .modal-container {
    width: 95%;
  }

  .modal-body {
    padding: 1.5rem;
  }

  .modal-state h1 {
    font-size: 1.25rem;
  }
}

@media (max-width: 36rem) {
  .similar-game-item {
    flex: 0 0 7rem;
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
  }
}