@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
:root {
  --color-black: #000;
  --color-white: #fff;
  --color-light-back: #edf6f9;
  --color-shadow-light: #dee6e9;
  --color-primary: #4895ef;
  --color-light-primary: #4895ff;
  --shadow-color: #4361ee;
  --color-secondary: #90be6d;
  --shadow-inset-color: #073b4c; }

:root {
  --timing-function: cubic-bezier(0.7, 0.84, 0.97, 0.74); }

html {
  position: relative;
  box-sizing: border-box;
  min-height: 100%; }

body {
  position: relative;
  height: 100%; }

*,
*::before,
*::after {
  box-sizing: inherit; }

nav, footer, header, aside {
  display: block; }

input, button, textarea {
  font-family: inherit; }

button {
  cursor: pointer;
  display: inline-block;
  background: none;
  line-height: inherit;
  color: inherit;
  border: none; }

input {
  line-height: inherit;
  border: none; }

img {
  vertical-align: middle;
  max-width: 100%; }

a {
  color: inherit;
  text-decoration: none; }

input::-moz-placeholder {
  color: inherit;
  background-color: inherit; }

input:-ms-input-placeholder {
  color: inherit;
  background-color: inherit; }

input::placeholder {
  color: inherit;
  background-color: inherit; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

polyline, svg path {
  fill: inherit;
  stroke: inherit; }

address {
  font-style: normal; }

.js-focus-visible :focus:not(.focus-visible) {
  outline: none; }

button.focus-visible, a.focus-visible, input.focus-visible {
  outline: 2px solid #000; }

.site-container {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  height: 100%; }

.is-hidden {
  display: none !important; }

.hide-scroll {
  overflow: hidden; }

.for-mobile {
  display: none; }
  @media (max-width: 1024px) {
    .for-mobile {
      display: block; } }

.for-desktop {
  display: none; }
  @media (min-width: 1025px) {
    .for-desktop {
      display: block; } }

.visually-hidden {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0); }

body {
  height: 100%;
  background: linear-gradient(-45deg, #f0efeb 0%, #edf6f9 100%);
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  font-display: swap;
  color: #000;
  margin: 0;
  background-color: #fff; }
  @media (min-width: 1025px) {
    body {
      overflow: auto !important; } }

.container {
  --content-offset: 20px;
  max-width: calc(1368px + 2 * var(--content-offset));
  margin: 0 auto;
  padding: 0 var(--content-offset); }

.burger {
  --burger-width: 20px;
  --burger-height: 14px;
  --burger-line-height: 2px;
  --burger-color: #fff;
  position: relative;
  width: var(--burger-width);
  height: var(--burger-height);
  color: var(--burger-color); }
  .burger__line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--burger-line-height);
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    transform: translateY(-50%);
    background-color: var(--burger-color); }
  .burger::before, .burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--burger-line-height);
    border-radius: 10px;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    background-color: var(--burger-color); }
  .burger::before {
    top: 0; }
  .burger::after {
    top: calc(100% - var(--burger-line-height)); }
  .burger.active .burger__line {
    transition: transform 0.3s ease-in-out;
    transform: scale(0.01); }
  .burger.active::before {
    top: 50%;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    transform: rotate(45deg); }
  .burger.active::after {
    top: 50%;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    transform: rotate(-45deg); }

.modal {
  visibility: hidden;
  position: fixed;
  z-index: 2;
  top: calc(max(50vh, 200px));
  left: 50%;
  width: 500px;
  max-width: calc(100% - 20px);
  font-family: "Satisfy", cursive;
  color: var(--color-primary);
  text-align: right;
  padding: 20px;
  border-radius: 85% 15% 85% 15% / 0% 100% 0% 100%;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  box-shadow: 0 0 20px var(--color-shadow-light);
  transition: visibility 0.5s ease-in-out,
 transform 0.5s ease-in-out;
  transform: translate(-50%, -50%) scale(0);
  background-color: var(--color-light-back); }
  @media (min-width: 576px) {
    .modal {
      font-size: 24px; } }
  @media (max-width: 576px) and (min-width: 320px) {
    .modal {
      font-size: calc(18px + 6 * ((100vw - 320px) / 256)); } }
  @media (max-width: 320px) {
    .modal {
      font-size: 18px; } }
  .modal__title {
    color: var(--color-secondary);
    text-align: center;
    margin: 0 0 20px; }
  .modal__button {
    box-shadow: 2px 4px 0px var(--shadow-color);
    font-size: 18px;
    line-height: 100%;
    color: var(--color-light-back);
    padding: 10px;
    border-radius: 10px;
    transition: transform 0.2s ease-in-out,
 box-shadow 0.2s ease-in-out;
    background-color: var(--color-light-primary); }
    @media (min-width: 576px) {
      .modal__button {
        font-size: 18px; } }
    @media (max-width: 576px) and (min-width: 320px) {
      .modal__button {
        font-size: calc(16px + 2 * ((100vw - 320px) / 256)); } }
    @media (max-width: 320px) {
      .modal__button {
        font-size: 16px; } }
    .modal__button:active {
      box-shadow: 0px 0px 0px var(--shadow-color);
      transform: translate(2px, 4px); }
  .modal.is-showed {
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); }
  @media (max-width: 380px) {
    .modal {
      padding: 10px;
      border-radius: 95% 5% 95% 5% / 0% 100% 0% 100%;
      border-top-left-radius: 20px;
      border-bottom-right-radius: 20px; } }

.game-over__title {
  color: crimson; }

.header {
  box-shadow: 0 0 5px var(--shadow-color);
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 10px 0;
  background-color: var(--color-light-primary); }
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .header__container {
    flex: 0 1 100%; }

.logo {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  font-weight: 500; }
  @media (min-width: 768px) {
    .logo {
      flex-basis: 40px; } }
  @media (max-width: 768px) and (min-width: 576px) {
    .logo {
      flex-basis: calc(30px + 10 * ((100vw - 576px) / 192)); } }
  @media (max-width: 576px) {
    .logo {
      flex-basis: 30px; } }
  .logo span {
    font-size: 20px;
    color: var(--color-white);
    margin-left: 10px; }
  @media (max-width: 576px) {
    .logo {
      flex-basis: 30px; } }

.options {
  display: flex;
  justify-content: center;
  align-items: center; }
  .options__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .options__item:not(:last-child) {
    margin-right: 15px; }
  .options__button {
    flex: 0 0 40px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0;
    transition: transform 0.4s ease-in-out; }
    @media (min-width: 768px) {
      .options__button {
        flex-basis: 40px; } }
    @media (max-width: 768px) and (min-width: 576px) {
      .options__button {
        flex-basis: calc(30px + 10 * ((100vw - 576px) / 192)); } }
    @media (max-width: 576px) {
      .options__button {
        flex-basis: 30px; } }
    @media (min-width: 768px) {
      .options__button {
        width: 40px; } }
    @media (max-width: 768px) and (min-width: 576px) {
      .options__button {
        width: calc(30px + 10 * ((100vw - 576px) / 192)); } }
    @media (max-width: 576px) {
      .options__button {
        width: 30px; } }
    @media (min-width: 768px) {
      .options__button {
        height: 40px; } }
    @media (max-width: 768px) and (min-width: 576px) {
      .options__button {
        height: calc(30px + 10 * ((100vw - 576px) / 192)); } }
    @media (max-width: 576px) {
      .options__button {
        height: 30px; } }
    .options__button-line {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 3px;
      border-radius: 20px;
      background-color: var(--color-white); }
      .options__button-line::before {
        content: "";
        position: absolute;
        top: 50%;
        display: inline-block;
        border: 3px solid var(--color-white);
        border-radius: 100%;
        transform: translateY(-50%);
        background-color: var(--color-light-primary);
        transition-property: left, right;
        transition-duration: 0.3s, 0.3s;
        transition-timing-function: ease-in-out, ease-in-out; }
        @media (min-width: 768px) {
          .options__button-line::before {
            width: 10px; } }
        @media (max-width: 768px) and (min-width: 576px) {
          .options__button-line::before {
            width: calc(8px + 2 * ((100vw - 576px) / 192)); } }
        @media (max-width: 576px) {
          .options__button-line::before {
            width: 8px; } }
        @media (min-width: 768px) {
          .options__button-line::before {
            height: 10px; } }
        @media (max-width: 768px) and (min-width: 576px) {
          .options__button-line::before {
            height: calc(8px + 2 * ((100vw - 576px) / 192)); } }
        @media (max-width: 576px) {
          .options__button-line::before {
            height: 8px; } }
      .options__button-line:nth-child(1)::before {
        right: 5px; }
      .options__button-line:nth-child(2)::before {
        left: 5px; }
      .options__button-line:nth-child(3)::before {
        right: 5px; }
    .options__button--refresh:hover {
      transform: rotate(-180deg); }
    .options__button--settings {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px 0; }
      .options__button--settings:hover .options__button-line:nth-child(1)::before {
        right: calc(100% - 15px); }
      .options__button--settings:hover .options__button-line:nth-child(2)::before {
        left: calc(100% - 15px); }
      .options__button--settings:hover .options__button-line:nth-child(3)::before {
        right: calc(100% - 15px); }

.timer {
  display: flex;
  justify-content: center;
  color: var(--color-light-back);
  margin: 0 10px;
  padding: 0 20px;
  border-right: 1px dashed var(--color-light-back);
  border-left: 1px dashed var(--color-light-back); }
  @media (min-width: 768px) {
    .timer {
      font-size: 24px; } }
  @media (max-width: 768px) and (min-width: 320px) {
    .timer {
      font-size: calc(18px + 6 * ((100vw - 320px) / 448)); } }
  @media (max-width: 320px) {
    .timer {
      font-size: 18px; } }
  @media (max-width: 480px) {
    .timer {
      padding: 0 10px; } }

.site-container.has-overlay::before {
  content: "";
  opacity: 0.7;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-white), 0.7); }

.settings {
  box-shadow: 0 0 15px var(--color-light-primary);
  visibility: hidden;
  position: fixed;
  z-index: 3;
  top: 70px;
  right: 0;
  color: var(--color-white);
  padding: 20px 20px 20px 40px;
  border-bottom-left-radius: 100%;
  transition: transform 0.8s ease-in-out,
 visibility 0.8s ease-in-out;
  transform: translate(100%, calc(-100% - 70px)) scale(0);
  background-color: var(--color-light-primary); }
  @media (min-width: 576px) {
    .settings {
      font-size: 24px; } }
  @media (max-width: 576px) and (min-width: 320px) {
    .settings {
      font-size: calc(18px + 6 * ((100vw - 320px) / 256)); } }
  @media (max-width: 320px) {
    .settings {
      font-size: 18px; } }
  @media (min-width: 768px) {
    .settings {
      width: 600px; } }
  @media (max-width: 768px) and (min-width: 320px) {
    .settings {
      width: calc(280px + 320 * ((100vw - 320px) / 448)); } }
  @media (max-width: 320px) {
    .settings {
      width: 280px; } }
  @media (min-width: 768px) {
    .settings {
      height: 600px; } }
  @media (max-width: 768px) and (min-width: 320px) {
    .settings {
      height: calc(280px + 320 * ((100vw - 320px) / 448)); } }
  @media (max-width: 320px) {
    .settings {
      height: 280px; } }
  .settings__option {
    position: relative; }
    .settings__option:not(:last-child) {
      margin-bottom: 20px; }
    .settings__option:nth-of-type(2) {
      margin-left: 20px; }
    .settings__option:nth-of-type(3) {
      margin-left: 40px; }
    .settings__option-slider-wrapper {
      display: flex;
      align-items: center; }
    .settings__option-slider {
      flex: 0 1 100%; }
  .settings.is-showed {
    visibility: visible;
    transform: translate(0, 0) scale(1); }
  @media (max-width: 576px) {
    .settings {
      border-bottom-left-radius: 90%; } }

.settings__slider-value {
  position: relative;
  display: inline-block;
  color: var(--color-light-primary);
  text-align: center;
  margin-left: 22.5px;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: var(--color-light-back); }
  .settings__slider-value:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid var(--color-light-back);
    border-bottom: 8px solid transparent;
    transform: translate(-100%, -50%); }

.noUi-target {
  cursor: pointer;
  box-shadow: none;
  max-width: 400px;
  min-width: 75px;
  height: 6px;
  border: none;
  border-radius: 30px;
  margin-left: 12.5px;
  background-color: var(--color-light-back); }

.noUi-connect {
  background-color: var(--color-shadow-light);
  background: linear-gradient(90deg, var(--color-shadow-light) 0%, var(--color-white) 100%); }

.noUi-handle::after,
.noUi-handle::before {
  display: none; }

.noUi-handle {
  cursor: pointer;
  box-shadow: none;
  border: 5px solid var(--color-light-back);
  border-radius: 100%;
  background-color: var(--color-light-primary); }
  .noUi-handle:hover .noUi-tooltip {
    display: block !important; }

.noUi-tooltip {
  display: none; }

.noUi-active .noUi-tooltip {
  display: block; }

.noUi-horizontal .noUi-handle {
  top: 0;
  right: -12.5px;
  width: 25px;
  height: 25px;
  transform: translateY(calc(-50% + 3px)); }

.noUi-tooltip {
  position: absolute;
  display: block;
  background: var(--color-light-back);
  color: var(--color-light-primary);
  text-align: center;
  padding: 1px 7px 3px;
  border-bottom: 0;
  border-radius: 10px 10px 100% 100%; }

.main {
  position: relative;
  z-index: 1;
  padding-top: 70px; }

.minesweeper-field {
  width: 100%;
  max-width: calc((70px + 10px) * var(--columns-count) - 10px);
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 40px auto;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr); }
  @media (min-width: 576px) {
    .minesweeper-field {
      grid-gap: 10px; } }
  @media (max-width: 576px) and (min-width: 480px) {
    .minesweeper-field {
      grid-gap: calc(5px + 5 * ((100vw - 480px) / 96)); } }
  @media (max-width: 480px) {
    .minesweeper-field {
      grid-gap: 5px; } }

.minesweeper-field .field-cell {
  --shadow-bottom: 4px;
  min-width: 100%;
  height: 100%;
  padding: 50% 0;
  min-width: 15px;
  min-height: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 0px var(--shadow-bottom) 0px var(--shadow-color);
  position: relative;
  line-height: 1.1;
  font-weight: 500;
  color: var(--color-primary);
  border-radius: 10px; }
  @media (min-width: 576px) {
    .minesweeper-field .field-cell {
      font-size: 24px; } }
  @media (max-width: 576px) and (min-width: 320px) {
    .minesweeper-field .field-cell {
      font-size: calc(6px + 18 * ((100vw - 320px) / 256)); } }
  @media (max-width: 320px) {
    .minesweeper-field .field-cell {
      font-size: 6px; } }
  .minesweeper-field .field-cell::before {
    content: "";
    opacity: 1;
    position: absolute;
    display: block;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: transform 0.2s ease-in-out,
 box-shadow 0.2s ease-in-out,
 background-color 0.2s ease-in-out;
    background-color: var(--color-primary); }
  .minesweeper-field .field-cell:active::before {
    transform: translateY(var(--shadow-bottom));
    background-color: var(--color-light-primary); }
  .minesweeper-field .field-cell.is-flag::before {
    background: var(--color-primary) url("../img/flag.svg") center/50% no-repeat; }
  .minesweeper-field .field-cell.visited {
    box-shadow: inset 0px 0px 10px var(--shadow-inset-color);
    transform: translateY(var(--shadow-bottom));
    background-color: var(--color-light-back); }
    .minesweeper-field .field-cell.visited::before {
      opacity: 0; }

/*# sourceMappingURL=style.css.map */