/* Source: themes/zontal/css/style.css */
:root {
  --ghv-brand-cyan: #22dff8;
  --ghv-brand-blue: #1d7cff;
  --ghv-brand-purple: #7b4dff;
  --ghv-brand-pink: #e24bff;
  --ghv-brand-gradient: linear-gradient(90deg, #22dff8 0%, #1d7cff 34%, #7b4dff 68%, #e24bff 100%);
  --ghv-brand-glow: 0 0 14px rgba(34, 223, 248, 0.18), 0 0 22px rgba(123, 77, 255, 0.12);
}

body {
  background: var(--zon-body-bg-color);
  color: var(--zon-common-text-color);
}

* {
  scroll-behavior: smooth;
}

.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid var(--zon-cursor-color);
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + 15px), -50%);
  z-index: 9999999999999;
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: var(--zon-cursor-color);
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999999999999;
  transition: width .3s, height .3s, opacity .3s;
}

.cursorinnerhover {
  width: 50px;
  height: 50px;
  opacity: .5;
}

.text-muted {
  color: var(--zon-muted-color);
}

.link-hover {
  background: var(--ghv-brand-gradient);
}

.zontal-sidebar-head {
  padding: 0 15px;
}



.zontal-sidebar {
  position: sticky;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  /* height: 100%; */
  /* background: #000; */
  padding: 10px 10px;
  overflow: scroll;
  z-index: 999;
}

.zontal-sidebar::-webkit-scrollbar {
  display: none;
}

.zontal-sidebar .burger-menu path {
  stroke: var(--zon-common-text-color);
}

.zontal-sidebar-body .list path {
  stroke: var(--zon-common-text-color);
}

.zontal-sidebar-body .list  {
  box-sizing: border-box;
}

.zontal-sidebar-body .list a {
  transition: 0.4s;
  padding-left: 15px;
  /* border: 1px solid transparent; */
  padding-right: 15px;
}

.sb-divider {
  padding: 0 15px;
}

/* .zontal-sidebar-body .list a:hover {
    background: var( --zon-theme-color);
} */

.sb-divider {
  color: var(--zon-div-color);
  letter-spacing: 1px;
}

.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-clamp-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}


.z-container {
  max-width: 1800px;
  margin: auto;
  width: 100%;
  /* min-height: 100vh; */
  box-sizing: border-box;
}

.zontal-start {
  padding: 6px 10px;
}

.search-bar path {
  stroke: var(--zon-common-text-color);
}

.zontal-sidebar-body .game-list path {
  stroke: var(--zon-common-text-color);
}

.zontal-sidebar-body .game-list svg {
  height: 29px;
  width: 29px;
}

.zontal-sidebar-body .game-list a {
  padding: 2px 10px;
}

/* .zontal-sidebar-body a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
} */

.swiper-pagination-bullet {
  border: 1px solid #1da1f2;
}

.swiper-pagination-bullet-active {
  background: #1da1f2;
}

img:not([draggable]),
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical>.swiper-wrapper {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.swiper-container-multirow>.swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: -webkit-transform, height;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000;
}

.swiper-container-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 5px 0;
  display: block;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

.swiper-pagination-progress {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progress .swiper-pagination-progressbar {
  background: var(--ghv-brand-gradient);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  -webkit-transform-origin: right top;
  transform-origin: right top;
}

.swiper-container-horizontal>.swiper-pagination-progress {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical>.swiper-pagination-progress {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-progress.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  background: #fff;
}

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  background: #000;
}

.swiper-container-3d {
  -webkit-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear,
      left top,
      right top,
      from(rgba(0, 0, 0, 0.5)),
      to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
  background-image: linear-gradient(to left,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear,
      right top,
      left top,
      from(rgba(0, 0, 0, 0.5)),
      to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 0.5)),
      to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(bottom,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear,
      left bottom,
      left top,
      from(rgba(0, 0, 0, 0.5)),
      to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0));
}

.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
  -ms-perspective: 1200px;
}

.swiper-container-cube,
.swiper-container-flip {
  overflow: visible;
}

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-container-cube .swiper-slide {
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal>.swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical>.swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.swiper-container.one {
  padding-top: 40px;
  text-align: center;
}

.swiper-container.one .swiper-slide {
  /* padding: 0 43px; */
}

.swiper-container {
  width: 100%;
  padding-bottom: 60px;
}

.swiper-slide img {
  display: block;
  /* margin: auto; */
  width: 100%;
}

.swiper-slide {
  width: 70%;
  height: auto;
  /* padding: 0 15px; */
}

.two .swiper-slide {
  width: 50%;
}

.swiper-slide img {
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
  border-radius: 10px;
}

.swiper-slide .slider-image .preview-icon {
  z-index: -1;
  width: calc(100% - 30px);
}

.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  z-index: 1;
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 0;
}

.swiper-pagination-bullet {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #ee0f6f;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 26px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.swiper-pagination-bullet-active {
  background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left,
      #ee0f6f 0%,
      #f89482 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
  border: medium none;
  height: 12px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 12px;
}

.game-card {
  position: relative;
  width: 300px;
  transition: .4s;
}

.game-card:hover {
  transform: translateY(10px);
}

.game-card a {
  transition: .4s;
}

.game-card a:hover {
  color: var(--ghv-brand-cyan);
}

.game-card img {
  width: 100%;
  height: 140px;
  overflow: hidden;
  object-fit: cover;
  border-radius: 8px;
}

.game-card path {
  stroke: var(--zon-common-text-color);
}

.game-card svg {
  /* width: 12px;
  height: 12px; */
}

.game-card .game-details {
  padding: 4px 6px;
}

.game-card .game-meta {
  white-space: nowrap;
}

.scroll-none::-webkit-scrollbar {
  display: none;
}


@media screen and (max-width: 1102px) {
  .zontal-sidebar {
    width: 70px;
    background: var(--zon-body-bg-color) !important;
    z-index: 99;
  }

  .zontal-sidebar-footer {
    display: none !important;
  }

  .zontal-sidebar .logo {
    display: none;
  }

  .zontal-sidebar .icon-label {
    display: none;
  }

  .zontal-sidebar hr {
    display: block !important;
  }

  .zontal-sidebar .sb-divider {
    display: none;
  }

  .zontal-sidebar .text {
    display: none;
  }

  .zontal-sidebar .more-button {
    display: none;
  }

  .zontal-sidebar.active {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
  }

  .zontal-sidebar.active .zontal-sidebar-footer {
    display: flex !important;
  }

  .zontal-sidebar.active .text {
    display: block;
  }

  .zontal-sidebar.active .more-button {
    display: flex;
    z-index: 999;
  }

  .zontal-sidebar.active .sb-divider {
    display: block;
  }

  .zontal-sidebar.active .icon-label {
    display: block;
  }

  .zontal-sidebar.active hr {
    display: none !important;
  }

  .zontal-sidebar.active .logo {
    display: block;
  }

  .z-container {
    max-width: 1500px !important;
    width: auto !important;
    /* margin: 0 !important; */
  }


  .zontal-sidebar.active .overlay {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* background: var(--zon-overlay-bg-color); */
    z-index: 0 !important;
  }

  .zontal-sidebar.active {
    box-shadow: var(--zon-sidebar-shadow);
  }

}

@media screen and (max-width: 1518px) {
  .z-container {
    max-width: 1200px !important;
    width: auto !important;
  }
}

@media screen and (max-width: 1252px) {
  .z-container {
    max-width: 1000px !important;
    width: auto !important;
  }
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar {
    display: none;
  }

  /* .zontal-sidebar .burger-menu {
    display: none;
  } */

  header .bm-sm {
    display: block !important;
  }

  .zontal-sidebar.active {
    display: block;
  }

}

@media screen and (max-width: 614px) {
  .search-bar {
    width: 100% !important;
  }
}

@media screen and (max-width: 707px) {
  .profile .text {
    display: none;
  }
}

@media screen and (max-width: 444px) {
  .theme-changer {
    display: none !important;
  }
}

@media screen and (max-width: 344px) { 
  .profile {
    width: 3rem !important;
  }
}

header .bm-sm {
  display: none;
}

.zontal-sidebar .burger-menu {
  cursor: pointer;
}

.zontal-sidebar .burger-menu:active {
  background: var(--zon-muted-color);
}

.zontal-sidebar hr {
  display: none;
}

.zontal-sidebar {
  transition: width .6s;
  z-index: 99;

}

.profile:hover .dropdown-menu {
  right: 0;
  opacity: 1;
  visibility: visible;
}

.dropdown-menu {
  position: absolute;
  right: 40px;
  opacity: 0;
  padding: 5px;
  top: 40px;
  width: 160px;
  background: var(--zon-body-bg-color);
  z-index: 999999;
  border-radius: 5px;
  visibility: hidden;
  transition: .2s;
}

.dropdown-menu ul li a {
  display: block;
  padding: 7px 6px;
  font-size: 14px;
  text-transform: capitalize;
  color: var(--zon-common-text-color);
}

.left-pagination {
  left: 0;
  margin-left: 10px;
}

.m-slider-container:hover .pagination-container {
  top: 50%;
  opacity: 1;
  visibility: visible;
}

.left-pagination button {
  margin-left: 20px;
}

.right-pagination button {
  margin-right: 20px;
}


.right-pagination {
  right: 0;
  margin-right: 10px;
}

.pagination-container {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  top: 60%;
  /* height: 100%; */
  transform: translateY(-50%);
  z-index: 99;
  left: 0;
  transition: .5s;
  opacity: 0;
  visibility: hidden;
}


.Pagination button {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--zon-body-bg-color);
  box-sizing: border-box;
  box-shadow: 0px 0px 10px 0px #111;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}

.pag-cur {
  height: 30px !important;
  width: 30px !important;
  background: var(--zon-cursor-color) !important;
}


/* .Pagination::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background: red;
} */

.zontal-sidebar-body a,
.zontal-sidebar-body #zon-category-loader {
  position: relative;
  z-index: 1;
}

.zontal-sidebar-body a::before,
.zontal-sidebar-body #zon-category-loader::before {
  content: '';
  position: absolute;
  height: 100%;
  right: 0;
  transition: .6s;
  width: 100%;
  background-image: linear-gradient(90deg, rgba(34, 223, 248, 0.08) 0%, rgba(29, 124, 255, 0.18) 35%, rgba(123, 77, 255, 0.18) 68%, rgba(226, 75, 255, 0.12) 100%);
  border-right: 1px solid var(--ghv-brand-cyan);
  box-shadow: inset 0 0 0 1px rgba(34, 223, 248, 0.05), var(--ghv-brand-glow);
  opacity: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  z-index: -1;
}

.zontal-sidebar-body a.active-page:before {
  opacity: 1;
}

.zontal-sidebar-body a.active-page span {
  color: #fff;
}

.zontal-sidebar-body a.active-page svg path{
  stroke: #fff;
}

.zontal-sidebar-body a.active-page p {
  color: #fff !important;
}

.zontal-sidebar-body a:hover:before,
.zontal-sidebar-body #zon-category-loader:not(:disabled):hover::before {
  /* width: 2px; */
  opacity: 1;
}

.zontal-sidebar-body a:hover span,
.zontal-sidebar-body #zon-category-loader:not(:disabled):hover span {
  color: #fff;
}

.zontal-sidebar-body a:hover svg path,
.zontal-sidebar-body #zon-category-loader:not(:disabled):hover svg path {
  stroke: #fff;
}

.zontal-sidebar-body a:hover p,
.zontal-sidebar-body #zon-category-loader:not(:disabled):hover p {
  color: #fff !important;
}

.zontal-sidebar .category-list  a {
  /* padding-left: 15px; */
  /* padding-right: 15px; */
  padding: 2px 15px;
  margin-top: 10px;

}

.zontal-sidebar .category-list  a:hover svg path {
  stroke: #fff !important;
} 

.more-button {
  transition: .2s;
  margin-top: 20px;
}

.more-button:hover {
  background: var(--ghv-brand-gradient) !important;
  color: #fff;
}

.more-button:hover path {
  stroke: #fff !important;
}

.list-cursor-effect {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  opacity: 0;
}

.add-border {
  /* border: 1px solid var(--zon-common-text-color); */
}

.wrapper {
  height: 39px;
  width: 59px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.wrapper input {
  height: 39px;
  width: 39px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 50%;
  background: var(--zon-toggler-bg-color);
  cursor: pointer;
}

.wrapper input:checked ~ svg path {
  stroke: #fff;
}

.wrapper input:checked {
  background: orangered;
}

.wrapper svg {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  /* display: none; */
}

.wrapper svg.active-icon {
  top: 50%;
  opacity: 1;
  visibility: visible;
}

.wrapper svg path {
  stroke: var(--zon-icon-color);
}



/* @media screen and (max-width: 2250px) { */
  .zontal-sidebar.close {
    width: 70px;
    background: var(--zon-body-bg-color) !important;
    z-index: 99;
  }

  .zontal-sidebar.close .logo {
    display: none;
  }

  .zontal-sidebar.close .zontal-sidebar-footer {
    display: none !important;
  }

  .zontal-sidebar.close .icon-label {
    display: none;
  }

  .zontal-sidebar.close hr {
    display: block !important;
  }

  .zontal-sidebar.close .sb-divider {
    display: none;
  }

  .zontal-sidebar.close .text {
    display: none;
  }

  .zontal-sidebar.close .more-button {
    display: none;
  }

/* } */

.page-heading {
  position: relative;
}

.page-heading::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 40px;
  border-radius: 10px;
  height: 4px;
  background: var(--ghv-brand-gradient);
  box-shadow: var(--ghv-brand-glow);
}

@media screen and (max-width: 640px) {
  .rounded-lg .game-card {
    width: 100% !important;
  }
}

.game-action-buttons {
  transition: .1s;
  background: var(--zon-search-bg-color);
  color: var(--zon-muted-color);
}

.game-action-buttons:hover {
  transition: .1s;
  background: var(--ghv-brand-gradient) !important;
  color: #fff;
}

.game-action-buttons:hover path {
  transition: .1s;
  stroke: #fff !important;
}


.main-gameplay {
  width: 100%;
}

.main-gameplay .game-frame {
  position: relative;
  height: 600px;
  display: block;
}

.sidebar {
  width: calc(500px * 2);
  height: 100vh;
}

@media screen and (max-width: 1523px) {
  .game-play-container {
    flex-direction: column;
  }

  .game-play-container .sidebar {
    width: 100% !important;
  }
}

@media screen and (max-width: 670px) {
  .game-meta-container {
    flex-direction: column-reverse;
  }
}

.share-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: var(--zon-overlay-bg-color);
}

.share-modal .modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  background: var(--zon-body-bg-color);
  transform: translate(-50%,-50%);
  height: auto;
  min-height: 300px;
  border-radius: 20px;
  box-shadow: var(--zon-sidebar-shadow);
  padding: 60px;
}

.ads img {
  border-radius: 10px;
}

.bg-blog-banner {
  position: absolute;
  left: 0;
  height: 40vh;
  overflow: hidden;
  width: 100%;
  /* background-attachment: fixed; */
  object-fit: cover;
  z-index: -1;
}

.bg-blog-banner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.bg-blog-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000000e5, #000000e5);
}

.blog-container {
  max-width: 900px;
  margin: auto;
  z-index: 999;
}

@media screen and (max-width: 577px) {
  .blog-meta-details {
    flex-direction: column;
  }
  .bg-blog-banner {
    height: 60vh;
  }
}

@media screen and (max-width: 512px) {
  .search-bar {
    position: static !important;
  }
  .live-search {
    width: 100% !important;
  }  
}

.search-bar .clicker {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.liked {
  background: var(--ghv-brand-gradient);
  color: #fff;
}

.liked path {
  stroke: #fff !important;
}


@media screen and (max-width: 800px) {
  .register-button {
    display: none !important;
  }
}

@media screen and (max-width: 452px) { 
  .pagination-container {
    display: flex !important;
    top: 50%;
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
}

/* GameHubVerse homepage/sidebar repair */
.zontal-sidebar {
  flex: 0 0 260px;
}
.zontal-sidebar.close {
  flex: 0 0 70px;
}
.zontal-home {
  padding: 18px 0 60px;
}
.zontal-home-section {
  margin-bottom: 42px;
}
.zontal-home-section .heading {
  margin-bottom: 16px;
}
.zontal-home-section .heading h2 {
  position: relative;
  padding-bottom: 10px;
}
.zontal-home-section .heading h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 4px;
  border-radius: 20px;
  background: var(--ghv-brand-gradient);
  box-shadow: var(--ghv-brand-glow);
}
.zontal-home-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 18px;
}
.zontal-home-card {
  min-width: 0;
}
.zontal-home-card img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
  background: var(--zon-gmeta-bg-color);
}
.zontal-home-card .game-details {
  padding: 7px 2px 0;
}
.zontal-home-card .game-title {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--zon-common-text-color);
  transition: color .25s ease;
}
.zontal-home-card .game-title:hover {
  color: var(--ghv-brand-cyan);
}
.zontal-home-card .game-category {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: var(--zon-muted-color);
}
.zontal-home-card .game-meta {
  width: fit-content;
  margin-top: 8px;
  font-size: 11px;
  white-space: nowrap;
}
.zontal-home-footer {
  margin-top: 30px;
  padding: 26px;
  border-radius: 16px;
  background: var(--zon-gmeta-bg-color);
  color: var(--zon-common-text-color);
}
.zontal-home-footer h1,
.zontal-home-footer h2,
.zontal-home-footer h3 {
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 10px;
}
.zontal-home-footer p {
  color: var(--zon-muted-color);
  line-height: 1.7;
  margin-bottom: 10px;
}
@media screen and (max-width: 1800px) {
  .zontal-home-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media screen and (max-width: 1252px) {
  .zontal-home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (max-width: 700px) {
  .zontal-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .zontal-home-card img { height: 110px; }
}


/* GameHubVerse hover video preview V3 */
.ghv-preview-thumb,.zon-card-thumb{position:relative;display:block;width:100%;overflow:hidden;border-radius:8px;background:var(--zon-gmeta-bg-color);}
.ghv-preview-thumb img,.zon-card-thumb img{display:block;width:100%!important;object-fit:cover;border-radius:8px;transition:opacity .16s ease;}
.zon-card-thumb img,.zon-card-thumb .ghv-preview-video,.zon-card-thumb .zon-preview-video{height:140px!important;}
.ghv-preview-video,.zon-preview-video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:8px;background:#000;opacity:0;z-index:2;pointer-events:none;transition:opacity .16s ease;}
.has-preview-video:hover .ghv-preview-video,.has-preview-video:hover .zon-preview-video,.ghv-preview-thumb.is-playing .ghv-preview-video,.zon-card-thumb.is-playing .zon-preview-video{opacity:1;}
.has-preview-video:hover .ghv-preview-thumb>img,.has-preview-video:hover .zon-card-thumb>img,.ghv-preview-thumb.is-playing>img,.zon-card-thumb.is-playing>img{opacity:0;}
.ghv-preview-play{display:none!important;}

/* GameHubVerse remove hover video play badge */
.ghv-preview-play{display:none!important;}

/* GameHubVerse section/list pages card size fix
   Applies to /games, /new-games, /popular-games and category pages. */
#zon_games {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px 22px !important;
  align-items: start !important;
}

#zon_games .ghv-list-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  transform: none;
  transition: transform .22s ease;
}

#zon_games .ghv-list-card:hover {
  transform: translateY(4px);
}

#zon_games .ghv-list-card .ghv-card-image,
#zon_games .ghv-list-card .ghv-preview-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: var(--zon-gmeta-bg-color) !important;
}

#zon_games .ghv-list-card .ghv-card-image img,
#zon_games .ghv-list-card .ghv-preview-thumb img,
#zon_games .ghv-list-card .ghv-preview-video,
#zon_games .ghv-list-card .zon-preview-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

#zon_games .ghv-list-card .ghv-preview-video,
#zon_games .ghv-list-card .zon-preview-video {
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  background: #000;
  transition: opacity .16s ease;
}

#zon_games .ghv-list-card.has-preview-video:hover .ghv-preview-video,
#zon_games .ghv-list-card .ghv-preview-thumb.is-playing .ghv-preview-video,
#zon_games .ghv-list-card .zon-card-thumb.is-playing .zon-preview-video {
  opacity: 1;
}

#zon_games .ghv-list-card.has-preview-video:hover .ghv-card-image > img,
#zon_games .ghv-list-card .ghv-preview-thumb.is-playing > img {
  opacity: 0;
}

#zon_games .ghv-list-card .ghv-card-info {
  display: block !important;
  position: static !important;
  padding: 8px 4px 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
}

#zon_games .ghv-list-card .ghv-card-title {
  display: block !important;
  color: var(--zon-common-text-color) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color .2s ease;
}

#zon_games .ghv-list-card .ghv-card-title:hover {
  color: var(--ghv-brand-cyan) !important;
}

#zon_games .ghv-list-card .ghv-card-category {
  display: block !important;
  color: var(--zon-muted-color) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 5px !important;
}

#zon_games .ghv-list-card .ghv-card-meta {
  width: fit-content !important;
  margin-top: 9px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: var(--zon-common-text-color) !important;
}

#zon_games .ghv-list-card .ghv-card-meta svg path {
  stroke: var(--zon-common-text-color) !important;
}

#zon_games .ghv-preview-play {
  display: none !important;
}

@media screen and (min-width: 1900px) {
  #zon_games { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 1500px) {
  #zon_games { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 1200px) {
  #zon_games { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 900px) {
  #zon_games { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media screen and (max-width: 640px) {
  #zon_games { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 420px) {
  #zon_games { grid-template-columns: 1fr !important; }
}

/* GameHubVerse card layout repair V4
   Fixes section pages where banner images became very short and the hidden <video> created a huge white gap. */
#zon_games {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px 22px !important;
  align-items: start !important;
}

#zon_games > .rounded-lg,
#zon_games > .ghv-grid-item,
#zon_games > .ghv-list-card {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
  overflow: visible !important;
}

#zon_games .game-card,
#zon_games .ghv-list-card {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

#zon_games .game-card:hover,
#zon_games .ghv-list-card:hover {
  transform: translateY(4px) !important;
}

#zon_games .zon-card-thumb,
#zon_games .ghv-preview-thumb,
#zon_games .ghv-card-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: var(--zon-gmeta-bg-color) !important;
  line-height: 0 !important;
}

#zon_games .zon-card-thumb > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .ghv-card-image > img,
#zon_games .zon-preview-video,
#zon_games .ghv-preview-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#zon_games .zon-preview-video,
#zon_games .ghv-preview-video {
  opacity: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: #000 !important;
  transition: opacity .16s ease !important;
}

#zon_games .has-preview-video:hover .zon-preview-video,
#zon_games .has-preview-video:hover .ghv-preview-video,
#zon_games .zon-card-thumb.is-playing .zon-preview-video,
#zon_games .ghv-preview-thumb.is-playing .ghv-preview-video {
  opacity: 1 !important;
}

#zon_games .has-preview-video:hover .zon-card-thumb > img,
#zon_games .has-preview-video:hover .ghv-preview-thumb > img,
#zon_games .zon-card-thumb.is-playing > img,
#zon_games .ghv-preview-thumb.is-playing > img {
  opacity: 0 !important;
}

#zon_games .game-details,
#zon_games .ghv-card-info {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 7px 6px 0 !important;
  transform: none !important;
  line-height: normal !important;
}

#zon_games .game-details.gap-4,
#zon_games .ghv-card-info.gap-4 {
  gap: 0 !important;
}

#zon_games .game-details a,
#zon_games .ghv-card-title,
#zon_games .ghv-card-category {
  position: static !important;
  display: block !important;
  transform: none !important;
}

#zon_games .ghv-card-title,
#zon_games .game-details > a:first-child {
  color: var(--zon-common-text-color) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#zon_games .ghv-card-title:hover,
#zon_games .game-details > a:first-child:hover {
  color: var(--ghv-brand-cyan) !important;
}

#zon_games .ghv-card-category,
#zon_games .game-details > a:nth-child(2) {
  color: var(--zon-muted-color) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
}

#zon_games .game-meta,
#zon_games .ghv-card-meta {
  width: fit-content !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 9px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: var(--zon-common-text-color) !important;
}

#zon_games .ghv-preview-play { display: none !important; }

@media screen and (min-width: 1900px) {
  #zon_games { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 1500px) {
  #zon_games { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 1200px) {
  #zon_games { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 900px) {
  #zon_games { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media screen and (max-width: 640px) {
  #zon_games { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #zon_games .zon-card-thumb,
  #zon_games .ghv-preview-thumb,
  #zon_games .ghv-card-image { height: 120px !important; min-height: 120px !important; max-height: 120px !important; }
}
@media screen and (max-width: 420px) {
  #zon_games { grid-template-columns: 1fr !important; }
}

/* GameHubVerse final V6 list/category/card repair
   - remove list-page skeleton boxes
   - make list/category cards use the same compact style as homepage
   - prevent hover preview from showing a black video before the file is ready
*/
#zon-loader {
  display: none !important;
}

#zon_games.ghv-list-grid,
.ghv-list-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px 22px !important;
  align-items: start !important;
  justify-content: start !important;
  width: 100% !important;
}

#zon_games .ghv-list-card,
#zon_games .ghv-home-card,
#zon_games .game-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
}

#zon_games .ghv-card-image,
#zon_games .ghv-preview-thumb,
#zon_games .zon-card-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: var(--zon-gmeta-bg-color) !important;
  line-height: 0 !important;
}

#zon_games .ghv-card-image > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .zon-card-thumb > img,
#zon_games .ghv-preview-video,
#zon_games .zon-preview-video,
.zontal-home-card .ghv-preview-video,
.zontal-home-card .zon-preview-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#zon_games .ghv-preview-video,
#zon_games .zon-preview-video,
.zontal-home-card .ghv-preview-video,
.zontal-home-card .zon-preview-video {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: opacity .16s ease, visibility .16s ease !important;
}

/* Do NOT reveal video just because mouse is hovering; JS adds is-playing only after video is ready. */
.has-preview-video:hover .ghv-preview-video,
.has-preview-video:hover .zon-preview-video {
  opacity: 0 !important;
  visibility: hidden !important;
}
.has-preview-video:hover .ghv-preview-thumb > img,
.has-preview-video:hover .zon-card-thumb > img {
  opacity: 1 !important;
}

.ghv-preview-thumb.is-playing .ghv-preview-video,
.zon-card-thumb.is-playing .zon-preview-video,
.ghv-preview-thumb.is-playing .zon-preview-video,
.zon-card-thumb.is-playing .ghv-preview-video {
  opacity: 1 !important;
  visibility: visible !important;
}
.ghv-preview-thumb.is-playing > img,
.zon-card-thumb.is-playing > img {
  opacity: 0 !important;
}

#zon_games .ghv-card-info,
#zon_games .game-details {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 7px 2px 0 !important;
  line-height: normal !important;
  transform: none !important;
  gap: 0 !important;
}

#zon_games .ghv-card-title,
#zon_games .game-details > a:first-child {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--zon-common-text-color) !important;
}

#zon_games .ghv-card-title:hover,
#zon_games .game-details > a:first-child:hover {
  color: var(--ghv-brand-cyan) !important;
}

#zon_games .ghv-card-category,
#zon_games .game-details > a:nth-child(2) {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: var(--zon-muted-color) !important;
}

#zon_games .ghv-card-meta,
#zon_games .game-meta {
  width: fit-content !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.ghv-preview-play { display: none !important; }

@media screen and (max-width: 1800px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 1252px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 900px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 700px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  #zon_games .ghv-card-image,
  #zon_games .ghv-preview-thumb,
  #zon_games .zon-card-thumb { height: 110px !important; min-height: 110px !important; max-height: 110px !important; }
}
@media screen and (max-width: 420px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid { grid-template-columns: 1fr !important; }
}


/* GameHubVerse V7: reliable hover video display for AJAX/list/category cards */
#zon_games .ghv-card-image video.ghv-preview-video,
#zon_games .ghv-card-image video.zon-preview-video,
#zon_games .ghv-preview-thumb video.ghv-preview-video,
#zon_games .ghv-preview-thumb video.zon-preview-video,
#zon_games .zon-card-thumb video.ghv-preview-video,
#zon_games .zon-card-thumb video.zon-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 5 !important;
  background: transparent !important;
}

#zon_games .ghv-card-image.is-playing video.ghv-preview-video,
#zon_games .ghv-card-image.is-playing video.zon-preview-video,
#zon_games .ghv-preview-thumb.is-playing video.ghv-preview-video,
#zon_games .ghv-preview-thumb.is-playing video.zon-preview-video,
#zon_games .zon-card-thumb.is-playing video.ghv-preview-video,
#zon_games .zon-card-thumb.is-playing video.zon-preview-video {
  opacity: 1 !important;
  visibility: visible !important;
}

#zon_games .ghv-card-image.is-playing > img,
#zon_games .ghv-preview-thumb.is-playing > img,
#zon_games .zon-card-thumb.is-playing > img {
  opacity: 0 !important;
}

/* GameHubVerse V8: final section/list hover preview rules */
#zon_games.ghv-list-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px 22px !important;
  align-items: start !important;
}
#zon-loader { display: none !important; }
#zon_games .ghv-list-card,
#zon_games .ghv-home-card {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#zon_games .ghv-card-image,
#zon_games .ghv-preview-thumb,
#zon_games .zon-card-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  line-height: 0 !important;
  background: var(--zon-gmeta-bg-color) !important;
}
#zon_games .ghv-card-image > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .zon-card-thumb > img,
#zon_games .ghv-card-image > video.ghv-preview-video,
#zon_games .ghv-card-image > video.zon-preview-video,
#zon_games .ghv-preview-thumb > video.ghv-preview-video,
#zon_games .ghv-preview-thumb > video.zon-preview-video,
#zon_games .zon-card-thumb > video.ghv-preview-video,
#zon_games .zon-card-thumb > video.zon-preview-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#zon_games .ghv-card-image > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .zon-card-thumb > img {
  opacity: 1 !important;
  z-index: 1 !important;
  transition: opacity .14s ease !important;
}
#zon_games video.ghv-preview-video,
#zon_games video.zon-preview-video {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: opacity .14s ease, visibility .14s ease !important;
}
#zon_games .ghv-card-image.is-playing > video.ghv-preview-video,
#zon_games .ghv-card-image.is-playing > video.zon-preview-video,
#zon_games .ghv-preview-thumb.is-playing > video.ghv-preview-video,
#zon_games .ghv-preview-thumb.is-playing > video.zon-preview-video,
#zon_games .zon-card-thumb.is-playing > video.ghv-preview-video,
#zon_games .zon-card-thumb.is-playing > video.zon-preview-video {
  opacity: 1 !important;
  visibility: visible !important;
}
#zon_games .ghv-card-image.is-playing > img,
#zon_games .ghv-preview-thumb.is-playing > img,
#zon_games .zon-card-thumb.is-playing > img {
  opacity: 0 !important;
}
#zon_games .ghv-card-info,
#zon_games .game-details {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 4px 0 !important;
  line-height: normal !important;
}
#zon_games .ghv-card-title { font-size: 15px !important; line-height: 1.25 !important; font-weight: 700 !important; }
#zon_games .ghv-card-category { font-size: 12px !important; line-height: 1.25 !important; margin-top: 5px !important; }
#zon_games .ghv-card-meta { width: fit-content !important; margin-top: 9px !important; font-size: 12px !important; }
@media (min-width:2300px){ #zon_games.ghv-list-grid{ grid-template-columns:repeat(9,minmax(0,1fr)) !important; } }
@media (max-width:1500px){ #zon_games.ghv-list-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } }
@media (max-width:1200px){ #zon_games.ghv-list-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:800px){ #zon_games.ghv-list-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; } }
@media (max-width:480px){ #zon_games.ghv-list-grid{ grid-template-columns:1fr !important; } }

/* GameHubVerse V9 - final compact list/category cards + direct hover preview video */
#zon_games.ghv-list-grid,
#zon_games {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px 22px !important;
  align-items: start !important;
}
#zon-loader { display: none !important; }
#zon_games .ghv-list-card,
#zon_games .ghv-home-card,
#zon_games .game-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}
#zon_games .ghv-card-image,
#zon_games .ghv-preview-thumb,
#zon_games .zon-card-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: var(--zon-gmeta-bg-color) !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#zon_games .ghv-card-image > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .zon-card-thumb > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  transition: opacity .14s ease !important;
}
#zon_games .ghv-card-image > video.ghv-preview-video,
#zon_games .ghv-preview-thumb > video.ghv-preview-video,
#zon_games .ghv-preview-thumb > video.zon-preview-video,
#zon_games .zon-card-thumb > video.ghv-preview-video,
#zon_games .zon-card-thumb > video.zon-preview-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: transparent !important;
  opacity: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity .14s ease !important;
}
#zon_games .ghv-card-image.is-playing > video.ghv-preview-video,
#zon_games .ghv-card-image.is-playing > video.zon-preview-video,
#zon_games .ghv-preview-thumb.is-playing > video.ghv-preview-video,
#zon_games .ghv-preview-thumb.is-playing > video.zon-preview-video,
#zon_games .zon-card-thumb.is-playing > video.ghv-preview-video,
#zon_games .zon-card-thumb.is-playing > video.zon-preview-video {
  opacity: 1 !important;
}
#zon_games .ghv-card-image.is-playing > img,
#zon_games .ghv-preview-thumb.is-playing > img,
#zon_games .zon-card-thumb.is-playing > img {
  opacity: 0 !important;
}
#zon_games .ghv-card-info,
#zon_games .game-details {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 4px 0 !important;
  line-height: normal !important;
  background: transparent !important;
  box-shadow: none !important;
}
#zon_games .ghv-card-title {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--zon-common-text-color) !important;
}
#zon_games .ghv-card-title:hover { color: var(--ghv-brand-cyan) !important; }
#zon_games .ghv-card-category {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--zon-muted-color) !important;
}
#zon_games .ghv-card-meta,
#zon_games .game-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: none !important;
  height: auto !important;
  margin: 9px 0 0 !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: var(--zon-common-text-color) !important;
  border-radius: 8px !important;
}
.ghv-preview-play { display:none!important; }
@media (min-width: 2300px) { #zon_games.ghv-list-grid, #zon_games { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; gap: 20px !important; } }
@media (max-width: 1500px) { #zon_games.ghv-list-grid, #zon_games { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 1200px) { #zon_games.ghv-list-grid, #zon_games { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 800px) { #zon_games.ghv-list-grid, #zon_games { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } }
@media (max-width: 480px) { #zon_games.ghv-list-grid, #zon_games { grid-template-columns: 1fr !important; } }

/* GameHubVerse V10 - strict overlay video. Never show preview video under the banner. */
#zon_games .ghv-card-image,
#zon_games .ghv-preview-thumb,
#zon_games .zon-card-thumb,
.ghv-card-image,
.ghv-preview-thumb,
.zon-card-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  line-height: 0 !important;
  background: #000 !important;
}
#zon_games .ghv-card-image > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .zon-card-thumb > img,
#zon_games .ghv-card-image > video,
#zon_games .ghv-preview-thumb > video,
#zon_games .zon-card-thumb > video,
.ghv-card-image > img,
.ghv-preview-thumb > img,
.zon-card-thumb > img,
.ghv-card-image > video,
.ghv-preview-thumb > video,
.zon-card-thumb > video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#zon_games .ghv-card-image > img,
#zon_games .ghv-preview-thumb > img,
#zon_games .zon-card-thumb > img,
.ghv-card-image > img,
.ghv-preview-thumb > img,
.zon-card-thumb > img {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .14s ease !important;
}
#zon_games .ghv-card-image > video,
#zon_games .ghv-preview-thumb > video,
#zon_games .zon-card-thumb > video,
.ghv-card-image > video,
.ghv-preview-thumb > video,
.zon-card-thumb > video {
  z-index: 2 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #000 !important;
  transition: opacity .14s ease, visibility .14s ease !important;
}
#zon_games .ghv-card-image.is-playing > video,
#zon_games .ghv-preview-thumb.is-playing > video,
#zon_games .zon-card-thumb.is-playing > video,
.ghv-card-image.is-playing > video,
.ghv-preview-thumb.is-playing > video,
.zon-card-thumb.is-playing > video {
  opacity: 1 !important;
  visibility: visible !important;
}
#zon_games .ghv-card-image.is-playing > img,
#zon_games .ghv-preview-thumb.is-playing > img,
#zon_games .zon-card-thumb.is-playing > img,
.ghv-card-image.is-playing > img,
.ghv-preview-thumb.is-playing > img,
.zon-card-thumb.is-playing > img {
  opacity: 0 !important;
}
#zon_games .ghv-card-info,
#zon_games .game-details {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 7px 4px 0 !important;
  height: auto !important;
  min-height: 0 !important;
}


/* GameHubVerse V11 - modern game portal play/autoplay layout polish */
.ghv-player-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 32px !important;
  align-items: start !important;
}

.ghv-player-main {
  min-width: 0 !important;
}

.ghv-player-shell {
  background: radial-gradient(circle at top left, rgba(85, 98, 255, 0.18), transparent 34%), linear-gradient(145deg, #0b1020 0%, #131b31 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 20px 46px rgba(8, 12, 24, 0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ghv-player-stage,
.main-gameplay .ghv-player-stage.game-frame {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 420px !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #05070d !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 14px 30px rgba(0,0,0,0.28);
}

.ghv-player-stage iframe,
.ghv-player-stage #zonFrame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
}

.ghv-player-meta-card {
  margin-top: 18px !important;
  padding: 22px 24px !important;
  border-radius: 22px !important;
  background: var(--zon-search-bg-color) !important;
  border: 1px solid rgba(128, 138, 160, 0.18);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.ghv-player-meta-card .game-meta h1 {
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

.ghv-player-meta-card .game-meta p {
  line-height: 1.7 !important;
  max-width: 900px !important;
}

.ghv-player-meta-card .game-action-buttons {
  min-height: 42px !important;
  background: rgba(127, 140, 160, 0.12) !important;
  border: 1px solid rgba(127, 140, 160, 0.16) !important;
}

.ghv-player-meta-card .game-action-buttons:hover {
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.14);
}

.ghv-similar-wrap {
  margin-top: 28px !important;
  padding: 22px 24px 26px !important;
  border-radius: 22px !important;
  background: var(--zon-search-bg-color) !important;
  border: 1px solid rgba(128, 138, 160, 0.18);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.ghv-similar-wrap .page-heading {
  margin-bottom: 18px !important;
}

.ghv-similar-grid {
  gap: 20px !important;
}

.ghv-similar-grid .game-card,
.ghv-sidebar-grid .game-card {
  width: 100% !important;
}

.ghv-similar-grid .game-card img,
.ghv-sidebar-grid .game-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.ghv-similar-grid .game-details,
.ghv-sidebar-grid .game-details {
  padding: 10px 4px 0 !important;
}

.ghv-player-sidebar {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  align-self: start !important;
  position: sticky !important;
  top: 18px !important;
  padding: 0 !important;
}

.ghv-player-sidebar > .flex.gap-4.mb-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.ghv-sidebar-card {
  padding: 18px !important;
  border-radius: 22px !important;
  background: var(--zon-search-bg-color) !important;
  border: 1px solid rgba(128, 138, 160, 0.18);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.ghv-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}

.ghv-sidebar-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.ghv-sidebar-grid .rounded-lg {
  width: 100% !important;
}

.ghv-sidebar-grid .game-card:hover,
.ghv-similar-grid .game-card:hover {
  transform: translateY(-4px) !important;
}

.ghv-player-layout .ads img,
.ghv-player-layout .ads iframe,
.ghv-player-layout .ads ins {
  border-radius: 14px !important;
  overflow: hidden !important;
}

@media screen and (max-width: 1523px) {
  .ghv-player-layout {
    grid-template-columns: minmax(0, 1fr) 310px !important;
    gap: 24px !important;
  }
}

@media screen and (max-width: 1200px) {
  .ghv-player-layout {
    grid-template-columns: 1fr !important;
  }

  .ghv-player-sidebar {
    position: static !important;
    top: auto !important;
  }

  .ghv-sidebar-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media screen and (max-width: 900px) {
  .ghv-similar-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .ghv-player-meta-card {
    padding: 18px 18px 20px !important;
  }

  .ghv-player-meta-card .game-meta h1 {
    font-size: 28px !important;
  }
}

@media screen and (max-width: 670px) {
  .ghv-player-meta-card {
    gap: 18px !important;
  }

  .ghv-player-meta-card .flex.gap-2 {
    flex-wrap: wrap !important;
  }
}

@media screen and (max-width: 640px) {
  .ghv-player-shell {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .ghv-player-stage,
  .main-gameplay .ghv-player-stage.game-frame {
    min-height: 240px !important;
    border-radius: 14px !important;
  }

  .ghv-similar-wrap,
  .ghv-sidebar-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .ghv-similar-grid,
  .ghv-sidebar-grid {
    grid-template-columns: 1fr !important;
  }
}


/* GameHubVerse V12 fullscreen repair */
.ghv-player-shell:fullscreen,
.ghv-player-stage:fullscreen,
.main-gameplay:fullscreen,
.ghv-player-shell:-webkit-full-screen,
.ghv-player-stage:-webkit-full-screen,
.main-gameplay:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.ghv-player-shell:fullscreen .ghv-player-stage,
.ghv-player-shell:-webkit-full-screen .ghv-player-stage,
.ghv-player-stage:fullscreen,
.ghv-player-stage:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

.ghv-player-shell:fullscreen iframe,
.ghv-player-shell:-webkit-full-screen iframe,
.ghv-player-stage:fullscreen iframe,
.ghv-player-stage:-webkit-full-screen iframe,
.ghv-player-shell:fullscreen #zonFrame,
.ghv-player-shell:-webkit-full-screen #zonFrame {
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  border: 0 !important;
  background: #000 !important;
}

/* Hide any default iframe scrollbars/borders in normal and fullscreen view. */
#zonFrame {
  overflow: hidden !important;
}


/* GameHubVerse V13 - mobile portrait player + mobile fullscreen/theater mode */
.ghv-mobile-theater-bar {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .game-play-container.ghv-player-layout {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 0 !important;
  }

  .ghv-player-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ghv-player-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    border-radius: 22px !important;
    margin: 0 auto 16px !important;
    background: radial-gradient(circle at top left, rgba(85, 98, 255, 0.18), transparent 34%), linear-gradient(145deg, #0b1020 0%, #131b31 100%) !important;
  }

  .ghv-player-stage,
  .main-gameplay .ghv-player-stage.game-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 18px !important;
    background: #000 !important;
  }

  body.ghv-game-pref-landscape .ghv-player-stage,
  body.ghv-game-pref-landscape .main-gameplay .ghv-player-stage.game-frame,
  .ghv-player-shell[data-ghv-mobile-orientation="landscape"] .ghv-player-stage,
  .ghv-player-stage[data-ghv-mobile-orientation="landscape"] {
    aspect-ratio: 16 / 9 !important;
  }

  body.ghv-game-pref-portrait .ghv-player-stage,
  body.ghv-game-pref-portrait .main-gameplay .ghv-player-stage.game-frame,
  .ghv-player-shell[data-ghv-mobile-orientation="portrait"] .ghv-player-stage,
  .ghv-player-stage[data-ghv-mobile-orientation="portrait"] {
    aspect-ratio: 9 / 16 !important;
  }

  .ghv-player-stage iframe,
  .ghv-player-stage #zonFrame {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: #000 !important;
  }

  .ghv-player-meta-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    gap: 18px !important;
  }

  .ghv-player-meta-card .flex.gap-2 {
    order: -1 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .ghv-player-meta-card .game-meta h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .ghv-player-meta-card .game-meta p,
  .ghv-player-meta-card .game-meta a,
  .ghv-player-meta-card .game-meta span {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .ghv-similar-wrap,
  .ghv-sidebar-card {
    border-radius: 22px !important;
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  .ghv-player-stage,
  .main-gameplay .ghv-player-stage.game-frame {
    aspect-ratio: 16 / 9 !important;
  }
}

html.ghv-mobile-theater-root,
html.ghv-mobile-theater-root body,
body.ghv-mobile-theater {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

body.ghv-mobile-theater .ghv-player-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #090b14 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.ghv-mobile-theater .ghv-mobile-theater-bar {
  display: flex !important;
  flex: 0 0 54px !important;
  height: 54px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  background: #0c0d16 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.ghv-mobile-exit {
  border: 0 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  background: linear-gradient(135deg, #6a4cff, #944cff) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.ghv-mobile-theater-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 22px !important;
}

.ghv-mobile-theater-icon {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

body.ghv-mobile-theater .ghv-player-stage,
body.ghv-mobile-theater .main-gameplay .ghv-player-stage.game-frame {
  flex: 1 1 auto !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

body.ghv-mobile-theater .ghv-player-stage iframe,
body.ghv-mobile-theater .ghv-player-stage #zonFrame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
}

body.ghv-mobile-theater .ghv-player-meta-card,
body.ghv-mobile-theater .ghv-player-sidebar,
body.ghv-mobile-theater .ghv-similar-wrap,
body.ghv-mobile-theater .comment-section,
body.ghv-mobile-theater .page-heading,
body.ghv-mobile-theater .ads:not(.ghv-h5-ad-slot) {
  pointer-events: none !important;
}

@supports (padding: env(safe-area-inset-top)) {
  body.ghv-mobile-theater .ghv-mobile-theater-bar {
    padding-top: max(7px, env(safe-area-inset-top)) !important;
    height: calc(54px + env(safe-area-inset-top)) !important;
    flex-basis: calc(54px + env(safe-area-inset-top)) !important;
  }
}

/* GameHubVerse V14 - force true portrait player sizing on mobile */
@media screen and (max-width: 768px) {
  body.ghv-is-mobile-player.ghv-game-pref-portrait .ghv-player-shell,
  body.ghv-is-mobile-player .ghv-player-shell[data-ghv-mobile-orientation="portrait"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ghv-is-mobile-player.ghv-game-pref-portrait .ghv-player-stage,
  body.ghv-is-mobile-player.ghv-game-pref-portrait .main-gameplay .ghv-player-stage.game-frame,
  body.ghv-is-mobile-player .ghv-player-shell[data-ghv-mobile-orientation="portrait"] .ghv-player-stage,
  body.ghv-is-mobile-player .ghv-player-stage[data-ghv-mobile-orientation="portrait"],
  body.ghv-is-mobile-player .ghv-player-stage.ghv-force-portrait-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 16 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.ghv-is-mobile-player.ghv-game-pref-portrait .ghv-player-stage iframe,
  body.ghv-is-mobile-player.ghv-game-pref-portrait .ghv-player-stage #zonFrame,
  body.ghv-is-mobile-player .ghv-player-stage.ghv-force-portrait-stage iframe,
  body.ghv-is-mobile-player .ghv-player-stage.ghv-force-portrait-stage #zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
  }
}

/* GameHubVerse V16 - compact mobile portrait polish
   Keeps portrait games playable without making the normal mobile page too tall. */
@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1024px) {
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-shell {
    width: var(--ghv-compact-shell-w, auto) !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-stage,
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .main-gameplay .ghv-player-stage.game-frame,
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .game-frame.ghv-player-stage {
    width: var(--ghv-compact-stage-w, 100%) !important;
    height: var(--ghv-compact-stage-h, auto) !important;
    min-height: var(--ghv-compact-stage-h, 0) !important;
    max-height: var(--ghv-compact-stage-h, none) !important;
    aspect-ratio: 9 / 16 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #000 !important;
  }

  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-stage iframe,
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-stage #zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    display: block !important;
    background: #000 !important;
  }

  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-meta-card {
    margin-top: 14px !important;
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-shell {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .ghv-player-stage,
  body.ghv-mobile-portrait-compact:not(.ghv-mobile-theater) .main-gameplay .ghv-player-stage.game-frame {
    width: 100% !important;
    height: min(calc(100dvh - 110px), calc(100vw * 9 / 16)) !important;
    min-height: min(calc(100dvh - 110px), calc(100vw * 9 / 16)) !important;
    max-height: calc(100dvh - 110px) !important;
    aspect-ratio: 16 / 9 !important;
  }
}


/* GameHubVerse V18 - stable portrait sizing fallback CSS */

@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1024px) {
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-main,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .main-gameplay {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-shell {
    width: var(--ghv-v18-shell-w, auto) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    transition: none !important;
    animation: none !important;
  }
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-stage,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .main-gameplay .ghv-player-stage.game-frame,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .game-frame.ghv-player-stage {
    position: relative !important;
    width: var(--ghv-v18-stage-w, 360px) !important;
    height: var(--ghv-v18-stage-h, 640px) !important;
    min-height: var(--ghv-v18-stage-h, 640px) !important;
    max-height: var(--ghv-v18-stage-h, 640px) !important;
    aspect-ratio: 9 / 16 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #000 !important;
    transition: none !important;
    animation: none !important;
    contain: layout paint style !important;
  }
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-stage iframe,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-stage #zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    display: block !important;
    background: #000 !important;
  }
}



/* GameHubVerse V20 - Portrait + Blurred Columns mode
   Use this for true portrait games such as Wave. Desktop and mobile landscape stay wide,
   but the actual game iframe remains portrait-centered with blurred columns. */
.ghv-player-stage[data-ghv-orientation-mode="portrait_columns"],
.ghv-player-stage[data-ghv-orientation-mode="portrait-columns"],
.ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage,
.ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage {
  aspect-ratio: 16 / 9 !important;
  background: #070a14 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.ghv-player-stage[data-ghv-orientation-mode="portrait_columns"]::before,
.ghv-player-stage[data-ghv-orientation-mode="portrait-columns"]::before,
.ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage::before,
.ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: 0;
  background-image: var(--ghv-game-bg-image, radial-gradient(circle at center, #253b64, #080a13 70%));
  background-size: cover;
  background-position: center;
  filter: blur(24px) saturate(1.35) brightness(.78);
  transform: scale(1.12);
  opacity: .9;
}

.ghv-player-stage[data-ghv-orientation-mode="portrait_columns"]::after,
.ghv-player-stage[data-ghv-orientation-mode="portrait-columns"]::after,
.ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage::after,
.ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3,5,13,.52), rgba(3,5,13,.10) 30%, rgba(3,5,13,.10) 70%, rgba(3,5,13,.52));
  pointer-events: none;
}

.ghv-player-stage[data-ghv-orientation-mode="portrait_columns"] > iframe#zonFrame,
.ghv-player-stage[data-ghv-orientation-mode="portrait-columns"] > iframe#zonFrame,
.ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage > iframe#zonFrame,
.ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage > iframe#zonFrame {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  width: 31.640625% !important;
  height: 100% !important;
  max-width: 100% !important;
  transform: translateX(-50%) !important;
  background: #000 !important;
  box-shadow: 0 0 38px rgba(0,0,0,.38);
}

@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1024px) {
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"],
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"],
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage {
    aspect-ratio: 9 / 16 !important;
  }

  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"]::before,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"]::after,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"]::before,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"]::after {
    display: none !important;
  }

  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"] > iframe#zonFrame,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"] > iframe#zonFrame,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage > iframe#zonFrame,
  body:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage > iframe#zonFrame {
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

@media screen and (max-width: 768px) and (orientation: landscape), screen and (pointer: coarse) and (orientation: landscape) {
  body.ghv-mobile-landscape .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"] > iframe#zonFrame,
  body.ghv-mobile-landscape .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"] > iframe#zonFrame,
  body.ghv-mobile-theater .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"] > iframe#zonFrame,
  body.ghv-mobile-theater .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"] > iframe#zonFrame {
    left: 50% !important;
    width: min(100%, calc(100dvh * 9 / 16)) !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
  }
}

/* GameHubVerse V21 - exact orientation separation
   Plain Portrait stays a portrait player with no blurred columns.
   Only Portrait + Blurred Columns uses the wide blurred side background. */
.ghv-player-stage[data-ghv-orientation-mode="portrait"],
.ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage {
  aspect-ratio: 9 / 16 !important;
  width: min(100%, 520px) !important;
  min-height: 0 !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #000 !important;
  overflow: hidden !important;
}

.ghv-player-stage[data-ghv-orientation-mode="portrait"]::before,
.ghv-player-stage[data-ghv-orientation-mode="portrait"]::after,
.ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage::before,
.ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage::after {
  display: none !important;
  content: none !important;
}

.ghv-player-stage[data-ghv-orientation-mode="portrait"] > iframe#zonFrame,
.ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage > iframe#zonFrame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  z-index: 2 !important;
  box-shadow: none !important;
}

@media screen and (min-width: 769px) {
  .ghv-player-shell[data-ghv-orientation-mode="portrait"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}


/* GameHubVerse V22 - Responsive orientation + compact mobile theater UI
   Responsive mode = desktop landscape, mobile portrait, mobile landscape when rotated. */
.ghv-player-stage[data-ghv-orientation-mode="responsive"],
.ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: none !important;
  background: #000 !important;
  overflow: hidden !important;
}

.ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
.ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage > iframe#zonFrame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  max-width: none !important;
  z-index: 2 !important;
  box-shadow: none !important;
}

@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1024px) {
  body.ghv-game-pref-responsive:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="responsive"],
  body.ghv-game-pref-responsive:not(.ghv-mobile-landscape):not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
    aspect-ratio: 9 / 16 !important;
  }

  body.ghv-game-pref-responsive.ghv-mobile-landscape:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="responsive"],
  body.ghv-game-pref-responsive.ghv-mobile-landscape:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
    aspect-ratio: 16 / 9 !important;
  }
}

/* Compact fullscreen/theater overlay: one small X instead of the heavy top bar. */
body.ghv-mobile-theater .ghv-player-shell {
  display: block !important;
  background: #000 !important;
}

body.ghv-mobile-theater .ghv-mobile-theater-bar {
  position: fixed !important;
  z-index: 2147483600 !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  left: 8px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  flex: none !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none !important;
}

.ghv-mobile-exit.ghv-mobile-exit-x,
body.ghv-mobile-theater .ghv-mobile-exit {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(11, 13, 24, .72) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

body.ghv-mobile-theater .ghv-mobile-theater-actions,
body.ghv-mobile-theater .ghv-mobile-theater-icon {
  display: none !important;
}

body.ghv-mobile-theater .ghv-player-stage,
body.ghv-mobile-theater .main-gameplay .ghv-player-stage.game-frame {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  flex: none !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
}

body.ghv-mobile-theater .ghv-player-stage iframe,
body.ghv-mobile-theater .ghv-player-stage #zonFrame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  max-width: none !important;
  border: 0 !important;
}

@media screen and (orientation: landscape) {
  body.ghv-mobile-theater .ghv-player-stage[data-ghv-orientation-mode="responsive"],
  body.ghv-mobile-theater .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
    aspect-ratio: auto !important;
  }
}

/* GameHubVerse V23 - Responsive fullscreen cover fix
   Removes gray/empty side columns for Responsive: PC Landscape / Mobile Auto in fullscreen/theater.
   The iframe is kept at a clean 16:9 viewport and cropped to cover the screen, so Unity does not render side bars on very wide screens. */
.ghv-player-shell:fullscreen .ghv-player-stage[data-ghv-orientation-mode="responsive"],
.ghv-player-shell:-webkit-full-screen .ghv-player-stage[data-ghv-orientation-mode="responsive"],
.ghv-player-stage[data-ghv-orientation-mode="responsive"]:fullscreen,
.ghv-player-stage[data-ghv-orientation-mode="responsive"]:-webkit-full-screen,
body.ghv-mobile-theater.ghv-game-pref-responsive .ghv-player-stage[data-ghv-orientation-mode="responsive"],
body.ghv-mobile-theater.ghv-game-pref-responsive .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ghv-player-shell:fullscreen .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
.ghv-player-shell:-webkit-full-screen .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
.ghv-player-stage[data-ghv-orientation-mode="responsive"]:fullscreen > iframe#zonFrame,
.ghv-player-stage[data-ghv-orientation-mode="responsive"]:-webkit-full-screen > iframe#zonFrame,
body.ghv-mobile-theater.ghv-game-pref-responsive .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
body.ghv-mobile-theater.ghv-game-pref-responsive .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage > iframe#zonFrame {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  /* 16:9 cover. If screen is extra wide, height becomes larger and gets cropped; if screen is tall, width becomes larger and gets cropped. */
  width: max(100vw, calc(100dvh * 16 / 9)) !important;
  height: max(100dvh, calc(100vw * 9 / 16)) !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  background: #000 !important;
  border: 0 !important;
  z-index: 2 !important;
}

/* Fallback for browsers without CSS max() in width/height. */
@supports not (width: max(100vw, 100px)) {
  .ghv-player-shell:fullscreen .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
  .ghv-player-shell:-webkit-full-screen .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
  .ghv-player-stage[data-ghv-orientation-mode="responsive"]:fullscreen > iframe#zonFrame,
  .ghv-player-stage[data-ghv-orientation-mode="responsive"]:-webkit-full-screen > iframe#zonFrame,
  body.ghv-mobile-theater.ghv-game-pref-responsive .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
  body.ghv-mobile-theater.ghv-game-pref-responsive .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage > iframe#zonFrame {
    width: 100vw !important;
    height: calc(100vw * 9 / 16) !important;
  }
}


/* GameHubVerse V24 - mobile spacing + stable landscape player fit
   Keeps portrait/landscape admin behavior, adds cleaner mobile gap below header/search,
   and prevents landscape mobile/tablet frames from becoming too tall. */
@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1024px) {
  body:not(.ghv-mobile-theater) .game-play-container.ghv-player-layout,
  body:not(.ghv-mobile-theater) .ghv-player-layout {
    margin-top: clamp(16px, 3.2vw, 24px) !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-main {
    padding-top: 0 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-shell {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape), screen and (pointer: coarse) and (orientation: landscape) and (max-height: 760px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="landscape"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="responsive"],
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="landscape"],
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="responsive"] {
    max-width: calc(100vw - 22px) !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="landscape"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="responsive"] {
    width: min(calc(100vw - 22px), calc((100dvh - 92px) * 16 / 9)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    padding: 8px !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="landscape"],
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="responsive"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="landscape"] .ghv-player-stage,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 110px) !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="landscape"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="landscape"] .ghv-player-stage > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage > iframe#zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
}

body.ghv-mobile-theater .ghv-mobile-exit.ghv-mobile-exit-x,
body.ghv-mobile-theater .ghv-mobile-exit {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  font-size: 22px !important;
  line-height: 32px !important;
}

body.ghv-mobile-theater .ghv-mobile-theater-bar {
  top: max(7px, env(safe-area-inset-top)) !important;
  left: 7px !important;
}

@media screen and (min-width: 769px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell.ghv-desktop-portrait-fit-v26 {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage {
    min-height: 0 !important;
    max-width: 520px !important;
    aspect-ratio: 9 / 16 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-fit="1"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-fit="1"] .ghv-player-stage {
    flex: 0 0 auto !important;
  }
}

@media screen and (min-width: 769px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell.ghv-desktop-portrait-fit-v27 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage {
    position: relative !important;
    width: min(100%, 520px, calc((100vh - 132px) * 9 / 16)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 132px) !important;
    aspect-ratio: 9 / 16 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-fit="1"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-fit="1"] .ghv-player-stage {
    width: var(--ghv-desktop-portrait-stage-w, min(100%, 520px)) !important;
    height: var(--ghv-desktop-portrait-stage-h, auto) !important;
    max-height: var(--ghv-desktop-portrait-stage-h, none) !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage > iframe#zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }
}

@supports (height: 100dvh) {
  @media screen and (min-width: 769px) {
    body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"],
    body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage {
      width: min(100%, 520px, calc((100dvh - 132px) * 9 / 16)) !important;
      max-height: calc(100dvh - 132px) !important;
    }
  }
}

/* GameHubVerse V28 - desktop portrait and portrait+blurred-columns safe fit */
@media screen and (min-width: 769px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell.ghv-desktop-portrait-fit-v28 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-shell.ghv-desktop-portrait-fit-v28 .ghv-player-stage,
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-fit="1"] {
    position: relative !important;
    width: var(--ghv-desktop-portrait-stage-w, min(100%, 520px)) !important;
    height: var(--ghv-desktop-portrait-stage-h, auto) !important;
    min-height: 0 !important;
    max-height: var(--ghv-desktop-portrait-stage-h, none) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] {
    aspect-ratio: 9 / 16 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"] {
    aspect-ratio: 16 / 9 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-fit="1"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-fit="1"] .ghv-player-stage > iframe#zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v28,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v28 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v28 .ghv-player-stage,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v28 .ghv-player-stage {
  width: var(--ghv-desktop-portrait-stage-w, 100vw) !important;
  height: var(--ghv-desktop-portrait-stage-h, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--ghv-desktop-portrait-stage-h, 100vh) !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}



/* GameHubVerse V30 - keep Portrait + Blurred Columns as portrait inside PC fullscreen */
@media screen and (min-width: 769px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell.ghv-desktop-portrait-fit-v30 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-shell.ghv-desktop-portrait-fit-v30 .ghv-player-stage,
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-fit="1"] {
    position: relative !important;
    width: var(--ghv-desktop-portrait-stage-w, min(100%, 520px)) !important;
    height: var(--ghv-desktop-portrait-stage-h, auto) !important;
    min-height: 0 !important;
    max-height: var(--ghv-desktop-portrait-stage-h, none) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] {
    aspect-ratio: 9 / 16 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"] {
    aspect-ratio: 16 / 9 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-kind="columns"] .ghv-player-stage > iframe#zonFrame {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: var(--ghv-desktop-portrait-frame-w, calc(var(--ghv-desktop-portrait-stage-h, 640px) * 9 / 16)) !important;
    height: var(--ghv-desktop-portrait-frame-h, 100%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-kind="portrait"] .ghv-player-stage > iframe#zonFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    z-index: 2 !important;
  }
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage {
  width: var(--ghv-desktop-portrait-stage-w, 100vw) !important;
  height: var(--ghv-desktop-portrait-stage-h, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--ghv-desktop-portrait-stage-h, 100vh) !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"],
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"] {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"] > iframe#zonFrame,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="columns"] > iframe#zonFrame {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ghv-desktop-portrait-frame-w, calc(100vh * 9 / 16)) !important;
  height: var(--ghv-desktop-portrait-frame-h, 100vh) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}

/* GameHubVerse V30b - PC plain portrait fullscreen keeps a full-screen container and centers the portrait iframe */
.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"],
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  background: #000 !important;
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] > iframe#zonFrame,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] > iframe#zonFrame {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ghv-desktop-portrait-frame-w, min(calc(100vh * 9 / 16), 100vw)) !important;
  height: var(--ghv-desktop-portrait-frame-h, min(100vh, calc(100vw * 16 / 9))) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  background: #000 !important;
}


/* GameHubVerse V31 - PC plain Portrait fullscreen full gameplay canvas */
.ghv-player-shell:fullscreen.ghv-pc-plain-portrait-fullscreen-v31,
.ghv-player-shell:-webkit-full-screen.ghv-pc-plain-portrait-fullscreen-v31 {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: none !important;
}

.ghv-player-shell:fullscreen.ghv-pc-plain-portrait-fullscreen-v31 .ghv-player-stage,
.ghv-player-shell:-webkit-full-screen.ghv-pc-plain-portrait-fullscreen-v31 .ghv-player-stage,
.ghv-player-shell:fullscreen .ghv-player-stage.ghv-pc-plain-portrait-fullscreen-v31-stage,
.ghv-player-shell:-webkit-full-screen .ghv-player-stage.ghv-pc-plain-portrait-fullscreen-v31-stage {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: none !important;
}

.ghv-player-shell:fullscreen.ghv-pc-plain-portrait-fullscreen-v31 .ghv-player-stage > iframe#zonFrame,
.ghv-player-shell:-webkit-full-screen.ghv-pc-plain-portrait-fullscreen-v31 .ghv-player-stage > iframe#zonFrame,
.ghv-player-shell:fullscreen .ghv-player-stage.ghv-pc-plain-portrait-fullscreen-v31-stage > iframe#zonFrame,
.ghv-player-shell:-webkit-full-screen .ghv-player-stage.ghv-pc-plain-portrait-fullscreen-v31-stage > iframe#zonFrame {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: #000 !important;
}


/* GameHubVerse V32 - PC plain Portrait uses the same black-table layout as Portrait + Blurred Columns, without blur */
@media screen and (min-width: 769px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-kind="portrait"] {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage,
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    width: var(--ghv-desktop-portrait-stage-w, 100%) !important;
    max-width: var(--ghv-desktop-portrait-stage-w, 100%) !important;
    height: var(--ghv-desktop-portrait-stage-h, auto) !important;
    max-height: var(--ghv-desktop-portrait-stage-h, none) !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"]::before,
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"]::after,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage::before,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage::after {
    display: none !important;
    content: none !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] > iframe#zonFrame,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-kind="portrait"] .ghv-player-stage > iframe#zonFrame {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: var(--ghv-desktop-portrait-frame-w, calc(var(--ghv-desktop-portrait-stage-h, 640px) * 9 / 16)) !important;
    height: var(--ghv-desktop-portrait-frame-h, 100%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
  }
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"],
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}

.ghv-player-shell:fullscreen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] > iframe#zonFrame,
.ghv-player-shell:-webkit-full-screen.ghv-desktop-portrait-fit-v30 .ghv-player-stage[data-ghv-desktop-portrait-kind="portrait"] > iframe#zonFrame {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ghv-desktop-portrait-frame-w, min(calc(100vh * 9 / 16), 100vw)) !important;
  height: var(--ghv-desktop-portrait-frame-h, min(100vh, calc(100vw * 16 / 9))) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
  background: #000 !important;
}

/* GameHubVerse V33 - PC plain Portrait: single black table, no blue outer table */
@media screen and (min-width: 769px) {
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"],
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-kind="portrait"] {
    background: #000 !important;
    background-image: none !important;
    border-color: #000 !important;
    box-shadow: none !important;
  }

  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait"] .ghv-player-stage,
  body:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-desktop-portrait-kind="portrait"] .ghv-player-stage {
    background: #000 !important;
    box-shadow: none !important;
  }
}

.ghv-game-info-extra {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.ghv-game-info-section {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.ghv-game-info-title {
  margin: 0 0 6px;
  color: var(--zon-common-text-color);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ghv-game-info-text {
  color: var(--zon-muted-color);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}


/* GameHubVerse V34 - mobile 2-column landscape banner cards + swipe preview hint
   Used on list/category pages and as a safety override if older mobile thumbnail CSS is cached. */
.ghv-mobile-preview-hint {
  display: none;
}

@media screen and (max-width: 800px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
    align-items: start !important;
  }

  #zon_games.ghv-list-grid .ghv-list-card,
  #zon_games.ghv-list-grid .ghv-home-card,
  #zon_games.ghv-list-grid .game-card,
  .ghv-list-grid .ghv-list-card,
  .ghv-list-grid .game-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  #zon_games.ghv-list-grid .ghv-card-image,
  #zon_games.ghv-list-grid .ghv-preview-thumb,
  #zon_games.ghv-list-grid .zon-card-thumb,
  .ghv-list-grid .ghv-card-image,
  .ghv-list-grid .ghv-preview-thumb,
  .ghv-list-grid .zon-card-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 15px !important;
    background: #080a12 !important;
    overflow: hidden !important;
    box-shadow: 0 9px 18px rgba(0,0,0,.18) !important;
    line-height: 0 !important;
  }

  #zon_games.ghv-list-grid .ghv-card-image > img,
  #zon_games.ghv-list-grid .ghv-preview-thumb > img,
  #zon_games.ghv-list-grid .zon-card-thumb > img,
  #zon_games.ghv-list-grid .ghv-card-image > picture > img,
  #zon_games.ghv-list-grid .ghv-preview-thumb > picture > img,
  #zon_games.ghv-list-grid .zon-card-thumb > picture > img,
  .ghv-list-grid .ghv-card-image > img,
  .ghv-list-grid .ghv-preview-thumb > img,
  .ghv-list-grid .zon-card-thumb > img,
  #zon_games.ghv-list-grid .ghv-preview-video,
  #zon_games.ghv-list-grid .zon-preview-video,
  .ghv-list-grid .ghv-preview-video,
  .ghv-list-grid .zon-preview-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #zon_games.ghv-list-grid .ghv-preview-video,
  #zon_games.ghv-list-grid .zon-preview-video,
  .ghv-list-grid .ghv-preview-video,
  .ghv-list-grid .zon-preview-video {
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: #000 !important;
    transition: opacity .16s ease, visibility .16s ease !important;
  }

  #zon_games.ghv-list-grid .ghv-preview-thumb.is-playing .ghv-preview-video,
  #zon_games.ghv-list-grid .zon-card-thumb.is-playing .zon-preview-video,
  #zon_games.ghv-list-grid .ghv-card-image.is-playing .ghv-preview-video,
  .ghv-list-grid .ghv-preview-thumb.is-playing .ghv-preview-video,
  .ghv-list-grid .zon-card-thumb.is-playing .zon-preview-video,
  .ghv-list-grid .ghv-card-image.is-playing .ghv-preview-video {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #zon_games.ghv-list-grid .ghv-preview-thumb.is-playing > img,
  #zon_games.ghv-list-grid .zon-card-thumb.is-playing > img,
  #zon_games.ghv-list-grid .ghv-card-image.is-playing > img,
  .ghv-list-grid .ghv-preview-thumb.is-playing > img,
  .ghv-list-grid .zon-card-thumb.is-playing > img,
  .ghv-list-grid .ghv-card-image.is-playing > img {
    opacity: 0 !important;
  }

  #zon_games.ghv-list-grid .ghv-card-info,
  #zon_games.ghv-list-grid .game-details,
  .ghv-list-grid .ghv-card-info,
  .ghv-list-grid .game-details {
    padding: 8px 1px 0 !important;
    text-align: left !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #zon_games.ghv-list-grid .ghv-card-title,
  #zon_games.ghv-list-grid .game-details > a:first-child,
  .ghv-list-grid .ghv-card-title,
  .ghv-list-grid .game-details > a:first-child {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-align: left !important;
    color: var(--zon-common-text-color) !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  #zon_games.ghv-list-grid .ghv-card-category,
  #zon_games.ghv-list-grid .ghv-card-meta,
  #zon_games.ghv-list-grid .game-meta,
  .ghv-list-grid .ghv-card-category,
  .ghv-list-grid .ghv-card-meta,
  .ghv-list-grid .game-meta {
    display: none !important;
  }

  .ghv-mobile-preview-hint {
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    transform: translateX(-50%) translateY(5px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100% - 14px) !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(8,10,16,.72) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    z-index: 6 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.24) !important;
  }

  body.ghv-mobile-preview-hint-active .ghv-mobile-preview-hint {
    opacity: 1 !important;
    visibility: visible !important;
    animation: ghvMobilePreviewHintNudge 1s ease-in-out 0s 2 both !important;
  }

  body.ghv-mobile-preview-hint-seen .ghv-mobile-preview-hint,
  .ghv-preview-thumb.is-playing .ghv-mobile-preview-hint,
  .ghv-card-image.is-playing .ghv-mobile-preview-hint,
  .zon-card-thumb.is-playing .ghv-mobile-preview-hint {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media screen and (max-width: 380px) {
  #zon_games.ghv-list-grid,
  .ghv-list-grid {
    gap: 16px 12px !important;
  }

  #zon_games.ghv-list-grid .ghv-card-title,
  #zon_games.ghv-list-grid .game-details > a:first-child,
  .ghv-list-grid .ghv-card-title,
  .ghv-list-grid .game-details > a:first-child {
    font-size: 14px !important;
  }
}

@keyframes ghvMobilePreviewHintNudge {
  0%, 100% { transform: translateX(-50%) translateY(5px); }
  50% { transform: translateX(calc(-50% + 8px)) translateY(5px); }
}


/* GameHubVerse V35 - mobile game-player safety: keep homepage/list card CSS away from the iframe player. */
@media screen and (max-width: 800px) {
  .ghv-player-shell,
  .ghv-player-stage,
  .ghv-player-stage #zonFrame {
    box-sizing: border-box;
  }
  .ghv-player-shell .ghv-card-image,
  .ghv-player-shell .ghv-preview-thumb,
  .ghv-player-shell .zon-card-thumb,
  .ghv-player-stage .ghv-card-image,
  .ghv-player-stage .ghv-preview-thumb,
  .ghv-player-stage .zon-card-thumb {
    all: revert;
  }
}



/* GameHubVerse V31 - sidebar logo polish
   Makes the desktop sidebar brand easier to read and less pushed to the far right. */
@media screen and (min-width: 1103px) {
  .zontal-sidebar:not(.close) .zontal-sidebar-head {
    min-height: 52px;
    padding: 0 12px;
    justify-content: flex-start !important;
    gap: 12px;
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head .burger-menu {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, transform .2s ease;
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head .burger-menu:hover {
    background: rgba(255, 255, 255, .06);
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head > a.logo {
    flex: 0 1 172px;
    height: 40px;
    max-width: 172px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 7px 10px;
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    overflow: hidden;
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head > a.logo img.logo {
    width: 152px !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
  }
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-head {
    justify-content: flex-start !important;
    gap: 12px;
  }

  .zontal-sidebar.active .zontal-sidebar-head > a.logo {
    max-width: 172px;
  }

  .zontal-sidebar.active .zontal-sidebar-head > a.logo img.logo {
    width: 152px !important;
    max-width: 100%;
    height: auto !important;
  }
}

/* GameHubVerse V32 - final sidebar logo tuning
   Bigger logo, wider breathing room, tighter burger spacing, stronger brand presence. */
@media screen and (min-width: 1103px) {
  .zontal-sidebar:not(.close) .zontal-sidebar-head {
    min-height: 56px;
    padding: 0 10px 0 8px;
    justify-content: flex-start !important;
    gap: 8px;
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head .burger-menu {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    margin-right: 0;
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head > a.logo {
    flex: 0 1 194px;
    max-width: 194px;
    height: 44px;
    padding: 8px 14px;
    border-radius: 16px;
    justify-content: flex-start;
    background: linear-gradient(90deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.045) 100%);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow:
      0 12px 24px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035);
  }

  .zontal-sidebar:not(.close) .zontal-sidebar-head > a.logo img.logo {
    width: 166px !important;
    max-width: 100%;
    height: auto !important;
  }
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-head {
    gap: 10px;
  }

  .zontal-sidebar.active .zontal-sidebar-head > a.logo {
    max-width: 188px;
    height: 42px;
    padding: 8px 13px;
    border-radius: 16px;
  }

  .zontal-sidebar.active .zontal-sidebar-head > a.logo img.logo {
    width: 162px !important;
    max-width: 100%;
    height: auto !important;
  }
}

/* GameHubVerse V33 - sidebar active/hover highlight tuned to logo colors
   Keeps the old left-to-right fade style, but uses cyan/blue/purple brand colors. */
.zontal-sidebar-body a::before {
  background-image: linear-gradient(
    90deg,
    rgba(34, 223, 248, .96) 0%,
    rgba(29, 124, 255, .82) 34%,
    rgba(123, 77, 255, .38) 68%,
    rgba(226, 75, 255, 0) 100%
  ) !important;
  border-right: 1px solid var(--ghv-brand-cyan) !important;
  box-shadow: none !important;
}

html[zontal-theme="light"] .zontal-sidebar-body a::before {
  background-image: linear-gradient(
    90deg,
    rgba(29, 124, 255, .96) 0%,
    rgba(34, 223, 248, .72) 38%,
    rgba(123, 77, 255, .30) 72%,
    rgba(226, 75, 255, 0) 100%
  ) !important;
  border-right-color: #1d7cff !important;
}

html[zontal-theme="dark"] .zontal-sidebar-body a::before {
  background-image: linear-gradient(
    90deg,
    rgba(34, 223, 248, .90) 0%,
    rgba(29, 124, 255, .72) 36%,
    rgba(123, 77, 255, .36) 72%,
    rgba(226, 75, 255, 0) 100%
  ) !important;
  border-right-color: var(--ghv-brand-cyan) !important;
}

.zontal-sidebar-body a.active-page span,
.zontal-sidebar-body a.active-page p,
.zontal-sidebar-body a:hover span,
.zontal-sidebar-body a:hover p {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.zontal-sidebar-body a.active-page svg path,
.zontal-sidebar-body a:hover svg path {
  stroke: #fff !important;
}


/* GameHubVerse V37 - auth/play/mobile chip brand consistency */
.ghv-auth-login {
  background: linear-gradient(135deg, #22dff8 0%, #1d7cff 62%, #7b4dff 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(34, 223, 248, .34);
  box-shadow: 0 8px 18px rgba(29, 124, 255, .24), 0 0 14px rgba(34, 223, 248, .12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}

.ghv-auth-login:hover {
  background: linear-gradient(135deg, #1d7cff 0%, #7b4dff 68%, #e24bff 100%) !important;
  box-shadow: 0 10px 22px rgba(123, 77, 255, .28), 0 0 16px rgba(34, 223, 248, .16);
  transform: translateY(-1px);
}

.ghv-auth-register:hover {
  background: linear-gradient(135deg, #1d7cff 0%, #7b4dff 68%, #e24bff 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(123, 77, 255, .22);
}

@media screen and (max-width: 800px) {
  .ghv-auth-login {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 12px !important;
  }

  .ghv-mobile-category-strip a.is-active {
    background: linear-gradient(135deg, #22dff8 0%, #1d7cff 58%, #7b4dff 100%) !important;
    color: #fff !important;
    border-color: rgba(34, 223, 248, .75) !important;
    box-shadow: 0 8px 18px rgba(29, 124, 255, .24), 0 0 14px rgba(34, 223, 248, .16) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  }
}


/* GameHubVerse V38 - final softer branded buttons */
.ghv-auth-login {
  background: linear-gradient(135deg, #21c7f5 0%, #2577ff 64%, #6c55ff 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 7px 16px rgba(29, 124, 255, .22) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.ghv-auth-login:hover {
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  box-shadow: 0 9px 18px rgba(123, 77, 255, .24) !important;
  transform: translateY(-1px);
}

.ghv-auth-register:hover {
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(123, 77, 255, .20) !important;
}

@media screen and (max-width: 800px) {
  .ghv-auth-login {
    border-radius: 12px !important;
    min-height: 42px;
  }

  .ghv-mobile-category-strip a.is-active {
    background: linear-gradient(135deg, #21c7f5 0%, #2577ff 62%, #6c55ff 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 7px 16px rgba(29, 124, 255, .22) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  }
}


/* GameHubVerse V39 - brand theme toggle */
.wrapper input {
  background: var(--zon-toggler-bg-color) !important;
  border: 1px solid rgba(128, 138, 160, .18);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .16);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.wrapper input:checked {
  background: linear-gradient(135deg, #21c7f5 0%, #2577ff 62%, #6c55ff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 7px 16px rgba(29, 124, 255, .22) !important;
}

.wrapper:hover input {
  border-color: rgba(34, 223, 248, .34);
  box-shadow: 0 7px 16px rgba(29, 124, 255, .14);
}

.wrapper:hover input:checked {
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  box-shadow: 0 8px 18px rgba(123, 77, 255, .22) !important;
}

.wrapper input:checked ~ svg path {
  stroke: #fff !important;
}

html[zontal-theme="dark"] .wrapper input:checked {
  background: linear-gradient(135deg, #21c7f5 0%, #2577ff 62%, #6c55ff 100%) !important;
}

html[zontal-theme="light"] .wrapper input:checked {
  background: linear-gradient(135deg, #2577ff 0%, #21c7f5 58%, #6c55ff 100%) !important;
}


/* GameHubVerse V40 - clean clipped highlight edges
   Removes the hard side/bottom lines caused by borders/glow clipping on mobile pills. */
.wrapper {
  overflow: visible !important;
}

.wrapper input,
.wrapper input:checked,
.wrapper:hover input,
.wrapper:hover input:checked {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

.wrapper input:checked {
  background: linear-gradient(135deg, #21c7f5 0%, #2577ff 62%, #6c55ff 100%) !important;
  filter: drop-shadow(0 5px 10px rgba(29, 124, 255, .18));
}

.wrapper:hover input:checked {
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  filter: drop-shadow(0 6px 12px rgba(123, 77, 255, .20));
}

@media screen and (max-width: 800px) {
  .ghv-mobile-category-strip a,
  .ghv-mobile-category-strip a.is-active {
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent;
    background-clip: padding-box !important;
  }

  .ghv-mobile-category-strip a.is-active {
    border-color: transparent !important;
    box-shadow: 0 5px 12px rgba(29, 124, 255, .16) !important;
    filter: none !important;
  }

  .ghv-mobile-category-strip a.is-active::before,
  .ghv-mobile-category-strip a.is-active::after,
  .wrapper input::before,
  .wrapper input::after {
    content: none !important;
    display: none !important;
  }
}


/* GameHubVerse V41 - login/register brand form colors */
.ghv-auth-form .ghv-auth-input {
  border-color: var(--zon-comment-input-b-color) !important;
  outline: 0 !important;
  border-radius: 10px;
  color: var(--zon-common-text-color);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ghv-auth-form .ghv-auth-input:hover {
  border-color: rgba(33, 199, 245, .38) !important;
}

.ghv-auth-form .ghv-auth-input:focus {
  border-color: #21c7f5 !important;
  box-shadow: 0 0 0 3px rgba(33, 199, 245, .10), 0 0 14px rgba(37, 119, 255, .08);
  outline: 0 !important;
}

.ghv-auth-form .ghv-auth-input:invalid:focus {
  border-color: #21c7f5 !important;
  box-shadow: 0 0 0 3px rgba(33, 199, 245, .10), 0 0 14px rgba(37, 119, 255, .08);
}

.ghv-auth-submit {
  background: linear-gradient(135deg, #21c7f5 0%, #2577ff 64%, #6c55ff 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(29, 124, 255, .22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.ghv-auth-submit:hover {
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  box-shadow: 0 9px 18px rgba(123, 77, 255, .24);
  transform: translateY(-1px);
}

.ghv-auth-submit:disabled {
  transform: none !important;
  opacity: .65;
}

.ghv-auth-secondary {
  border-color: rgba(128, 138, 160, .22) !important;
  color: var(--zon-muted-color) !important;
  background: transparent;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ghv-auth-secondary:hover {
  border-color: rgba(33, 199, 245, .46) !important;
  color: var(--zon-common-text-color) !important;
  box-shadow: 0 0 0 3px rgba(33, 199, 245, .08);
  transform: translateY(-1px);
}

.ghv-auth-form a {
  color: #21c7f5;
}

.ghv-auth-form a:hover {
  color: #6c55ff;
}

.ghv-auth-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media screen and (max-width: 640px) {
  .ghv-auth-form {
    width: 100% !important;
    max-width: 420px;
  }
}


/* GameHubVerse V42 - modern auth layout */
.ghv-auth-page {
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 18px 76px;
}

.ghv-auth-card {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 223, 248, .12), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(123, 77, 255, .14), transparent 34%),
    var(--zon-gmeta-bg-color);
  border: 1px solid rgba(128, 138, 160, .15);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.ghv-auth-hero {
  position: relative;
  min-height: 100%;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(33, 199, 245, .18), rgba(37, 119, 255, .10) 42%, rgba(108, 85, 255, .16)),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .10));
}

.ghv-auth-hero::before {
  content: '';
  position: absolute;
  width: 230px;
  height: 230px;
  left: -70px;
  top: -70px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34, 223, 248, .24), transparent 66%);
  pointer-events: none;
}

.ghv-auth-hero::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  right: -110px;
  bottom: -110px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(226, 75, 255, .18), transparent 66%);
  pointer-events: none;
}

.ghv-auth-badge {
  width: fit-content;
  margin-bottom: auto;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .35px;
  color: #fff;
  background: linear-gradient(135deg, #21c7f5, #2577ff 60%, #6c55ff);
  box-shadow: 0 8px 18px rgba(29, 124, 255, .20);
}

.ghv-auth-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: var(--zon-common-text-color);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.8px;
}

.ghv-auth-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 360px;
  color: var(--zon-muted-color);
  font-size: 15px;
  line-height: 1.7;
}

.ghv-auth-perks {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.ghv-auth-perks span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--zon-common-text-color);
  background: rgba(128, 138, 160, .12);
  border: 1px solid rgba(128, 138, 160, .12);
  font-size: 12px;
  font-weight: 800;
}

.ghv-auth-form {
  width: 100% !important;
  padding: 36px;
  background: rgba(0, 0, 0, .04);
}

html[zontal-theme="light"] .ghv-auth-form {
  background: rgba(255, 255, 255, .56);
}

.ghv-auth-form-head {
  margin-bottom: 22px;
}

.ghv-auth-form-head h2 {
  margin: 0 0 7px;
  color: var(--zon-common-text-color);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 900;
}

.ghv-auth-form-head p {
  margin: 0;
  color: var(--zon-muted-color);
  font-size: 14px;
  line-height: 1.5;
}

.ghv-auth-form label {
  color: var(--zon-common-text-color);
  font-size: 13px;
  font-weight: 800;
}

.ghv-auth-form .input-group {
  margin-bottom: 16px;
}

.ghv-auth-form .ghv-auth-input {
  border-radius: 13px;
  min-height: 52px;
  background: rgba(255, 255, 255, .025) !important;
}

html[zontal-theme="light"] .ghv-auth-form .ghv-auth-input {
  background: rgba(255, 255, 255, .72) !important;
}

.ghv-auth-form .ghv-auth-input::placeholder {
  color: var(--zon-muted-color);
  opacity: .82;
}

.ghv-auth-switch {
  margin: 18px 0 0;
  text-align: center;
  color: var(--zon-muted-color);
  font-size: 14px;
}

.ghv-auth-switch a {
  color: #21c7f5 !important;
  font-weight: 900;
}

.ghv-auth-switch a:hover {
  color: #6c55ff !important;
}

@media screen and (max-width: 900px) {
  .ghv-auth-page {
    align-items: flex-start;
    padding-top: 24px;
  }

  .ghv-auth-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .ghv-auth-hero {
    min-height: auto;
    padding: 28px 24px;
  }

  .ghv-auth-badge {
    margin-bottom: 28px;
  }

  .ghv-auth-form {
    padding: 26px 22px 28px;
  }
}

@media screen and (max-width: 520px) {
  .ghv-auth-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ghv-auth-card {
    border-radius: 20px;
  }

  .ghv-auth-hero {
    padding: 24px 20px;
  }

  .ghv-auth-form {
    padding: 24px 18px 26px;
  }

  .ghv-auth-form-head h2 {
    font-size: 25px;
  }
}


/* GameHubVerse V43 - auth hero spacing polish
   Removes the huge empty gap between the brand badge and the hero title. */
.ghv-auth-hero {
  justify-content: center !important;
  gap: 0;
  padding-top: 34px;
  padding-bottom: 34px;
}

.ghv-auth-badge {
  margin-bottom: 42px !important;
}

.ghv-auth-hero h1 {
  max-width: 360px;
}

.ghv-auth-perks {
  margin-top: 24px !important;
}

@media screen and (min-width: 901px) {
  .ghv-auth-card {
    min-height: 520px;
  }

  .ghv-auth-hero {
    min-height: 520px;
  }
}

@media screen and (max-width: 900px) {
  .ghv-auth-hero {
    justify-content: flex-start !important;
    gap: 0;
  }

  .ghv-auth-badge {
    margin-bottom: 24px !important;
  }
}

@media screen and (max-width: 520px) {
  .ghv-auth-badge {
    margin-bottom: 20px !important;
  }

  .ghv-auth-hero h1 {
    font-size: 28px;
  }
}


/* GameHubVerse V44 - premium auth hero visual */
.ghv-auth-card {
  position: relative;
  isolation: isolate;
}

.ghv-auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(33, 199, 245, .50), rgba(37, 119, 255, .16) 42%, rgba(108, 85, 255, .42) 72%, rgba(185, 80, 255, .24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
  z-index: 2;
}

.ghv-auth-hero {
  position: relative;
  overflow: hidden;
}

.ghv-auth-hero > * {
  position: relative;
  z-index: 2;
}

.ghv-auth-hero::before {
  width: 310px !important;
  height: 310px !important;
  left: -105px !important;
  top: -105px !important;
  background: radial-gradient(circle, rgba(33, 199, 245, .30), rgba(37, 119, 255, .10) 44%, transparent 68%) !important;
}

.ghv-auth-hero::after {
  width: 360px !important;
  height: 360px !important;
  right: -150px !important;
  bottom: -145px !important;
  background: radial-gradient(circle, rgba(185, 80, 255, .24), rgba(108, 85, 255, .10) 48%, transparent 70%) !important;
}

.ghv-auth-visual {
  position: absolute;
  z-index: 1;
  top: 74px;
  right: 32px;
  width: 210px;
  height: 170px;
  pointer-events: none;
  opacity: .98;
}

.ghv-auth-orbit {
  position: absolute;
  inset: 10px 0 0 8px;
  border-radius: 50%;
  border: 2px solid rgba(33, 199, 245, .38);
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 10px rgba(33, 199, 245, .22));
}

.ghv-auth-orbit::before,
.ghv-auth-orbit::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(135deg, #21c7f5, #2577ff 58%, #6c55ff);
  box-shadow: 0 0 18px rgba(33, 199, 245, .35);
}

.ghv-auth-orbit::before {
  width: 10px;
  height: 10px;
  left: 30px;
  top: 5px;
}

.ghv-auth-orbit::after {
  width: 7px;
  height: 7px;
  right: 28px;
  bottom: 10px;
}

.ghv-auth-pad {
  position: absolute;
  left: 38px;
  top: 45px;
  width: 122px;
  height: 72px;
  border-radius: 28px 28px 32px 32px;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.34), transparent 20%),
    linear-gradient(145deg, rgba(33, 199, 245, .95), rgba(37, 119, 255, .88) 52%, rgba(108, 85, 255, .92));
  box-shadow: 0 18px 42px rgba(29, 124, 255, .24), inset 0 1px 0 rgba(255,255,255,.36);
  transform: rotate(-7deg);
}

.ghv-auth-pad::before,
.ghv-auth-pad::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 36px;
  height: 34px;
  border-radius: 18px;
  background: inherit;
  z-index: -1;
}

.ghv-auth-pad::before {
  left: -9px;
  transform: rotate(18deg);
}

.ghv-auth-pad::after {
  right: -9px;
  transform: rotate(-18deg);
}

.ghv-auth-pad-dpad {
  position: absolute;
  left: 25px;
  top: 26px;
  width: 24px;
  height: 24px;
}

.ghv-auth-pad-dpad::before,
.ghv-auth-pad-dpad::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 7px rgba(0,0,0,.16);
}

.ghv-auth-pad-dpad::before {
  left: 9px;
  top: 0;
  width: 6px;
  height: 24px;
}

.ghv-auth-pad-dpad::after {
  left: 0;
  top: 9px;
  width: 24px;
  height: 6px;
}

.ghv-auth-pad-play {
  position: absolute;
  left: 59px;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid rgba(255,255,255,.95);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.18));
}

.ghv-auth-pad-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  right: 28px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
}

.ghv-auth-pad-dot-1 { top: 22px; }
.ghv-auth-pad-dot-2 { top: 34px; right: 18px; }
.ghv-auth-pad-dot-3 { top: 46px; }

.ghv-auth-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .3px;
  background: rgba(10, 14, 24, .42);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.ghv-auth-float-1 {
  left: 2px;
  bottom: 24px;
}

.ghv-auth-float-2 {
  right: 0;
  top: 18px;
}

.ghv-auth-badge {
  z-index: 3;
}

.ghv-auth-hero h1 {
  text-shadow: 0 3px 18px rgba(0,0,0,.18);
}

html[zontal-theme="light"] .ghv-auth-float {
  background: rgba(255, 255, 255, .54);
  color: #1b2350;
  border-color: rgba(37, 119, 255, .14);
}

html[zontal-theme="light"] .ghv-auth-pad {
  box-shadow: 0 18px 42px rgba(29, 124, 255, .20), inset 0 1px 0 rgba(255,255,255,.44);
}

@media screen and (max-width: 1100px) {
  .ghv-auth-visual {
    right: 18px;
    transform: scale(.88);
    transform-origin: top right;
  }
}

@media screen and (max-width: 900px) {
  .ghv-auth-visual {
    top: 20px;
    right: 20px;
    transform: scale(.70);
  }

  .ghv-auth-hero {
    padding-right: 150px !important;
  }
}

@media screen and (max-width: 620px) {
  .ghv-auth-visual {
    opacity: .34;
    right: -18px;
    top: 28px;
    transform: scale(.82);
  }

  .ghv-auth-hero {
    padding-right: 20px !important;
  }
}


/* GameHubVerse V45 - final auth pro polish
   Moves the auth card slightly up and makes the hero visual more premium/subtle. */
@media screen and (min-width: 901px) {
  .ghv-auth-page {
    padding-top: 18px !important;
    padding-bottom: 96px !important;
  }

  .ghv-auth-card {
    transform: translateY(-26px);
  }

  .ghv-auth-visual {
    opacity: .82;
    transform: scale(.94);
    transform-origin: top right;
  }

  .ghv-auth-hero {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  .ghv-auth-badge {
    margin-bottom: 34px !important;
  }
}

.ghv-auth-card {
  box-shadow: 0 22px 62px rgba(0, 0, 0, .20) !important;
}

.ghv-auth-card::before {
  opacity: .42 !important;
}

.ghv-auth-orbit {
  opacity: .72;
  filter: drop-shadow(0 0 8px rgba(33, 199, 245, .16)) !important;
}

.ghv-auth-pad {
  box-shadow: 0 14px 32px rgba(29, 124, 255, .18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.ghv-auth-float {
  opacity: .82;
  box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
}

.ghv-auth-hero h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,.14) !important;
}

.ghv-auth-hero p {
  max-width: 380px;
}

.ghv-auth-perks span {
  background: rgba(128, 138, 160, .10) !important;
  border-color: rgba(128, 138, 160, .10) !important;
}

html[zontal-theme="light"] .ghv-auth-card {
  box-shadow: 0 22px 58px rgba(20, 35, 70, .13) !important;
}

html[zontal-theme="light"] .ghv-auth-card::before {
  opacity: .34 !important;
}

html[zontal-theme="light"] .ghv-auth-visual {
  opacity: .74;
}

html[zontal-theme="light"] .ghv-auth-pad {
  box-shadow: 0 14px 32px rgba(29, 124, 255, .14), inset 0 1px 0 rgba(255,255,255,.46) !important;
}

@media screen and (max-width: 900px) {
  .ghv-auth-card {
    transform: none;
  }

  .ghv-auth-page {
    padding-top: 22px !important;
  }

  .ghv-auth-visual {
    opacity: .62;
  }
}

@media screen and (max-width: 620px) {
  .ghv-auth-visual {
    opacity: .26 !important;
  }

  .ghv-auth-hero {
    padding-bottom: 22px !important;
  }
}

/* GameHubVerse V47 - portrait hover preview blurred columns */
.ghv-preview-thumb,
.ghv-card-image,
.zon-card-thumb,
.ghv-featured-media {
  isolation: isolate;
}

.ghv-preview-video-bg,
.zon-preview-video-bg,
.ghv-featured-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: #000 !important;
  filter: blur(10px) saturate(1.06) brightness(.94) !important;
  transform: scale(1.08) !important;
  transition: opacity .16s ease, visibility .16s ease !important;
}

.ghv-preview-portrait .ghv-preview-video,
.ghv-preview-portrait .zon-preview-video,
.ghv-preview-video-portrait,
.ghv-featured-media.ghv-preview-portrait .ghv-featured-video,
.ghv-featured-video.ghv-preview-video-portrait {
  object-fit: contain !important;
  background: transparent !important;
  z-index: 3 !important;
}

.ghv-preview-thumb.ghv-preview-portrait.is-playing .ghv-preview-video-bg,
.ghv-preview-thumb.ghv-preview-portrait.is-playing .zon-preview-video-bg,
.ghv-card-image.ghv-preview-portrait.is-playing .ghv-preview-video-bg,
.zon-card-thumb.ghv-preview-portrait.is-playing .zon-preview-video-bg,
.ghv-featured-slide.has-portrait-preview.is-playing .ghv-featured-video-bg {
  opacity: 1 !important;
  visibility: visible !important;
}

.ghv-preview-thumb.ghv-preview-portrait.is-playing .ghv-preview-video,
.ghv-card-image.ghv-preview-portrait.is-playing .ghv-preview-video,
.zon-card-thumb.ghv-preview-portrait.is-playing .zon-preview-video,
.ghv-featured-slide.has-portrait-preview.is-playing .ghv-featured-video {
  opacity: 1 !important;
  visibility: visible !important;
}

.ghv-preview-thumb.ghv-preview-portrait.is-playing img,
.ghv-card-image.ghv-preview-portrait.is-playing img,
.zon-card-thumb.ghv-preview-portrait.is-playing img,
.ghv-featured-slide.has-portrait-preview.is-playing img {
  opacity: 0 !important;
}


/* GameHubVerse V48 - portrait hover preview runtime fix */
.ghv-preview-portrait,
.has-portrait-preview .ghv-preview-thumb,
.has-portrait-preview .ghv-card-image,
.has-portrait-preview .zon-card-thumb,
.has-portrait-preview .ghv-featured-media {
  background: #05060a !important;
}

.ghv-preview-portrait .ghv-preview-video-bg,
.ghv-preview-portrait .zon-preview-video-bg,
.has-portrait-preview .ghv-featured-video-bg {
  object-fit: cover !important;
  filter: blur(10px) saturate(1.06) brightness(.94) !important;
  transform: scale(1.08) !important;
  z-index: 2 !important;
}

.ghv-preview-portrait .ghv-preview-video,
.ghv-preview-portrait .zon-preview-video,
.has-portrait-preview .ghv-featured-video {
  object-fit: contain !important;
  background: transparent !important;
  z-index: 3 !important;
}

.ghv-preview-portrait:not(.is-playing) .ghv-preview-video,
.ghv-preview-portrait:not(.is-playing) .zon-preview-video,
.ghv-preview-portrait:not(.is-playing) .ghv-preview-video-bg,
.ghv-preview-portrait:not(.is-playing) .zon-preview-video-bg,
.has-portrait-preview:not(.is-playing) .ghv-featured-video,
.has-portrait-preview:not(.is-playing) .ghv-featured-video-bg {
  opacity: 0 !important;
  visibility: hidden !important;
}

.ghv-preview-portrait:not(.is-playing) img,
.has-portrait-preview:not(.is-playing) img {
  opacity: 1 !important;
  visibility: visible !important;
}

.ghv-preview-portrait.is-playing .ghv-preview-video,
.ghv-preview-portrait.is-playing .zon-preview-video,
.ghv-preview-portrait.is-playing .ghv-preview-video-bg,
.ghv-preview-portrait.is-playing .zon-preview-video-bg,
.has-portrait-preview.is-playing .ghv-featured-video,
.has-portrait-preview.is-playing .ghv-featured-video-bg {
  opacity: 1 !important;
  visibility: visible !important;
}

.ghv-preview-portrait.is-playing img,
.has-portrait-preview.is-playing img {
  opacity: 0 !important;
}


/* GameHubVerse V50 - explicit landscape preview option fix */
[data-preview-orientation="landscape"] .ghv-preview-video,
[data-preview-orientation="landscape"] .zon-preview-video,
.ghv-featured-slide[data-preview-orientation="landscape"] .ghv-featured-video {
  object-fit: cover !important;
  background: #000 !important;
}

[data-preview-orientation="landscape"] .ghv-preview-video-bg,
[data-preview-orientation="landscape"] .zon-preview-video-bg,
.ghv-featured-slide[data-preview-orientation="landscape"] .ghv-featured-video-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}


/* GameHubVerse V51 - banner-based portrait preview blur columns
   Uses the game banner/card image as the blurred side fill instead of blurring the video. */
.ghv-preview-portrait,
.has-portrait-preview .ghv-featured-media {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #05060a !important;
}

.ghv-preview-portrait::before,
.has-portrait-preview .ghv-featured-media::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background-image: var(--ghv-preview-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(8px) saturate(1.04) brightness(.96) !important;
  transform: scale(1.07) !important;
  transition: opacity .16s ease, visibility .16s ease !important;
}

.ghv-preview-portrait.is-playing::before,
.has-portrait-preview.is-playing .ghv-featured-media::before {
  opacity: 1 !important;
  visibility: visible !important;
}

.ghv-preview-portrait .ghv-preview-video-bg,
.ghv-preview-portrait .zon-preview-video-bg,
.has-portrait-preview .ghv-featured-video-bg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.ghv-preview-portrait .ghv-preview-video,
.ghv-preview-portrait .zon-preview-video,
.ghv-preview-video-portrait,
.has-portrait-preview .ghv-featured-video {
  object-fit: contain !important;
  background: transparent !important;
  z-index: 3 !important;
}

.ghv-preview-portrait.is-playing img,
.has-portrait-preview.is-playing img {
  opacity: 0 !important;
}

.ghv-preview-portrait:not(.is-playing) img,
.has-portrait-preview:not(.is-playing) img {
  opacity: 1 !important;
  visibility: visible !important;
}


/* GameHubVerse V53 - mobile portrait-columns behaves like plain portrait */

@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1024px) {
  body.ghv-mobile-portrait-v18 .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"],
  body.ghv-mobile-portrait-v18 .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"],
  body.ghv-mobile-portrait-v18 .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage,
  body.ghv-mobile-portrait-v18 .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage {
    aspect-ratio: 9 / 16 !important;
    background: #000 !important;
    isolation: auto !important;
  }

  body.ghv-mobile-portrait-v18 .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"]::before,
  body.ghv-mobile-portrait-v18 .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"]::after,
  body.ghv-mobile-portrait-v18 .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"]::before,
  body.ghv-mobile-portrait-v18 .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"]::after,
  body.ghv-mobile-portrait-v18 .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage::before,
  body.ghv-mobile-portrait-v18 .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage::after,
  body.ghv-mobile-portrait-v18 .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage::before,
  body.ghv-mobile-portrait-v18 .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage::after {
    display: none !important;
    content: none !important;
  }

  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"] > iframe#zonFrame,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"] > iframe#zonFrame,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage > iframe#zonFrame,
  body.ghv-mobile-portrait-v18:not(.ghv-mobile-theater) .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage > iframe#zonFrame {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  body.ghv-mobile-theater .ghv-player-stage[data-ghv-orientation-mode="portrait_columns"],
  body.ghv-mobile-theater .ghv-player-stage[data-ghv-orientation-mode="portrait-columns"],
  body.ghv-mobile-theater .ghv-player-shell[data-ghv-orientation-mode="portrait_columns"] .ghv-player-stage,
  body.ghv-mobile-theater .ghv-player-shell[data-ghv-orientation-mode="portrait-columns"] .ghv-player-stage {
    background: #000 !important;
  }
}



/* GameHubVerse V55 - game page similar/more hover previews */
.ghv-similar-grid .game-card.has-preview-video,
.ghv-sidebar-grid .game-card.has-preview-video,
.ghv-similar-grid .game-card,
.ghv-sidebar-grid .game-card {
  width: 100% !important;
  max-width: none !important;
}

.ghv-similar-grid .ghv-game-page-preview,
.ghv-sidebar-grid .ghv-game-page-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  line-height: 0 !important;
  background: #000 !important;
  isolation: isolate !important;
}

.ghv-similar-grid .ghv-game-page-preview > img,
.ghv-sidebar-grid .ghv-game-page-preview > img,
.ghv-similar-grid .ghv-game-page-preview > video,
.ghv-sidebar-grid .ghv-game-page-preview > video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ghv-similar-grid .ghv-game-page-preview > img,
.ghv-sidebar-grid .ghv-game-page-preview > img {
  object-fit: cover !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .16s ease, visibility .16s ease !important;
}

.ghv-similar-grid .ghv-game-page-preview > .ghv-preview-video,
.ghv-sidebar-grid .ghv-game-page-preview > .ghv-preview-video,
.ghv-similar-grid .ghv-game-page-preview > .zon-preview-video,
.ghv-sidebar-grid .ghv-game-page-preview > .zon-preview-video {
  object-fit: cover !important;
  z-index: 2 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #000 !important;
  transition: opacity .16s ease, visibility .16s ease !important;
}

.ghv-similar-grid .ghv-game-page-preview.ghv-preview-portrait > .ghv-preview-video,
.ghv-sidebar-grid .ghv-game-page-preview.ghv-preview-portrait > .ghv-preview-video,
.ghv-similar-grid .ghv-game-page-preview.ghv-preview-portrait > .zon-preview-video,
.ghv-sidebar-grid .ghv-game-page-preview.ghv-preview-portrait > .zon-preview-video {
  object-fit: contain !important;
  background: transparent !important;
  z-index: 3 !important;
}

.ghv-similar-grid .ghv-game-page-preview.is-playing > .ghv-preview-video,
.ghv-sidebar-grid .ghv-game-page-preview.is-playing > .ghv-preview-video,
.ghv-similar-grid .ghv-game-page-preview.is-playing > .zon-preview-video,
.ghv-sidebar-grid .ghv-game-page-preview.is-playing > .zon-preview-video {
  opacity: 1 !important;
  visibility: visible !important;
}

.ghv-similar-grid .ghv-game-page-preview.is-playing > img,
.ghv-sidebar-grid .ghv-game-page-preview.is-playing > img {
  opacity: 0 !important;
}

.ghv-similar-grid .ghv-game-page-preview.ghv-preview-portrait::before,
.ghv-sidebar-grid .ghv-game-page-preview.ghv-preview-portrait::before {
  border-radius: 12px !important;
}


/* GameHubVerse V55 - themed sidebar category icons */
#zon_categories.category-list {
  display: block;
}

#zon_categories.category-list li {
  margin: 0 0 4px;
}

#zon_categories.category-list .ghv-sidebar-category-link {
  position: relative;
  min-height: 42px;
  padding: 5px 11px 5px 10px !important;
  border-radius: 14px;
  color: var(--zon-common-text-color);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

#zon_categories.category-list .ghv-sidebar-category-link:hover {
  background: linear-gradient(90deg, rgba(34, 223, 248, .08), rgba(123, 77, 255, .10));
  transform: translateX(2px);
}

.ghv-sidebar-cat-icon {
  --ghv-cat-a: var(--ghv-brand-cyan, #22dff8);
  --ghv-cat-b: var(--ghv-brand-purple, #7b4dff);
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--ghv-cat-a);
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .24), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--ghv-cat-a) 18%, transparent), color-mix(in srgb, var(--ghv-cat-b) 20%, transparent));
  border: 1px solid color-mix(in srgb, var(--ghv-cat-a) 38%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 6px 14px color-mix(in srgb, var(--ghv-cat-b) 15%, transparent);
  overflow: hidden;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ghv-sidebar-cat-icon::after {
  content: '';
  position: absolute;
  inset: auto -22% -38% 18%;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ghv-cat-b) 42%, transparent);
  filter: blur(9px);
  opacity: .55;
}

.ghv-sidebar-cat-icon svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  display: block;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ghv-sidebar-cat-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
}

#zon_categories.category-list .ghv-sidebar-category-link:hover .ghv-sidebar-cat-icon {
  transform: translateY(-1px) scale(1.04);
  color: #fff;
  border-color: color-mix(in srgb, var(--ghv-cat-a) 72%, transparent);
  background: linear-gradient(135deg, var(--ghv-cat-a), var(--ghv-cat-b));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ghv-cat-a) 18%, transparent),
    0 9px 20px color-mix(in srgb, var(--ghv-cat-b) 23%, transparent);
}

.ghv-sidebar-cat-icon-action,
.ghv-sidebar-cat-icon-arcade,
.ghv-sidebar-cat-icon-io {
  --ghv-cat-a: #22dff8;
  --ghv-cat-b: #1d7cff;
}

.ghv-sidebar-cat-icon-board,
.ghv-sidebar-cat-icon-card,
.ghv-sidebar-cat-icon-strategy {
  --ghv-cat-a: #7b4dff;
  --ghv-cat-b: #e24bff;
}

.ghv-sidebar-cat-icon-thinky,
.ghv-sidebar-cat-icon-trivia,
.ghv-sidebar-cat-icon-word,
.ghv-sidebar-cat-icon-educational,
.ghv-sidebar-cat-icon-puzzle {
  --ghv-cat-a: #1d7cff;
  --ghv-cat-b: #22dff8;
}

.ghv-sidebar-cat-icon-clicker,
.ghv-sidebar-cat-icon-two-player,
.ghv-sidebar-cat-icon-sports {
  --ghv-cat-a: #e24bff;
  --ghv-cat-b: #7b4dff;
}

.ghv-sidebar-cat-icon-girls,
.ghv-sidebar-cat-icon-casual {
  --ghv-cat-a: #e24bff;
  --ghv-cat-b: #22dff8;
}

.ghv-sidebar-cat-icon-racing,
.ghv-sidebar-cat-icon-simulation,
.ghv-sidebar-cat-icon-adventure,
.ghv-sidebar-cat-icon-shooting {
  --ghv-cat-a: #22dff8;
  --ghv-cat-b: #7b4dff;
}

html[zontal-theme="light"] .ghv-sidebar-cat-icon {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .70), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--ghv-cat-a) 18%, #ffffff), color-mix(in srgb, var(--ghv-cat-b) 20%, #ffffff));
  box-shadow: 0 6px 14px rgba(29, 124, 255, .10);
}

@supports not (color: color-mix(in srgb, #fff 50%, transparent)) {
  .ghv-sidebar-cat-icon {
    background: linear-gradient(135deg, rgba(34, 223, 248, .16), rgba(123, 77, 255, .18));
    border-color: rgba(34, 223, 248, .28);
    box-shadow: 0 6px 14px rgba(29, 124, 255, .12);
  }

  #zon_categories.category-list .ghv-sidebar-category-link:hover .ghv-sidebar-cat-icon {
    background: linear-gradient(135deg, #22dff8, #7b4dff);
    box-shadow: 0 9px 20px rgba(123, 77, 255, .22);
  }
}


/* GameHubVerse V55 - sidebar top icons and More buttons polish */
.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(145deg, rgba(34,223,248,.18), rgba(29,124,255,.18) 48%, rgba(226,75,255,.16)) !important;
  border: 1px solid rgba(34,223,248,.18) !important;
  box-shadow: 0 7px 16px rgba(29,124,255,.12) !important;
  color: #22dff8 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg path,
.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg circle,
.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg rect {
  stroke: currentColor !important;
  fill: none !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-newest {
  color: #7b8cff !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, rgba(123,76,255,.20), rgba(29,124,255,.18)) !important;
  border-color: rgba(123,76,255,.24) !important;
  box-shadow: 0 7px 16px rgba(123,76,255,.13) !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-popular {
  color: #22dff8 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(145deg, rgba(34,223,248,.20), rgba(29,124,255,.16)) !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-autoplay {
  color: #e24bff !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, rgba(226,75,255,.20), rgba(123,76,255,.18)) !important;
  border-color: rgba(226,75,255,.25) !important;
  box-shadow: 0 7px 16px rgba(226,75,255,.13) !important;
}

.zontal-sidebar-body .list > li > a:hover .ghv-sidebar-main-icon,
.zontal-sidebar-body .list > li > a.active-page .ghv-sidebar-main-icon {
  color: #fff !important;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20) !important;
  background: var(--ghv-brand-gradient) !important;
  box-shadow: 0 9px 20px rgba(29,124,255,.22) !important;
}

.zontal-sidebar-body .list > li > a:hover .ghv-sidebar-main-icon svg path,
.zontal-sidebar-body .list > li > a:hover .ghv-sidebar-main-icon svg circle,
.zontal-sidebar-body .list > li > a:hover .ghv-sidebar-main-icon svg rect,
.zontal-sidebar-body .list > li > a.active-page .ghv-sidebar-main-icon svg path,
.zontal-sidebar-body .list > li > a.active-page .ghv-sidebar-main-icon svg circle,
.zontal-sidebar-body .list > li > a.active-page .ghv-sidebar-main-icon svg rect {
  stroke: currentColor !important;
  fill: none !important;
}

.zontal-sidebar .more-button,
.zontal-sidebar button.more-button,
.zontal-sidebar a.more-button {
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(128,138,160,.14) !important;
  background: rgba(128,138,160,.08) !important;
  color: var(--zon-common-text-color) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
}

.zontal-sidebar .more-button svg {
  width: 18px !important;
  height: 18px !important;
}

.zontal-sidebar .more-button svg path {
  stroke: currentColor !important;
}

.zontal-sidebar .more-button:hover {
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(29,124,255,.18) !important;
}

.ghv-section-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(128,138,160,.10) !important;
  border: 1px solid rgba(128,138,160,.16) !important;
  color: var(--zon-common-text-color) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.ghv-section-more svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  overflow: visible !important;
}

.ghv-section-more svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ghv-section-more:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(29,124,255,.20) !important;
  transform: translateY(-1px) !important;
}

@media screen and (max-width: 768px) {
  .ghv-section-more {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}


/* GameHubVerse V56 - CrazyGames-like slim sidebar icons and rollback sidebar More */
.zontal-sidebar-body .list > li > a,
#zon_categories.category-list .ghv-sidebar-category-link {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 13px !important;
  min-height: 35px !important;
  padding: 5px 10px !important;
}

.zontal-sidebar-body .list > li > a .icon-label,
#zon_categories.category-list .ghv-sidebar-category-link .text {
  min-width: 0 !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon,
#zon_categories.category-list .ghv-sidebar-cat-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #8f95ff !important;
  overflow: visible !important;
  transform: none !important;
  filter: drop-shadow(0 0 5px rgba(123, 77, 255, .18)) !important;
}

#zon_categories.category-list .ghv-sidebar-cat-icon::after {
  display: none !important;
  content: none !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg,
#zon_categories.category-list .ghv-sidebar-cat-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg path,
.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg circle,
.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg rect,
#zon_categories.category-list .ghv-sidebar-cat-icon svg *,
#zon_categories.category-list .ghv-sidebar-cat-icon svg path,
#zon_categories.category-list .ghv-sidebar-cat-icon svg circle,
#zon_categories.category-list .ghv-sidebar-cat-icon svg rect {
  stroke: currentColor !important;
  fill: none !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-all,
#zon_categories.category-list .ghv-sidebar-cat-icon-action,
#zon_categories.category-list .ghv-sidebar-cat-icon-arcade,
#zon_categories.category-list .ghv-sidebar-cat-icon-simulation {
  color: #22dff8 !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-newest,
#zon_categories.category-list .ghv-sidebar-cat-icon-board,
#zon_categories.category-list .ghv-sidebar-cat-icon-card,
#zon_categories.category-list .ghv-sidebar-cat-icon-strategy,
#zon_categories.category-list .ghv-sidebar-cat-icon-sports {
  color: #8f95ff !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-popular,
#zon_categories.category-list .ghv-sidebar-cat-icon-thinky,
#zon_categories.category-list .ghv-sidebar-cat-icon-trivia,
#zon_categories.category-list .ghv-sidebar-cat-icon-word,
#zon_categories.category-list .ghv-sidebar-cat-icon-racing {
  color: #21a7ff !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon-autoplay,
#zon_categories.category-list .ghv-sidebar-cat-icon-clicker,
#zon_categories.category-list .ghv-sidebar-cat-icon-two-player,
#zon_categories.category-list .ghv-sidebar-cat-icon-girls {
  color: #b85cff !important;
}

.zontal-sidebar-body .list > li > a:hover .ghv-sidebar-main-icon,
.zontal-sidebar-body .list > li > a.active-page .ghv-sidebar-main-icon,
#zon_categories.category-list .ghv-sidebar-category-link:hover .ghv-sidebar-cat-icon {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(34, 223, 248, .25)) !important;
  transform: none !important;
}

#zon_categories.category-list .ghv-sidebar-category-link {
  border-radius: 9px !important;
}

#zon_categories.category-list .ghv-sidebar-category-link:hover {
  background: rgba(128, 138, 160, .08) !important;
  transform: none !important;
  box-shadow: none !important;
}

.zontal-sidebar .more-button,
.zontal-sidebar button.more-button,
.zontal-sidebar a.more-button {
  min-height: auto !important;
  height: auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--zon-common-text-color) !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
  margin-top: 12px !important;
}

.zontal-sidebar .more-button svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.zontal-sidebar .more-button svg path {
  stroke: currentColor !important;
}

.zontal-sidebar .more-button:hover {
  color: #fff !important;
  background: rgba(128, 138, 160, .08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.ghv-section-more {
  /* Keep the homepage right-side More button as the cleaner pill style. */
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-body .list > li > a,
  .zontal-sidebar.active #zon_categories.category-list .ghv-sidebar-category-link {
    grid-template-columns: 24px minmax(0, 1fr) !important;
  }
}


/* GameHubVerse V61 - polished homepage More + theme-aware sidebar More */
.ghv-section-heading .ghv-section-more,
.ghv-section-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: rgba(128, 138, 160, .10) !important;
  border: 1px solid rgba(128, 138, 160, .16) !important;
  color: var(--zon-common-text-color) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.ghv-section-more span {
  display: inline-flex !important;
}

.ghv-section-more svg {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  overflow: visible !important;
}

.ghv-section-more svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ghv-section-heading .ghv-section-more:hover,
.ghv-section-more:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(29, 124, 255, .20) !important;
  transform: translateY(-1px) !important;
}

html[zontal-theme="light"] .ghv-section-heading .ghv-section-more,
html[zontal-theme="light"] .ghv-section-more {
  background: rgba(128, 138, 160, .12) !important;
  border-color: rgba(128, 138, 160, .18) !important;
  color: var(--zon-common-text-color) !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar .zontal-sidebar-body a.more-button,
.zontal-sidebar .zontal-sidebar-body > a.more-button,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar.active .zontal-sidebar-body a.more-button {
  display: flex !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 14px !important;
  margin: 14px 0 !important;
  border-radius: 9px !important;
  border: 1px solid rgba(128, 138, 160, .14) !important;
  background: rgba(128, 138, 160, .09) !important;
  color: var(--zon-common-text-color) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar .zontal-sidebar-body a.more-button svg,
.zontal-sidebar .zontal-sidebar-body > a.more-button svg,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar.active .zontal-sidebar-body a.more-button svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  opacity: .86 !important;
  margin: 0 !important;
  color: currentColor !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button svg path,
.zontal-sidebar .zontal-sidebar-body a.more-button svg path,
.zontal-sidebar .zontal-sidebar-body > a.more-button svg path,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button svg path,
.zontal-sidebar.active .zontal-sidebar-body a.more-button svg path {
  stroke: currentColor !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body a.more-button:hover,
.zontal-sidebar .zontal-sidebar-body > a.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body a.more-button:hover {
  background: rgba(128, 138, 160, .14) !important;
  border-color: rgba(34, 223, 248, .20) !important;
  color: var(--zon-common-text-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[zontal-theme="dark"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
html[zontal-theme="dark"] .zontal-sidebar .zontal-sidebar-body a.more-button:hover,
html[zontal-theme="dark"] .zontal-sidebar .zontal-sidebar-body > a.more-button:hover {
  color: #fff !important;
}

html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body a.more-button,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body > a.more-button {
  background: rgba(128, 138, 160, .11) !important;
  border-color: rgba(128, 138, 160, .17) !important;
  color: var(--zon-common-text-color) !important;
}

/* GameHubVerse V62 - slightly larger sidebar icon system + clear Categories More hover */
.zontal-sidebar-body .list > li > a,
#zon_categories.category-list .ghv-sidebar-category-link {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
  filter: drop-shadow(0 0 6px rgba(123, 77, 255, .20)) !important;
}

#zon_categories.category-list .ghv-sidebar-cat-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
  filter: drop-shadow(0 0 6px rgba(123, 77, 255, .20)) !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg,
#zon_categories.category-list .ghv-sidebar-cat-icon svg {
  width: 19px !important;
  height: 19px !important;
}

.zontal-sidebar-body .list > li > a:hover .ghv-sidebar-main-icon,
.zontal-sidebar-body .list > li > a.active-page .ghv-sidebar-main-icon,
#zon_categories.category-list .ghv-sidebar-category-link:hover .ghv-sidebar-cat-icon {
  filter: drop-shadow(0 0 8px rgba(34, 223, 248, .30)) !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar .zontal-sidebar-body a.more-button,
.zontal-sidebar .zontal-sidebar-body > a.more-button {
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body a.more-button:hover,
.zontal-sidebar .zontal-sidebar-body > a.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body a.more-button:hover {
  background: linear-gradient(90deg, rgba(34, 223, 248, .10), rgba(123, 77, 255, .12)) !important;
  border-color: rgba(34, 223, 248, .34) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(34, 223, 248, .06), 0 8px 18px rgba(29, 124, 255, .10) !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover svg,
.zontal-sidebar .zontal-sidebar-body a.more-button:hover svg,
.zontal-sidebar .zontal-sidebar-body > a.more-button:hover svg {
  opacity: 1 !important;
}

html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body a.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body > a.more-button:hover {
  background: linear-gradient(90deg, rgba(34, 223, 248, .12), rgba(123, 77, 255, .11)) !important;
  border-color: rgba(29, 124, 255, .30) !important;
  color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(34, 223, 248, .08), 0 8px 18px rgba(29, 124, 255, .08) !important;
}


/* GameHubVerse V63 - More chevron cleanup and category More hover parity */
.ghv-section-more svg {
  width: 12px !important;
  height: 12px !important;
}

.ghv-section-more svg path {
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Force category More button to use the same hover feel as the Popular Games More button. */
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar.active .zontal-sidebar-body #zon-category-loader.more-button {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:focus,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:focus,
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:active,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:active,
.zontal-sidebar.active .zontal-sidebar-body #zon-category-loader.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button:hover {
  background: linear-gradient(90deg, rgba(34, 223, 248, .10), rgba(123, 77, 255, .12)) !important;
  border-color: rgba(34, 223, 248, .34) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(34, 223, 248, .06), 0 8px 18px rgba(29, 124, 255, .10) !important;
}

.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:hover svg,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover svg,
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:focus svg,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:focus svg,
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:active svg,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:active svg {
  opacity: 1 !important;
  color: currentColor !important;
}

.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:hover svg path,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover svg path,
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:focus svg path,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:focus svg path,
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:active svg path,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:active svg path {
  stroke: currentColor !important;
}

html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:focus,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:focus,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:active,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:active {
  background: linear-gradient(90deg, rgba(34, 223, 248, .12), rgba(123, 77, 255, .11)) !important;
  border-color: rgba(29, 124, 255, .30) !important;
  color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(34, 223, 248, .08), 0 8px 18px rgba(29, 124, 255, .08) !important;
}


/* GameHubVerse V64 - plain section More and collapsed sidebar More arrow fix */
.ghv-section-heading .ghv-section-more,
.ghv-section-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--zon-common-text-color) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .18s ease, opacity .18s ease !important;
}

.ghv-section-more span {
  display: inline-flex !important;
}

.ghv-section-more svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin-left: 2px !important;
  overflow: visible !important;
}

.ghv-section-more svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ghv-section-heading .ghv-section-more:hover,
.ghv-section-more:hover {
  color: var(--ghv-brand-cyan, #22dff8) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[zontal-theme="light"] .ghv-section-heading .ghv-section-more,
html[zontal-theme="light"] .ghv-section-more {
  background: transparent !important;
  border: 0 !important;
  color: var(--zon-common-text-color) !important;
}

html[zontal-theme="light"] .ghv-section-heading .ghv-section-more:hover,
html[zontal-theme="light"] .ghv-section-more:hover {
  color: var(--ghv-brand-blue, #1d7cff) !important;
}

/* Same hover behavior for both sidebar More buttons. */
.zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body a.more-button:hover,
.zontal-sidebar .zontal-sidebar-body > a.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body #zon-category-loader.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body a.more-button:hover {
  background: linear-gradient(90deg, rgba(34, 223, 248, .10), rgba(123, 77, 255, .12)) !important;
  border-color: rgba(34, 223, 248, .34) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(34, 223, 248, .06), 0 8px 18px rgba(29, 124, 255, .10) !important;
  transform: none !important;
}

html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body #zon-category-loader.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body a.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body > a.more-button:hover {
  background: linear-gradient(90deg, rgba(34, 223, 248, .12), rgba(123, 77, 255, .11)) !important;
  border-color: rgba(29, 124, 255, .30) !important;
  color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(34, 223, 248, .08), 0 8px 18px rgba(29, 124, 255, .08) !important;
}

/* When sidebar is collapsed, More should be arrow-only, not cropped text. */
.zontal-sidebar.close .zontal-sidebar-body #zon-category-loader.more-button,
.zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar.close .zontal-sidebar-body a.more-button,
.zontal-sidebar.close .zontal-sidebar-body > a.more-button {
  display: flex !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 10px auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  text-indent: -999px !important;
  white-space: nowrap !important;
  border-radius: 9px !important;
}

.zontal-sidebar.close .zontal-sidebar-body #zon-category-loader.more-button svg,
.zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar.close .zontal-sidebar-body a.more-button svg,
.zontal-sidebar.close .zontal-sidebar-body > a.more-button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  opacity: .9 !important;
  transform: none !important;
  text-indent: 0 !important;
}

.zontal-sidebar.close .zontal-sidebar-body #zon-category-loader.more-button svg path,
.zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button svg path,
.zontal-sidebar.close .zontal-sidebar-body a.more-button svg path,
.zontal-sidebar.close .zontal-sidebar-body > a.more-button svg path {
  stroke: currentColor !important;
}


/* GameHubVerse V65 - sidebar More no layout until hover
   Sidebar More rows are plain by default; highlight appears only on mouse hover/focus. */
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar .zontal-sidebar-body a.more-button,
.zontal-sidebar .zontal-sidebar-body > a.more-button,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar.active .zontal-sidebar-body a.more-button {
  display: flex !important;
  width: 100% !important;
  min-height: 32px !important;
  height: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 7px 10px !important;
  margin: 8px 0 12px 0 !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--zon-common-text-color) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar .zontal-sidebar-body a.more-button svg,
.zontal-sidebar .zontal-sidebar-body > a.more-button svg,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar.active .zontal-sidebar-body a.more-button svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  opacity: .86 !important;
  margin: 0 !important;
  color: currentColor !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button svg path,
.zontal-sidebar .zontal-sidebar-body a.more-button svg path,
.zontal-sidebar .zontal-sidebar-body > a.more-button svg path,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button svg path,
.zontal-sidebar.active .zontal-sidebar-body a.more-button svg path {
  stroke: currentColor !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:focus,
.zontal-sidebar .zontal-sidebar-body a.more-button:hover,
.zontal-sidebar .zontal-sidebar-body a.more-button:focus,
.zontal-sidebar .zontal-sidebar-body > a.more-button:hover,
.zontal-sidebar .zontal-sidebar-body > a.more-button:focus,
.zontal-sidebar.active .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar.active .zontal-sidebar-body a.more-button:hover {
  background: rgba(128, 138, 160, .10) !important;
  background-color: rgba(128, 138, 160, .10) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button:focus,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body a.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body a.more-button:focus,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body > a.more-button:hover,
html[zontal-theme="light"] .zontal-sidebar .zontal-sidebar-body > a.more-button:focus {
  background: rgba(128, 138, 160, .12) !important;
  background-color: rgba(128, 138, 160, .12) !important;
  color: var(--zon-common-text-color) !important;
}

/* Collapsed sidebar: only arrow/icon, no cropped text and no background until hover. */
.zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar.close .zontal-sidebar-body a.more-button,
.zontal-sidebar.close .zontal-sidebar-body > a.more-button {
  display: flex !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 8px auto 12px auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  text-indent: -999px !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar.close .zontal-sidebar-body a.more-button svg,
.zontal-sidebar.close .zontal-sidebar-body > a.more-button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  opacity: .9 !important;
  transform: none !important;
  text-indent: 0 !important;
}

.zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button:hover,
.zontal-sidebar.close .zontal-sidebar-body a.more-button:hover,
.zontal-sidebar.close .zontal-sidebar-body > a.more-button:hover {
  background: rgba(128, 138, 160, .10) !important;
  background-color: rgba(128, 138, 160, .10) !important;
}


/* GameHubVerse V66 - compact professional sidebar polish
   Slightly tighter sidebar content so the logo remains dominant without enlarging the logo box. */
.zontal-sidebar-body {
  font-size: 13px !important;
}

.zontal-sidebar-body .list > li > a,
#zon_categories.category-list .ghv-sidebar-category-link {
  grid-template-columns: 25px minmax(0, 1fr) !important;
  column-gap: 13px !important;
  min-height: 35px !important;
  padding: 5px 10px !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon,
#zon_categories.category-list .ghv-sidebar-cat-icon {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  flex: 0 0 23px !important;
}

.zontal-sidebar-body .list > li > a .ghv-sidebar-main-icon svg,
#zon_categories.category-list .ghv-sidebar-cat-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.zontal-sidebar-body .list > li > a .icon-label,
#zon_categories.category-list .ghv-sidebar-category-link .text span,
.zontal-sidebar .game-list .text span {
  font-size: 13px !important;
  line-height: 1.18 !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text p,
.zontal-sidebar .game-list .text p {
  font-size: 11px !important;
  line-height: 1.18 !important;
}

#zon_categories.category-list li {
  margin-bottom: 2px !important;
}

.zontal-sidebar .game-list li a {
  gap: 11px !important;
  margin-bottom: 13px !important;
}

.zontal-sidebar .game-list li a img,
.zontal-sidebar .game-list img {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.zontal-sidebar .sb-divider {
  font-size: 9.5px !important;
  letter-spacing: .12em !important;
  margin-top: 12px !important;
  margin-bottom: 9px !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar .zontal-sidebar-body a.more-button,
.zontal-sidebar .zontal-sidebar-body > a.more-button {
  min-height: 30px !important;
  height: auto !important;
  padding: 6px 10px !important;
  margin: 7px 0 11px 0 !important;
  font-size: 13px !important;
  gap: 11px !important;
}

.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button svg,
.zontal-sidebar .zontal-sidebar-body a.more-button svg,
.zontal-sidebar .zontal-sidebar-body > a.more-button svg {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
}

.zontal-sidebar-footer {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.close .zontal-sidebar-body button#zon-category-loader.more-button,
  .zontal-sidebar.close .zontal-sidebar-body a.more-button,
  .zontal-sidebar.close .zontal-sidebar-body > a.more-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}

/* GameHubVerse V67 - modern static legal pages and footer polish */
.ghv-static-page-shell {
  width: min(1040px, calc(100% - 28px));
  margin: 38px auto 72px;
}

.ghv-static-page-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 223, 248, .13), transparent 32%),
    radial-gradient(circle at 96% 6%, rgba(226, 75, 255, .11), transparent 30%),
    linear-gradient(180deg, rgba(128, 138, 160, .115), rgba(128, 138, 160, .055));
  border: 1px solid rgba(128, 138, 160, .17);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
}

.ghv-static-page-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(34, 223, 248, .10), rgba(123, 77, 255, .08), rgba(226, 75, 255, .08));
  height: 3px;
}

.ghv-static-page-hero {
  padding: 36px 42px 26px;
  border-bottom: 1px solid rgba(128, 138, 160, .14);
}

.ghv-static-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(34, 223, 248, .10);
  border: 1px solid rgba(34, 223, 248, .18);
  color: var(--ghv-brand-cyan, #22dff8);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 16px;
}

.ghv-static-page-badge span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ghv-brand-gradient);
  box-shadow: 0 0 12px rgba(34, 223, 248, .55);
}

.ghv-static-page-hero h1 {
  margin: 0;
  color: var(--zon-common-text-color);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.035em;
}

.ghv-static-page-desc {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--zon-muted-color);
  font-size: 15px;
  line-height: 1.65;
}

.ghv-static-page-content {
  padding: 32px 42px 42px;
  color: var(--zon-common-text-color);
  font-size: 15px;
  line-height: 1.78;
}

.ghv-static-page-content > .ghv-legal-page > h2:first-child {
  display: none;
}

.ghv-static-page-content p {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--zon-common-text-color) 86%, var(--zon-muted-color));
}

.ghv-static-page-content strong {
  color: var(--zon-common-text-color);
  font-weight: 900;
}

.ghv-static-page-content a {
  color: var(--ghv-brand-cyan, #22dff8);
  font-weight: 800;
  text-decoration: none;
}

.ghv-static-page-content a:hover {
  color: var(--ghv-brand-purple, #7b4dff);
}

.ghv-static-page-content h2,
.ghv-static-page-content h3 {
  color: var(--zon-common-text-color);
  font-weight: 950;
  letter-spacing: -.015em;
}

.ghv-static-page-content h2 {
  font-size: 24px;
  margin: 10px 0 18px;
}

.ghv-static-page-content h3 {
  position: relative;
  font-size: 18px;
  margin: 30px 0 12px;
  padding-left: 14px;
}

.ghv-static-page-content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: var(--ghv-brand-gradient);
  box-shadow: 0 0 12px rgba(34, 223, 248, .24);
}

.ghv-static-page-content ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 22px;
  padding: 0;
  list-style: none;
}

.ghv-static-page-content li {
  position: relative;
  padding: 12px 14px 12px 38px;
  border-radius: 14px;
  background: rgba(128, 138, 160, .075);
  border: 1px solid rgba(128, 138, 160, .10);
  color: color-mix(in srgb, var(--zon-common-text-color) 84%, var(--zon-muted-color));
}

.ghv-static-page-content li::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ghv-brand-gradient);
  box-shadow: 0 0 10px rgba(34, 223, 248, .25);
}

.ghv-static-page-content em {
  color: var(--zon-muted-color);
}

/* Hide the public-facing template note if an older installed legal page still has it. */
.ghv-static-page-content .ghv-legal-page > p:last-child em {
  display: none;
}

.ghv-static-page-content .ghv-legal-page > p:last-child:has(em) {
  display: none;
}

/* Sidebar footer legal links polish */
.zontal-sidebar-footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px !important;
  align-items: start !important;
  padding: 2px 20px 18px !important;
  margin-top: 18px !important;
}

.zontal-sidebar-footer a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px;
  color: var(--zon-muted-color) !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease !important;
}

.zontal-sidebar-footer a:hover {
  color: var(--ghv-brand-cyan, #22dff8) !important;
  transform: translateX(2px);
}

.zontal-sidebar-footer span {
  grid-column: 1 / -1;
  display: block !important;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(128, 138, 160, .14);
  color: color-mix(in srgb, var(--zon-muted-color) 85%, transparent) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

html[zontal-theme="light"] .ghv-static-page-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 223, 248, .12), transparent 32%),
    radial-gradient(circle at 96% 6%, rgba(226, 75, 255, .10), transparent 30%),
    linear-gradient(180deg, #ffffff, #f7f9ff);
  border-color: rgba(128, 138, 160, .20);
  box-shadow: 0 22px 70px rgba(29, 45, 80, .12);
}

html[zontal-theme="light"] .ghv-static-page-content li {
  background: rgba(29, 124, 255, .045);
  border-color: rgba(29, 124, 255, .09);
}

@media screen and (max-width: 900px) {
  .ghv-static-page-shell {
    width: min(100%, calc(100% - 18px));
    margin: 22px auto 52px;
  }

  .ghv-static-page-hero {
    padding: 28px 22px 22px;
  }

  .ghv-static-page-content {
    padding: 24px 22px 30px;
    font-size: 14px;
  }

  .ghv-static-page-content li {
    padding: 11px 12px 11px 34px;
  }
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.close .zontal-sidebar-footer {
    display: none !important;
  }
}

/* GameHubVerse V71 - pro sidebar footer polish */
.zontal-sidebar-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 6px !important;
  margin-top: 13px !important;
  padding: 14px 16px 18px !important;
  border-top: 1px solid rgba(128, 138, 160, .14) !important;
  box-sizing: border-box !important;
}

.zontal-sidebar-footer a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-height: 17px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--zon-muted-color) 92%, transparent) !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: .88 !important;
  transition: color .18s ease, opacity .18s ease, transform .18s ease !important;
}

.zontal-sidebar-footer a::before {
  display: none !important;
  content: none !important;
}

.zontal-sidebar-footer a:hover {
  color: var(--ghv-brand-cyan, #22dff8) !important;
  opacity: 1 !important;
  transform: translateX(2px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.zontal-sidebar-footer span {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding-top: 11px !important;
  border-top: 1px solid rgba(128, 138, 160, .14) !important;
  color: color-mix(in srgb, var(--zon-muted-color) 78%, transparent) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Make footer compact but readable inside the current 260px sidebar. */
.zontal-sidebar:not(.close) .zontal-sidebar-footer {
  max-width: 226px !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-footer a {
  max-width: 100% !important;
}

/* In collapsed/sidebar-icon mode footer should not create clipped text. */
.zontal-sidebar.close .zontal-sidebar-footer {
  display: none !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer {
  border-top-color: rgba(128, 138, 160, .20) !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer a {
  color: color-mix(in srgb, var(--zon-common-text-color) 64%, transparent) !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer a:hover {
  color: var(--ghv-brand-blue, #1d7cff) !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer span {
  color: color-mix(in srgb, var(--zon-common-text-color) 54%, transparent) !important;
  border-top-color: rgba(128, 138, 160, .18) !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-footer {
    display: flex !important;
  }

  .zontal-sidebar.close .zontal-sidebar-footer {
    display: none !important;
  }
}


/* GameHubVerse V72 - sidebar footer social icons and smaller legal links */
.zontal-sidebar-footer a:not(.ghv-sidebar-social-link) {
  font-size: 10.8px !important;
  line-height: 1.22 !important;
  font-weight: 600 !important;
  opacity: .82 !important;
}

.zontal-sidebar-footer a:not(.ghv-sidebar-social-link):hover {
  opacity: 1 !important;
}

.ghv-sidebar-social-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 9px 0 2px !important;
  padding: 0 !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(128, 138, 160, .075) !important;
  border: 1px solid rgba(128, 138, 160, .24) !important;
  color: color-mix(in srgb, var(--zon-common-text-color) 76%, var(--ghv-brand-cyan)) !important;
  opacity: .9 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link::before {
  display: none !important;
  content: none !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  overflow: visible !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link svg path,
.zontal-sidebar-footer .ghv-sidebar-social-link svg rect,
.zontal-sidebar-footer .ghv-sidebar-social-link svg circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(29, 124, 255, .18) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

.zontal-sidebar-footer span {
  font-size: 10px !important;
  line-height: 1.42 !important;
  margin-top: 7px !important;
  padding-top: 10px !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link {
  background: rgba(128, 138, 160, .08) !important;
  border-color: rgba(128, 138, 160, .22) !important;
  color: var(--ghv-brand-blue, #1d7cff) !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.close .ghv-sidebar-social-links {
    display: none !important;
  }
}


/* GameHubVerse V73 - clean full social icon hover circle */
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link,
.zontal-sidebar-footer .ghv-sidebar-social-link {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  line-height: 1 !important;
  background-clip: padding-box !important;
}

/* Kill the global sidebar link highlight pseudo layer on social buttons. */
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link::before,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link::after,
.zontal-sidebar-footer .ghv-sidebar-social-link::before,
.zontal-sidebar-footer .ghv-sidebar-social-link::after,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link:hover::before,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link:hover::after,
.zontal-sidebar-footer .ghv-sidebar-social-link:hover::before,
.zontal-sidebar-footer .ghv-sidebar-social-link:hover::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link svg {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link:hover {
  background: var(--ghv-brand-gradient) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(29, 124, 255, .16), 0 0 16px rgba(34, 223, 248, .10) !important;
  transform: translateY(-1px) !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link:hover svg path,
.zontal-sidebar-footer .ghv-sidebar-social-link:hover svg rect,
.zontal-sidebar-footer .ghv-sidebar-social-link:hover svg circle {
  stroke: currentColor !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
}


/* GameHubVerse V74 - sidebar content one pixel bigger */
.zontal-sidebar-body .list > li > a .icon-label,
#zon_categories.category-list .ghv-sidebar-category-link .text span,
.zontal-sidebar .game-list .text span,
.zontal-sidebar .zontal-sidebar-body button#zon-category-loader.more-button,
.zontal-sidebar .zontal-sidebar-body a.more-button,
.zontal-sidebar .zontal-sidebar-body > a.more-button {
  font-size: 14px !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text p,
.zontal-sidebar .game-list .text p {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.zontal-sidebar .sb-divider {
  font-size: 10.5px !important;
}

.zontal-sidebar-footer a:not(.ghv-sidebar-social-link) {
  font-size: 11.8px !important;
  line-height: 1.25 !important;
}

.zontal-sidebar-footer span {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  flex-basis: 31px !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link svg {
  width: 16.5px !important;
  height: 16.5px !important;
}


/* GameHubVerse V75 - clean social hover circle without side artifacts */
.zontal-sidebar-footer .ghv-sidebar-social-links {
  overflow: visible !important;
  padding: 2px 2px 3px 1px !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link {
  border-radius: 999px !important;
  clip-path: circle(50% at 50% 50%) !important;
  -webkit-clip-path: circle(50% at 50% 50%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link:hover,
.zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link:hover,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible {
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 10px rgba(29, 124, 255, .10) !important;
  transform: none !important;
}

html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link:hover,
html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible {
  background: var(--ghv-brand-gradient) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 10px rgba(29, 124, 255, .10) !important;
}


/* GameHubVerse V76 - final social hover cleanup and category spacing micro polish */

/* Social icons: use a solid brand fill on hover to remove left/right gradient edge artifacts. */
.zontal-sidebar-footer .ghv-sidebar-social-link,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link {
  overflow: hidden !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  border: 1px solid rgba(128, 138, 160, .24) !important;
  box-shadow: none !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link:hover,
.zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link:hover,
.zontal-sidebar-body .zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible,
html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link:hover,
html[zontal-theme="light"] .zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible {
  background: #2f7cff !important;
  background-color: #2f7cff !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(47, 124, 255, .18) !important;
  transform: none !important;
}

.zontal-sidebar-footer .ghv-sidebar-social-link:hover svg,
.zontal-sidebar-footer .ghv-sidebar-social-link:focus-visible svg {
  transform: none !important;
}

/* Category sidebar: slightly tighter rows, but keep readability and the 0 Games line. */
#zon_categories.category-list {
  display: grid !important;
  gap: 0 !important;
}

#zon_categories.category-list li {
  margin-bottom: 0 !important;
}

#zon_categories.category-list .ghv-sidebar-category-link {
  min-height: 33px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-top: 6px !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text span {
  line-height: 1.12 !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text p {
  line-height: 1.08 !important;
  margin-top: 0 !important;
}


/* GameHubVerse V77 - sidebar micro text spacing polish
   Adds tiny breathing room between item titles and meta lines without making sidebar airy. */
#zon_categories.category-list .ghv-sidebar-category-link {
  min-height: 34px !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text {
  gap: 2px !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text span {
  line-height: 1.13 !important;
}

#zon_categories.category-list .ghv-sidebar-category-link .text p {
  margin-top: 1px !important;
  line-height: 1.1 !important;
}

.zontal-sidebar .game-list .text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.zontal-sidebar .game-list .text span {
  line-height: 1.16 !important;
}

.zontal-sidebar .game-list .text p {
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.12 !important;
}


/* GameHubVerse V78 - top sidebar nav spacing micro polish
   Tighten only the top 4 one-line nav rows so they match categories better. */
.zontal-sidebar-body .list > li > a {
  min-height: 33px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.zontal-sidebar-body .list > li > a .icon-label {
  line-height: 1.12 !important;
}

.zontal-sidebar-body .list {
  gap: 0 !important;
}


/* GameHubVerse V79 - desktop right edge breathing space
   Keeps wide desktop rows from touching the right browser edge. */
@media screen and (min-width: 1201px) {
  .zontal-start > .z-container,
  .zontal-start > header.z-container {
    box-sizing: border-box !important;
    padding-right: clamp(14px, 0.9vw, 24px) !important;
  }
}

/* Keep mobile/tablet exactly as before. */
@media screen and (max-width: 1200px) {
  .zontal-start > .z-container,
  .zontal-start > header.z-container {
    padding-right: 0 !important;
  }
}


/* GameHubVerse V94 - collapsed sidebar text cleanup + stronger home More buttons
   Prevents collapsed sidebar labels/categories/popular names from bleeding outside
   the 70px icon rail, and restores homepage More links as visible pill buttons. */

/* Collapsed desktop sidebar: icons only, no cropped text. */
.zontal-sidebar.close,
.zontal-sidebar.close .zontal-sidebar-body {
  overflow-x: hidden !important;
}

.zontal-sidebar.close .logo,
.zontal-sidebar.close .icon-label,
.zontal-sidebar.close .sb-divider,
.zontal-sidebar.close .text,
.zontal-sidebar.close .more-button,
.zontal-sidebar.close .zontal-sidebar-footer,
.zontal-sidebar.close #zon-category-loader,
.zontal-sidebar.close .category-list a .text,
.zontal-sidebar.close .game-list a .text,
.zontal-sidebar.close .category-list a span:not(:first-child),
.zontal-sidebar.close .game-list a span:not(:first-child),
.zontal-sidebar.close .category-list a p,
.zontal-sidebar.close .game-list a p {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.zontal-sidebar.close .zontal-sidebar-body .list > li > a,
.zontal-sidebar.close #zon_categories.category-list > li > a,
.zontal-sidebar.close .category-list > li > a,
.zontal-sidebar.close .game-list > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  width: 44px !important;
  max-width: 44px !important;
  min-width: 44px !important;
  min-height: 38px !important;
  padding: 8px 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  text-align: center !important;
}

.zontal-sidebar.close .zontal-sidebar-body .list > li > a > span:first-child,
.zontal-sidebar.close #zon_categories.category-list > li > a > svg,
.zontal-sidebar.close .category-list > li > a > svg,
.zontal-sidebar.close .game-list > li > a > img {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

.zontal-sidebar.close .game-list > li > a > img {
  border-radius: 999px !important;
}

/* Homepage section More links: make them visible/clickable like the stronger sidebar pills. */
.ghv-home .ghv-section-heading > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: rgba(128, 138, 160, .10) !important;
  border: 1px solid rgba(128, 138, 160, .18) !important;
  color: var(--zon-common-text-color) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .10) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.ghv-home .ghv-section-heading > a:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 20px rgba(29, 124, 255, .22) !important;
  transform: translateY(-1px) !important;
}

html[zontal-theme="light"] .ghv-home .ghv-section-heading > a {
  background: rgba(128, 138, 160, .13) !important;
  border-color: rgba(128, 138, 160, .20) !important;
  color: var(--zon-common-text-color) !important;
}

html[zontal-theme="light"] .ghv-home .ghv-section-heading > a:hover {
  color: #fff !important;
  background: var(--ghv-brand-gradient) !important;
  border-color: transparent !important;
}


/* GameHubVerse V95 - homepage More matches Featured Play button */
.ghv-home .ghv-section-heading > a {
  color: #fff !important;
  background: linear-gradient(135deg, #21c7f5 0%, #2577ff 64%, #6c55ff 100%) !important;
  border-color: transparent !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: 0 7px 15px rgba(29, 124, 255, .24) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .24) !important;
}

.ghv-home .ghv-section-heading > a:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 18px rgba(123, 77, 255, .26) !important;
  transform: translateY(-1px) !important;
}

html[zontal-theme="light"] .ghv-home .ghv-section-heading > a,
html[zontal-theme="light"] .ghv-home .ghv-section-heading > a:hover {
  color: #fff !important;
  border-color: transparent !important;
}


/* GameHubVerse V96 - homepage More normal state, Play-button highlight only on hover */
.ghv-home .ghv-section-heading > a {
  color: var(--zon-common-text-color) !important;
  background: rgba(128, 138, 160, .10) !important;
  border: 1px solid rgba(128, 138, 160, .18) !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .10) !important;
  text-shadow: none !important;
  transform: none !important;
}

.ghv-home .ghv-section-heading > a:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 18px rgba(123, 77, 255, .26) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .24) !important;
  transform: translateY(-1px) !important;
}

html[zontal-theme="light"] .ghv-home .ghv-section-heading > a {
  color: var(--zon-common-text-color) !important;
  background: rgba(128, 138, 160, .13) !important;
  border-color: rgba(128, 138, 160, .20) !important;
  text-shadow: none !important;
}

html[zontal-theme="light"] .ghv-home .ghv-section-heading > a:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #1d7cff 0%, #6c55ff 72%, #b950ff 100%) !important;
  border-color: transparent !important;
}


/* GameHubVerse V97 - wide desktop dynamic home layout
   Makes the home page use the available browser width like a modern game portal:
   sidebar stays fixed, content/header expand, featured row and grids adapt on wide screens. */
@media screen and (min-width: 1201px) {
  .zontal-start {
    width: 100% !important;
    min-width: 0 !important;
  }

  .zontal-start > header.z-container,
  .zontal-start > .z-container:has(.ghv-home) {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: clamp(24px, 1.7vw, 44px) !important;
    padding-right: clamp(24px, 1.7vw, 44px) !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-home {
    width: 100% !important;
    max-width: none !important;
  }

  .zontal-start > header.z-container > div {
    width: 100% !important;
  }
}

/* Medium/large desktop: allow the game rows to stretch instead of staying centered/narrow. */
@media screen and (min-width: 1501px) {
  .zontal-start > .z-container:has(.ghv-home) .ghv-home-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 24px 22px !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-featured-slider {
    --ghv-featured-visible: 5 !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-featured-slide {
    flex: 0 0 calc((100% - 72px) / 5) !important;
    flex-basis: calc((100% - 72px) / 5) !important;
  }
}

/* Very wide desktop: show more cards and fill the row naturally. */
@media screen and (min-width: 1901px) {
  .zontal-start > .z-container:has(.ghv-home) .ghv-home-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 24px 22px !important;
  }
}

/* Ultra-wide desktop: CrazyGames-like full-width density. */
@media screen and (min-width: 2301px) {
  .zontal-start > .z-container:has(.ghv-home) .ghv-home-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 24px 22px !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-featured-slider {
    --ghv-featured-visible: 6 !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-featured-slide {
    flex: 0 0 calc((100% - 90px) / 6) !important;
    flex-basis: calc((100% - 90px) / 6) !important;
  }
}

@media screen and (min-width: 2701px) {
  .zontal-start > .z-container:has(.ghv-home) .ghv-home-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 24px 22px !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-featured-slider {
    --ghv-featured-visible: 7 !important;
  }

  .zontal-start > .z-container:has(.ghv-home) .ghv-featured-slide {
    flex: 0 0 calc((100% - 108px) / 7) !important;
    flex-basis: calc((100% - 108px) / 7) !important;
  }
}

/* Keep tablet/mobile behavior exactly from the existing theme. */
@media screen and (max-width: 1200px) {
  .zontal-start > .z-container:has(.ghv-home),
  .zontal-start > header.z-container {
    max-width: 100% !important;
  }
}


/* GameHubVerse V98 - wide dynamic layout for list/category/autoplay pages
   Extends the CrazyGames-like flexible width model from homepage to:
   /games, /new-games, /popular-games, /category and /autoplay/player-style pages. */
@media screen and (min-width: 1201px) {
  .zontal-start > .z-container:has(#zon_games),
  .zontal-start > .z-container:has(.ghv-player-layout) {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: clamp(24px, 1.7vw, 44px) !important;
    padding-right: clamp(24px, 1.7vw, 44px) !important;
  }

  .zontal-start > .z-container:has(#zon_games) .page-heading,
  .zontal-start > .z-container:has(.ghv-player-layout) .page-heading {
    max-width: none !important;
  }

  .zontal-start > .z-container:has(#zon_games) #zon_games {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 24px 22px !important;
  }

  .zontal-start > .z-container:has(#zon_games) #zon_games .game-card,
  .zontal-start > .z-container:has(#zon_games) #zon_games .ghv-list-card {
    width: 100% !important;
    max-width: none !important;
  }

  /* Autoplay/player-style page: keep sidebar stable, let main player breathe. */
  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-player-layout {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    gap: clamp(24px, 1.8vw, 42px) !important;
  }

  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-player-main,
  .zontal-start > .z-container:has(.ghv-player-layout) .main-gameplay {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* More columns on larger desktop listing/category pages. */
@media screen and (min-width: 1501px) {
  .zontal-start > .z-container:has(#zon_games) #zon_games {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1901px) {
  .zontal-start > .z-container:has(#zon_games) #zon_games {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-player-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px) !important;
  }

  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-similar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 2301px) {
  .zontal-start > .z-container:has(#zon_games) #zon_games {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  }

  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-similar-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-sidebar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 2701px) {
  .zontal-start > .z-container:has(#zon_games) #zon_games {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  }

  .zontal-start > .z-container:has(.ghv-player-layout) .ghv-similar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}

/* Tablet/mobile remains the original responsive theme. */
@media screen and (max-width: 1200px) {
  .zontal-start > .z-container:has(#zon_games),
  .zontal-start > .z-container:has(.ghv-player-layout) {
    max-width: 100% !important;
  }
}


/* GameHubVerse V101 - direct top sidebar icon colors
   Fixes the main top sidebar SVG icons being rendered black by inline SVG color/stroke attributes. */
.zontal-sidebar-body .list > li:nth-child(-n+4) > a > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(-n+4) > a > span:first-child svg * {
  fill: none !important;
}

/* All Games */
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg path,
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg rect,
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg circle,
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg line,
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg polyline,
.zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg polygon {
  color: #22dff8 !important;
  stroke: #22dff8 !important;
}

/* Newest Games */
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg path,
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg rect,
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg circle,
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg line,
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg polyline,
.zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg polygon {
  color: #8b5cf6 !important;
  stroke: #8b5cf6 !important;
}

/* Most Popular */
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg path,
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg rect,
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg circle,
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg line,
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg polyline,
.zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg polygon {
  color: #1d7cff !important;
  stroke: #1d7cff !important;
}

/* Autoplay */
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg path,
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg rect,
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg circle,
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg line,
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg polyline,
.zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg polygon {
  color: #b950ff !important;
  stroke: #b950ff !important;
}

/* Active/hover: white like the current sidebar highlight. */
.zontal-sidebar-body .list > li:nth-child(-n+4) > a:hover > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(-n+4) > a:hover > span:first-child svg *,
.zontal-sidebar-body .list > li:nth-child(-n+4) > a.active-page > span:first-child svg,
.zontal-sidebar-body .list > li:nth-child(-n+4) > a.active-page > span:first-child svg * {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
}

/* Collapsed sidebar uses the same direct colors. */
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(1) > a:not(:hover):not(.active-page) > span:first-child svg * {
  color: #22dff8 !important;
  stroke: #22dff8 !important;
}
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(2) > a:not(:hover):not(.active-page) > span:first-child svg * {
  color: #8b5cf6 !important;
  stroke: #8b5cf6 !important;
}
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(3) > a:not(:hover):not(.active-page) > span:first-child svg * {
  color: #1d7cff !important;
  stroke: #1d7cff !important;
}
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg,
.zontal-sidebar.close .zontal-sidebar-body .list > li:nth-child(4) > a:not(:hover):not(.active-page) > span:first-child svg * {
  color: #b950ff !important;
  stroke: #b950ff !important;
}


/* GameHubVerse V102 - comment form brand colors
   Replaces the old green comment focus/button colors with GameHubVerse cyan/blue/purple. */
.comment-section .comment-form textarea,
.comment-section textarea[name="subject"] {
  border-color: rgba(128, 138, 160, .22) !important;
  color: var(--zon-common-text-color) !important;
  background: rgba(128, 138, 160, .035) !important;
  outline: 0 solid transparent !important;
  box-shadow: none !important;
  caret-color: var(--ghv-brand-cyan, #22dff8) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.comment-section .comment-form textarea:hover,
.comment-section textarea[name="subject"]:hover {
  border-color: rgba(34, 223, 248, .46) !important;
  background: rgba(34, 223, 248, .025) !important;
}

.comment-section .comment-form textarea:focus,
.comment-section textarea[name="subject"]:focus,
.comment-section .comment-form textarea:focus-visible,
.comment-section textarea[name="subject"]:focus-visible {
  border-color: var(--ghv-brand-cyan, #22dff8) !important;
  outline: 2px solid rgba(34, 223, 248, .22) !important;
  outline-offset: 0 !important;
  box-shadow:
    0 0 0 1px rgba(34, 223, 248, .24),
    0 0 16px rgba(29, 124, 255, .14),
    0 0 22px rgba(123, 77, 255, .10) !important;
}

.comment-section .comment-form textarea::placeholder,
.comment-section textarea[name="subject"]::placeholder {
  color: var(--zon-muted-color) !important;
  opacity: .85 !important;
}

.comment-section .comment-form button[name="comment"],
.comment-section button[name="comment"] {
  color: #fff !important;
  background: linear-gradient(135deg, #22dff8 0%, #1d7cff 58%, #7b4dff 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(29, 124, 255, .22), 0 0 14px rgba(34, 223, 248, .10) !important;
  font-weight: 800 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease !important;
}

.comment-section .comment-form button[name="comment"]:hover,
.comment-section button[name="comment"]:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #1d7cff 0%, #7b4dff 70%, #e24bff 100%) !important;
  box-shadow: 0 10px 22px rgba(123, 77, 255, .24), 0 0 16px rgba(34, 223, 248, .12) !important;
  transform: translateY(-1px) !important;
}

.comment-section .comment-form button[name="comment"]:active,
.comment-section button[name="comment"]:active {
  transform: translateY(0) !important;
  filter: brightness(.96) !important;
}

/* GameHubVerse Player Commerce Account */
.ghv-commerce-nav{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 24px;padding:8px;border:1px solid var(--zon-comment-input-b-color);border-radius:14px;background:var(--zon-search-bg-color)}
.ghv-commerce-nav a{padding:9px 13px;border-radius:10px;font-size:13px;font-weight:700;color:var(--zon-muted-color);transition:.18s ease}
.ghv-commerce-nav a:hover,.ghv-commerce-nav a.is-active{background:var(--zon-theme-color);color:#fff}
.ghv-commerce-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:6px 0 24px}
.ghv-commerce-heading h1{font-size:30px;line-height:1.2;font-weight:800;margin:0 0 6px;color:var(--zon-common-text-color)}
.ghv-commerce-heading p{margin:0;color:var(--zon-muted-color);font-size:14px}
.ghv-commerce-back{display:inline-block;margin-bottom:9px;color:var(--zon-theme-color);font-weight:700;font-size:13px}
.ghv-commerce-alert{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px;padding:17px 18px;border-radius:14px;border:1px solid rgba(245,158,11,.42);background:rgba(245,158,11,.09)}
.ghv-commerce-alert strong{display:block;margin-bottom:4px;color:var(--zon-common-text-color)}
.ghv-commerce-alert p{margin:0;color:var(--zon-muted-color);font-size:13px}
.ghv-commerce-alert button,.ghv-commerce-action{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:10px 14px;background:var(--zon-theme-color);color:#fff;font-weight:750;cursor:pointer;white-space:nowrap}
.ghv-commerce-secondary-action{display:inline-flex;margin-left:8px;padding:10px 14px;border:1px solid var(--zon-comment-input-b-color);border-radius:10px;color:var(--zon-common-text-color);font-weight:700}
.ghv-commerce-message{margin:0 0 18px;padding:12px 14px;border-radius:11px;font-size:13px;font-weight:650}
.ghv-commerce-message.is-success{background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.35);color:#16a34a}
.ghv-commerce-message.is-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.34);color:#dc2626}
.ghv-commerce-orders{display:grid;gap:12px}
.ghv-commerce-order-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px;border:1px solid var(--zon-comment-input-b-color);border-radius:15px;background:var(--zon-search-bg-color)}
.ghv-commerce-order-main{display:flex;align-items:center;gap:13px;min-width:0}
.ghv-commerce-order-main img{width:72px;height:54px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.ghv-commerce-product{display:block;color:var(--zon-common-text-color);font-size:15px;font-weight:800;line-height:1.3}
.ghv-commerce-game{font-size:13px;color:var(--zon-muted-color);margin-top:3px}
.ghv-commerce-meta{font-size:11px;color:var(--zon-muted-color);margin-top:6px}
.ghv-commerce-order-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;flex:0 0 auto}
.ghv-commerce-order-side strong{font-size:14px;color:var(--zon-common-text-color)}
.ghv-commerce-order-side small{font-size:11px;color:var(--zon-muted-color)}
.ghv-commerce-status{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.01em}
.ghv-commerce-status.is-paid{background:rgba(34,197,94,.13);color:#16a34a}
.ghv-commerce-status.is-pending{background:rgba(245,158,11,.14);color:#d97706}
.ghv-commerce-status.is-problem{background:rgba(239,68,68,.12);color:#dc2626}
.ghv-commerce-status.is-muted{background:rgba(148,163,184,.16);color:var(--zon-muted-color)}
.ghv-commerce-empty{padding:32px;border:1px dashed var(--zon-comment-input-b-color);border-radius:16px;text-align:center;background:var(--zon-search-bg-color)}
.ghv-commerce-empty strong{display:block;font-size:18px;color:var(--zon-common-text-color);margin-bottom:5px}
.ghv-commerce-empty p{color:var(--zon-muted-color);margin:0 0 12px}
.ghv-commerce-empty a{color:var(--zon-theme-color);font-weight:700}
.ghv-commerce-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ghv-commerce-panel{padding:18px;border:1px solid var(--zon-comment-input-b-color);border-radius:15px;background:var(--zon-search-bg-color)}
.ghv-commerce-panel h2{font-size:16px;font-weight:800;color:var(--zon-common-text-color);margin:0 0 14px}
.ghv-commerce-panel p{font-size:13px;line-height:1.55;color:var(--zon-muted-color);margin:0 0 12px}
.ghv-commerce-panel dl{display:grid;gap:10px;margin:0}
.ghv-commerce-panel dl>div{display:grid;grid-template-columns:145px 1fr;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--zon-comment-input-b-color)}
.ghv-commerce-panel dl>div:last-child{border-bottom:0;padding-bottom:0}
.ghv-commerce-panel dt{font-size:12px;color:var(--zon-muted-color)}
.ghv-commerce-panel dd{margin:0;font-size:12px;color:var(--zon-common-text-color);font-weight:650;overflow-wrap:anywhere}
.ghv-commerce-panel dd a{color:var(--zon-theme-color)}
.ghv-commerce-receipt-email{padding:10px 12px;border-radius:10px;background:rgba(123,77,255,.09);color:var(--zon-common-text-color);font-weight:750;overflow-wrap:anywhere}
.ghv-commerce-small{font-size:11px!important;margin-top:10px!important}
.ghv-commerce-owned-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ghv-commerce-owned-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:13px;padding:14px;border:1px solid var(--zon-comment-input-b-color);border-radius:15px;background:var(--zon-search-bg-color)}
.ghv-commerce-owned-card.is-revoked{opacity:.72}
.ghv-commerce-owned-card img{width:64px;height:48px;border-radius:9px;object-fit:cover}
.ghv-commerce-owned-card strong,.ghv-commerce-owned-card span,.ghv-commerce-owned-card small{display:block}
.ghv-commerce-owned-card strong{color:var(--zon-common-text-color);font-size:14px}
.ghv-commerce-owned-card div>span{color:var(--zon-muted-color);font-size:12px;margin-top:2px}
.ghv-commerce-owned-card small{color:var(--zon-muted-color);font-size:10px;margin-top:5px}
@media(max-width:800px){.ghv-commerce-detail-grid,.ghv-commerce-owned-grid{grid-template-columns:1fr}.ghv-commerce-alert,.ghv-commerce-order-card{align-items:flex-start;flex-direction:column}.ghv-commerce-order-side{align-items:flex-start;text-align:left}.ghv-commerce-heading{flex-direction:column}.ghv-commerce-panel dl>div{grid-template-columns:1fr;gap:3px}.ghv-commerce-owned-card{grid-template-columns:56px 1fr}.ghv-commerce-owned-card>.ghv-commerce-status{grid-column:2}.ghv-commerce-owned-card img{width:56px;height:44px}}
@media(max-width:520px){.ghv-commerce-nav{display:grid;grid-template-columns:repeat(2,1fr)}.ghv-commerce-nav a{text-align:center}.ghv-commerce-order-main img{width:58px;height:44px}.ghv-commerce-alert form,.ghv-commerce-alert button{width:100%}.ghv-commerce-secondary-action{margin:8px 0 0}.ghv-commerce-action,.ghv-commerce-secondary-action{width:100%}}


/* GameHubVerse Player Commerce brand colors */
.ghv-commerce-nav,
.ghv-commerce-alert,
.ghv-commerce-panel,
.ghv-commerce-order-card,
.ghv-commerce-owned-card,
.ghv-commerce-empty {
  --ghv-commerce-cyan: #17c9ff;
  --ghv-commerce-cyan-dark: #078cb8;
  --ghv-commerce-blue: #1686ff;
  --ghv-commerce-purple: #635bff;
}
.ghv-commerce-nav a:hover,
.ghv-commerce-nav a.is-active,
.ghv-commerce-alert button,
.ghv-commerce-action {
  background: linear-gradient(135deg, var(--ghv-commerce-cyan) 0%, var(--ghv-commerce-blue) 54%, var(--ghv-commerce-purple) 100%) !important;
  color: #fff !important;
  box-shadow: 0 7px 20px rgba(23, 201, 255, .20);
}
.ghv-commerce-nav a:hover,
.ghv-commerce-nav a.is-active {
  border: 1px solid rgba(255,255,255,.08);
}
.ghv-commerce-alert {
  border-color: rgba(23, 201, 255, .45) !important;
  background: linear-gradient(135deg, rgba(23,201,255,.12), rgba(99,91,255,.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.ghv-commerce-alert strong {
  color: var(--ghv-commerce-cyan) !important;
}
.ghv-commerce-back,
.ghv-commerce-empty a,
.ghv-commerce-panel dd a {
  color: var(--ghv-commerce-cyan) !important;
}
.ghv-commerce-message.is-success {
  background: rgba(23,201,255,.11) !important;
  border-color: rgba(23,201,255,.36) !important;
  color: #17c9ff !important;
}
.ghv-commerce-message.is-error {
  background: rgba(99,91,255,.12) !important;
  border-color: rgba(99,91,255,.34) !important;
  color: #b7b3ff !important;
}
.ghv-commerce-status.is-paid {
  background: rgba(23,201,255,.14) !important;
  color: #17c9ff !important;
}
.ghv-commerce-receipt-email {
  background: linear-gradient(135deg, rgba(23,201,255,.12), rgba(99,91,255,.08)) !important;
  border: 1px solid rgba(23,201,255,.22);
}
.ghv-commerce-nav {
  border-color: rgba(23,201,255,.13) !important;
}
.ghv-commerce-action:hover,
.ghv-commerce-alert button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.ghv-commerce-secondary-action:hover {
  border-color: rgba(23,201,255,.45);
  color: #17c9ff;
}

.ghv-commerce-account {
  width: min(100%, 1120px);
  margin: 12px auto 64px;
  padding: 0 10px;
  box-sizing: border-box;
}

.ghv-commerce-account .ghv-commerce-nav {
  margin: 0 0 22px;
  padding: 7px;
  gap: 6px;
  border: 1px solid rgba(23, 201, 255, .14) !important;
  border-radius: 15px;
  background: rgba(20, 22, 31, .76);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .025);
  backdrop-filter: blur(14px);
}

.ghv-commerce-account .ghv-commerce-nav a {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  line-height: 18px;
}

.ghv-commerce-alert {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(23, 201, 255, .28) !important;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, rgba(23, 201, 255, .18), transparent 34%), linear-gradient(135deg, rgba(23, 201, 255, .09), rgba(99, 91, 255, .08) 55%, rgba(20, 22, 31, .72)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.ghv-commerce-alert::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(99, 91, 255, .13);
  filter: blur(2px);
  pointer-events: none;
}

.ghv-commerce-alert-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(23, 201, 255, .34);
  border-radius: 16px;
  color: #56dcff;
  background: linear-gradient(145deg, rgba(23, 201, 255, .17), rgba(99, 91, 255, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 28px rgba(23, 201, 255, .10);
}

.ghv-commerce-alert-icon svg {
  width: 30px;
  height: 30px;
}

.ghv-commerce-alert-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ghv-commerce-alert-label {
  display: block;
  margin-bottom: 5px;
  color: #56dcff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ghv-commerce-alert strong {
  display: block;
  margin: 0 0 5px;
  color: var(--zon-common-text-color) !important;
  font-size: 19px;
  line-height: 25px;
  font-weight: 850;
}

.ghv-commerce-alert p {
  margin: 0;
  color: var(--zon-muted-color);
  font-size: 13px;
  line-height: 20px;
}

.ghv-commerce-alert-email {
  display: inline-flex;
  max-width: 100%;
  margin-top: 10px;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: var(--zon-common-text-color);
  background: rgba(255, 255, 255, .045);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ghv-commerce-alert form {
  position: relative;
  z-index: 1;
}

.ghv-commerce-alert button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #17c9ff 0%, #1686ff 54%, #635bff 100%) !important;
  color: #fff !important;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(23, 134, 255, .24);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.ghv-commerce-alert button svg {
  width: 18px;
  height: 18px;
}

.ghv-commerce-alert button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(23, 134, 255, .30);
}

.ghv-commerce-account .ghv-commerce-heading {
  margin-top: 4px;
}

.ghv-commerce-account .ghv-commerce-empty {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: solid;
  background: linear-gradient(145deg, rgba(255, 255, 255, .025), rgba(23, 201, 255, .025));
}

@media (max-width: 800px) {
  .ghv-commerce-account {
    margin-top: 8px;
    padding: 0 4px;
  }

  .ghv-commerce-alert {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 17px;
  }

  .ghv-commerce-alert-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .ghv-commerce-alert-icon svg {
    width: 26px;
    height: 26px;
  }

  .ghv-commerce-alert form {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ghv-commerce-alert button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .ghv-commerce-account .ghv-commerce-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ghv-commerce-account .ghv-commerce-nav a:last-child {
    grid-column: 1 / -1;
  }

  .ghv-commerce-alert {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ghv-commerce-alert-icon {
    margin: 0 auto;
  }

  .ghv-commerce-alert-email {
    justify-content: center;
  }
}


html[zontal-theme="light"] .ghv-commerce-account .ghv-commerce-nav {
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 34px rgba(26, 36, 56, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}

html[zontal-theme="light"] .ghv-commerce-alert {
  background: radial-gradient(circle at 0 0, rgba(23, 201, 255, .16), transparent 34%), linear-gradient(135deg, rgba(23, 201, 255, .08), rgba(99, 91, 255, .06) 55%, rgba(255, 255, 255, .9)) !important;
  box-shadow: 0 18px 46px rgba(26, 36, 56, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
}

html[zontal-theme="light"] .ghv-commerce-alert-email {
  border-color: rgba(17, 24, 39, .08);
  background: rgba(17, 24, 39, .035);
}

@media (max-width: 800px) {
  .ghv-commerce-alert {
    align-items: center;
  }
}

@media (max-width: 520px) {
  .ghv-commerce-alert-copy {
    width: 100%;
  }
}

.ghv-settings-wrap {
  width: 100%;
}

.ghv-settings-panel {
  width: min(100%, 470px);
  padding: 24px;
  border: 1px solid rgba(23, 201, 255, .16);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.ghv-settings-form {
  width: 100% !important;
  max-width: none !important;
}

.ghv-settings-field {
  margin-bottom: 16px !important;
}

.ghv-settings-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--zon-common-text-color);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.ghv-settings-field input[type="text"],
.ghv-settings-field input[type="email"],
.ghv-settings-field input[type="password"],
.ghv-settings-field input[type="file"] {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(23, 201, 255, .14) !important;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 16, 24, .92), rgba(18, 22, 31, .92)) !important;
  color: var(--zon-common-text-color) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.ghv-settings-field input[type="text"]:focus,
.ghv-settings-field input[type="email"]:focus,
.ghv-settings-field input[type="password"]:focus,
.ghv-settings-field input[type="file"]:focus {
  outline: none;
  border-color: rgba(23, 201, 255, .48) !important;
  box-shadow: 0 0 0 4px rgba(23, 201, 255, .10), 0 10px 28px rgba(23, 201, 255, .08);
  background: linear-gradient(180deg, rgba(16, 19, 29, .98), rgba(20, 25, 35, .98)) !important;
}

.ghv-settings-field input::placeholder {
  color: rgba(255, 255, 255, .38);
}

.ghv-settings-field small {
  display: block;
  margin-top: 8px;
  color: var(--zon-muted-color);
  font-size: 12px;
  line-height: 18px;
}

.ghv-settings-avatar-field {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
}

.ghv-settings-avatar {
  width: 74px !important;
  height: 74px;
  margin-bottom: 14px !important;
  border: 2px solid rgba(23, 201, 255, .18);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.ghv-settings-field input[type="file"] {
  padding: 10px 12px !important;
}

.ghv-settings-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23, 201, 255, .18), rgba(99, 91, 255, .18));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ghv-settings-submit {
  min-height: 56px;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #10dd44 0%, #08d63a 38%, #19c65f 100%) !important;
  color: #ffffff !important;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 16px 38px rgba(16, 221, 68, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ghv-settings-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 42px rgba(16, 221, 68, .28);
}

.ghv-settings-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(16, 221, 68, .16), 0 18px 42px rgba(16, 221, 68, .28);
}

html[zontal-theme="light"] .ghv-settings-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 251, 255, .92));
  box-shadow: 0 18px 48px rgba(26, 36, 56, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

html[zontal-theme="light"] .ghv-settings-avatar-field {
  background: rgba(17, 24, 39, .022);
  border-color: rgba(17, 24, 39, .06);
}

html[zontal-theme="light"] .ghv-settings-field input[type="text"],
html[zontal-theme="light"] .ghv-settings-field input[type="email"],
html[zontal-theme="light"] .ghv-settings-field input[type="password"],
html[zontal-theme="light"] .ghv-settings-field input[type="file"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 249, 253, .96)) !important;
  color: #0f172a !important;
  border-color: rgba(23, 201, 255, .18) !important;
}

html[zontal-theme="light"] .ghv-settings-field input::placeholder {
  color: rgba(15, 23, 42, .38);
}

@media (max-width: 640px) {
  .ghv-settings-panel {
    width: 100%;
    padding: 18px;
    border-radius: 18px;
  }

  .ghv-settings-field input[type="text"],
  .ghv-settings-field input[type="email"],
  .ghv-settings-field input[type="password"],
  .ghv-settings-field input[type="file"] {
    min-height: 54px;
  }

  .ghv-settings-submit {
    min-height: 52px;
    font-size: 16px;
  }
}

/* Fix small bright seam on active account nav buttons */
.ghv-commerce-account .ghv-commerce-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
}

.ghv-commerce-account .ghv-commerce-nav a:hover,
.ghv-commerce-account .ghv-commerce-nav a.is-active {
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(23, 201, 255, .18);
}

.ghv-commerce-account .ghv-commerce-nav a:focus,
.ghv-commerce-account .ghv-commerce-nav a:focus-visible {
  outline: none;
}


/* GameHubVerse toast notifications */
.toastify.ghv-toast {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(8, 12, 20, .92) !important;
  color: #ffffff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px);
  background-clip: padding-box;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

.toastify.ghv-toast::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  z-index: -1;
}

.toastify.ghv-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(142, 228, 255, .22);
  pointer-events: none;
  z-index: 1;
}

.toastify.ghv-toast .toast-close {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, .84);
  opacity: 1;
}

.toastify.ghv-toast.ghv-toast-success::before {
  background: linear-gradient(135deg, rgba(23, 201, 255, .96) 0%, rgba(22, 134, 255, .95) 54%, rgba(99, 91, 255, .95) 100%) !important;
}

.toastify.ghv-toast.ghv-toast-success::after {
  box-shadow: inset 0 0 0 1px rgba(142, 228, 255, .24);
}

.toastify.ghv-toast.ghv-toast-error {
  color: #f3f6ff;
}

.toastify.ghv-toast.ghv-toast-error::before {
  background: linear-gradient(135deg, rgba(20, 24, 35, .98) 0%, rgba(32, 35, 58, .96) 55%, rgba(67, 33, 89, .95) 100%) !important;
}

.toastify.ghv-toast.ghv-toast-error::after {
  box-shadow: inset 0 0 0 1px rgba(99, 91, 255, .28);
}

html[zontal-theme="light"] .toastify.ghv-toast {
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 16px 38px rgba(26, 36, 56, .14);
}

html[zontal-theme="light"] .toastify.ghv-toast.ghv-toast-error {
  color: #24314d;
}

html[zontal-theme="light"] .toastify.ghv-toast.ghv-toast-error::before {
  background: linear-gradient(135deg, rgba(247, 250, 255, .98) 0%, rgba(236, 241, 255, .98) 55%, rgba(224, 232, 255, .98) 100%) !important;
}

html[zontal-theme="light"] .toastify.ghv-toast.ghv-toast-error::after {
  box-shadow: inset 0 0 0 1px rgba(99, 91, 255, .20);
}

/* Hard fix for active account nav button seam / cyan line */
.ghv-commerce-account .ghv-commerce-nav a {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.ghv-commerce-account .ghv-commerce-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease, box-shadow .18s ease;
  z-index: -1;
}

.ghv-commerce-account .ghv-commerce-nav a:hover::before,
.ghv-commerce-account .ghv-commerce-nav a.is-active::before {
  opacity: 1;
  background: linear-gradient(135deg, #17c9ff 0%, #1686ff 54%, #635bff 100%);
  box-shadow: 0 10px 24px rgba(23, 201, 255, .18);
}

.ghv-commerce-account .ghv-commerce-nav a:hover,
.ghv-commerce-account .ghv-commerce-nav a.is-active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* Force GameHubVerse color on settings submit button */
.ghv-settings-form .ghv-settings-submit,
#update-info .ghv-settings-submit,
button.ghv-settings-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 14px 16px !important;
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #17c9ff 0%, #1686ff 54%, #635bff 100%) !important;
  background-color: #1686ff !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 16px 38px rgba(23, 134, 255, .24) !important;
  appearance: none;
  -webkit-appearance: none;
}

.ghv-settings-form .ghv-settings-submit:hover,
#update-info .ghv-settings-submit:hover,
button.ghv-settings-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 42px rgba(23, 134, 255, .30) !important;
}

.ghv-settings-form .ghv-settings-submit:focus,
.ghv-settings-form .ghv-settings-submit:focus-visible,
#update-info .ghv-settings-submit:focus,
#update-info .ghv-settings-submit:focus-visible,
button.ghv-settings-submit:focus,
button.ghv-settings-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(23, 201, 255, .16), 0 18px 42px rgba(23, 134, 255, .30) !important;
}

.ghv-settings-form .ghv-settings-submit[disabled],
#update-info .ghv-settings-submit[disabled],
button.ghv-settings-submit[disabled] {
  opacity: .78;
}

/* Restore Toastify overlay positioning: do not let notifications enter page layout */
.toastify.ghv-toast {
  position: fixed !important;
  left: auto !important;
  right: 16px !important;
  width: auto;
  max-width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .toastify.ghv-toast {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 14px 46px 14px 18px !important;
    transform: translateX(-50%) !important;
    border-radius: 16px !important;
    line-height: 1.35;
    text-align: left;
  }

  .toastify.ghv-toast .toast-close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    padding: 6px;
    line-height: 1;
  }
}

/* Final native-rendered account tab fix: no pseudo layer, no border seam */
.ghv-commerce-account .ghv-commerce-nav a,
.ghv-commerce-account .ghv-commerce-nav a:hover,
.ghv-commerce-account .ghv-commerce-nav a.is-active {
  position: relative;
  isolation: auto;
  overflow: visible;
  border: 0 !important;
  border-radius: 9px !important;
  outline: 0 !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  transform: none !important;
  backface-visibility: visible;
  will-change: auto;
}

.ghv-commerce-account .ghv-commerce-nav a::before,
.ghv-commerce-account .ghv-commerce-nav a::after {
  content: none !important;
  display: none !important;
}

.ghv-commerce-account .ghv-commerce-nav a {
  background: transparent !important;
  box-shadow: none !important;
}

.ghv-commerce-account .ghv-commerce-nav a:hover,
.ghv-commerce-account .ghv-commerce-nav a.is-active {
  background-color: #1686ff !important;
  background-image: linear-gradient(135deg, #17c9ff 0%, #1686ff 54%, #635bff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: 0 7px 18px rgba(23, 134, 255, .22) !important;
  color: #fff !important;
}

/* Consistent account section styling for comments and likes */
.ghv-user-comments-list {
  display: grid;
  gap: 14px;
}

.ghv-user-comment-card {
  padding: 16px 18px;
  border: 1px solid rgba(23, 201, 255, .12);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .025), rgba(23, 201, 255, .025));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.ghv-user-comment-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ghv-user-comment-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(23, 201, 255, .14);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.ghv-user-comment-copy {
  min-width: 0;
  flex: 1;
}

.ghv-user-comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ghv-user-comment-name {
  color: var(--zon-common-text-color);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.ghv-user-comment-delete {
  color: #ff6b88;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.ghv-user-comment-delete:hover {
  color: #ff88a0;
}

.ghv-user-comment-date {
  margin: 0 0 8px;
  color: var(--zon-muted-color);
  font-size: 12px;
  line-height: 18px;
}

.ghv-user-comment-text {
  margin: 0;
  color: var(--zon-common-text-color);
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 640px) {
  .ghv-user-comment-card {
    padding: 14px;
  }

  .ghv-user-comment-main {
    gap: 12px;
  }

  .ghv-user-comment-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .ghv-user-comment-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* Account typography normalization: cleaner, lighter and more readable */
.ghv-commerce-account,
.toastify.ghv-toast {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ghv-commerce-account .ghv-commerce-nav a {
  font-weight: 600 !important;
}

.ghv-commerce-account .ghv-commerce-heading h1 {
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

.ghv-commerce-account .ghv-commerce-heading p,
.ghv-commerce-account .ghv-commerce-empty p,
.ghv-commerce-account .ghv-commerce-panel p,
.ghv-commerce-account .ghv-commerce-meta,
.ghv-commerce-account .ghv-commerce-game,
.ghv-commerce-account .ghv-settings-field small,
.ghv-user-comment-date,
.ghv-user-comment-text {
  font-weight: 400 !important;
}

.ghv-commerce-account .ghv-commerce-empty strong,
.ghv-commerce-account .ghv-commerce-panel h2,
.ghv-commerce-account .ghv-commerce-product,
.ghv-commerce-account .ghv-commerce-owned-card strong,
.ghv-user-comment-name {
  font-weight: 650 !important;
}

.ghv-commerce-account .ghv-commerce-status,
.ghv-commerce-account .ghv-commerce-back,
.ghv-commerce-account .ghv-commerce-secondary-action,
.ghv-user-comment-delete {
  font-weight: 600 !important;
}

.ghv-commerce-alert-label {
  font-weight: 700 !important;
}

.ghv-commerce-alert strong {
  font-weight: 700 !important;
}

.ghv-commerce-alert button,
.ghv-commerce-action,
.ghv-settings-field label,
.ghv-settings-field input[type="file"]::file-selector-button {
  font-weight: 600 !important;
}

.ghv-settings-form .ghv-settings-submit,
#update-info .ghv-settings-submit,
button.ghv-settings-submit {
  font-weight: 700 !important;
}

.toastify.ghv-toast {
  font-weight: 600 !important;
}

/* GameHubVerse V48 - compact mobile toast and clear auth hero artwork */
@media screen and (max-width: 640px) {
  .toastify.ghv-toast {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    width: calc(100vw - 28px) !important;
    max-width: 390px !important;
    min-height: 46px !important;
    padding: 10px 40px 10px 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .toastify.ghv-toast .toast-close {
    right: 10px !important;
    padding: 4px !important;
    font-size: 20px !important;
  }
}

@media screen and (max-width: 620px) {
  .ghv-auth-visual {
    top: 12px !important;
    right: 8px !important;
    transform: scale(.52) !important;
    transform-origin: top right !important;
    opacity: .22 !important;
  }

  .ghv-auth-float {
    display: none !important;
  }
}

/* GameHubVerse V49 - polished mobile toast alignment below header */
@media screen and (max-width: 640px) {
  .toastify.ghv-toast {
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100vw - 28px) !important;
    max-width: 390px !important;
    min-height: 48px !important;
    padding: 10px 44px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .toastify.ghv-toast .toast-close {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 4px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

/* GameHubVerse V50 - polished desktop toast sizing and header clearance */
@media screen and (min-width: 641px) {
  .toastify.ghv-toast {
    top: 68px !important;
    right: 22px !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 320px !important;
    max-width: calc(100vw - 44px) !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 46px 13px 18px !important;
    border-radius: 15px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .toastify.ghv-toast .toast-close {
    position: absolute !important;
    top: 50% !important;
    right: 13px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 4px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

/* GameHubVerse V58 - isolate desktop wide-screen fitting from mobile landscape/fullscreen.
   Mobile landscape uses an exact visual-viewport fit. Mobile theater/fullscreen uses
   16:9 contain sizing, so the full game remains visible without stretching or cropping. */
body.ghv-v58-mobile-landscape-fit:not(.ghv-mobile-theater) .ghv-player-shell {
  width: var(--ghv-v58-shell-w, calc(100vw - 12px)) !important;
  max-width: var(--ghv-v58-shell-w, calc(100vw - 12px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.ghv-v58-mobile-landscape-fit:not(.ghv-mobile-theater) .ghv-player-stage,
body.ghv-v58-mobile-landscape-fit:not(.ghv-mobile-theater) .main-gameplay .ghv-player-stage.game-frame {
  position: relative !important;
  inset: auto !important;
  width: var(--ghv-v58-stage-w, 100%) !important;
  height: var(--ghv-v58-stage-h, auto) !important;
  min-height: var(--ghv-v58-stage-h, 0) !important;
  max-height: var(--ghv-v58-stage-h, none) !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

body.ghv-v58-mobile-landscape-fit:not(.ghv-mobile-theater) .ghv-player-stage > iframe#zonFrame,
body.ghv-v58-mobile-landscape-fit:not(.ghv-mobile-theater) .ghv-player-stage iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border: 0 !important;
}

/* Mobile fullscreen/theater: always contain a landscape game inside the real visual viewport.
   This intentionally overrides the older responsive "cover" rule only on mobile. */
body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-shell {
  position: fixed !important;
  left: var(--ghv-v58-vv-left, 0px) !important;
  top: var(--ghv-v58-vv-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ghv-v58-vw, 100vw) !important;
  height: var(--ghv-v58-vh, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-stage,
body.ghv-mobile-theater.ghv-v58-landscape-game .main-gameplay .ghv-player-stage.game-frame,
body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-stage[data-ghv-orientation-mode="responsive"],
body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage {
  position: fixed !important;
  left: var(--ghv-v58-vv-left, 0px) !important;
  top: var(--ghv-v58-vv-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: var(--ghv-v58-vw, 100vw) !important;
  height: var(--ghv-v58-vh, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: none !important;
}

body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-stage > iframe#zonFrame,
body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-stage iframe,
body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-stage[data-ghv-orientation-mode="responsive"] > iframe#zonFrame,
body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-player-shell[data-ghv-orientation-mode="responsive"] .ghv-player-stage > iframe#zonFrame {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ghv-v58-frame-w, min(100vw, calc(100dvh * 16 / 9))) !important;
  height: var(--ghv-v58-frame-h, min(100dvh, calc(100vw * 9 / 16))) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: var(--ghv-v58-vw, 100vw) !important;
  max-height: var(--ghv-v58-vh, 100dvh) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  border: 0 !important;
  background: #000 !important;
  z-index: 2 !important;
}

body.ghv-mobile-theater.ghv-v58-landscape-game .ghv-mobile-theater-bar {
  z-index: 2147483646 !important;
}

/* GameHubVerse V59 - mobile pre-launch and full-screen game shell */
.ghv-mobile-launcher,
.ghv-mobile-game-loader,
.ghv-mobile-rotate-prompt,
.ghv-mobile-game-exit {
  display: none;
}

@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-width: 1100px) {
  .ghv-player-shell[data-ghv-mobile-launch="1"] {
    --ghv-v59-launch-radius: 22px;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid rgba(117, 139, 255, .22) !important;
    border-radius: var(--ghv-v59-launch-radius) !important;
    overflow: hidden !important;
    background: #080b19 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28) !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage,
  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] > .game-frame.ghv-player-stage {
    display: none !important;
  }

  body.ghv-mobile-launch-ready .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-mobile-launcher {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(280px, 52svh, 430px);
    padding: 30px 22px;
    overflow: hidden;
    background: #0b0f25;
    text-align: center;
  }

  .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-mobile-launcher::before {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -3;
    background-image: var(--ghv-game-bg-image, none);
    background-position: center;
    background-size: cover;
    filter: blur(3px) saturate(1.08);
    transform: scale(1.06);
  }

  .ghv-mobile-launcher-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(circle at 50% 28%, rgba(66, 113, 255, .18), transparent 45%),
      linear-gradient(180deg, rgba(5, 8, 23, .44), rgba(5, 7, 20, .9));
    backdrop-filter: blur(1px);
  }

  .ghv-mobile-launcher-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 410px);
    color: #fff;
  }

  .ghv-mobile-launcher-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(12, 18, 42, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  .ghv-mobile-launcher-type svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
  }

  .ghv-mobile-launcher h2 {
    margin: 18px 0 8px;
    color: #fff;
    font-size: clamp(27px, 8vw, 38px);
    line-height: 1.08;
    font-weight: 800;
    text-shadow: 0 3px 20px rgba(0,0,0,.55);
  }

  .ghv-mobile-launcher p {
    max-width: 340px;
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 14px;
    line-height: 1.55;
  }

  .ghv-mobile-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(100%, 285px);
    min-height: 58px;
    margin-top: 24px;
    padding: 10px 22px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(100deg, #18bdf1, #6450ff);
    box-shadow: 0 13px 32px rgba(39, 105, 255, .38), inset 0 1px 0 rgba(255,255,255,.25);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .ghv-mobile-play-button:active {
    transform: scale(.985);
  }

  .ghv-mobile-play-button:disabled {
    cursor: wait;
    opacity: .75;
  }

  .ghv-mobile-play-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
  }

  .ghv-mobile-play-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .ghv-mobile-launcher-note {
    margin-top: 11px;
    color: rgba(255,255,255,.6);
    font-size: 12px;
    font-weight: 600;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) #fullscreenButton {
    display: none !important;
  }

  html.ghv-mobile-launch-root,
  body.ghv-mobile-launch-active {
    overscroll-behavior: none !important;
  }

  body.ghv-mobile-launch-active {
    overflow: hidden !important;
    touch-action: none;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] {
    position: fixed !important;
    left: var(--ghv-v59-vv-left, 0px) !important;
    top: var(--ghv-v59-vv-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: var(--ghv-v59-vw, 100vw) !important;
    max-width: none !important;
    height: var(--ghv-v59-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-mobile-launcher {
    display: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .game-frame.ghv-player-stage,
  body.ghv-mobile-launch-active .main-gameplay .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage.game-frame {
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: var(--ghv-v59-stage-w, 100vw) !important;
    max-width: var(--ghv-v59-stage-w, 100vw) !important;
    height: var(--ghv-v59-stage-h, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ghv-v59-stage-h, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
    contain: layout paint style !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage::before,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage::after {
    display: none !important;
    content: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage > iframe#zonFrame,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage iframe {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .ghv-mobile-game-exit {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    z-index: 2147483646;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 52px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(8, 11, 24, .76);
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
    backdrop-filter: blur(14px);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
  }

  .ghv-mobile-game-exit svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  body.ghv-mobile-launch-active .ghv-mobile-game-exit {
    display: inline-flex;
  }

  .ghv-mobile-game-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;
    color: rgba(255,255,255,.86);
    background: #050713;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  body.ghv-mobile-launch-active.ghv-mobile-game-loading .ghv-mobile-game-loader {
    display: flex;
  }

  .ghv-mobile-game-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255,255,255,.16);
    border-top-color: #35c5ff;
    border-right-color: #6955ff;
    border-radius: 50%;
    animation: ghv-v59-spin .8s linear infinite;
  }

  @keyframes ghv-v59-spin {
    to { transform: rotate(360deg); }
  }

  .ghv-mobile-rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 28px;
    color: #fff;
    background: rgba(4, 7, 18, .94);
    text-align: center;
    backdrop-filter: blur(14px);
  }

  body.ghv-mobile-launch-active.ghv-mobile-orientation-mismatch .ghv-mobile-rotate-prompt {
    display: flex;
  }

  .ghv-mobile-rotate-prompt strong {
    margin-top: 20px;
    font-size: 24px;
    line-height: 1.15;
  }

  .ghv-mobile-rotate-copy {
    max-width: 300px;
    margin-top: 8px;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.5;
  }

  .ghv-mobile-rotate-phone {
    position: relative;
    width: 56px;
    height: 92px;
    border: 4px solid #fff;
    border-radius: 12px;
    animation: ghv-v59-rotate-phone 1.8s ease-in-out infinite;
  }

  .ghv-mobile-rotate-phone span {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 16px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.7);
    transform: translateX(-50%);
  }

  @keyframes ghv-v59-rotate-phone {
    0%, 25% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
  }

  body.ghv-mobile-launch-active .ghv-mobile-theater-bar,
  body.ghv-mobile-launch-active #ghvPcFullscreenStartupBlocker {
    display: none !important;
  }
}


/* GameHubVerse V60 - isolated mobile launch shell; final authority over phone layout */
@media screen and (max-width: 1100px) and (pointer: coarse), screen and (max-width: 768px) {
  body.ghv-mobile-launch-ready .ghv-player-shell[data-ghv-mobile-launch="1"],
  body.ghv-mobile-launch-ready .ghv-player-shell[data-ghv-mobile-launch="1"] *,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"],
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] * {
    transition: none !important;
    animation-delay: 0s !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage {
    display: none !important;
  }

  html.ghv-mobile-launch-root,
  html.ghv-mobile-launch-root body,
  body.ghv-mobile-launch-active {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #000 !important;
  }

  body.ghv-mobile-launch-active {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] {
    position: fixed !important;
    left: var(--ghv-v60-vv-left, 0px) !important;
    top: var(--ghv-v60-vv-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483000 !important;
    display: block !important;
    width: var(--ghv-v60-vw, 100vw) !important;
    max-width: none !important;
    height: var(--ghv-v60-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: none !important;
    transform: none !important;
    contain: strict !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-mobile-launcher {
    display: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .main-gameplay .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage.game-frame {
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: var(--ghv-v60-stage-w, 100%) !important;
    max-width: var(--ghv-v60-stage-w, 100%) !important;
    height: var(--ghv-v60-stage-h, 100%) !important;
    min-height: 0 !important;
    max-height: var(--ghv-v60-stage-h, 100%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: none !important;
    transform: translate3d(-50%, -50%, 0) !important;
    contain: layout paint style !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage::before,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage::after {
    display: none !important;
    content: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage > iframe#zonFrame,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-player-stage iframe {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  body.ghv-mobile-launch-active .ghv-mobile-game-exit,
  body.ghv-mobile-launch-active .ghv-mobile-game-loader,
  body.ghv-mobile-launch-active .ghv-mobile-rotate-prompt {
    position: fixed !important;
  }

  body.ghv-mobile-launch-active .ghv-mobile-game-exit {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
  }

  body.ghv-mobile-launch-active .ghv-mobile-theater-bar,
  body.ghv-mobile-launch-active #fullscreenButton,
  body.ghv-mobile-launch-active #ghvPcFullscreenStartupBlocker {
    display: none !important;
  }
}


/* GameHubVerse V61 - real visual viewport + stable pre-launch card */
@media screen and (max-width: 1100px) and (pointer: coarse), screen and (max-width: 768px) {
  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] {
    contain: none !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-mobile-launcher {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1.02 !important;
    padding: clamp(22px, 6vw, 32px) 22px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] {
    box-sizing: border-box !important;
    transform-origin: 0 0 !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .main-gameplay .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage.game-frame {
    box-sizing: border-box !important;
    transform-origin: center center !important;
  }
}

/* GameHubVerse V62 - stable mobile game layer, browser-back exit, no fallback exit button */
@media screen and (max-width: 1100px) and (pointer: coarse), screen and (max-width: 768px) {
  html.ghv-mobile-launch-root,
  body.ghv-mobile-launch-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] .ghv-mobile-launcher {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1.02 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage,
  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-mobile-game-loader,
  body.ghv-mobile-launch-ready:not(.ghv-mobile-launch-active) .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-mobile-rotate-prompt,
  body.ghv-mobile-launch-ready .ghv-mobile-game-exit {
    display: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    contain: layout paint size !important;
  }

  @supports (height: 100svh) {
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] {
      height: 100svh !important;
      min-height: 100svh !important;
    }
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-mobile-launcher {
    display: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .main-gameplay .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage.game-frame {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="portrait"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="portrait_columns"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="portrait-columns"] > .ghv-player-stage {
    width: min(100vw, calc(100vh * 9 / 16)) !important;
    height: min(100vh, calc(100vw * 16 / 9)) !important;
    aspect-ratio: 9 / 16 !important;
  }

  @supports (height: 100svh) {
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="portrait"] > .ghv-player-stage,
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="portrait_columns"] > .ghv-player-stage,
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="portrait-columns"] > .ghv-player-stage {
      width: min(100vw, calc(100svh * 9 / 16)) !important;
      height: min(100svh, calc(100vw * 16 / 9)) !important;
    }
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="landscape"] > .ghv-player-stage {
    width: min(100vw, calc(100vh * 16 / 9)) !important;
    height: min(100vh, calc(100vw * 9 / 16)) !important;
    aspect-ratio: 16 / 9 !important;
  }

  @supports (height: 100svh) {
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="landscape"] > .ghv-player-stage {
      width: min(100vw, calc(100svh * 16 / 9)) !important;
      height: min(100svh, calc(100vw * 9 / 16)) !important;
    }
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="square"] > .ghv-player-stage {
    width: min(100vw, 100vh) !important;
    height: min(100vw, 100vh) !important;
    aspect-ratio: 1 / 1 !important;
  }

  @supports (height: 100svh) {
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="square"] > .ghv-player-stage {
      width: min(100vw, 100svh) !important;
      height: min(100vw, 100svh) !important;
    }
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="responsive"] > .ghv-player-stage,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="auto"] > .ghv-player-stage {
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: auto !important;
  }

  @supports (height: 100svh) {
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="responsive"] > .ghv-player-stage,
    body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-launch-orientation="auto"] > .ghv-player-stage {
      height: 100svh !important;
    }
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage::before,
  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage::after {
    display: none !important;
    content: none !important;
  }

  body.ghv-mobile-launch-active .ghv-player-shell[data-ghv-mobile-launch="1"] > .ghv-player-stage > iframe#zonFrame {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  body.ghv-mobile-launch-active .ghv-mobile-game-loader,
  body.ghv-mobile-launch-active .ghv-mobile-rotate-prompt {
    position: fixed !important;
    z-index: 2147483500 !important;
  }

  body.ghv-mobile-launch-active .ghv-mobile-theater-bar,
  body.ghv-mobile-launch-active .ghv-mobile-exit,
  body.ghv-mobile-launch-active .ghv-mobile-game-exit,
  body.ghv-mobile-launch-active #fullscreenButton,
  body.ghv-mobile-launch-active #ghvPcFullscreenStartupBlocker {
    display: none !important;
  }
}

/* GameHubVerse V65 - mobile game action alignment */
@media screen and (max-width: 670px) {
  .ghv-player-meta-card > .flex.gap-2 {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* GameHubVerse legal/support policy controls */
.ghv-inline-privacy-button{
  appearance:none;
  border:1px solid color-mix(in srgb,var(--ghv-brand-cyan,#22dff8) 38%,transparent);
  border-radius:999px;
  padding:8px 13px;
  background:color-mix(in srgb,var(--ghv-brand-cyan,#22dff8) 10%,transparent);
  color:var(--ghv-brand-cyan,#22dff8);
  font:800 13px/1.2 inherit;
  cursor:pointer;
}
.ghv-inline-privacy-button:hover,
.ghv-inline-privacy-button:focus-visible{
  background:color-mix(in srgb,var(--ghv-brand-purple,#7b4dff) 14%,transparent);
  color:var(--ghv-brand-purple,#7b4dff);
}
.ghv-legal-updated{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--ghv-brand-cyan,#22dff8) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--ghv-brand-cyan,#22dff8) 16%,transparent);
  font-size:12px;
}
.ghv-static-related{
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent);
}
.ghv-static-related strong{display:block;margin-bottom:10px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;}
.ghv-static-related-links{display:flex;flex-wrap:wrap;gap:8px;}
.ghv-static-related-links a{
  display:inline-flex;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent);
  background:color-mix(in srgb,var(--zon-common-text-color) 4%,transparent);
  font-size:12px;
}

/* GameHubVerse V76 - related-page pill consistency hotfix */
.ghv-static-related-links > a,
.ghv-static-related-links > .ghv-inline-privacy-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb,var(--zon-common-text-color) 4%,transparent) !important;
  color: var(--ghv-brand-cyan,#22dff8) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  vertical-align: middle !important;
  cursor: pointer;
}
.ghv-static-related-links > a:hover,
.ghv-static-related-links > a:focus-visible,
.ghv-static-related-links > .ghv-inline-privacy-button:hover,
.ghv-static-related-links > .ghv-inline-privacy-button:focus-visible {
  background: color-mix(in srgb,var(--ghv-brand-cyan,#22dff8) 10%,transparent) !important;
  border-color: color-mix(in srgb,var(--ghv-brand-cyan,#22dff8) 38%,transparent) !important;
  color: var(--ghv-brand-cyan,#22dff8) !important;
  transform: none !important;
}


/* GameHubVerse V77 - inline privacy control inside policy sentences */
.ghv-static-page-content li .ghv-inline-privacy-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ghv-brand-cyan,#22dff8) !important;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  text-align: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  vertical-align: baseline !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}
.ghv-static-page-content li .ghv-inline-privacy-button:hover,
.ghv-static-page-content li .ghv-inline-privacy-button:focus-visible {
  background: transparent !important;
  color: var(--ghv-brand-purple,#7b4dff) !important;
  text-decoration-thickness: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}


/* GameHubVerse V9 - automatic legal-page accent palette for light theme */
html[zontal-theme="light"] .ghv-static-page-shell {
  --ghv-legal-light-accent: #087ea4;
  --ghv-legal-light-accent-strong: #066b8e;
  --ghv-legal-light-accent-soft: rgba(8, 126, 164, .06);
  --ghv-legal-light-accent-hover: rgba(8, 126, 164, .12);
  --ghv-legal-light-accent-border: rgba(8, 126, 164, .22);
  --ghv-legal-light-accent-border-hover: rgba(8, 126, 164, .40);
}

html[zontal-theme="light"] .ghv-static-page-content a,
html[zontal-theme="light"] .ghv-static-page-content a:visited {
  color: var(--ghv-legal-light-accent) !important;
}

html[zontal-theme="light"] .ghv-static-page-content a:hover,
html[zontal-theme="light"] .ghv-static-page-content a:focus-visible {
  color: var(--ghv-legal-light-accent-strong) !important;
}

html[zontal-theme="light"] .ghv-static-page-badge,
html[zontal-theme="light"] .ghv-legal-updated {
  color: var(--ghv-legal-light-accent) !important;
  background: var(--ghv-legal-light-accent-soft) !important;
  border-color: var(--ghv-legal-light-accent-border) !important;
}

html[zontal-theme="light"] .ghv-static-related-links > a,
html[zontal-theme="light"] .ghv-static-related-links > .ghv-inline-privacy-button {
  color: var(--ghv-legal-light-accent) !important;
  background: var(--ghv-legal-light-accent-soft) !important;
  border-color: var(--ghv-legal-light-accent-border) !important;
}

html[zontal-theme="light"] .ghv-static-related-links > a:hover,
html[zontal-theme="light"] .ghv-static-related-links > a:focus-visible,
html[zontal-theme="light"] .ghv-static-related-links > .ghv-inline-privacy-button:hover,
html[zontal-theme="light"] .ghv-static-related-links > .ghv-inline-privacy-button:focus-visible {
  color: var(--ghv-legal-light-accent-strong) !important;
  background: var(--ghv-legal-light-accent-hover) !important;
  border-color: var(--ghv-legal-light-accent-border-hover) !important;
}

html[zontal-theme="light"] .ghv-static-page-content li .ghv-inline-privacy-button {
  color: var(--ghv-legal-light-accent) !important;
}

html[zontal-theme="light"] .ghv-static-page-content li .ghv-inline-privacy-button:hover,
html[zontal-theme="light"] .ghv-static-page-content li .ghv-inline-privacy-button:focus-visible {
  color: var(--ghv-legal-light-accent-strong) !important;
}

/* GameHubVerse Player Progression V1 */
.ghv-home-card{position:relative}.ghv-progress-card-badges{position:absolute;z-index:7;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:5px;pointer-events:none}.ghv-progress-card-badges span{display:inline-flex;align-items:center;min-height:23px;padding:4px 8px;border-radius:999px;background:rgba(7,10,20,.84);color:#fff;font-size:10px;line-height:1;font-weight:800;backdrop-filter:blur(8px);box-shadow:0 3px 10px rgba(0,0,0,.22)}.ghv-progress-card-badges .is-completed{background:rgba(22,101,52,.88)}.ghv-progress-card-badges .is-cloud{margin-left:auto;background:rgba(30,64,175,.86)}.ghv-progress-card-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;color:var(--zon-muted-color);font-size:11px;line-height:1.2}.ghv-progress-card-summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ghv-progress-card-summary b{color:var(--zon-common-text-color);font-weight:800;white-space:nowrap}.ghv-progress-card-track{height:5px;margin-top:5px;border-radius:99px;overflow:hidden;background:rgba(128,138,160,.18)}.ghv-progress-card-track span{display:block;height:100%;border-radius:inherit;background:var(--ghv-brand-gradient)}
.ghv-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.ghv-library-card{position:relative;min-width:0}.ghv-library-card-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#080a12}.ghv-library-card-media img{width:100%;height:100%;object-fit:cover;display:block}.ghv-library-card-body{padding:10px 2px 0}.ghv-library-card-title{display:block;color:var(--zon-common-text-color);font-weight:800;line-height:1.25}.ghv-library-card-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--zon-muted-color);font-size:12px;margin-top:6px}.ghv-library-card-sub span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ghv-library-card-sub b{color:var(--zon-common-text-color);white-space:nowrap}.ghv-library-card-track{height:7px;border-radius:99px;background:rgba(128,138,160,.18);overflow:hidden;margin-top:8px}.ghv-library-card-track span{display:block;height:100%;border-radius:inherit;background:var(--ghv-brand-gradient)}.ghv-library-card-badges{position:absolute;z-index:3;top:8px;left:8px;right:8px;display:flex;gap:5px;pointer-events:none}.ghv-library-card-badges span{padding:5px 8px;border-radius:999px;background:rgba(7,10,20,.84);color:#fff;font-size:10px;font-weight:800;backdrop-filter:blur(8px)}.ghv-library-card-badges .is-new{background:rgba(124,58,237,.9)}.ghv-library-card-badges .is-completed{background:rgba(22,101,52,.9)}.ghv-library-card-badges .is-cloud{margin-left:auto;background:rgba(30,64,175,.9)}.ghv-library-empty{padding:30px;border-radius:16px;background:var(--zon-gmeta-bg-color);color:var(--zon-muted-color);text-align:center}.ghv-library-empty strong{display:block;color:var(--zon-common-text-color);font-size:18px;margin-bottom:6px}.ghv-library-section{margin-top:26px}.ghv-library-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:14px}.ghv-library-section-head h2{color:var(--zon-common-text-color);font-size:21px;font-weight:800}.ghv-library-section-head a{color:var(--zon-theme-color);font-size:13px}.ghv-player-progress-panel{margin-top:12px;padding:12px 14px;border-radius:13px;background:var(--zon-gmeta-bg-color)}.ghv-player-progress-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--zon-common-text-color);font-size:12px}.ghv-player-progress-panel-head strong{font-size:13px}.ghv-player-progress-panel .ghv-library-card-track{margin-top:9px}.ghv-player-progress-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.ghv-player-progress-meta span{padding:4px 7px;border-radius:999px;background:rgba(128,138,160,.12);color:var(--zon-muted-color);font-size:10px;font-weight:700}
@media(max-width:1450px){.ghv-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1000px){.ghv-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:800px){.ghv-progress-card-summary,.ghv-progress-card-track{display:none}.ghv-progress-card-badges{top:6px;left:6px;right:6px}.ghv-progress-card-badges span{font-size:9px;min-height:20px;padding:3px 6px}}@media(max-width:520px){.ghv-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.ghv-library-card-title{font-size:14px}.ghv-library-card-sub{font-size:10px}.ghv-library-card-badges span{font-size:8px;padding:4px 6px}}


/* GameHubVerse Player Progression V1 - account library */
.ghvp-library-heading{margin-bottom:14px}
.ghvp-library-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--zon-muted-color) 16%,transparent)}
.ghvp-library-tabs a{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent);border-radius:999px;color:var(--zon-muted-color);font-size:12px;font-weight:800;transition:.18s ease}
.ghvp-library-tabs a:hover,.ghvp-library-tabs a.is-active{color:var(--zon-common-text-color);border-color:color-mix(in srgb,var(--zon-theme-color) 45%,transparent);background:color-mix(in srgb,var(--zon-theme-color) 12%,transparent)}
.ghvp-library-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.ghvp-library-stats>div{padding:16px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 14%,transparent);border-radius:14px;background:var(--zon-gmeta-bg-color)}
.ghvp-library-stats strong{display:block;color:var(--zon-common-text-color);font-size:24px;line-height:1.1}
.ghvp-library-stats span{display:block;margin-top:5px;color:var(--zon-muted-color);font-size:11px}
.ghvp-library-section{margin-top:27px}
.ghvp-library-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px}
.ghvp-library-section-head h2{margin:0;color:var(--zon-common-text-color);font-size:20px;font-weight:800}
.ghvp-library-section-head p{margin:3px 0 0;color:var(--zon-muted-color);font-size:12px}
.ghvp-library-section-head>a{color:var(--zon-theme-color);font-size:12px;font-weight:800}
.ghvp-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ghvp-library-card{min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--zon-muted-color) 12%,transparent);border-radius:15px;background:var(--zon-gmeta-bg-color)}
.ghvp-library-image{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#05070c}
.ghvp-library-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .22s ease}
.ghvp-library-image:hover img{transform:scale(1.025)}
.ghvp-library-image-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:32px}
.ghvp-library-play{position:absolute;right:9px;bottom:9px;display:inline-flex;align-items:center;min-height:29px;padding:6px 10px;border-radius:999px;background:rgba(5,8,18,.84);color:#fff;font-size:10px;font-weight:900;backdrop-filter:blur(8px)}
.ghvp-library-body{padding:12px 13px 14px}
.ghvp-library-badges{display:flex;flex-wrap:wrap;gap:5px;min-height:21px;margin-bottom:7px}
.ghvp-library-badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(128,138,160,.13);color:var(--zon-muted-color);font-size:9px;font-weight:800}
.ghvp-library-badge.is-complete{background:rgba(22,101,52,.22);color:#73e19a}.ghvp-library-badge.is-new{background:rgba(124,58,237,.22);color:#c4a8ff}.ghvp-library-badge.is-cloud{background:rgba(30,100,210,.20);color:#91c5ff}
.ghvp-library-title{display:block;overflow:hidden;color:var(--zon-common-text-color);font-size:14px;font-weight:800;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.ghvp-library-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;color:var(--zon-muted-color);font-size:11px}
.ghvp-library-summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ghvp-library-summary small{white-space:nowrap;font-size:10px}
.ghvp-library-progress{height:6px;margin-top:9px;overflow:hidden;border-radius:999px;background:rgba(128,138,160,.18)}
.ghvp-library-progress span{display:block;height:100%;border-radius:inherit;background:var(--ghv-brand-gradient)}
@media(max-width:1300px){.ghvp-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.ghvp-library-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ghvp-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ghvp-library-grid{gap:12px}.ghvp-library-body{padding:10px}.ghvp-library-tabs{gap:6px}.ghvp-library-tabs a{padding:7px 9px;font-size:10px}.ghvp-library-section-head h2{font-size:18px}.ghvp-library-play{display:none}}
.ghv-player-progress-panel-head>div{display:grid;gap:2px}.ghv-player-progress-panel-head small{color:var(--zon-muted-color);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.ghv-player-progress-panel-head a{color:var(--zon-theme-color);font-size:11px;font-weight:800}.ghv-player-progress-panel .ghv-library-card-track{height:7px}

/* GameHubVerse Mobile Account Menu Polish HOTFIX */
@media (max-width: 640px) {
  .ghv-commerce-account {
    width: 100%;
    margin: 6px auto 48px;
    padding: 0 2px;
  }

  .ghv-commerce-account .ghv-commerce-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 5px !important;
    margin: 0 0 22px !important;
    padding: 6px !important;
    border-color: rgba(23, 201, 255, .11) !important;
    border-radius: 14px !important;
    background: rgba(17, 19, 27, .88);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .02);
    backdrop-filter: blur(12px);
  }

  .ghv-commerce-account .ghv-commerce-nav a,
  .ghv-commerce-account .ghv-commerce-nav a:hover,
  .ghv-commerce-account .ghv-commerce-nav a.is-active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
    line-height: 14px !important;
    font-weight: 650 !important;
    text-align: center;
    white-space: nowrap;
  }

  .ghv-commerce-account .ghv-commerce-nav a:last-child {
    grid-column: auto !important;
  }

  .ghv-commerce-account .ghv-commerce-nav a:not(.is-active) {
    color: var(--zon-common-text-color) !important;
    opacity: .66;
  }

  .ghv-commerce-account .ghv-commerce-nav a:hover,
  .ghv-commerce-account .ghv-commerce-nav a.is-active {
    opacity: 1;
  }

  .ghv-commerce-account .ghv-commerce-nav a.is-active {
    box-shadow: 0 5px 15px rgba(23, 134, 255, .20) !important;
  }

  .ghv-commerce-account .ghv-commerce-heading {
    gap: 6px;
    margin: 0 0 20px !important;
  }

  .ghv-commerce-account .ghv-commerce-heading h1 {
    margin-bottom: 7px;
    font-size: 27px !important;
    line-height: 1.2;
  }

  .ghv-commerce-account .ghv-commerce-heading p {
    font-size: 13px !important;
    line-height: 1.55;
  }

  .ghv-commerce-account .ghv-commerce-empty {
    min-height: 132px !important;
    padding: 24px 18px !important;
    border-radius: 15px !important;
  }

  .ghv-commerce-account .ghv-commerce-empty strong {
    font-size: 17px !important;
    line-height: 1.35;
  }

  .ghv-commerce-account .ghv-commerce-empty p {
    margin-top: 4px;
    font-size: 13px !important;
    line-height: 1.5;
  }

  .ghvp-library-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 0 0 12px;
    margin-bottom: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ghvp-library-tabs::-webkit-scrollbar {
    display: none;
  }

  .ghvp-library-tabs a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 10.5px;
    white-space: nowrap;
  }
}

html[zontal-theme="light"] .ghv-commerce-account .ghv-commerce-nav {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(23, 134, 255, .12) !important;
}

/* GameHubVerse Mobile Primary Sidebar Navigation Polish HOTFIX
   Keeps the existing visual style while aligning the four primary links to one
   consistent icon/text grid with equal row heights and deliberate spacing. */
@media screen and (max-width: 1102px) {
  .zontal-sidebar.active {
    width: min(286px, calc(100vw - 42px)) !important;
    padding: 12px 12px 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .zontal-sidebar.active .zontal-sidebar-head {
    min-height: 52px !important;
    padding: 0 2px 0 4px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body {
    margin-top: 12px !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list {
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 2px 0 4px !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list > li > a {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list > li > a > span:first-child {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list > li > a > span:first-child svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list > li > a .icon-label {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list > li > a::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, rgba(34, 223, 248, .11), rgba(29, 124, 255, .10) 46%, rgba(123, 77, 255, .09)) !important;
    box-shadow: inset 0 0 0 1px rgba(34, 223, 248, .09) !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body .list + .sb-divider {
    margin-top: 15px !important;
  }
}

@media screen and (max-width: 420px) {
  .zontal-sidebar.active {
    width: min(282px, calc(100vw - 36px)) !important;
  }
}


/* GameHubVerse Competition V1 — optional leaderboards and achievements */
.ghvc-game-competition{margin:22px 2px 28px;padding:18px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 15%,transparent);border-radius:17px;background:color-mix(in srgb,var(--zon-gmeta-bg-color) 92%,transparent)}
.ghvc-game-competition-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}
.ghvc-game-competition-head>div>span{display:block;margin-bottom:4px;color:var(--ghv-brand-cyan);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.ghvc-game-competition-head h2{margin:0;color:var(--zon-common-text-color);font-size:21px;font-weight:850;line-height:1.25}
.ghvc-game-competition-head>a{flex:0 0 auto;color:var(--ghv-brand-cyan);font-size:12px;font-weight:800}
.ghvc-game-tabs{display:flex;gap:7px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--zon-muted-color) 14%,transparent)}
.ghvc-game-tabs button,.ghvc-period-tabs button{border:1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent);border-radius:999px;background:transparent;color:var(--zon-muted-color);font-size:11px;font-weight:800;transition:.18s ease}
.ghvc-game-tabs button{min-height:35px;padding:7px 12px}.ghvc-period-tabs button{min-height:30px;padding:5px 10px}
.ghvc-game-tabs button:hover,.ghvc-game-tabs button.is-active,.ghvc-period-tabs button:hover,.ghvc-period-tabs button.is-active{border-color:color-mix(in srgb,var(--ghv-brand-cyan) 42%,transparent);background:color-mix(in srgb,var(--ghv-brand-blue) 14%,transparent);color:var(--zon-common-text-color)}
.ghvc-game-tab-panel,.ghvc-board,.ghvc-ranking-list{display:none}.ghvc-game-tab-panel.is-active,.ghvc-board.is-active,.ghvc-ranking-list.is-active{display:block}
.ghvc-board-picker{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--zon-muted-color);font-size:11px;font-weight:800}.ghvc-board-picker select{max-width:270px;min-height:36px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent);border-radius:9px;background:var(--zon-body-bg-color);color:var(--zon-common-text-color)}
.ghvc-board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.ghvc-board-head h3{margin:0;color:var(--zon-common-text-color);font-size:18px;font-weight:850}.ghvc-board-head p{margin:4px 0 0;color:var(--zon-muted-color);font-size:12px;line-height:1.45}.ghvc-my-rank{display:grid;justify-items:end;min-width:105px;padding:9px 11px;border-radius:11px;background:color-mix(in srgb,var(--ghv-brand-blue) 12%,transparent)}.ghvc-my-rank small,.ghvc-my-rank span{color:var(--zon-muted-color);font-size:9px}.ghvc-my-rank strong{color:var(--zon-common-text-color);font-size:14px}
.ghvc-period-tabs{display:flex;gap:6px;margin-bottom:9px}.ghvc-ranking-list{overflow:hidden;border:1px solid color-mix(in srgb,var(--zon-muted-color) 12%,transparent);border-radius:12px}.ghvc-ranking-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:49px;padding:7px 11px;border-bottom:1px solid color-mix(in srgb,var(--zon-muted-color) 10%,transparent)}.ghvc-ranking-row:last-child{border-bottom:0}.ghvc-ranking-row.is-me{background:color-mix(in srgb,var(--ghv-brand-purple) 11%,transparent)}.ghvc-ranking-row>b{color:var(--zon-muted-color);font-size:12px}.ghvc-ranking-user{display:flex;align-items:center;gap:8px;min-width:0}.ghvc-ranking-user img{width:29px;height:29px;border-radius:50%;object-fit:cover}.ghvc-ranking-user strong{overflow:hidden;color:var(--zon-common-text-color);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.ghvc-ranking-value{color:var(--zon-common-text-color);font-size:12px;font-weight:850;white-space:nowrap}.ghvc-ranking-empty{padding:24px;color:var(--zon-muted-color);font-size:12px;text-align:center}.ghvc-login-note{margin:11px 0 0;color:var(--zon-muted-color);font-size:11px}.ghvc-login-note a{color:var(--ghv-brand-cyan);font-weight:800}
.ghvc-achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.ghvc-achievement-card{display:flex;gap:11px;min-width:0;padding:13px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 12%,transparent);border-radius:13px;background:color-mix(in srgb,var(--zon-body-bg-color) 32%,transparent);opacity:.72}.ghvc-achievement-card.is-unlocked{border-color:rgba(34,197,94,.24);background:rgba(22,101,52,.09);opacity:1}.ghvc-achievement-icon{display:flex;flex:0 0 36px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:10px;background:color-mix(in srgb,var(--ghv-brand-purple) 15%,transparent);font-size:17px}.ghvc-achievement-copy{min-width:0;flex:1}.ghvc-achievement-copy>div:first-child{display:flex;justify-content:space-between;gap:8px}.ghvc-achievement-copy h3{overflow:hidden;margin:0;color:var(--zon-common-text-color);font-size:13px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.ghvc-achievement-copy>div:first-child>span{color:var(--ghv-brand-cyan);font-size:9px;font-weight:800;white-space:nowrap}.ghvc-achievement-copy p{margin:4px 0 7px;color:var(--zon-muted-color);font-size:10px;line-height:1.4}.ghvc-achievement-copy small{display:block;margin-top:5px;color:var(--zon-muted-color);font-size:9px}.ghvc-achievement-progress{height:5px;overflow:hidden;border-radius:99px;background:rgba(128,138,160,.16)}.ghvc-achievement-progress span{display:block;height:100%;border-radius:inherit;background:var(--ghv-brand-gradient)}
.ghvc-profile-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}.ghvc-profile-summary>div{padding:15px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 13%,transparent);border-radius:14px;background:var(--zon-gmeta-bg-color)}.ghvc-profile-summary strong{display:block;color:var(--zon-common-text-color);font-size:23px;line-height:1.1}.ghvc-profile-summary span{display:block;margin-top:5px;color:var(--zon-muted-color);font-size:10px}
.ghvc-profile-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ghvc-profile-achievement{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;padding:14px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 12%,transparent);border-radius:14px;background:var(--zon-gmeta-bg-color);opacity:.68}.ghvc-profile-achievement.is-unlocked{border-color:rgba(34,197,94,.24);opacity:1}.ghvc-profile-achievement-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.ghvc-profile-achievement-title strong{overflow:hidden;color:var(--zon-common-text-color);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.ghvc-profile-achievement-title span{color:var(--ghv-brand-cyan);font-size:9px;font-weight:800}.ghvc-profile-achievement p{margin:4px 0;color:var(--zon-muted-color);font-size:10px;line-height:1.4}.ghvc-profile-achievement small,.ghvc-profile-achievement em{display:block;color:var(--zon-muted-color);font-size:9px;font-style:normal}.ghvc-profile-achievement .ghvc-achievement-progress{margin:8px 0 5px}
.ghvc-profile-rankings{overflow:hidden;border:1px solid color-mix(in srgb,var(--zon-muted-color) 12%,transparent);border-radius:14px}.ghvc-profile-rankings>a{display:grid;grid-template-columns:minmax(0,1fr) 54px auto;align-items:center;gap:12px;min-height:58px;padding:9px 13px;border-bottom:1px solid color-mix(in srgb,var(--zon-muted-color) 10%,transparent)}.ghvc-profile-rankings>a:last-child{border-bottom:0}.ghvc-profile-rankings strong,.ghvc-profile-rankings small{display:block}.ghvc-profile-rankings strong{color:var(--zon-common-text-color);font-size:12px}.ghvc-profile-rankings small{margin-top:2px;color:var(--zon-muted-color);font-size:9px}.ghvc-profile-rankings b{color:var(--ghv-brand-cyan);font-size:15px;text-align:center}.ghvc-profile-rankings em{color:var(--zon-common-text-color);font-size:11px;font-style:normal;font-weight:800;white-space:nowrap}
@media(max-width:760px){.ghvc-achievement-grid,.ghvc-profile-achievements{grid-template-columns:1fr}.ghvc-profile-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ghvc-game-competition{padding:14px}.ghvc-game-competition-head h2{font-size:18px}.ghvc-board-head{align-items:stretch}.ghvc-ranking-row{grid-template-columns:34px minmax(0,1fr) auto;padding-inline:8px}.ghvc-ranking-value{font-size:10px}.ghvc-profile-rankings>a{grid-template-columns:minmax(0,1fr) 40px auto;padding-inline:10px}}
@media(max-width:430px){.ghvc-game-competition-head{display:block}.ghvc-game-competition-head>a{display:inline-block;margin-top:7px}.ghvc-board-head{display:block}.ghvc-my-rank{justify-items:start;margin-top:9px}.ghvc-ranking-user img{display:none}.ghvc-profile-rankings em{max-width:86px;overflow:hidden;text-overflow:ellipsis}.ghvc-profile-summary>div{padding:12px}.ghvc-profile-summary strong{font-size:20px}}

/* GameHubVerse Account + Competition Polish V1 */
.ghv-profile-trigger{display:flex;align-items:center;gap:12px;padding:3px 4px;border:0;background:transparent;color:var(--zon-common-text-color);cursor:pointer;text-align:left}
.ghv-profile-identity{display:flex;min-width:0;flex-direction:column;gap:2px}
.ghv-profile-identity strong{max-width:150px;overflow:hidden;color:var(--zon-common-text-color);font-size:14px;font-weight:800;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.ghv-profile-identity small{color:var(--zon-muted-color);font-size:10px;font-weight:700;line-height:1.15;text-transform:uppercase;letter-spacing:.07em}
.ghv-profile-chevron{width:15px;height:15px;color:var(--zon-muted-color);transition:transform .18s ease}
.ghv-profile.is-open .ghv-profile-chevron{transform:rotate(180deg)}
.profile.ghv-profile:hover .dropdown-menu,.profile.ghv-profile.is-open .dropdown-menu{right:0;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.profile .ghv-profile-menu{top:52px;right:0;width:240px;padding:8px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 18%,transparent);border-radius:14px;background:color-mix(in srgb,var(--zon-body-bg-color) 96%,transparent);box-shadow:0 20px 50px rgba(0,0,0,.34);opacity:0;visibility:hidden;transform:translateY(-7px);pointer-events:none;backdrop-filter:blur(18px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.profile .ghv-profile-menu ul{display:grid;gap:2px}
.profile .ghv-profile-menu li{margin:0;padding:0}
.profile .ghv-profile-menu li a{display:flex;align-items:center;gap:11px;min-height:40px;padding:8px 10px;border-radius:9px;color:var(--zon-common-text-color);font-size:13px;font-weight:650;text-transform:none;transition:background .16s ease,color .16s ease}
.profile .ghv-profile-menu li a:hover,.profile .ghv-profile-menu li a:focus-visible{background:color-mix(in srgb,var(--zon-theme-color) 13%,transparent);color:#fff}
.profile .ghv-profile-menu li a.is-logout{color:#ff8d98}
.profile .ghv-profile-menu li a.is-logout:hover{background:rgba(220,38,38,.14);color:#ffb3ba}
.ghv-profile-menu-icon{display:inline-flex;width:20px;min-width:20px;height:20px;align-items:center;justify-content:center;color:var(--ghv-brand-cyan)}
.ghv-profile-menu-icon svg{width:18px;height:18px}
.ghv-profile-separator{height:1px!important;margin:5px 7px!important;background:color-mix(in srgb,var(--zon-muted-color) 17%,transparent)}
.ghvc-achievement-icon svg{width:23px;height:23px;display:block}
.ghvc-profile-achievement .ghvc-achievement-icon,.ghvc-achievement-card .ghvc-achievement-icon{color:#b79cff}
.ghvc-profile-achievement.is-unlocked .ghvc-achievement-icon,.ghvc-achievement-card.is-unlocked .ghvc-achievement-icon{color:#ffd66b}
.ghvc-points-note{display:flex;align-items:flex-start;gap:11px;margin-top:12px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--ghv-brand-cyan) 20%,transparent);border-radius:13px;background:color-mix(in srgb,var(--ghv-brand-blue) 7%,var(--zon-gmeta-bg-color));color:var(--zon-common-text-color)}
.ghvc-points-note-icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;background:rgba(123,77,255,.17);color:#d9c8ff;font-size:14px;flex:0 0 auto}
.ghvc-points-note strong{display:block;font-size:12px;font-weight:850}
.ghvc-points-note p{margin:3px 0 0;color:var(--zon-muted-color);font-size:11px;line-height:1.45}
.ghvc-ranking-hint{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--zon-muted-color) 14%,transparent);border-radius:13px;background:var(--zon-gmeta-bg-color)}
.ghvc-ranking-hint strong{color:var(--zon-common-text-color);font-size:13px}
.ghvc-ranking-hint span{color:var(--zon-muted-color);font-size:11px;text-align:right}
@media(max-width:707px){.ghv-profile-trigger{padding:2px}.ghv-profile-chevron{display:none}.profile .ghv-profile-menu{position:fixed;top:68px;right:12px;width:min(250px,calc(100vw - 24px))}.ghvc-ranking-hint{align-items:flex-start;flex-direction:column}.ghvc-ranking-hint span{text-align:left}}

/* GameHubVerse Light Mode Profile Menu Polish HOTFIX */
html[zontal-theme="light"] .ghv-profile-trigger {
  padding: 4px 6px;
  border-radius: 10px;
  color: #172033;
  transition: background-color .16s ease;
}

html[zontal-theme="light"] .ghv-profile-trigger:hover,
html[zontal-theme="light"] .ghv-profile-trigger:focus-visible {
  background: rgba(15, 23, 42, .045);
}

html[zontal-theme="light"] .ghv-profile-identity strong {
  color: #171a21;
}

html[zontal-theme="light"] .ghv-profile-identity small {
  color: #667085;
}

html[zontal-theme="light"] .ghv-profile-chevron {
  color: #667085;
}

html[zontal-theme="light"] .profile .ghv-profile-menu {
  border-color: rgba(15, 23, 42, .13);
  background: rgba(249, 250, 252, .985);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, .18),
    0 3px 10px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a {
  color: #171a21;
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a:hover,
html[zontal-theme="light"] .profile .ghv-profile-menu li a:focus-visible {
  background: rgba(14, 165, 233, .10);
  color: #0f172a;
}

html[zontal-theme="light"] .ghv-profile-menu-icon {
  color: #089dbb;
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a:hover .ghv-profile-menu-icon,
html[zontal-theme="light"] .profile .ghv-profile-menu li a:focus-visible .ghv-profile-menu-icon {
  color: #0284c7;
}

html[zontal-theme="light"] .ghv-profile-separator {
  background: rgba(15, 23, 42, .11);
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a.is-logout {
  color: #d9485f;
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a.is-logout .ghv-profile-menu-icon {
  color: #d9485f;
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a.is-logout:hover,
html[zontal-theme="light"] .profile .ghv-profile-menu li a.is-logout:focus-visible {
  background: rgba(225, 29, 72, .085);
  color: #be123c;
}

html[zontal-theme="light"] .profile .ghv-profile-menu li a.is-logout:hover .ghv-profile-menu-icon,
html[zontal-theme="light"] .profile .ghv-profile-menu li a.is-logout:focus-visible .ghv-profile-menu-icon {
  color: #be123c;
}

/* GameHubVerse Game Details + Competition Refined Polish V2
   Intentionally left-aligned and full-width. Regular text follows active theme variables. */
.ghv-game-detail-refined {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 20px !important;
  width: 100%;
  margin: 18px 0 0 !important;
  padding: 22px 24px !important;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 17%, transparent) !important;
  border-radius: 18px !important;
  background: var(--zon-search-bg-color) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--zon-common-text-color) 6%, transparent) !important;
}

.ghv-game-detail-copy-refined {
  min-width: 0;
  width: 100%;
}

.ghv-game-detail-refined .game-meta h1 {
  margin: 0 !important;
  color: var(--zon-common-text-color) !important;
  font-size: clamp(28px, 2.25vw, 36px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em;
}

.ghv-game-detail-refined .game-meta > .flex.gap-4 {
  gap: 12px !important;
  margin: 7px 0 0 !important;
}

.ghv-game-detail-refined .game-meta > .flex.gap-4 a,
.ghv-game-detail-refined .game-meta > .flex.gap-4 span,
.ghv-game-detail-refined .game-meta > p {
  color: var(--zon-muted-color) !important;
}

.ghv-game-detail-refined .game-meta > p {
  max-width: 1120px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
}

.ghv-game-actions-refined {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 390px;
}

.ghv-game-detail-refined .game-action-buttons {
  border-color: color-mix(in srgb, var(--zon-muted-color) 18%, transparent) !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 5%, transparent) !important;
  color: var(--zon-muted-color) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease !important;
}

.ghv-game-detail-refined .game-action-buttons path {
  stroke: currentColor !important;
}

.ghv-game-detail-refined .game-action-buttons:hover,
.ghv-game-detail-refined .game-action-buttons:focus-visible {
  border-color: color-mix(in srgb, var(--zon-theme-color) 42%, var(--zon-muted-color)) !important;
  background: color-mix(in srgb, var(--zon-theme-color) 9%, transparent) !important;
  color: var(--zon-common-text-color) !important;
  transform: translateY(-1px);
}

.ghv-game-detail-refined .ghv-player-progress-panel {
  width: min(100%, 900px);
  margin: 17px 0 0 !important;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 4%, transparent) !important;
}

.ghv-game-detail-refined .ghv-player-progress-panel-head {
  align-items: center !important;
}

.ghv-game-detail-refined .ghv-player-progress-panel-head small {
  color: var(--zon-muted-color) !important;
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: .09em !important;
}

.ghv-game-detail-refined .ghv-player-progress-panel-head strong {
  color: var(--zon-common-text-color) !important;
  font-size: 14px !important;
  line-height: 1.3;
}

.ghv-game-library-link-refined,
.ghvc-header-link-refined {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 18%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--zon-common-text-color) 4%, transparent);
  color: var(--zon-common-text-color) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.ghv-game-library-link-refined:hover,
.ghv-game-library-link-refined:focus-visible,
.ghvc-header-link-refined:hover,
.ghvc-header-link-refined:focus-visible {
  border-color: color-mix(in srgb, var(--zon-theme-color) 42%, var(--zon-muted-color));
  background: color-mix(in srgb, var(--zon-theme-color) 8%, transparent);
  color: var(--zon-common-text-color) !important;
}

.ghv-game-detail-refined .ghv-player-progress-meta {
  gap: 6px !important;
}

.ghv-game-detail-refined .ghv-player-progress-meta span {
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 11%, transparent);
  background: color-mix(in srgb, var(--zon-common-text-color) 4%, transparent) !important;
  color: var(--zon-muted-color) !important;
}

.ghv-game-detail-refined .ghv-game-info-extra {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  gap: 22px !important;
  width: min(100%, 1180px);
  margin: 20px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--zon-muted-color) 16%, transparent);
}

.ghv-game-detail-refined .ghv-game-info-section {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.ghv-game-detail-refined .ghv-game-info-title {
  margin: 0 0 7px !important;
  color: var(--zon-common-text-color) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

.ghv-game-detail-refined .ghv-game-info-text {
  color: var(--zon-muted-color) !important;
  font-size: 12px !important;
  line-height: 1.68 !important;
}

.ghv-competition-refined {
  width: 100%;
  margin: 20px 0 26px !important;
  padding: 20px 22px 22px !important;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 17%, transparent) !important;
  border-radius: 18px !important;
  background: var(--zon-search-bg-color) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--zon-common-text-color) 5%, transparent) !important;
}

.ghv-competition-refined .ghvc-game-competition-head {
  align-items: center;
  margin-bottom: 13px;
}

.ghv-competition-refined .ghvc-game-competition-head > div > span {
  color: var(--zon-muted-color) !important;
  font-size: 9px !important;
  letter-spacing: .1em;
}

.ghv-competition-refined .ghvc-game-competition-head h2 {
  color: var(--zon-common-text-color) !important;
  font-size: 21px !important;
  font-weight: 850 !important;
}

.ghv-competition-refined .ghvc-game-tabs {
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--zon-muted-color) 15%, transparent);
}

.ghv-competition-refined .ghvc-game-tabs button {
  position: relative;
  min-height: 32px;
  padding: 5px 1px 8px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--zon-muted-color) !important;
  font-size: 12px;
}

.ghv-competition-refined .ghvc-game-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: transparent;
}

.ghv-competition-refined .ghvc-game-tabs button:hover,
.ghv-competition-refined .ghvc-game-tabs button.is-active {
  color: var(--zon-common-text-color) !important;
}

.ghv-competition-refined .ghvc-game-tabs button.is-active::after {
  background: var(--zon-theme-color);
}

.ghv-competition-refined .ghvc-board-head {
  align-items: center;
  gap: 18px;
  margin-bottom: 13px;
}

.ghv-competition-refined .ghvc-board-head h3,
.ghv-competition-refined .ghvc-ranking-user strong,
.ghv-competition-refined .ghvc-ranking-value,
.ghv-competition-refined .ghvc-my-rank strong,
.ghv-competition-refined .ghvc-achievement-copy h3 {
  color: var(--zon-common-text-color) !important;
}

.ghv-competition-refined .ghvc-board-head p,
.ghv-competition-refined .ghvc-my-rank small,
.ghv-competition-refined .ghvc-my-rank span,
.ghv-competition-refined .ghvc-ranking-row > b,
.ghv-competition-refined .ghvc-achievement-copy p,
.ghv-competition-refined .ghvc-achievement-copy small,
.ghv-competition-refined .ghvc-login-note {
  color: var(--zon-muted-color) !important;
}

.ghv-competition-refined .ghvc-board-head p {
  max-width: 900px;
  line-height: 1.55;
}

.ghv-competition-refined .ghvc-my-rank {
  min-width: 116px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--zon-common-text-color) 4%, transparent) !important;
}

.ghv-competition-refined .ghvc-period-tabs {
  gap: 7px;
  margin-bottom: 10px;
}

.ghv-competition-refined .ghvc-period-tabs button {
  border-color: color-mix(in srgb, var(--zon-muted-color) 17%, transparent) !important;
  background: transparent !important;
  color: var(--zon-muted-color) !important;
}

.ghv-competition-refined .ghvc-period-tabs button:hover,
.ghv-competition-refined .ghvc-period-tabs button.is-active {
  border-color: color-mix(in srgb, var(--zon-theme-color) 38%, var(--zon-muted-color)) !important;
  background: color-mix(in srgb, var(--zon-theme-color) 8%, transparent) !important;
  color: var(--zon-common-text-color) !important;
}

.ghv-competition-refined .ghvc-ranking-list {
  border-color: color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--zon-common-text-color) 2%, transparent);
}

.ghv-competition-refined .ghvc-ranking-row {
  min-height: 54px;
  padding: 8px 13px;
  border-bottom-color: color-mix(in srgb, var(--zon-muted-color) 10%, transparent);
}

.ghv-competition-refined .ghvc-ranking-row.is-me {
  background: color-mix(in srgb, var(--zon-theme-color) 8%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--zon-theme-color);
}

.ghv-competition-refined .ghvc-ranking-user img {
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 15%, transparent);
}

.ghv-competition-refined .ghvc-ranking-empty {
  padding: 27px 18px;
  color: var(--zon-muted-color) !important;
  line-height: 1.5;
}

.ghv-competition-refined .ghvc-achievement-card {
  border-color: color-mix(in srgb, var(--zon-muted-color) 13%, transparent);
  background: color-mix(in srgb, var(--zon-common-text-color) 3%, transparent);
}

.ghv-competition-refined .ghvc-achievement-copy > div:first-child > span {
  color: var(--zon-muted-color) !important;
}

.ghv-competition-refined .ghvc-login-note a {
  color: var(--zon-common-text-color) !important;
  font-weight: 800;
}

.ghv-game-comments-refined {
  width: 100%;
  margin: 0 0 24px !important;
  padding: 20px 22px 22px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 16%, transparent);
  border-radius: 18px;
  background: var(--zon-search-bg-color);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--zon-common-text-color) 5%, transparent);
}

.ghv-game-comments-refined .page-heading {
  margin: 0 0 15px !important;
  color: var(--zon-common-text-color) !important;
  font-size: 21px !important;
}

.ghv-game-comments-refined .comment-form textarea {
  min-height: 104px;
  padding: 13px 14px !important;
  border-color: color-mix(in srgb, var(--zon-muted-color) 20%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 3%, transparent) !important;
  color: var(--zon-common-text-color) !important;
  caret-color: var(--zon-theme-color) !important;
  resize: vertical;
}

.ghv-game-comments-refined .comment-form textarea:hover,
.ghv-game-comments-refined .comment-form textarea:focus,
.ghv-game-comments-refined .comment-form textarea:focus-visible {
  border-color: color-mix(in srgb, var(--zon-theme-color) 50%, var(--zon-muted-color)) !important;
  outline-color: color-mix(in srgb, var(--zon-theme-color) 24%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zon-theme-color) 12%, transparent) !important;
}

.ghv-game-comments-refined .comment-form button[name="comment"] {
  background: var(--zon-theme-color) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--zon-theme-color) 24%, transparent) !important;
}

.ghv-game-comments-refined .comment-card {
  margin: 0 !important;
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--zon-muted-color) 13%, transparent);
}

.ghv-game-comments-refined .comment-card img {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px;
  object-fit: cover;
}

.ghv-game-comments-refined .uc-meta span,
.ghv-game-comments-refined .uc-meta p:last-child {
  color: var(--zon-common-text-color) !important;
}

.ghv-game-comments-refined .uc-meta p {
  color: var(--zon-muted-color) !important;
}

@media (max-width: 980px) {
  .ghv-game-detail-refined {
    grid-template-columns: 1fr;
  }

  .ghv-game-actions-refined {
    justify-content: flex-start;
    max-width: none;
  }

  .ghv-game-detail-refined .ghv-game-info-extra {
    grid-template-columns: 1fr;
    gap: 15px !important;
  }

  .ghv-game-detail-refined .ghv-game-info-section + .ghv-game-info-section {
    padding-top: 15px !important;
    border-top: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent) !important;
  }
}

@media (max-width: 620px) {
  .ghv-game-detail-refined,
  .ghv-competition-refined,
  .ghv-game-comments-refined {
    padding: 16px !important;
    border-radius: 15px !important;
  }

  .ghv-game-detail-refined .game-meta h1 {
    font-size: 26px !important;
  }

  .ghv-game-detail-refined .ghv-player-progress-panel-head,
  .ghv-competition-refined .ghvc-game-competition-head,
  .ghv-competition-refined .ghvc-board-head {
    align-items: flex-start;
  }

  .ghv-game-library-link-refined,
  .ghvc-header-link-refined {
    min-height: 32px;
    padding: 6px 9px;
  }

  .ghv-competition-refined .ghvc-game-tabs {
    gap: 14px;
    overflow-x: auto;
  }

  .ghv-competition-refined .ghvc-ranking-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding-inline: 9px;
  }
}


/* GameHubVerse Game Details + Competition Refined Polish V2.1
   Final micro-polish only: no structural redesign, centering, or fixed-width layout. */

/* Raise secondary-copy contrast only in dark mode. Light mode keeps its native theme values. */
html[zontal-theme="dark"] .ghv-game-detail-refined .game-meta > .flex.gap-4 a,
html[zontal-theme="dark"] .ghv-game-detail-refined .game-meta > .flex.gap-4 span,
html[zontal-theme="dark"] .ghv-game-detail-refined .game-meta > p,
html[zontal-theme="dark"] .ghv-game-detail-refined .ghv-player-progress-panel-head small,
html[zontal-theme="dark"] .ghv-game-detail-refined .ghv-player-progress-meta span,
html[zontal-theme="dark"] .ghv-game-detail-refined .ghv-game-info-text,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-game-competition-head > div > span,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-board-head p,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-my-rank small,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-my-rank span,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-ranking-row > b,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-achievement-copy p,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-achievement-copy small,
html[zontal-theme="dark"] .ghv-competition-refined .ghvc-login-note,
html[zontal-theme="dark"] .ghv-game-comments-refined .uc-meta p {
  color: color-mix(in srgb, var(--zon-common-text-color) 26%, var(--zon-muted-color)) !important;
}

/* Keep the progress summary compact and visually connected to its action. */
.ghv-game-detail-refined .ghv-player-progress-panel {
  width: min(100%, 760px);
  padding: 11px 13px !important;
}

.ghv-game-library-link-refined,
.ghvc-header-link-refined {
  border-color: color-mix(in srgb, var(--zon-theme-color) 24%, var(--zon-muted-color)) !important;
  background: color-mix(in srgb, var(--zon-theme-color) 6%, transparent) !important;
}

.ghv-game-library-link-refined:hover,
.ghv-game-library-link-refined:focus-visible,
.ghvc-header-link-refined:hover,
.ghvc-header-link-refined:focus-visible {
  border-color: color-mix(in srgb, var(--zon-theme-color) 58%, var(--zon-muted-color)) !important;
  background: color-mix(in srgb, var(--zon-theme-color) 11%, transparent) !important;
}

/* Give Controls more room without changing the left-aligned page structure. */
.ghv-game-detail-refined .ghv-game-info-extra {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
}

/* Make the personal-best summary easier to scan. */
.ghv-competition-refined .ghvc-my-rank {
  min-width: 122px;
  padding: 10px 13px;
}

.ghv-competition-refined .ghvc-my-rank small,
.ghv-competition-refined .ghvc-my-rank span {
  font-size: 10px !important;
  line-height: 1.35;
}

.ghv-competition-refined .ghvc-my-rank strong {
  margin: 2px 0;
  font-size: 15px !important;
  line-height: 1.25;
}

/* Avoid an oversized empty comment field before a discussion exists. */
.ghv-game-comments-refined .comment-form textarea {
  min-height: 82px;
}

@media (max-width: 980px) {
  .ghv-game-detail-refined .ghv-game-info-extra {
    grid-template-columns: 1fr;
  }

  .ghv-game-detail-refined .ghv-player-progress-panel {
    width: 100%;
  }
}

/* GameHubVerse: progress belongs inside Competition, not the game-info panel */
.ghv-competition-refined > .ghv-player-progress-panel {
  width: 100%;
  margin: 0 0 16px !important;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 15%, transparent);
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 4%, transparent) !important;
}

.ghv-competition-refined > .ghv-player-progress-panel .ghv-player-progress-panel-head {
  align-items: center;
}

.ghv-competition-refined > .ghv-player-progress-panel .ghv-player-progress-panel-head small {
  color: var(--zon-muted-color) !important;
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: .09em !important;
}

.ghv-competition-refined > .ghv-player-progress-panel .ghv-player-progress-panel-head strong {
  color: var(--zon-common-text-color) !important;
  font-size: 14px !important;
  line-height: 1.3;
}

.ghv-competition-refined > .ghv-player-progress-panel .ghv-player-progress-meta {
  gap: 6px !important;
}

.ghv-competition-refined > .ghv-player-progress-panel .ghv-player-progress-meta span {
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 11%, transparent);
  background: color-mix(in srgb, var(--zon-common-text-color) 4%, transparent) !important;
  color: var(--zon-muted-color) !important;
}

@media (max-width: 640px) {
  .ghv-competition-refined > .ghv-player-progress-panel .ghv-player-progress-panel-head {
    align-items: flex-start;
  }
}


/* ==========================================================
   GameHubVerse Device Controls + Comments Spacing Hotfix
   ========================================================== */

.ghv-game-detail-refined .ghv-game-info-extra {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
}

.ghv-device-controls-section {
  min-width: 0;
}

.ghv-device-controls-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ghv-device-control-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--zon-common-text-color) 3%, transparent);
}

.ghv-device-control-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--zon-common-text-color);
  font-size: 12px;
  font-weight: 800;
}

.ghv-device-control-label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--zon-theme-color);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ghv-device-control-card .ghv-game-info-text {
  line-height: 1.58 !important;
}

.ghv-controls-general {
  margin-top: 9px;
}

/* Match Comments heading-to-field breathing room with Similar Games. */
.ghv-game-comments-refined .page-heading {
  margin-bottom: 30px !important;
}

.ghv-game-comments-refined .comment-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
}

.ghv-game-comments-refined .comment-form textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  margin: 0 !important;
  line-height: 1.55;
}

.ghv-game-comments-refined .comment-form button[name="comment"] {
  margin: 0 !important;
}

.ghv-game-comments-refined .comment-form + hr {
  margin-top: 23px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 860px) {
  .ghv-game-detail-refined .ghv-game-info-extra {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   GameHubVerse Device Controls Visual Polish V2
   Compact device rows; robust in both light and dark themes.
   ========================================================== */

.ghv-device-controls-section .ghv-game-info-title {
  margin-bottom: 10px !important;
}

.ghv-device-controls-list {
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
}

.ghv-device-control-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 16%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--zon-common-text-color) 3.5%, transparent);
}

.ghv-device-control-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--zon-theme-color) 30%, transparent);
  border-radius: 10px;
  color: var(--zon-theme-color);
  background: color-mix(in srgb, var(--zon-theme-color) 10%, transparent);
}

.ghv-device-control-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ghv-device-control-copy {
  min-width: 0;
  padding-top: 1px;
}

.ghv-device-control-title {
  margin: 0 0 3px;
  color: var(--zon-common-text-color);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.ghv-device-control-row .ghv-game-info-text {
  margin: 0 !important;
  color: var(--zon-muted-color) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* Disable the previous card styling when the new compact rows are present. */
.ghv-device-controls-list > .ghv-device-control-card {
  display: none !important;
}

@media (max-width: 640px) {
  .ghv-device-control-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .ghv-device-control-icon {
    width: 34px;
    height: 34px;
  }
}


/* ==========================================================
   GameHubVerse Device Controls Side-by-Side + Progress Cleanup
   ========================================================== */

.ghv-device-controls-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
}

.ghv-device-control-row {
  grid-template-columns: 29px minmax(0, 1fr) !important;
  align-items: start;
  gap: 8px !important;
  height: 100%;
  padding: 8px 9px !important;
  border-radius: 10px !important;
}

.ghv-device-control-icon {
  width: 29px !important;
  height: 29px !important;
  border-radius: 8px !important;
}

.ghv-device-control-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.ghv-device-control-copy {
  padding-top: 0 !important;
}

.ghv-device-control-title {
  margin-bottom: 2px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.ghv-device-control-row .ghv-game-info-text {
  font-size: 11px !important;
  line-height: 1.42 !important;
}

/* The board-level personal best card is the only score summary needed. */
.ghv-competition-refined > .ghv-player-progress-panel {
  display: none !important;
}

@media (max-width: 540px) {
  .ghv-device-controls-list {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   GameHubVerse Game Page Visual Balance Hotfix
   Consistent section spacing, compact controls, readable themes,
   and visible action icons in light and dark mode.
   ========================================================== */

/* Comments and Similar Games use the same panel rhythm. */
.ghv-game-comments-refined,
.ghv-similar-wrap {
  padding: 22px 24px 24px !important;
}

.ghv-game-comments-refined .page-heading,
.ghv-similar-wrap .page-heading {
  margin: 0 0 20px !important;
}

.ghv-game-comments-refined .comment-form {
  gap: 12px !important;
}

.ghv-game-comments-refined .comment-form + hr {
  margin: 18px 0 0 !important;
}

/* Do not show an empty separator when there are no comments yet. */
.ghv-game-comments-refined .comment-form + hr:last-child {
  display: none !important;
}

/* Give controls more horizontal room than the explanation column. */
.ghv-game-detail-refined .ghv-game-info-extra {
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr) !important;
  gap: 24px !important;
}

.ghv-device-controls-section .ghv-game-info-title {
  margin-bottom: 8px !important;
}

.ghv-device-controls-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ghv-device-control-row {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 7px 8px !important;
  gap: 7px !important;
  border-radius: 9px !important;
}

.ghv-device-control-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
}

.ghv-device-control-icon svg {
  width: 13px !important;
  height: 13px !important;
}

.ghv-device-control-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 !important;
}

.ghv-device-control-title {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

.ghv-device-control-row .ghv-game-info-text {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
}

/* Theme-safe contrast improvements for descriptive text. */
.ghv-game-detail-refined .game-meta > .flex.gap-4 a,
.ghv-game-detail-refined .game-meta > .flex.gap-4 span,
.ghv-game-detail-refined .game-meta > p,
.ghv-game-detail-refined .ghv-game-info-text,
.ghv-competition-refined .ghvc-board-head p,
.ghv-competition-refined .ghvc-achievement-copy p,
.ghv-competition-refined .ghvc-achievement-copy small {
  color: color-mix(in srgb, var(--zon-common-text-color) 62%, var(--zon-muted-color)) !important;
}

.ghv-device-control-title,
.ghv-game-detail-refined .ghv-game-info-title {
  color: var(--zon-common-text-color) !important;
}

.ghv-device-control-row {
  border-color: color-mix(in srgb, var(--zon-common-text-color) 15%, transparent) !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 5%, transparent) !important;
}

html[zontal-theme="light"] .ghv-device-control-row,
html[zontal-theme="light"] .ghv-game-comments-refined .comment-form textarea {
  border-color: color-mix(in srgb, var(--zon-common-text-color) 18%, transparent) !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 3%, transparent) !important;
}

/* Action buttons and SVG icons remain visible in both themes. */
.ghv-game-detail-refined .game-action-buttons {
  border-color: color-mix(in srgb, var(--zon-common-text-color) 20%, transparent) !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 6%, transparent) !important;
  color: color-mix(in srgb, var(--zon-common-text-color) 76%, var(--zon-muted-color)) !important;
}

.ghv-game-detail-refined .game-action-buttons svg {
  color: var(--zon-common-text-color) !important;
  stroke: currentColor !important;
  opacity: .82;
}

.ghv-game-detail-refined .game-action-buttons svg path,
.ghv-game-detail-refined .game-action-buttons svg rect,
.ghv-game-detail-refined .game-action-buttons svg circle,
.ghv-game-detail-refined .game-action-buttons svg line,
.ghv-game-detail-refined .game-action-buttons svg polyline {
  stroke: currentColor !important;
}

.ghv-game-detail-refined .game-action-buttons:hover svg,
.ghv-game-detail-refined .game-action-buttons:focus-visible svg {
  color: var(--zon-theme-color) !important;
  opacity: 1;
}

@media (max-width: 980px) {
  .ghv-game-detail-refined .ghv-game-info-extra {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .ghv-device-controls-list {
    grid-template-columns: 1fr !important;
  }

  .ghv-device-control-copy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ghv-game-comments-refined,
  .ghv-similar-wrap {
    padding: 20px 20px 22px !important;
  }
}


/* ==========================================================
   GameHubVerse Professional Device Controls V3
   Balanced cards, readable hierarchy, and high-contrast icons.
   ========================================================== */

/* Give the controls enough width to avoid cramped sentence wrapping. */
.ghv-game-detail-refined .ghv-game-info-extra {
  grid-template-columns: minmax(0, .74fr) minmax(620px, 1.26fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.ghv-device-controls-section .ghv-game-info-title {
  margin: 0 0 10px !important;
}

.ghv-device-controls-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Professional compact card: icon at left, clear title and text at right. */
.ghv-device-control-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  height: auto !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--zon-common-text-color) 14%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--zon-common-text-color) 4.5%, transparent) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--zon-common-text-color) 5%, transparent) inset,
    0 4px 14px rgba(0, 0, 0, .05) !important;
}

.ghv-device-control-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #16a8f4 0%, #3978ff 100%) !important;
  box-shadow: 0 6px 14px rgba(41, 126, 255, .22) !important;
}

.ghv-device-control-icon svg {
  width: 17px !important;
  height: 17px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 1.9 !important;
  opacity: 1 !important;
  filter: none !important;
}

.ghv-device-control-icon svg path,
.ghv-device-control-icon svg rect,
.ghv-device-control-icon svg circle,
.ghv-device-control-icon svg line,
.ghv-device-control-icon svg polyline {
  stroke: #ffffff !important;
}

.ghv-device-control-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.ghv-device-control-title {
  margin: 0 !important;
  color: var(--zon-common-text-color) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
}

.ghv-device-control-row .ghv-game-info-text {
  margin: 0 !important;
  color: color-mix(in srgb, var(--zon-common-text-color) 68%, var(--zon-muted-color)) !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
}

/* Stronger light-mode card separation and typography. */
html[zontal-theme="light"] .ghv-device-control-row {
  border-color: color-mix(in srgb, var(--zon-common-text-color) 15%, transparent) !important;
  background: color-mix(in srgb, var(--zon-body-bg-color) 70%, #ffffff) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 4px 14px rgba(15, 23, 42, .055) !important;
}

html[zontal-theme="light"] .ghv-device-control-title {
  color: var(--zon-common-text-color) !important;
}

html[zontal-theme="light"] .ghv-device-control-row .ghv-game-info-text {
  color: color-mix(in srgb, var(--zon-common-text-color) 72%, var(--zon-muted-color)) !important;
}

/* Achievement icons must stay visible in light mode. */
html[zontal-theme="light"] .ghvc-achievement-card {
  opacity: .9 !important;
  border-color: color-mix(in srgb, var(--zon-common-text-color) 13%, transparent) !important;
  background: color-mix(in srgb, var(--zon-body-bg-color) 74%, #ffffff) !important;
}

html[zontal-theme="light"] .ghvc-achievement-card .ghvc-achievement-icon {
  color: #6f4bf4 !important;
  background: #eee9ff !important;
  border: 1px solid #d9ceff !important;
  box-shadow: 0 3px 10px rgba(92, 67, 214, .10) !important;
  opacity: 1 !important;
}

html[zontal-theme="light"] .ghvc-achievement-card.is-unlocked {
  opacity: 1 !important;
}

html[zontal-theme="light"] .ghvc-achievement-card.is-unlocked .ghvc-achievement-icon {
  color: #a66a00 !important;
  background: #fff2c8 !important;
  border-color: #efd276 !important;
  box-shadow: 0 3px 10px rgba(181, 123, 0, .10) !important;
}

html[zontal-theme="light"] .ghvc-achievement-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

html[zontal-theme="light"] .ghvc-achievement-icon svg path,
html[zontal-theme="light"] .ghvc-achievement-icon svg rect,
html[zontal-theme="light"] .ghvc-achievement-icon svg circle,
html[zontal-theme="light"] .ghvc-achievement-icon svg line,
html[zontal-theme="light"] .ghvc-achievement-icon svg polyline {
  stroke: currentColor !important;
}

/* Keep locked achievement text readable instead of washed out. */
html[zontal-theme="light"] .ghvc-achievement-card:not(.is-unlocked) .ghvc-achievement-copy h3 {
  color: color-mix(in srgb, var(--zon-common-text-color) 88%, var(--zon-muted-color)) !important;
}

html[zontal-theme="light"] .ghvc-achievement-card:not(.is-unlocked) .ghvc-achievement-copy p,
html[zontal-theme="light"] .ghvc-achievement-card:not(.is-unlocked) .ghvc-achievement-copy small {
  color: color-mix(in srgb, var(--zon-common-text-color) 58%, var(--zon-muted-color)) !important;
}

@media (max-width: 1120px) {
  .ghv-game-detail-refined .ghv-game-info-extra {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .ghv-device-controls-list {
    grid-template-columns: 1fr !important;
  }

  .ghv-device-control-row {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }
}


/* ==========================================================
   GameHubVerse Profile Menu Invisible Hover Bridge RESTORE
   Keeps the dropdown open while crossing the visual gap.
   ========================================================== */

@media (min-width: 708px) {
  .profile.ghv-profile::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;
    height: 16px;
    background: transparent;
    pointer-events: auto;
    z-index: 999998;
  }

  .profile.ghv-profile .ghv-profile-menu {
    top: calc(100% + 10px);
  }
}


/* ==========================================================
   GameHubVerse Competition Header + Light Surface Cleanup
   Removes redundant logged-in action and softens nested cards.
   ========================================================== */

/* When no guest action is present, keep the heading naturally left-aligned. */
.ghv-competition-refined .ghvc-game-competition-head:has(> div:only-child) {
  justify-content: flex-start !important;
}

/* Light mode: reduce gray-panel / white-card checkerboard contrast. */
html[zontal-theme="light"] .ghv-competition-refined {
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 94%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 11%,
    transparent
  ) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
}

html[zontal-theme="light"] .ghv-competition-refined .ghvc-achievement-grid {
  gap: 10px !important;
}

html[zontal-theme="light"] .ghv-competition-refined .ghvc-achievement-card {
  opacity: .94 !important;
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 84%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 10%,
    transparent
  ) !important;
  box-shadow: none !important;
}

html[zontal-theme="light"] .ghv-competition-refined .ghvc-achievement-card:hover {
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 76%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-theme-color) 20%,
    var(--zon-common-text-color)
  ) !important;
}

html[zontal-theme="light"] .ghv-competition-refined .ghvc-achievement-card.is-unlocked {
  opacity: 1 !important;
  background: color-mix(
    in srgb,
    var(--zon-theme-color) 3.5%,
    var(--zon-search-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-theme-color) 17%,
    var(--zon-common-text-color)
  ) !important;
}

/* Keep icon tiles distinct without making every card look like a separate white box. */
html[zontal-theme="light"] .ghv-competition-refined .ghvc-achievement-icon {
  box-shadow: none !important;
}

/* The comments panel follows the same softer light-mode surface treatment. */
html[zontal-theme="light"] .ghv-game-comments-refined {
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 94%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 11%,
    transparent
  ) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
}

html[zontal-theme="light"] .ghv-game-comments-refined .comment-form textarea {
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 82%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 12%,
    transparent
  ) !important;
}


/* ==========================================================
   GameHubVerse Game Information Container-Responsive Layout
   Prevents Controls from crushing How to Play when sidebars
   reduce the actual game-details panel width.
   ========================================================== */

.ghv-game-detail-refined {
  container-type: inline-size;
  container-name: ghv-game-details;
}

/* Remove the previous fixed 620px Controls minimum width. */
.ghv-game-detail-refined .ghv-game-info-extra {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) !important;
  gap: 28px !important;
}

.ghv-game-detail-refined .ghv-game-info-section {
  min-width: 0 !important;
}

.ghv-game-detail-refined .ghv-game-info-text {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/*
 * React to the real details-panel width, not the full browser width.
 * This is important when the left navigation and More Games sidebar
 * consume a large part of the viewport.
 */
@container ghv-game-details (max-width: 980px) {
  .ghv-game-detail-refined .ghv-game-info-extra {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .ghv-game-detail-refined .ghv-device-controls-section {
    width: 100% !important;
  }

  .ghv-game-detail-refined .ghv-device-controls-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container ghv-game-details (max-width: 640px) {
  .ghv-game-detail-refined .ghv-device-controls-list {
    grid-template-columns: 1fr !important;
  }
}

/* Fallback for browsers without container-query support. */
@supports not (container-type: inline-size) {
  @media (max-width: 1500px) {
    .ghv-game-detail-refined .ghv-game-info-extra {
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }
  }

  @media (max-width: 720px) {
    .ghv-game-detail-refined .ghv-device-controls-list {
      grid-template-columns: 1fr !important;
    }
  }
}


/* ==========================================================
   GameHubVerse Competition + Comments Reading Width
   Full-width panels with left-aligned, controlled inner content.
   ========================================================== */

.ghv-competition-refined,
.ghv-game-comments-refined {
  --ghv-game-inner-content-width: 1180px;
}

/* Competition content stops near the end of the Controls area. */
.ghv-competition-refined > .ghvc-game-competition-head,
.ghv-competition-refined > .ghvc-game-tabs,
.ghv-competition-refined > .ghvc-game-tab-panel {
  width: min(100%, var(--ghv-game-inner-content-width)) !important;
  max-width: var(--ghv-game-inner-content-width) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* No empty right-side header action space after removing the top Sign in. */
.ghv-competition-refined .ghvc-game-competition-head {
  justify-content: flex-start !important;
}

/* Comments input and real comments use the same left-aligned reading width. */
.ghv-game-comments-refined .comment-form,
.ghv-game-comments-refined > hr,
.ghv-game-comments-refined .comment-card {
  width: min(100%, var(--ghv-game-inner-content-width)) !important;
  max-width: var(--ghv-game-inner-content-width) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.ghv-game-comments-refined .comment-form textarea {
  width: 100% !important;
}

/* Keep everything naturally fluid on tablets and phones. */
@media (max-width: 1240px) {
  .ghv-competition-refined,
  .ghv-game-comments-refined {
    --ghv-game-inner-content-width: 100%;
  }
}


/* ==========================================================
   GameHubVerse User Achievements — Light Mode Visibility
   Stronger profile-card contrast without affecting dark mode.
   ========================================================== */

html[zontal-theme="light"] .ghvc-profile-summary > div {
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 82%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 13%,
    transparent
  ) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .045) !important;
}

html[zontal-theme="light"] .ghvc-profile-summary strong {
  color: var(--zon-common-text-color) !important;
}

html[zontal-theme="light"] .ghvc-profile-summary span {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 62%,
    var(--zon-muted-color)
  ) !important;
}

/* Achievement-score callout */
html[zontal-theme="light"] .ghvc-points-note {
  background: color-mix(
    in srgb,
    var(--zon-theme-color) 5%,
    var(--zon-search-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-theme-color) 22%,
    var(--zon-common-text-color)
  ) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
}

html[zontal-theme="light"] .ghvc-points-note-icon {
  color: #6641d8 !important;
  background: #ebe5ff !important;
  border: 1px solid #d7ccff !important;
}

html[zontal-theme="light"] .ghvc-points-note strong {
  color: var(--zon-common-text-color) !important;
}

html[zontal-theme="light"] .ghvc-points-note p {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 66%,
    var(--zon-muted-color)
  ) !important;
}

/* Section descriptions */
html[zontal-theme="light"] .ghvp-library-section-head p {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 61%,
    var(--zon-muted-color)
  ) !important;
}

/* Profile achievement cards */
html[zontal-theme="light"] .ghvc-profile-achievement {
  opacity: 1 !important;
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 82%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 12%,
    transparent
  ) !important;
  box-shadow: none !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement:hover {
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 72%,
    var(--zon-body-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-theme-color) 21%,
    var(--zon-common-text-color)
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement.is-unlocked {
  opacity: 1 !important;
  background: color-mix(
    in srgb,
    #22c55e 3.5%,
    var(--zon-search-bg-color)
  ) !important;
  border-color: color-mix(
    in srgb,
    #22c55e 32%,
    var(--zon-common-text-color)
  ) !important;
}

/* Strong, readable icon tiles */
html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon {
  color: #6f4bf4 !important;
  background: #eee9ff !important;
  border: 1px solid #d8ceff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement.is-unlocked .ghvc-achievement-icon {
  color: #a66700 !important;
  background: #fff1c4 !important;
  border-color: #eccd68 !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon svg path,
html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon svg rect,
html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon svg circle,
html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon svg line,
html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-icon svg polyline {
  stroke: currentColor !important;
}

/* Achievement typography */
html[zontal-theme="light"] .ghvc-profile-achievement-title strong {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 94%,
    var(--zon-muted-color)
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement-title span {
  color: color-mix(
    in srgb,
    var(--zon-theme-color) 74%,
    #164e63
  ) !important;
  font-weight: 850 !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement p {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 64%,
    var(--zon-muted-color)
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement small,
html[zontal-theme="light"] .ghvc-profile-achievement em {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 58%,
    var(--zon-muted-color)
  ) !important;
}

/* Progress tracks need enough contrast on pale cards. */
html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-progress {
  background: color-mix(
    in srgb,
    var(--zon-common-text-color) 10%,
    transparent
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-achievement .ghvc-achievement-progress span {
  opacity: 1 !important;
}

/* Leaderboard result rows */
html[zontal-theme="light"] .ghvc-profile-rankings {
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 13%,
    transparent
  ) !important;
  background: color-mix(
    in srgb,
    var(--zon-search-bg-color) 82%,
    var(--zon-body-bg-color)
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-rankings > a {
  background: transparent !important;
  border-bottom-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 10%,
    transparent
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-rankings > a:hover {
  background: color-mix(
    in srgb,
    var(--zon-theme-color) 4%,
    var(--zon-search-bg-color)
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-rankings strong,
html[zontal-theme="light"] .ghvc-profile-rankings em {
  color: var(--zon-common-text-color) !important;
}

html[zontal-theme="light"] .ghvc-profile-rankings small {
  color: color-mix(
    in srgb,
    var(--zon-common-text-color) 58%,
    var(--zon-muted-color)
  ) !important;
}

html[zontal-theme="light"] .ghvc-profile-rankings b {
  color: color-mix(
    in srgb,
    var(--zon-theme-color) 76%,
    #164e63
  ) !important;
}


/* ==========================================================
   GameHubVerse Professional UI Consistency V1 — Frontend
   Account-library accents and balanced game-page content rail.
   ========================================================== */

/* Replace generic dark/Bootstrap-blue account accents with GHV styling. */
.ghvp-library-tabs a.is-active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #16bdf3 0%, #3978ff 54%, #7657ff 100%) !important;
  box-shadow: 0 7px 18px rgba(53, 104, 255, .20) !important;
}

.ghvp-library-tabs a:not(.is-active):hover {
  color: var(--zon-common-text-color) !important;
  border-color: color-mix(in srgb, var(--zon-theme-color) 38%, transparent) !important;
  background: color-mix(in srgb, var(--zon-theme-color) 9%, transparent) !important;
}

.ghvp-library-card {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.ghvp-library-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--zon-theme-color) 30%, transparent) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12) !important;
}

.ghvp-library-play {
  background: linear-gradient(135deg, #16bdf3 0%, #3978ff 58%, #7657ff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 6px 16px rgba(49, 104, 255, .24) !important;
  backdrop-filter: none !important;
}

.ghvp-library-badge.is-cloud {
  color: #dff7ff !important;
  background: linear-gradient(135deg, rgba(8, 181, 229, .34), rgba(88, 76, 255, .34)) !important;
  border: 1px solid rgba(84, 190, 255, .20) !important;
}

.ghvp-library-section-head > a {
  color: color-mix(in srgb, var(--zon-theme-color) 72%, #22bff0) !important;
}

html[zontal-theme="light"] .ghvp-library-play {
  box-shadow: 0 7px 18px rgba(49, 104, 255, .20) !important;
}

html[zontal-theme="light"] .ghvp-library-badge.is-cloud {
  color: #2457a6 !important;
  background: linear-gradient(135deg, #dff7ff, #e7e4ff) !important;
  border-color: #c7dcff !important;
}

/*
 * The former 1180px rail looked abruptly cut on ultra-wide screens.
 * Keep it left-aligned, but allow enough width to feel intentional.
 */
.ghv-competition-refined,
.ghv-game-comments-refined {
  --ghv-game-inner-content-width: 1560px !important;
}

@media (max-width: 1660px) {
  .ghv-competition-refined,
  .ghv-game-comments-refined {
    --ghv-game-inner-content-width: 100% !important;
  }
}


/* ==========================================================
   GameHubVerse Competition / Comments Proportional Width V2
   Avoids an abruptly cut half-width rail on ultra-wide displays.
   ========================================================== */

.ghv-competition-refined,
.ghv-game-comments-refined {
  --ghv-game-inner-content-width: 1800px !important;
}

.ghv-competition-refined > .ghvc-game-competition-head,
.ghv-competition-refined > .ghvc-game-tabs,
.ghv-competition-refined > .ghvc-game-tab-panel,
.ghv-game-comments-refined .comment-form,
.ghv-game-comments-refined > hr,
.ghv-game-comments-refined .comment-card {
  width: min(88%, var(--ghv-game-inner-content-width)) !important;
  max-width: var(--ghv-game-inner-content-width) !important;
}

@media (max-width: 1700px) {
  .ghv-competition-refined > .ghvc-game-competition-head,
  .ghv-competition-refined > .ghvc-game-tabs,
  .ghv-competition-refined > .ghvc-game-tab-panel,
  .ghv-game-comments-refined .comment-form,
  .ghv-game-comments-refined > hr,
  .ghv-game-comments-refined .comment-card {
    width: 100% !important;
  }
}


/* ==========================================================
   GameHubVerse Continue Button — Clean Edge Hotfix
   Removes colored seams, outlines, borders and pseudo overlays.
   ========================================================== */

.ghvp-library-play,
.ghvp-library-play:hover,
.ghvp-library-play:focus,
.ghvp-library-play:focus-visible,
.ghvp-library-play:active {
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
  outline: 0 !important;
  text-decoration: none !important;
  background:
    linear-gradient(135deg, #18b8f2 0%, #3786ff 56%, #6758f5 100%) !important;
  background-clip: padding-box !important;
  box-shadow: 0 5px 13px rgba(31, 75, 160, .22) !important;
  filter: none !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.ghvp-library-play::before,
.ghvp-library-play::after {
  content: none !important;
  display: none !important;
}

.ghvp-library-play:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 16px rgba(31, 75, 160, .27) !important;
}

.ghvp-library-play:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(31, 75, 160, .20) !important;
}

html[zontal-theme="light"] .ghvp-library-play,
html[zontal-theme="light"] .ghvp-library-play:hover,
html[zontal-theme="light"] .ghvp-library-play:focus,
html[zontal-theme="light"] .ghvp-library-play:focus-visible,
html[zontal-theme="light"] .ghvp-library-play:active {
  border: 0 !important;
  outline: 0 !important;
}


/* ==========================================================
   GameHubVerse Mobile Competition → Comments Spacing
   Prevents the comments panel from touching/overlapping the
   leaderboard or achievements content above it.
   ========================================================== */

@media (max-width: 760px) {
  .ghv-competition-refined {
    margin-bottom: 22px !important;
  }

  .ghv-competition-refined + .ghv-game-comments-refined,
  .ghv-game-comments-refined {
    position: relative !important;
    clear: both !important;
    margin-top: 22px !important;
  }
}


/* ==========================================================
   GameHubVerse Game Library Tabs — Clean Edge Hotfix
   Removes the turquoise seam/edge from active tab pills.
   ========================================================== */

.ghvp-library-tabs a,
.ghvp-library-tabs a:hover,
.ghvp-library-tabs a:focus,
.ghvp-library-tabs a:focus-visible,
.ghvp-library-tabs a:active,
.ghvp-library-tabs a.is-active {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-right-color: transparent !important;
  outline: 0 !important;
  background-clip: padding-box !important;
  filter: none !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.ghvp-library-tabs a::before,
.ghvp-library-tabs a::after,
.ghvp-library-tabs a.is-active::before,
.ghvp-library-tabs a.is-active::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.ghvp-library-tabs a.is-active {
  border: 0 !important;
  background:
    linear-gradient(135deg, #18b8f2 0%, #3786ff 56%, #6758f5 100%) !important;
  box-shadow: 0 7px 18px rgba(53, 104, 255, .20) !important;
}

html[zontal-theme="light"] .ghvp-library-tabs a.is-active,
html[zontal-theme="dark"] .ghvp-library-tabs a.is-active {
  border: 0 !important;
  outline: 0 !important;
}


/* ==========================================================
   GameHubVerse Consistent Game-Page Section Spacing
   Removes the doubled Comments → Similar Games gap.
   ========================================================== */

/* Desktop/tablet: use one 24px gap between both panel pairs. */
.ghv-competition-refined {
  margin-bottom: 0 !important;
}

.ghv-competition-refined + .ghv-game-comments-refined {
  margin-top: 24px !important;
}

.ghv-game-comments-refined {
  margin-bottom: 0 !important;
}

.ghv-game-comments-refined + .ghv-similar-wrap {
  margin-top: 24px !important;
}

/* Mobile: preserve the slightly tighter 22px rhythm. */
@media (max-width: 760px) {
  .ghv-competition-refined {
    margin-bottom: 0 !important;
  }

  .ghv-competition-refined + .ghv-game-comments-refined {
    margin-top: 22px !important;
  }

  .ghv-game-comments-refined {
    margin-bottom: 0 !important;
  }

  .ghv-game-comments-refined + .ghv-similar-wrap {
    margin-top: 22px !important;
  }
}


/* ==========================================================
   GameHubVerse Smooth Game Library Buttons
   Removes jagged masks, edge seams and clipped gradients.
   ========================================================== */

/* Active Game Library tab */
.ghvp-library-tabs a.is-active,
.ghvp-library-tabs a.is-active:hover,
.ghvp-library-tabs a.is-active:focus,
.ghvp-library-tabs a.is-active:focus-visible,
.ghvp-library-tabs a.is-active:active {
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: auto !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: #2f80ed !important;
  background-image: none !important;
  background-clip: border-box !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  backface-visibility: visible !important;
}

.ghvp-library-tabs a.is-active::before,
.ghvp-library-tabs a.is-active::after {
  content: none !important;
  display: none !important;
}

/* Continue buttons on library cards */
.ghvp-library-play,
.ghvp-library-play:hover,
.ghvp-library-play:focus,
.ghvp-library-play:focus-visible,
.ghvp-library-play:active {
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: auto !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: #2f80ed !important;
  background-image: none !important;
  background-clip: border-box !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  backface-visibility: visible !important;
}

.ghvp-library-play::before,
.ghvp-library-play::after {
  content: none !important;
  display: none !important;
}

.ghvp-library-tabs a.is-active:hover,
.ghvp-library-play:hover {
  background: #3b8df5 !important;
  box-shadow: 0 6px 15px rgba(47, 128, 237, .28) !important;
}

.ghvp-library-tabs a.is-active:active,
.ghvp-library-play:active {
  background: #2876dd !important;
  box-shadow: 0 3px 9px rgba(47, 128, 237, .20) !important;
}

html[zontal-theme="light"] .ghvp-library-tabs a.is-active,
html[zontal-theme="dark"] .ghvp-library-tabs a.is-active,
html[zontal-theme="light"] .ghvp-library-play,
html[zontal-theme="dark"] .ghvp-library-play {
  border: 0 !important;
  outline: 0 !important;
  background-image: none !important;
}


/* ==========================================================
   GameHubVerse Library Tabs, Badge Alignment & Sidebar Rhythm
   ========================================================== */

/* Clean, continuous Game Library tab outlines — no broken edge effects. */
.ghvp-library-tabs a,
.ghvp-library-tabs a:hover,
.ghvp-library-tabs a:focus,
.ghvp-library-tabs a:focus-visible,
.ghvp-library-tabs a:active {
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-clip: border-box !important;
  outline: 0 !important;
  border-radius: 999px !important;
}

.ghvp-library-tabs a::before,
.ghvp-library-tabs a::after {
  content: none !important;
  display: none !important;
}

.ghvp-library-tabs a:not(.is-active) {
  border: 1px solid color-mix(
    in srgb,
    var(--zon-common-text-color) 17%,
    transparent
  ) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ghvp-library-tabs a:not(.is-active):hover,
.ghvp-library-tabs a:not(.is-active):focus-visible {
  color: var(--zon-common-text-color) !important;
  border-color: color-mix(
    in srgb,
    var(--zon-theme-color) 52%,
    var(--zon-common-text-color)
  ) !important;
  background: color-mix(
    in srgb,
    var(--zon-theme-color) 8%,
    transparent
  ) !important;
  box-shadow: none !important;
}

.ghvp-library-tabs a.is-active,
.ghvp-library-tabs a.is-active:hover,
.ghvp-library-tabs a.is-active:focus,
.ghvp-library-tabs a.is-active:focus-visible,
.ghvp-library-tabs a.is-active:active {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: #2f80ed !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
}

/*
 * Align the visible "Cloud saved" text with the game title below.
 * The pill itself moves left by its own horizontal padding.
 */
.ghvp-library-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.ghvp-library-badges {
  width: 100% !important;
  justify-content: flex-start !important;
  margin-left: -7px !important;
  padding-left: 0 !important;
}

.ghvp-library-badge,
.ghvp-library-badge.is-cloud {
  margin-left: 0 !important;
  align-self: flex-start !important;
}

/* Tighter, consistent spacing for the first four primary sidebar links. */
.zontal-sidebar-body > .list:first-of-type {
  gap: 2px !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) {
  margin: 0 !important;
  padding: 0 !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
  min-height: 40px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  margin: 0 !important;
}

.zontal-sidebar-body > .list:first-of-type + .sb-divider {
  margin-top: 11px !important;
  margin-bottom: 11px !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type {
    gap: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    min-height: 40px !important;
    padding: 7px 10px !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type + .sb-divider {
    margin-top: 11px !important;
    margin-bottom: 11px !important;
  }
}


/* ==========================================================
   GameHubVerse Top Sidebar Compact Spacing CORRECTION
   Tightens only All Games, Newest Games, Most Popular,
   and Autoplay so they match the category-list rhythm.
   ========================================================== */

.zontal-sidebar-body > .list:first-of-type {
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) {
  margin: 0 !important;
  padding: 0 !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  line-height: 1.1 !important;
}

.zontal-sidebar-body > .list:first-of-type + .sb-divider {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type {
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 3px 10px !important;
  }

  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type + .sb-divider {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
}


/* ==========================================================
   GameHubVerse Game Library Tabs — Full Hover Fill
   Removes outlined hover pills completely.
   ========================================================== */

.ghvp-library-tabs a:not(.is-active):hover,
.ghvp-library-tabs a:not(.is-active):focus-visible {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #2f80ed !important;
  background-image: none !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .22) !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.ghvp-library-tabs a:not(.is-active):hover::before,
.ghvp-library-tabs a:not(.is-active):hover::after,
.ghvp-library-tabs a:not(.is-active):focus-visible::before,
.ghvp-library-tabs a:not(.is-active):focus-visible::after {
  content: none !important;
  display: none !important;
}

.ghvp-library-tabs a.is-active,
.ghvp-library-tabs a.is-active:hover,
.ghvp-library-tabs a.is-active:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #2f80ed !important;
  background-image: none !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
}


/* ==========================================================
   GameHubVerse Cloud Badge + Top Sidebar Icon Gap Correction
   ========================================================== */

/*
 * Align the LEFT BORDER of the Cloud saved pill with the game
 * title and score below. Do not offset the pill by its padding.
 */
.ghvp-library-badges {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.ghvp-library-badge,
.ghvp-library-badge.is-cloud {
  margin-left: 0 !important;
}

/*
 * Match the tighter category icon-to-title rhythm for only the
 * first four main sidebar links.
 */
.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a .icon-label {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }
}


/* ==========================================================
   GameHubVerse Game Library Tabs — No Layout Shift
   Keeps every tab's geometry identical in normal, hover,
   focus and active states.
   ========================================================== */

.ghvp-library-tabs a,
.ghvp-library-tabs a:hover,
.ghvp-library-tabs a:focus,
.ghvp-library-tabs a:focus-visible,
.ghvp-library-tabs a:active,
.ghvp-library-tabs a.is-active,
.ghvp-library-tabs a.is-active:hover,
.ghvp-library-tabs a.is-active:focus-visible {
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  margin: 0 !important;
  transform: none !important;
  scale: none !important;
  translate: none !important;
  outline: 0 !important;
  animation: none !important;
  transition:
    background-color .14s ease,
    color .14s ease,
    box-shadow .14s ease !important;
}

.ghvp-library-tabs a:not(.is-active) {
  border-color: color-mix(
    in srgb,
    var(--zon-common-text-color) 17%,
    transparent
  ) !important;
  background: transparent !important;
  color: var(--zon-muted-color) !important;
  box-shadow: none !important;
}

.ghvp-library-tabs a:not(.is-active):hover,
.ghvp-library-tabs a:not(.is-active):focus-visible {
  border-color: transparent !important;
  background: #2f80ed !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .22) !important;
}

.ghvp-library-tabs a.is-active,
.ghvp-library-tabs a.is-active:hover,
.ghvp-library-tabs a.is-active:focus-visible {
  border-color: transparent !important;
  background: #2f80ed !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
}

.ghvp-library-tabs a::before,
.ghvp-library-tabs a::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   GameHubVerse Top Sidebar Text Alignment
   Matches the first four nav titles with category-title alignment.
   ========================================================== */

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 13px !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a .icon-label {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 13px !important;
  }
}


/* ==========================================================
   GameHubVerse Top Sidebar Optical Icon Gap
   Matches the visible icon-to-title spacing of category rows.
   ========================================================== */

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 10px !important;
}

.zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a .icon-label {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
}


/* ==========================================================
   GameHubVerse Primary Sidebar Alignment — +4px Right
   Aligns All Games, Newest Games, Most Popular and Autoplay
   one pixel left from the previous +5px position while keeping
   the hover area unchanged.
   ========================================================== */

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
  padding-left: 14px !important;
  padding-right: 6px !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    padding-left: 14px !important;
    padding-right: 6px !important;
  }
}


/* ==========================================================
   GameHubVerse Game Library Tabs — Final Geometry Lock
   Uses a shadow-based outline instead of a changing real border,
   so hovering, focusing or pressing a tab cannot resize the pill
   or push the neighboring tabs.
   ========================================================== */

.ghvp-library-tabs > a,
.ghvp-library-tabs > a:hover,
.ghvp-library-tabs > a:focus,
.ghvp-library-tabs > a:focus-visible,
.ghvp-library-tabs > a:active,
.ghvp-library-tabs > a.is-active,
.ghvp-library-tabs > a.is-active:hover,
.ghvp-library-tabs > a.is-active:focus,
.ghvp-library-tabs > a.is-active:focus-visible,
.ghvp-library-tabs > a.is-active:active {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  transition:
    background-color .14s ease,
    color .14s ease,
    box-shadow .14s ease !important;
}

.ghvp-library-tabs > a:not(.is-active) {
  background: transparent !important;
  background-image: none !important;
  color: var(--zon-muted-color) !important;
  box-shadow: inset 0 0 0 1px color-mix(
    in srgb,
    var(--zon-common-text-color) 17%,
    transparent
  ) !important;
}

.ghvp-library-tabs > a:not(.is-active):hover,
.ghvp-library-tabs > a:not(.is-active):focus-visible {
  background: #2f80ed !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .22) !important;
}

.ghvp-library-tabs > a.is-active,
.ghvp-library-tabs > a.is-active:hover,
.ghvp-library-tabs > a.is-active:focus,
.ghvp-library-tabs > a.is-active:focus-visible,
.ghvp-library-tabs > a.is-active:active {
  background: #2f80ed !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
}

.ghvp-library-tabs > a::before,
.ghvp-library-tabs > a::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 640px) {
  .ghvp-library-tabs > a,
  .ghvp-library-tabs > a:hover,
  .ghvp-library-tabs > a:focus,
  .ghvp-library-tabs > a:focus-visible,
  .ghvp-library-tabs > a:active,
  .ghvp-library-tabs > a.is-active,
  .ghvp-library-tabs > a.is-active:hover,
  .ghvp-library-tabs > a.is-active:focus-visible {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 560px) {
  .ghvp-library-tabs > a,
  .ghvp-library-tabs > a:hover,
  .ghvp-library-tabs > a:focus,
  .ghvp-library-tabs > a:focus-visible,
  .ghvp-library-tabs > a:active,
  .ghvp-library-tabs > a.is-active,
  .ghvp-library-tabs > a.is-active:hover,
  .ghvp-library-tabs > a.is-active:focus-visible {
    font-size: 10px !important;
  }
}

/* ==========================================================
   GameHubVerse Game Library Tabs — Absolute Hover Lock
   Fixed tracks and no expanding hover shadow. The complete row
   stays pixel-stable while any tab is hovered, focused or pressed.
   ========================================================== */

.ghvp-library-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}

.ghvp-library-tabs > a,
.ghvp-library-tabs > a:hover,
.ghvp-library-tabs > a:focus,
.ghvp-library-tabs > a:focus-visible,
.ghvp-library-tabs > a:active,
.ghvp-library-tabs > a.is-active,
.ghvp-library-tabs > a.is-active:hover,
.ghvp-library-tabs > a.is-active:focus,
.ghvp-library-tabs > a.is-active:focus-visible,
.ghvp-library-tabs > a.is-active:active {
  box-sizing: border-box !important;
  flex: 0 0 var(--ghvp-tab-width) !important;
  width: var(--ghvp-tab-width) !important;
  min-width: var(--ghvp-tab-width) !important;
  max-width: var(--ghvp-tab-width) !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  position: relative !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  translate: none !important;
  transform: none !important;
  scale: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  line-height: 36px !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  animation: none !important;
  transition: background-color .12s ease, color .12s ease !important;
  contain: layout paint !important;
}

.ghvp-library-tabs > a:nth-child(1) { --ghvp-tab-width: 82px; }
.ghvp-library-tabs > a:nth-child(2) { --ghvp-tab-width: 130px; }
.ghvp-library-tabs > a:nth-child(3) { --ghvp-tab-width: 122px; }
.ghvp-library-tabs > a:nth-child(4) { --ghvp-tab-width: 93px; }
.ghvp-library-tabs > a:nth-child(5) { --ghvp-tab-width: 100px; }
.ghvp-library-tabs > a:nth-child(6) { --ghvp-tab-width: 112px; }

.ghvp-library-tabs > a:not(.is-active),
.ghvp-library-tabs > a:not(.is-active):focus,
.ghvp-library-tabs > a:not(.is-active):active {
  color: var(--zon-muted-color) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px color-mix(
    in srgb,
    var(--zon-common-text-color) 17%,
    transparent
  ) !important;
}

.ghvp-library-tabs > a:not(.is-active):hover,
.ghvp-library-tabs > a:not(.is-active):focus-visible {
  color: #ffffff !important;
  background: #2f80ed !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px transparent !important;
}

.ghvp-library-tabs > a.is-active,
.ghvp-library-tabs > a.is-active:hover,
.ghvp-library-tabs > a.is-active:focus,
.ghvp-library-tabs > a.is-active:focus-visible,
.ghvp-library-tabs > a.is-active:active {
  color: #ffffff !important;
  background: #2f80ed !important;
  background-image: none !important;
  box-shadow: 0 5px 13px rgba(47, 128, 237, .24) !important;
}

.ghvp-library-tabs > a::before,
.ghvp-library-tabs > a::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 640px) {
  .ghvp-library-tabs {
    flex-wrap: nowrap !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
  }

  .ghvp-library-tabs > a,
  .ghvp-library-tabs > a:hover,
  .ghvp-library-tabs > a:focus,
  .ghvp-library-tabs > a:focus-visible,
  .ghvp-library-tabs > a:active,
  .ghvp-library-tabs > a.is-active,
  .ghvp-library-tabs > a.is-active:hover,
  .ghvp-library-tabs > a.is-active:focus-visible {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 10.5px !important;
    line-height: 34px !important;
  }

  .ghvp-library-tabs > a:nth-child(1) { --ghvp-tab-width: 72px; }
  .ghvp-library-tabs > a:nth-child(2) { --ghvp-tab-width: 116px; }
  .ghvp-library-tabs > a:nth-child(3) { --ghvp-tab-width: 108px; }
  .ghvp-library-tabs > a:nth-child(4) { --ghvp-tab-width: 84px; }
  .ghvp-library-tabs > a:nth-child(5) { --ghvp-tab-width: 91px; }
  .ghvp-library-tabs > a:nth-child(6) { --ghvp-tab-width: 104px; }
}


/* ==========================================================
   GameHubVerse Mobile Primary Sidebar Alignment
   Makes All Games, Newest Games, Most Popular and Autoplay use
   the same icon column, gap and horizontal padding as Categories.
   Desktop alignment remains unchanged.
   ========================================================== */

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a > span:first-child {
    display: inline-flex !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(-n+4) > a > span:first-child svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
}

.ghv-player-meta-card .game-meta > h1 {
  margin: 0 0 9px !important;
}

.ghv-player-meta-card .game-meta > .flex.gap-4 {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}

.ghv-player-meta-card .game-meta > p {
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  .ghv-player-meta-card .game-meta > h1 {
    margin-bottom: 7px !important;
  }

  .ghv-player-meta-card .game-meta > .flex.gap-4 {
    margin-bottom: 12px !important;
  }
}


/* GameHubVerse account settings center */
.ghv-settings-heading {
  margin-bottom: 18px;
}

.ghv-settings-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  align-items: start;
}

.ghv-settings-tabs {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 16%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--zon-gmeta-bg-color) 92%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

.ghv-settings-tabs button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--zon-muted-color);
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.ghv-settings-tabs button:hover,
.ghv-settings-tabs button:focus-visible {
  border-color: color-mix(in srgb, var(--ghv-brand-cyan) 18%, transparent);
  background: color-mix(in srgb, var(--ghv-brand-blue) 8%, transparent);
  color: var(--zon-common-text-color);
  outline: none;
}

.ghv-settings-tabs button.is-active {
  border-color: color-mix(in srgb, var(--ghv-brand-cyan) 28%, transparent);
  background: linear-gradient(135deg, rgba(23, 201, 255, .13), rgba(22, 134, 255, .11) 55%, rgba(99, 91, 255, .12));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ghv-brand-cyan);
}

.ghv-settings-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--zon-muted-color) 10%, transparent);
  color: var(--ghv-brand-cyan);
}

.ghv-settings-tabs button.is-active .ghv-settings-tab-icon {
  background: linear-gradient(135deg, rgba(23, 201, 255, .20), rgba(99, 91, 255, .20));
  color: #fff;
}

.ghv-settings-tab-icon svg {
  width: 19px;
  height: 19px;
}

.ghv-settings-tabs button > span:last-child {
  min-width: 0;
}

.ghv-settings-tabs strong,
.ghv-settings-tabs small {
  display: block;
}

.ghv-settings-tabs strong {
  color: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.ghv-settings-tabs small {
  margin-top: 2px;
  color: var(--zon-muted-color);
  font-size: 10px;
  line-height: 14px;
  font-weight: 550;
}

.ghv-settings-content {
  min-width: 0;
}

.ghv-settings-view {
  width: 100%;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 16%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--zon-gmeta-bg-color) 94%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.ghv-settings-view[hidden] {
  display: none !important;
}

.ghv-settings-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
}

.ghv-settings-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--ghv-brand-cyan);
  font-size: 10px;
  line-height: 14px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ghv-settings-view-head h2 {
  margin: 0;
  color: var(--zon-common-text-color);
  font-size: 22px;
  line-height: 28px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.ghv-settings-view-head p {
  margin: 5px 0 0;
  color: var(--zon-muted-color);
  font-size: 12px;
  line-height: 19px;
}

.ghv-settings-form {
  width: 100% !important;
  max-width: none !important;
}

.ghv-settings-profile-grid {
  display: grid;
  grid-template-columns: minmax(210px, .62fr) minmax(300px, 1.38fr);
  gap: 20px;
  align-items: start;
}

.ghv-settings-profile-fields {
  display: grid;
  gap: 14px;
}

.ghv-settings-profile-fields .ghv-settings-field,
.ghv-settings-profile-grid .ghv-settings-field {
  margin-bottom: 0 !important;
}

.ghv-settings-profile-grid .ghv-settings-avatar-field {
  padding: 17px;
  border-color: color-mix(in srgb, var(--zon-muted-color) 13%, transparent);
  background: color-mix(in srgb, var(--zon-body-bg-color) 42%, transparent);
}

.ghv-settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.ghv-settings-avatar-row .ghv-settings-avatar {
  flex: 0 0 auto;
  margin: 0 !important;
}

.ghv-settings-avatar-row strong {
  display: block;
  color: var(--zon-common-text-color);
  font-size: 12px;
  line-height: 17px;
  font-weight: 800;
}

.ghv-settings-avatar-row small {
  margin-top: 3px;
}

.ghv-settings-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--zon-muted-color) 13%, transparent);
}

.ghv-settings-shell .ghv-settings-submit,
.ghv-settings-primary-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 190px;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #17c9ff 0%, #1686ff 54%, #635bff 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 28px rgba(22, 134, 255, .22) !important;
  cursor: pointer;
  transition: filter .16s ease, box-shadow .16s ease;
}

.ghv-settings-shell .ghv-settings-submit:hover,
.ghv-settings-primary-action:hover {
  transform: none !important;
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(22, 134, 255, .28) !important;
}

.ghv-settings-shell .ghv-settings-submit:focus-visible,
.ghv-settings-primary-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(23, 201, 255, .14), 0 14px 32px rgba(22, 134, 255, .28) !important;
}

.ghv-settings-option-list {
  display: grid;
  gap: 10px;
}

.ghv-settings-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 78px;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--zon-body-bg-color) 38%, transparent);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.ghv-settings-option:hover,
.ghv-settings-option:focus-within {
  border-color: color-mix(in srgb, var(--ghv-brand-cyan) 26%, transparent);
  background: color-mix(in srgb, var(--ghv-brand-blue) 6%, var(--zon-body-bg-color));
}

.ghv-settings-option.is-required {
  cursor: default;
}

.ghv-settings-option-copy {
  min-width: 0;
}

.ghv-settings-option-copy strong,
.ghv-settings-option-copy small {
  display: block;
}

.ghv-settings-option-copy strong {
  color: var(--zon-common-text-color);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.ghv-settings-option-copy small {
  margin-top: 4px;
  color: var(--zon-muted-color);
  font-size: 11px;
  line-height: 17px;
  font-weight: 500;
}

.ghv-settings-option input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ghv-settings-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  min-width: 48px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--zon-muted-color) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zon-muted-color) 12%, transparent);
  transition: background .17s ease, box-shadow .17s ease;
}

.ghv-settings-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f7fbff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  transition: transform .17s ease;
}

.ghv-settings-option input:checked + .ghv-settings-switch,
.ghv-settings-switch.is-on {
  background: linear-gradient(135deg, #17c9ff, #1686ff 58%, #635bff);
  box-shadow: 0 8px 18px rgba(22, 134, 255, .20);
}

.ghv-settings-option input:checked + .ghv-settings-switch::after,
.ghv-settings-switch.is-on::after {
  transform: translateX(20px);
}

.ghv-settings-option input:focus-visible + .ghv-settings-switch {
  box-shadow: 0 0 0 4px rgba(23, 201, 255, .15);
}

.ghv-settings-note {
  margin: 13px 2px 0;
  color: var(--zon-muted-color);
  font-size: 10px;
  line-height: 16px;
}

.ghv-settings-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ghv-settings-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--zon-body-bg-color) 36%, transparent);
  color: var(--zon-common-text-color);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.ghv-settings-link-card:hover,
.ghv-settings-link-card:focus-visible {
  border-color: color-mix(in srgb, var(--ghv-brand-cyan) 28%, transparent);
  background: color-mix(in srgb, var(--ghv-brand-blue) 7%, var(--zon-body-bg-color));
  outline: none;
}

.ghv-settings-link-card strong,
.ghv-settings-link-card small {
  display: block;
}

.ghv-settings-link-card strong {
  font-size: 12px;
  line-height: 17px;
  font-weight: 800;
}

.ghv-settings-link-card small {
  margin-top: 3px;
  color: var(--zon-muted-color);
  font-size: 10px;
  line-height: 15px;
}

.ghv-settings-link-card b {
  color: var(--ghv-brand-cyan);
  font-size: 18px;
  font-weight: 700;
}

.ghv-settings-security-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.ghv-settings-security-summary > div {
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--zon-body-bg-color) 38%, transparent);
}

.ghv-settings-security-summary span,
.ghv-settings-security-summary strong,
.ghv-settings-security-summary small {
  display: block;
}

.ghv-settings-security-summary span {
  color: var(--zon-muted-color);
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ghv-settings-security-summary strong {
  margin-top: 6px;
  color: var(--zon-common-text-color);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ghv-settings-security-summary small {
  margin-top: 4px;
  color: var(--zon-muted-color);
  font-size: 10px;
  line-height: 15px;
}

.ghv-settings-security-list {
  display: grid;
  gap: 10px;
}

.ghv-settings-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 78px;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--zon-muted-color) 14%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--zon-body-bg-color) 38%, transparent);
}

.ghv-settings-security-row > span {
  min-width: 0;
}

.ghv-settings-security-row strong,
.ghv-settings-security-row small {
  display: block;
}

.ghv-settings-security-row strong {
  color: var(--zon-common-text-color);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.ghv-settings-security-row small {
  margin-top: 4px;
  color: var(--zon-muted-color);
  font-size: 11px;
  line-height: 17px;
}

.ghv-settings-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ghv-brand-cyan) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ghv-brand-blue) 8%, transparent);
  color: var(--zon-common-text-color);
  font-size: 11px;
  line-height: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.ghv-settings-secondary-action:hover,
.ghv-settings-secondary-action:focus-visible {
  border-color: color-mix(in srgb, var(--ghv-brand-cyan) 50%, transparent);
  background: color-mix(in srgb, var(--ghv-brand-blue) 14%, transparent);
  outline: none;
}

.ghv-settings-danger-zone {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 92, 112, .23);
  border-radius: 17px;
  background: rgba(120, 18, 34, .08);
}

.ghv-settings-danger-head > span {
  display: block;
  margin-bottom: 4px;
  color: #ff8091;
  font-size: 10px;
  line-height: 14px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ghv-settings-danger-head h3 {
  margin: 0;
  color: var(--zon-common-text-color);
  font-size: 16px;
  line-height: 22px;
  font-weight: 850;
}

.ghv-settings-danger-head p {
  margin: 6px 0 0;
  color: var(--zon-muted-color);
  font-size: 11px;
  line-height: 18px;
}

.ghv-settings-delete-form {
  margin-top: 16px;
}

.ghv-settings-delete-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--zon-common-text-color);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}

.ghv-settings-delete-form > div {
  display: flex;
  gap: 9px;
}

.ghv-settings-delete-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 92, 112, .24);
  border-radius: 12px;
  background: color-mix(in srgb, var(--zon-body-bg-color) 68%, transparent);
  color: var(--zon-common-text-color);
  font-size: 12px;
  outline: none;
}

.ghv-settings-delete-form input:focus {
  border-color: rgba(255, 92, 112, .55);
  box-shadow: 0 0 0 4px rgba(255, 92, 112, .10);
}

.ghv-settings-danger-action {
  min-width: 132px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 92, 112, .40);
  border-radius: 12px;
  background: rgba(220, 38, 60, .16);
  color: #ffb5bf;
  font-size: 11px;
  line-height: 16px;
  font-weight: 850;
  cursor: pointer;
}

.ghv-settings-danger-action:hover:not(:disabled),
.ghv-settings-danger-action:focus-visible:not(:disabled) {
  background: rgba(220, 38, 60, .26);
  border-color: rgba(255, 92, 112, .62);
  outline: none;
}

.ghv-settings-danger-action:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.ghv-settings-admin-protection {
  margin-top: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 92, 112, .09);
  color: #ffacb7;
  font-size: 11px;
  line-height: 17px;
  font-weight: 700;
}

.ghv-auth-account-notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 201, 255, .25);
  border-radius: 13px;
  background: rgba(22, 134, 255, .08);
  color: var(--zon-common-text-color);
  font-size: 12px;
  line-height: 18px;
  font-weight: 650;
}

html[zontal-theme="light"] .ghv-settings-tabs,
html[zontal-theme="light"] .ghv-settings-view {
  border-color: rgba(25, 45, 78, .11);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 18px 45px rgba(27, 45, 76, .08);
}

html[zontal-theme="light"] .ghv-settings-option,
html[zontal-theme="light"] .ghv-settings-link-card,
html[zontal-theme="light"] .ghv-settings-security-summary > div,
html[zontal-theme="light"] .ghv-settings-security-row,
html[zontal-theme="light"] .ghv-settings-profile-grid .ghv-settings-avatar-field {
  border-color: rgba(25, 45, 78, .10);
  background: rgba(245, 248, 253, .88);
}

html[zontal-theme="light"] .ghv-settings-delete-form input {
  background: #fff;
}

html[zontal-theme="light"] .ghv-settings-danger-zone {
  background: rgba(220, 38, 60, .035);
}

@media (max-width: 960px) {
  .ghv-settings-shell {
    grid-template-columns: 1fr;
  }

  .ghv-settings-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ghv-settings-tabs button {
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    min-height: 76px;
    padding: 9px 7px;
    text-align: center;
  }

  .ghv-settings-tabs button.is-active {
    box-shadow: inset 0 -3px 0 var(--ghv-brand-cyan);
  }

  .ghv-settings-tabs button small {
    display: none;
  }
}

@media (max-width: 720px) {
  .ghv-settings-view {
    padding: 18px;
    border-radius: 17px;
  }

  .ghv-settings-profile-grid,
  .ghv-settings-security-summary,
  .ghv-settings-link-grid {
    grid-template-columns: 1fr;
  }

  .ghv-settings-profile-grid {
    gap: 14px;
  }

  .ghv-settings-view-head {
    margin-bottom: 18px;
    padding-bottom: 15px;
  }

  .ghv-settings-security-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .ghv-settings-security-row form,
  .ghv-settings-secondary-action {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .ghv-settings-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ghv-settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
  }

  .ghv-settings-tabs button {
    min-height: 68px;
    border-radius: 11px;
  }

  .ghv-settings-tab-icon {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }

  .ghv-settings-view {
    padding: 15px;
  }

  .ghv-settings-view-head h2 {
    font-size: 19px;
    line-height: 25px;
  }

  .ghv-settings-option {
    gap: 13px;
    min-height: 74px;
    padding: 13px;
  }

  .ghv-settings-option-copy small {
    font-size: 10px;
    line-height: 15px;
  }

  .ghv-settings-switch {
    width: 44px;
    min-width: 44px;
    height: 26px;
  }

  .ghv-settings-switch::after {
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
  }

  .ghv-settings-option input:checked + .ghv-settings-switch::after,
  .ghv-settings-switch.is-on::after {
    transform: translateX(18px);
  }

  .ghv-settings-form-actions {
    justify-content: stretch;
  }

  .ghv-settings-shell .ghv-settings-submit,
  .ghv-settings-primary-action {
    width: 100% !important;
  }

  .ghv-settings-delete-form > div {
    flex-direction: column;
  }

  .ghv-settings-danger-action {
    width: 100%;
  }
}


/* Keep the redesigned profile action compact despite legacy ID rules */
#update-info .ghv-settings-form-actions .ghv-settings-submit {
  width: auto !important;
  min-width: 190px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  transform: none !important;
}
#update-info .ghv-settings-form-actions .ghv-settings-submit:hover,
#update-info .ghv-settings-form-actions .ghv-settings-submit:focus,
#update-info .ghv-settings-form-actions .ghv-settings-submit:focus-visible {
  transform: none !important;
}
@media (max-width: 520px) {
  #update-info .ghv-settings-form-actions .ghv-settings-submit {
    width: 100% !important;
  }
}


/* GHV GLOBAL XP + PUBLIC PROFILES v1 */
.ghv-global-board,
.ghv-public-profile {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 26px 0 48px;
    color: var(--zon-common-text-color);
}
.ghv-global-board-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 20px;
    background:
        radial-gradient(circle at 82% 20%, rgba(103,92,255,.20), transparent 34%),
        radial-gradient(circle at 12% 0%, rgba(24,183,242,.12), transparent 30%),
        var(--zon-secondary-bg-color);
}
.ghv-global-board-kicker,
.ghv-public-profile-label {
    display: block;
    margin-bottom: 8px;
    color: #38a9ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ghv-global-board-hero h1,
.ghv-public-profile-identity h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
}
.ghv-global-board-hero p {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--zon-muted-color);
    line-height: 1.65;
}
.ghv-global-me-card {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 18px 20px;
    border: 1px solid rgba(56,169,255,.26);
    border-radius: 16px;
    background: rgba(46,134,255,.09);
    text-decoration: none;
    color: var(--zon-common-text-color);
}
.ghv-global-me-card span,
.ghv-global-me-card small { color: var(--zon-muted-color); }
.ghv-global-me-card strong { margin: 4px 0; font-size: 30px; }
.ghv-global-me-card.is-login strong { font-size: 22px; }
.ghv-global-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 18px;
}
.ghv-global-periods {
    display: inline-flex;
    gap: 8px;
    padding: 5px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 999px;
    background: var(--zon-secondary-bg-color);
}
.ghv-global-periods a {
    min-width: 104px;
    padding: 10px 18px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    color: var(--zon-muted-color);
    font-weight: 800;
}
.ghv-global-periods a.is-active {
    color: #fff;
    background: linear-gradient(110deg,#18b7f2,#2e86ff 52%,#675cff);
    box-shadow: 0 8px 22px rgba(46,134,255,.22);
}
.ghv-global-reset-note { color: var(--zon-muted-color); font-size: 13px; }
.ghv-global-podium {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: end;
    gap: 16px;
    margin-bottom: 18px;
}
.ghv-global-podium-card {
    position: relative;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 24px 16px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 18px;
    background: var(--zon-secondary-bg-color);
    color: var(--zon-common-text-color);
    text-decoration: none;
    overflow: hidden;
}
.ghv-global-podium-card.is-place-1 {
    min-height: 255px;
    border-color: rgba(255,199,70,.46);
    background: linear-gradient(180deg,rgba(255,199,70,.13),transparent 48%),var(--zon-secondary-bg-color);
}
.ghv-global-podium-card.is-place-2 { border-color: rgba(183,208,229,.34); }
.ghv-global-podium-card.is-place-3 { border-color: rgba(207,132,86,.38); }
.ghv-global-crown {
    position: absolute;
    top: 14px;
    left: 14px;
    min-width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.07);
    font-weight: 900;
}
.ghv-global-podium-card img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.18);
}
.ghv-global-podium-card strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.ghv-global-podium-card b { font-size: 20px; }
.ghv-global-tier {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(46,134,255,.14);
    color: #69baff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ghv-global-tier.is-legend,
.ghv-public-profile-rank.is-legend { color: #ffd36c; }
.ghv-global-tier.is-elite,
.ghv-public-profile-rank.is-elite { color: #d18cff; }
.ghv-global-tier.is-champion,
.ghv-public-profile-rank.is-champion { color: #65e5d8; }
.ghv-global-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 18px;
    overflow: hidden;
    background: var(--zon-secondary-bg-color);
}
.ghv-global-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: 64px 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--zon-comment-input-b-color);
    text-decoration: none;
    color: var(--zon-common-text-color);
}
.ghv-global-row:last-child { border-bottom: 0; }
.ghv-global-row:hover,
.ghv-global-row.is-me { background: rgba(46,134,255,.08); }
.ghv-global-row.is-me { box-shadow: inset 3px 0 #2e86ff; }
.ghv-global-position { color: var(--zon-muted-color); }
.ghv-global-row img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.ghv-global-player { min-width: 0; display: flex; flex-direction: column; }
.ghv-global-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghv-global-player strong em {
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(46,134,255,.14);
    color: #58b2ff;
    font-size: 10px;
    font-style: normal;
}
.ghv-global-player small { margin-top: 3px; color: var(--zon-muted-color); }
.ghv-global-xp { font-weight: 900; }
.ghv-global-empty,
.ghv-public-profile-private {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 36px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 20px;
    background: var(--zon-secondary-bg-color);
    text-align: center;
    color: var(--zon-common-text-color);
}
.ghv-global-empty p,
.ghv-public-profile-private p { margin: 0; color: var(--zon-muted-color); }
.ghv-public-profile-private a { margin-top: 10px; color: #38a9ff; font-weight: 800; }
.ghv-public-profile-lock { font-size: 34px; }
.ghv-global-how {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-top: 22px;
}
.ghv-global-how > div {
    padding: 18px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 15px;
    background: var(--zon-secondary-bg-color);
}
.ghv-global-how > div > span { display: block; margin-bottom: 10px; color: #38a9ff; font-size: 20px; }
.ghv-global-how strong { display: block; margin-bottom: 6px; }
.ghv-global-how p { margin: 0; color: var(--zon-muted-color); font-size: 13px; line-height: 1.55; }
.ghv-global-fairness { grid-column: 1/-1; padding: 0 4px; text-align: center; }

/* Public player profile */
.ghv-public-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 190px;
    padding: 30px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 22px;
    background:
        radial-gradient(circle at 78% 12%,rgba(103,92,255,.20),transparent 32%),
        radial-gradient(circle at 12% 100%,rgba(24,183,242,.13),transparent 34%),
        var(--zon-secondary-bg-color);
}
.ghv-public-profile-avatar img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 24px;
    border: 3px solid rgba(255,255,255,.16);
    box-shadow: 0 15px 36px rgba(0,0,0,.25);
}
.ghv-public-profile-identity p { margin: 8px 0 0; color: var(--zon-muted-color); }
.ghv-public-profile-rank {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.ghv-public-profile-rank span { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #69baff; }
.ghv-public-profile-rank strong { font-size: 26px; }
.ghv-public-profile-rank small { color: var(--zon-muted-color); }
.ghv-public-profile-edit {
    position: absolute;
    right: 28px;
    bottom: 20px;
    color: #38a9ff;
    font-weight: 800;
    font-size: 12px;
}
.ghv-public-rank-progress {
    margin: 16px 0 22px;
    padding: 17px 20px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 15px;
    background: var(--zon-secondary-bg-color);
}
.ghv-public-rank-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}
.ghv-public-rank-progress span { color: var(--zon-muted-color); font-size: 12px; }
.ghv-public-rank-bar { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(128,136,160,.16); }
.ghv-public-rank-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#18b7f2,#2e86ff,#675cff); }
.ghv-public-profile-layout {
    display: grid;
    grid-template-columns: 270px minmax(0,1fr);
    gap: 18px;
    align-items: start;
}
.ghv-public-profile-side,
.ghv-public-profile-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ghv-public-profile-panel {
    padding: 22px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 18px;
    background: var(--zon-secondary-bg-color);
}
.ghv-public-profile-panel h2 { margin: 0; font-size: 18px; }
.ghv-public-stat {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--zon-comment-input-b-color);
}
.ghv-public-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.ghv-public-stat span { color: var(--zon-muted-color); }
.ghv-public-profile-board-link {
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(110deg,#18b7f2,#2e86ff 55%,#675cff);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
}
.ghv-public-section-head { margin-bottom: 16px; }
.ghv-public-section-head p { margin: 5px 0 0; color: var(--zon-muted-color); font-size: 13px; }
.ghv-public-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ghv-public-results a {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px 14px;
    padding: 15px;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 14px;
    color: var(--zon-common-text-color);
    text-decoration: none;
}
.ghv-public-results a span { min-width: 0; display: flex; flex-direction: column; }
.ghv-public-results a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghv-public-results a small,
.ghv-public-results a em { color: var(--zon-muted-color); font-size: 11px; font-style: normal; }
.ghv-public-results a em { grid-column: 1/-1; }
.ghv-public-achievements { display: flex; flex-direction: column; }
.ghv-public-achievements article {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--zon-comment-input-b-color);
}
.ghv-public-achievements article:last-child { border-bottom: 0; }
.ghv-public-achievements article > span { min-width: 0; display: flex; flex-direction: column; }
.ghv-public-achievements small { margin-top: 3px; color: var(--zon-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghv-public-achievements b { color: #58b2ff; font-size: 12px; }
.ghv-public-empty { padding: 22px; border-radius: 12px; color: var(--zon-muted-color); background: rgba(128,136,160,.07); text-align: center; }
.ghv-public-recent-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ghv-public-recent-grid a {
    overflow: hidden;
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 13px;
    color: var(--zon-common-text-color);
    text-decoration: none;
}
.ghv-public-recent-grid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ghv-public-recent-grid a > span { display: flex; flex-direction: column; padding: 11px 12px; }
.ghv-public-recent-grid small { margin-top: 3px; color: var(--zon-muted-color); font-size: 11px; }

/* Keep game leaderboard and comment input comfortable on wide screens */
.ghv-competition-refined .ghvc-board,
.ghv-game-comments-refined .comment-form {
    width: min(100%, 1180px);
    margin-right: auto;
}
.ghv-game-comments-refined .comment-form textarea {
    min-height: 88px;
    max-height: 190px;
}
.ghvc-ranking-profile { color: inherit; text-decoration: none; }
.ghvc-ranking-profile:hover strong { color: #38a9ff; }

@media (max-width: 900px) {
    .ghv-global-board,
    .ghv-public-profile { padding: 18px 0 34px; }
    .ghv-global-board-hero { flex-direction: column; padding: 22px; }
    .ghv-global-me-card { flex-basis: auto; align-items: flex-start; }
    .ghv-global-podium { grid-template-columns: 1fr; align-items: stretch; }
    .ghv-global-podium-card,
    .ghv-global-podium-card.is-place-1 { min-height: 180px; }
    .ghv-global-how { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ghv-public-profile-layout { grid-template-columns: 1fr; }
    .ghv-public-profile-hero { grid-template-columns: auto minmax(0,1fr); }
    .ghv-public-profile-rank { grid-column: 1/-1; align-items: flex-start; min-width: 0; }
    .ghv-public-profile-edit { position: static; grid-column: 1/-1; }
}
@media (max-width: 620px) {
    .ghv-global-board-toolbar { align-items: flex-start; flex-direction: column; }
    .ghv-global-periods { width: 100%; }
    .ghv-global-periods a { flex: 1; min-width: 0; }
    .ghv-global-row { grid-template-columns: 42px 38px minmax(0,1fr) auto; padding: 9px 11px; gap: 9px; }
    .ghv-global-how { grid-template-columns: 1fr; }
    .ghv-public-profile-hero { grid-template-columns: 1fr; text-align: center; }
    .ghv-public-profile-avatar { display: flex; justify-content: center; }
    .ghv-public-profile-rank { align-items: center; }
    .ghv-public-profile-edit { text-align: center; }
    .ghv-public-rank-progress > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
    .ghv-public-results { grid-template-columns: 1fr; }
    .ghv-public-achievements article { grid-template-columns: 38px minmax(0,1fr); }
    .ghv-public-achievements article b { grid-column: 2; }
    .ghv-public-recent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}


/* GHV LEADERBOARDS SIDEBAR ROW ALIGNMENT v1
   Keeps the fifth primary item identical to the four rows above it. */
.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) {
  margin: 0 !important;
  padding: 0 !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 3px 6px 3px 14px !important;
  line-height: 1.1 !important;
  box-sizing: border-box !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a > span:first-child {
  display: inline-flex !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a > span:first-child svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: #22dff8 !important;
  stroke: #22dff8 !important;
  fill: none !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a > span:first-child svg *,
.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a > span:first-child svg path {
  color: #22dff8 !important;
  stroke: #22dff8 !important;
  fill: none !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a .icon-label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.12 !important;
  text-align: left !important;
}

.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a:hover > span:first-child svg,
.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a:hover > span:first-child svg *,
.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a.active-page > span:first-child svg,
.zontal-sidebar:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a.active-page > span:first-child svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}

@media screen and (max-width: 1102px) {
  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 3px 10px !important;
  }

  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a > span:first-child {
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
  }

  .zontal-sidebar.active:not(.close) .zontal-sidebar-body > .list:first-of-type > li:nth-child(5) > a > span:first-child svg {
    width: 18px !important;
    height: 18px !important;
  }
}


/* GHV GAME LEADERBOARD WIDTH + COMMENTS GAP FINAL v1
   Aligns the competition divider and comment field to the leaderboard table,
   and restores the same card gap used elsewhere on the game page. */
.ghv-competition-refined {
    margin-bottom: 20px !important;
}

.ghv-game-comments-refined {
    margin: 0 0 24px !important;
}

.ghv-competition-refined > .ghvc-game-tabs {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ghv-game-comments-refined .comment-form {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ghv-game-comments-refined .comment-form textarea {
    width: 100% !important;
    min-height: 88px !important;
    max-height: 190px !important;
}

@media (max-width: 620px) {
    .ghv-competition-refined {
        margin-bottom: 16px !important;
    }

    .ghv-game-comments-refined {
        margin-top: 0 !important;
    }

    .ghv-competition-refined > .ghvc-game-tabs,
    .ghv-game-comments-refined .comment-form {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* GHV GAME ACHIEVEMENTS COMPACT WIDTH v1
   Keeps achievement cards aligned with the game leaderboard and comment form. */
.ghv-competition-refined > [data-ghvc-panel="achievements"] {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ghv-competition-refined > [data-ghvc-panel="achievements"] .ghvc-achievement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.ghv-competition-refined > [data-ghvc-panel="achievements"] .ghvc-achievement-card {
    min-height: 90px !important;
    padding: 13px !important;
}

@media (max-width: 760px) {
    .ghv-competition-refined > [data-ghvc-panel="achievements"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ghv-competition-refined > [data-ghvc-panel="achievements"] .ghvc-achievement-grid {
        grid-template-columns: 1fr !important;
    }
}


/* GHV XP TERMINOLOGY + HISTORY v1 */
.ghv-xp-summary {
    margin-bottom: 18px !important;
}

.ghv-xp-summary > div:first-child {
    border-color: color-mix(in srgb, var(--zon-theme-color) 30%, var(--zon-common-text-color)) !important;
    background: color-mix(in srgb, var(--zon-theme-color) 6%, var(--zon-search-bg-color)) !important;
}

.ghv-xp-breakdown-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 28px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--zon-theme-color) 24%, var(--zon-common-text-color));
    border-radius: 15px;
    background: color-mix(in srgb, var(--zon-theme-color) 5%, var(--zon-search-bg-color));
}

.ghv-xp-breakdown-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ghv-xp-breakdown-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #22dff8, #1d7cff 58%, #7b4dff);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    box-shadow: 0 8px 18px rgba(29,124,255,.18);
}

.ghv-xp-breakdown-main strong {
    display: block;
    color: var(--zon-common-text-color);
    font-size: 13px;
}

.ghv-xp-breakdown-main p {
    max-width: 840px;
    margin: 5px 0 0;
    color: var(--zon-muted-color);
    font-size: 11px;
    line-height: 1.55;
}

.ghv-xp-breakdown-card > a {
    flex: 0 0 auto;
    padding: 10px 15px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #22dff8, #1d7cff 58%, #7b4dff);
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(29,124,255,.18);
}

.ghv-xp-history-section {
    scroll-margin-top: 90px;
}

.ghv-xp-history-head {
    align-items: flex-end;
}

.ghv-xp-history-head > strong {
    flex: 0 0 auto;
    color: #38a9ff;
    font-size: 13px;
}

.ghv-xp-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.ghv-xp-history-filters a {
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--zon-common-text-color) 14%, transparent);
    border-radius: 999px;
    color: var(--zon-muted-color);
    background: transparent;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.ghv-xp-history-filters a:hover,
.ghv-xp-history-filters a.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #22dff8, #1d7cff 58%, #7b4dff);
    box-shadow: 0 6px 15px rgba(29,124,255,.15);
}

.ghv-xp-history-list {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--zon-common-text-color) 12%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--zon-search-bg-color) 82%, var(--zon-body-bg-color));
}

.ghv-xp-history-row {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 11px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--zon-common-text-color) 9%, transparent);
}

.ghv-xp-history-row:last-child {
    border-bottom: 0;
}

.ghv-xp-history-row:hover {
    background: color-mix(in srgb, var(--zon-theme-color) 4%, var(--zon-search-bg-color));
}

.ghv-xp-history-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #58b2ff;
    background: color-mix(in srgb, var(--zon-theme-color) 12%, transparent);
    font-size: 15px;
    font-weight: 900;
}

.ghv-xp-history-row.is-achievement .ghv-xp-history-icon {
    color: #ffd36c;
    background: rgba(255,199,70,.10);
}

.ghv-xp-history-row.is-activity .ghv-xp-history-icon {
    color: #ff9a56;
    background: rgba(255,130,66,.10);
}

.ghv-xp-history-row.is-progress .ghv-xp-history-icon {
    color: #5ee0b5;
    background: rgba(50,205,150,.10);
}

.ghv-xp-history-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ghv-xp-history-copy strong {
    overflow: hidden;
    color: var(--zon-common-text-color);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ghv-xp-history-copy span,
.ghv-xp-history-copy small {
    overflow: hidden;
    color: var(--zon-muted-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ghv-xp-history-copy span {
    margin-top: 3px;
    font-size: 10px;
}

.ghv-xp-history-copy small {
    margin-top: 3px;
    font-size: 9px;
}

.ghv-xp-history-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.ghv-xp-history-value strong {
    color: #38a9ff;
    font-size: 12px;
}

.ghv-xp-history-value span {
    margin-top: 3px;
    color: var(--zon-muted-color);
    font-size: 9px;
}

@media (max-width: 760px) {
    .ghv-xp-breakdown-card {
        align-items: stretch;
        flex-direction: column;
    }

    .ghv-xp-breakdown-card > a {
        align-self: flex-start;
    }

    .ghv-xp-history-head {
        align-items: flex-start;
    }

    .ghv-xp-history-row {
        grid-template-columns: 36px minmax(0,1fr);
    }

    .ghv-xp-history-value {
        grid-column: 2;
        align-items: flex-start;
        margin-top: 4px;
    }
}


/* GHV EXPANDED GLOBAL LEADERBOARD DASHBOARD v1 */
.ghv-global-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr);
    gap: 18px;
    margin-top: 20px;
    align-items: start;
}

.ghv-global-ranking-panel,
.ghv-global-progress-card,
.ghv-global-recent-card,
.ghv-global-login-panel {
    border: 1px solid var(--zon-comment-input-b-color);
    border-radius: 18px;
    background: var(--zon-secondary-bg-color);
}

.ghv-global-ranking-panel,
.ghv-global-progress-card,
.ghv-global-recent-card,
.ghv-global-login-panel {
    padding: 18px;
}

.ghv-global-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.ghv-global-panel-head > div {
    min-width: 0;
}

.ghv-global-panel-head span {
    display: block;
    margin-bottom: 4px;
    color: #38a9ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ghv-global-panel-head h2 {
    margin: 0;
    color: var(--zon-common-text-color);
    font-size: 18px;
}

.ghv-global-panel-head > b {
    color: var(--zon-muted-color);
    font-size: 11px;
    white-space: nowrap;
}

.ghv-global-ranking-panel .ghv-global-list {
    border-radius: 14px;
}

.ghv-global-ranking-panel .ghv-global-row {
    min-height: 62px;
    grid-template-columns: 54px 38px minmax(0,1fr) auto;
    padding: 9px 14px;
}

.ghv-global-join-note {
    margin-top: 13px;
    padding: 13px 15px;
    border: 1px dashed color-mix(in srgb, var(--zon-theme-color) 28%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--zon-theme-color) 4%, transparent);
}

.ghv-global-join-note span {
    display: block;
    color: var(--zon-common-text-color);
    font-size: 11px;
    font-weight: 850;
}

.ghv-global-join-note p {
    margin: 4px 0 0;
    color: var(--zon-muted-color);
    font-size: 10px;
    line-height: 1.5;
}

.ghv-global-player-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ghv-global-progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.ghv-global-progress-labels strong {
    color: var(--zon-common-text-color);
    font-size: 11px;
}

.ghv-global-progress-labels span {
    color: var(--zon-muted-color);
    font-size: 10px;
}

.ghv-global-progress-bar {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zon-common-text-color) 10%, transparent);
}

.ghv-global-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#18b7f2,#2e86ff 54%,#675cff);
    box-shadow: 0 0 12px rgba(46,134,255,.18);
}

.ghv-global-progress-note {
    margin: 8px 0 16px;
    color: var(--zon-muted-color);
    font-size: 10px;
    line-height: 1.45;
}

.ghv-global-personal-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.ghv-global-personal-stats > div {
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--zon-common-text-color) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--zon-common-text-color) 2.5%, transparent);
}

.ghv-global-personal-stats strong,
.ghv-global-personal-stats span {
    display: block;
}

.ghv-global-personal-stats strong {
    color: var(--zon-common-text-color);
    font-size: 17px;
}

.ghv-global-personal-stats span {
    margin-top: 3px;
    color: var(--zon-muted-color);
    font-size: 9px;
}

.ghv-global-recent-card .ghv-global-panel-head a {
    color: #38a9ff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.ghv-global-recent-list {
    display: flex;
    flex-direction: column;
}

.ghv-global-recent-list > div {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    border-bottom: 1px solid color-mix(in srgb, var(--zon-common-text-color) 9%, transparent);
}

.ghv-global-recent-list > div:last-child {
    border-bottom: 0;
}

.ghv-global-recent-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #58b2ff;
    background: color-mix(in srgb, var(--zon-theme-color) 10%, transparent);
    font-size: 13px;
}

.ghv-global-recent-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ghv-global-recent-copy strong,
.ghv-global-recent-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ghv-global-recent-copy strong {
    color: var(--zon-common-text-color);
    font-size: 10px;
}

.ghv-global-recent-copy small {
    margin-top: 2px;
    color: var(--zon-muted-color);
    font-size: 9px;
}

.ghv-global-recent-list b {
    color: #38a9ff;
    font-size: 10px;
    white-space: nowrap;
}

.ghv-global-recent-empty {
    padding: 16px 4px 4px;
    color: var(--zon-muted-color);
    font-size: 10px;
    text-align: center;
}

.ghv-global-login-panel > span {
    color: #38a9ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ghv-global-login-panel h2 {
    margin: 6px 0 8px;
    color: var(--zon-common-text-color);
    font-size: 20px;
}

.ghv-global-login-panel p {
    margin: 0 0 15px;
    color: var(--zon-muted-color);
    font-size: 11px;
    line-height: 1.55;
}

.ghv-global-login-panel a {
    display: inline-flex;
    padding: 10px 16px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(110deg,#18b7f2,#2e86ff 52%,#675cff);
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
}

.ghv-global-dashboard + .ghv-global-how {
    margin-top: 20px;
}

@media (max-width: 980px) {
    .ghv-global-dashboard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .ghv-global-ranking-panel,
    .ghv-global-progress-card,
    .ghv-global-recent-card,
    .ghv-global-login-panel {
        padding: 14px;
    }

    .ghv-global-ranking-panel .ghv-global-row {
        grid-template-columns: 40px 34px minmax(0,1fr) auto;
        gap: 8px;
        padding: 8px 9px;
    }

    .ghv-global-personal-stats {
        grid-template-columns: 1fr 1fr;
    }
}


/* GHV XP HISTORY FILTER CLEAN EDGES v1 */
.ghv-xp-history-filters a {
    box-sizing: border-box !important;
    background-clip: padding-box !important;
    outline: none !important;
    box-shadow: none !important;
}

.ghv-xp-history-filters a:hover,
.ghv-xp-history-filters a.is-active {
    border: 1px solid rgba(255, 255, 255, .08) !important;
    background:
        linear-gradient(135deg, #22dff8, #1d7cff 58%, #7b4dff)
        padding-box !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

.ghv-xp-history-filters a:focus,
.ghv-xp-history-filters a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* GameHubVerse V78 - category control uses the exact Popular Games More anchor markup. */
#zon-category-loader.ghv-category-loading {
  pointer-events: none !important;
}

/* GameHubVerse localization - compact one-line mobile auth labels */
.ghv-auth-actions .ghv-auth-login,
.ghv-auth-actions .ghv-auth-register {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  flex-shrink: 0;
}

@media screen and (max-width: 800px) {
  header .ghv-auth-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  header .ghv-auth-actions .ghv-auth-login,
  header .ghv-auth-actions .ghv-auth-register {
    min-height: 36px !important;
    height: 36px;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
  }

  header .ghv-language-button {
    min-width: 50px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

@media screen and (max-width: 430px) {
  header .ghv-auth-actions {
    gap: 4px !important;
  }

  header .ghv-auth-actions .ghv-auth-login,
  header .ghv-auth-actions .ghv-auth-register {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 10.5px !important;
  }

  header .ghv-language-button {
    min-width: 46px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* GHV privacy footer clearance: keep our links above the native CMP control.
   Real trailing space also lets the last link scroll fully clear of its tooltip. */
.zontal-sidebar {
  scroll-padding-bottom: calc(192px + env(safe-area-inset-bottom, 0px));
}
.zontal-sidebar:not(.close) .zontal-sidebar-footer {
  padding-bottom: calc(192px + env(safe-area-inset-bottom, 0px)) !important;
}

/* The footer entry replaces the floating EU privacy reminder. */
html[data-ghv-footer-privacy] .zontal-sidebar {
  scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
html[data-ghv-footer-privacy] .zontal-sidebar:not(.close) .zontal-sidebar-footer {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-ghv-footer-privacy] #ghv-ad-controls {
  margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Source: themes/zontal/css/cookie-consent.css */
/*
 * GameHubVerse privacy UI cleanup.
 * Google Privacy & Messaging is the single consent dialog.
 * Only the site-owned links that reopen Google's CMP need theme styling here.
 */
.ghv-privacy-link,
.ghv-google-revocation-link{
  appearance:none;
  -webkit-appearance:none;
  display:inline;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--zon-muted-color,#777);
  font:inherit;
  font-size:.75rem;
  line-height:inherit;
  text-transform:capitalize;
  cursor:pointer;
}
.ghv-privacy-link:hover,
.ghv-privacy-link:focus-visible,
.ghv-google-revocation-link:hover,
.ghv-google-revocation-link:focus-visible{
  color:var(--zon-common-text-color,#ddd);
  text-decoration:underline;
  outline:none;
}

/* Source: themes/zontal/css/ghv-search-polish.css */
/* GameHubVerse polished live search
   - compact result cards
   - proper mobile/desktop scrolling
   - accessible focus states
   - scoped to the existing Zontal live-search markup */
.search-bar.ghv-search-upgraded {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 44px;
  min-width: 0;
  padding: 0 7px 0 12px !important;
  border: 1px solid rgba(128,138,160,.22);
  border-radius: 12px !important;
  background: var(--zon-search-bg-color) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  isolation: isolate;
}

.search-bar.ghv-search-upgraded:focus-within {
  border-color: color-mix(in srgb, var(--ghv-brand-cyan, #21c7f5) 58%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ghv-brand-cyan, #21c7f5) 12%, transparent),
    0 9px 26px rgba(0,0,0,.13);
}

.search-bar.ghv-search-upgraded .live-search-input {
  min-width: 0;
  height: 42px;
  padding: 0 8px !important;
  color: var(--zon-common-text-color);
  font-size: 14px !important;
  line-height: 42px;
}

.search-bar.ghv-search-upgraded .live-search-input::placeholder {
  color: var(--zon-muted-color);
  opacity: .9;
}

.search-bar.ghv-search-upgraded > button {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--zon-common-text-color);
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}

.search-bar.ghv-search-upgraded > button:hover {
  background: color-mix(in srgb, var(--zon-common-text-color) 8%, transparent);
}

.search-bar.ghv-search-upgraded > button:active {
  transform: scale(.96);
}

.search-bar.ghv-search-upgraded > button svg {
  width: 18px;
  height: 18px;
}

.search-bar.ghv-search-upgraded .clicker {
  display: none !important;
  pointer-events: none !important;
}

/* Search dropdown */
.search-bar.ghv-search-upgraded .search-result {
  box-sizing: border-box;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 999999 !important;
  width: min(520px, calc(100vw - 28px)) !important;
  min-width: 100%;
  max-width: none !important;
  max-height: min(68vh, 620px);
  margin: 0 !important;
  padding: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid rgba(128,138,160,.22);
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--zon-body-bg-color) 97%, transparent) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.search-bar.ghv-search-upgraded .search-result::-webkit-scrollbar {
  width: 8px;
}

.search-bar.ghv-search-upgraded .search-result::-webkit-scrollbar-track {
  background: transparent;
}

.search-bar.ghv-search-upgraded .search-result::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--zon-muted-color) 55%, transparent);
  background-clip: padding-box;
}

.search-bar.ghv-search-upgraded .search-result {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--zon-muted-color) 55%, transparent) transparent;
}

.ghv-search-panel-head {
  position: sticky;
  top: -8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin: -8px -8px 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(128,138,160,.14);
  background: color-mix(in srgb, var(--zon-body-bg-color) 98%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ghv-search-panel-head strong {
  color: var(--zon-common-text-color);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}

.ghv-search-close {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--zon-muted-color);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ghv-search-close:hover {
  background: color-mix(in srgb, var(--zon-common-text-color) 8%, transparent);
  color: var(--zon-common-text-color);
}

.search-bar.ghv-search-upgraded #live-games {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.search-bar.ghv-search-upgraded #live-games > .card {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.search-bar.ghv-search-upgraded #live-games > .card:hover {
  border-color: rgba(128,138,160,.14);
  background: color-mix(in srgb, var(--zon-search-bg-color) 76%, transparent) !important;
  transform: translateY(-1px) !important;
}

.search-bar.ghv-search-upgraded #live-games > .card > a:first-child {
  display: block;
  width: 96px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px;
  background: var(--zon-gmeta-bg-color);
}

.search-bar.ghv-search-upgraded #live-games > .card > a:first-child img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 9px;
  transition: transform .18s ease, filter .18s ease;
}

.search-bar.ghv-search-upgraded #live-games > .card:hover > a:first-child img {
  transform: scale(1.025);
  filter: brightness(.96);
}

.search-bar.ghv-search-upgraded #live-games > .card .text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 !important;
}

.search-bar.ghv-search-upgraded #live-games .game-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--zon-common-text-color);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-bar.ghv-search-upgraded #live-games .game-name:hover {
  color: var(--ghv-brand-cyan, #21c7f5);
}

.search-bar.ghv-search-upgraded #live-games .game-category {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--zon-muted-color);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ghv-search-state {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: var(--zon-muted-color);
  font-size: 13px;
  text-align: center;
}

.search-bar.ghv-search-upgraded .live-search-loader {
  min-height: 72px;
}

.search-bar.ghv-search-upgraded .live-search-loader .loader {
  width: 30px !important;
  height: 30px !important;
  border-width: 4px !important;
}

/* Tablet and phone: turn the dropdown into a compact, scrollable viewport panel. */
@media screen and (max-width: 700px) {
  .search-bar.ghv-search-upgraded {
    position: relative !important;
    width: 100% !important;
    height: 42px;
    border-radius: 11px !important;
  }

  .search-bar.ghv-search-upgraded .search-result {
    position: fixed !important;
    top: var(--ghv-search-mobile-top, 64px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(100dvh - var(--ghv-search-mobile-top, 64px) - 10px) !important;
    border-radius: 16px !important;
    padding: 7px !important;
  }

  .ghv-search-panel-head {
    top: -7px;
    margin: -7px -7px 5px;
  }

  .search-bar.ghv-search-upgraded #live-games > .card {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 7px !important;
  }

  .search-bar.ghv-search-upgraded #live-games > .card > a:first-child {
    width: 82px;
    border-radius: 8px;
  }

  .search-bar.ghv-search-upgraded #live-games > .card > a:first-child img {
    border-radius: 8px;
  }

  .search-bar.ghv-search-upgraded #live-games .game-name {
    font-size: 13px;
  }

  .search-bar.ghv-search-upgraded #live-games .game-category {
    font-size: 10.5px;
  }
}

@media screen and (max-width: 390px) {
  .search-bar.ghv-search-upgraded #live-games > .card {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .search-bar.ghv-search-upgraded #live-games > .card > a:first-child {
    width: 74px;
  }
}

/* Source: themes/zontal/css/ghv-language-suggestion.css */
.ghv-language-suggestion{
  position:fixed;
  top:62px;
  right:18px;
  z-index:115;
  width:min(430px,calc(100vw - 36px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  border:1px solid rgba(128,128,128,.22);
  border-radius:14px;
  background:var(--zon-body-bg-color);
  background:color-mix(in srgb,var(--zon-body-bg-color) 96%,#fff 4%);
  color:var(--zon-common-text-color);
  box-shadow:0 16px 45px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.985);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.ghv-language-suggestion.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.ghv-language-suggestion__flag{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--zon-search-bg-color);
  font-size:22px;
  line-height:1;
}
.ghv-language-suggestion__body{min-width:0;flex:1;}
.ghv-language-suggestion__body strong{
  display:block;
  margin:0 0 7px;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
  color:var(--zon-common-text-color);
}
.ghv-language-suggestion__actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ghv-language-suggestion__switch,
.ghv-language-suggestion__stay,
.ghv-language-suggestion__close{
  appearance:none;
  border:0;
  font:inherit;
  cursor:pointer;
}
.ghv-language-suggestion__switch{
  padding:6px 10px;
  border-radius:8px;
  background:linear-gradient(110deg,var(--ghv-brand-cyan,#18c7f3),var(--ghv-brand-purple,#7b4dff));
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}
.ghv-language-suggestion__stay{
  padding:6px 8px;
  background:transparent;
  color:var(--zon-muted-color,#888);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}
.ghv-language-suggestion__stay:hover{color:var(--zon-common-text-color);}
.ghv-language-suggestion__close{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:transparent;
  color:var(--zon-muted-color,#888);
  font-size:20px;
  line-height:1;
}
.ghv-language-suggestion__close:hover{background:var(--zon-search-bg-color);color:var(--zon-common-text-color);}
@media(max-width:800px){
  .ghv-language-suggestion{
    top:58px;
    left:10px;
    right:10px;
    width:auto;
    padding:10px 11px;
    gap:9px;
    border-radius:12px;
  }
  .ghv-language-suggestion__flag{width:34px;height:34px;flex-basis:34px;font-size:19px;}
  .ghv-language-suggestion__body strong{font-size:12px;margin-bottom:6px;}
  .ghv-language-suggestion__switch,.ghv-language-suggestion__stay{font-size:10.5px;padding:5px 8px;}
  .ghv-language-suggestion__close{width:25px;height:25px;flex-basis:25px;}
}
@media(prefers-reduced-motion:reduce){
  .ghv-language-suggestion{transition:none;}
}

/* Source: css/swiper.css */
/**
 * Swiper 3.4.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * 
 * http://www.idangero.us/swiper/
 * 
 * Copyright 2016, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 * 
 * Licensed under MIT
 * 
 * Released on: December 13, 2016
 */
.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}
/* Source: css/animate.css */
@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/* Source: css/toast.min.css */
/**
 * Minified by jsDelivr using clean-css v5.3.0.
 * Original file: /npm/toastify-js@1.12.0/src/toastify.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */
.toastify{padding:12px 20px;color:#fff;display:inline-block;box-shadow:0 3px 6px -1px rgba(0,0,0,.12),0 10px 36px -4px rgba(77,96,232,.3);background:-webkit-linear-gradient(315deg,#73a5ff,#5477f5);background:linear-gradient(135deg,#73a5ff,#5477f5);position:fixed;opacity:0;transition:all .4s cubic-bezier(.215, .61, .355, 1);border-radius:2px;cursor:pointer;text-decoration:none;max-width:calc(50% - 20px);z-index:2147483647}.toastify.on{opacity:1}.toast-close{background:0 0;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:1em;opacity:.4;padding:0 5px}.toastify-right{right:15px}.toastify-left{left:15px}.toastify-top{top:-150px}.toastify-bottom{bottom:-150px}.toastify-rounded{border-radius:25px}.toastify-avatar{width:1.5em;height:1.5em;margin:-7px 5px;border-radius:2px}.toastify-center{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content;max-width:-moz-fit-content}@media only screen and (max-width:360px){.toastify-left,.toastify-right{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content}}
/*# sourceMappingURL=/sm/cb4335d1b03e933ed85cb59fffa60cf51f07567ed09831438c60f59afd166464.map */