@import "swiper.css";

/* Light Colors */
.theme-light {
  --background: #fff;
  --color: #616161;
  --color-darker: #737373;
  --shadow-color: rgba(0, 0, 0, 0.14);
  --accent: #3B8562;
  --progress-color: #E3E3E3;
  --tap-background: rgba(255, 255, 255, .5);
  --star-color: #898989;
  --black-white: #212121;
}

/* Dark Colors */
.theme-dark {
  --background: #000;
  --color: #fff;
  --color-darker: #A1A1A2;
  --shadow-color: rgba(250, 250, 250, 0.14);
  --accent: #3B8562;
  --progress-color: #4C4C4C;
  --tap-background: rgba(0, 0, 0, .5);
  --star-color: #3B8562;
  --black-white: #fff;
}

* {
  --c-grean: var(--accent);
  --c-gray1: #616161;
  --c-gray2: #737373;
  -webkit-tap-highlight-color: transparent;
}

body, html {
  background-color: var(--background);
  color: var(--color);
  height: 100vh;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.d-flex {
  display: flex;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
}

.clearfix:after, .clearfix:before {
  content: " ";
  display: table
}

.clearfix:after {
  clear: both
}

.article p {
  margin: 15px 0 !important
}

blockquote, body, dd, div, dl, dt, embed, fieldset, figure, form, h1, h2, h3, h4, h5, h6, input, li, object, ol, p, pre, select, table, td, th, ul, ul li ol, ul li ol li, ul li ul, ul li ul li {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

abbr, fieldset, img {
  border: none
}

address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {
  font-weight: 400;
  font-style: normal
}

a, ins {
  text-decoration: none
}

ul {
  list-style: outside none none
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px
}

a {
  text-decoration: underline
}

a, a:active, a:link {
  color: inherit;
}

a:hover {
  cursor: pointer
}


h1 {
  font-size: 28px;
  margin: 0 0 20px
}

blockquote {
  padding: 20px
}

.content img {
  max-width: 100%
}

.click-none {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

#main-container.is-not-pwa {
  overflow: hidden
}

#main-container.is-not-pwa,
#main-container,
body {
  font-family: 'Roboto', sans-serif;
}

.theme-dark #main-container.is-not-pwa {
  background-color: var(--background);
}

/* Unique templates: keep common text/icons readable when matchTheme flips */
.theme-dark .sticky-header .app-comp__info-title,
.theme-dark .updates__header,
.theme-dark .changes__header,
.theme-dark .footer__header,
.theme-dark .info-items__title,
.theme-dark .security__header,
.theme-dark .description__title,
.theme-dark .top-games__title,
.theme-dark .comments__user-name,
.theme-dark .charts .score__number {
  color: var(--black-white);
}

.theme-dark .updates__content,
.theme-dark .changes__content,
.theme-dark .info-items__item span,
.theme-dark .security__content,
.theme-dark .description__content,
.theme-dark .footer .info-items__item span {
  color: var(--color-darker);
}

.theme-dark .comments-answer {
  background: #4C4C4C;
}

.navigation .navigation__item .stroke-color path {
  fill: none;
}

.navigation .navigation__item .fill-color path,
.navigation .navigation__item .fill-color circle {
  stroke: none;
}

.theme-dark .navigation .navigation__item,
.theme-dark .navigation .navigation__item svg {
  color: var(--black-white);
}

.theme-dark .navigation .navigation__item .fill-color path,
.theme-dark .navigation .navigation__item .fill-color circle {
  fill: currentColor;
  stroke: none;
}

.theme-dark .navigation .navigation__item .stroke-color path {
  stroke: currentColor;
  fill: none;
}

/* Age 18+ outlined badge: follow theme contrast (filled pills keep local #fff) */
.info__item.is--age .info__item-top span,
.app-comp__mobile-info-rate {
  color: var(--black-white) !important;
}

.theme-dark .info__item.is--age .info__item-top {
  border-color: var(--black-white);
}

main {
  font-size: 18px
}

.loading {
  display: none
}

.hide {
  display: none
}

.app-comp {
  position: relative;
  width: 100%;
  max-width: 991px;
  margin: 0 auto;
}

.tap-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--tap-background);
  z-index: 9999;
  color: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  line-height: 1.2;
  user-select: none;
  display: none;
  text-decoration: none;
  text-align: center;
}

.tap-overlay:visited {
  color: var(--color);
}