/* ZWORLD_CLASSIC_2048_V11C_START */

.classic-games-section-v11c {
  margin: 10px 7px 5px;
}

.classic-games-title-v11c {
  margin: 0 7px 5px;

  color: #92929a;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.classic-game-launch-v11c {
  width: 100%;
  min-height: 39px;

  padding: 6px 8px;

  display: flex;
  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(255, 255, 255, .07);

  border-radius: 9px;

  color: #92929a;

  background:
    rgba(255, 255, 255, .02);

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    color .13s ease,
    border-color .13s ease,
    background .13s ease;
}

.classic-game-launch-v11c:hover,
.classic-game-launch-v11c:focus-visible,
.classic-game-launch-v11c.is-active {
  color: #f4f4f5;

  border-color:
    rgba(255, 255, 255, .15);

  background:
    rgba(255, 255, 255, .06);

  outline: none;
}

.classic-game-launch-icon-v11c {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(255, 255, 255, .11);

  border-radius: 8px;

  color: #f4f4f5;

  font-size: 8px;
  font-weight: 900;
}

.classic-game-launch-copy-v11c {
  min-width: 0;

  display: grid;

  gap: 2px;

  flex: 1;
}

.classic-game-launch-copy-v11c strong {
  font-size: 10px;
  font-weight: 800;
}

.classic-game-launch-copy-v11c small {
  color: #92929a;

  font-size: 7.5px;
}

.classic-2048-layer-v11c {
  --classic-2048-left: 0px;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--classic-2048-left);
  z-index: 760;

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

  color: #f4f4f5;

  background:
    radial-gradient(
      circle at 50% 18%,
      #16161a 0,
      #0c0c0f 43%,
      #060607 76%,
      #020203 100%
    );

  opacity: 0;
  pointer-events: none;

  transition:
    opacity .15s ease;
}

.classic-2048-layer-v11c.is-open {
  opacity: 1;
  pointer-events: auto;
}

.classic-2048-layer-v11c[hidden] {
  display: none !important;
}

.classic-2048-header-v11c {
  min-height: 59px;

  padding: 9px 12px;

  display: flex;
  align-items: center;

  gap: 9px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .08);

  background:
    linear-gradient(
      180deg,
      rgba(22, 22, 26, .98),
      rgba(7, 7, 9, .985)
    );
}

.classic-2048-button-v11c {
  min-height: 34px;

  padding: 7px 10px;

  border:
    1px solid
    rgba(255, 255, 255, .09);

  border-radius: 9px;

  color: #92929a;

  background:
    linear-gradient(
      145deg,
      #29292f,
      #141417
    );

  font: inherit;
  font-size: 8.5px;
  font-weight: 800;

  cursor: pointer;
}

.classic-2048-button-v11c:hover,
.classic-2048-button-v11c:focus-visible {
  color: #f4f4f5;

  border-color:
    rgba(255, 255, 255, .18);

  background:
    linear-gradient(
      145deg,
      #36363d,
      #1b1b1f
    );

  outline: none;
}

.classic-2048-title-v11c {
  min-width: 0;

  display: grid;

  gap: 2px;

  flex: 1;
}

.classic-2048-title-v11c strong {
  font-size: 14px;
  font-weight: 900;
}

.classic-2048-title-v11c small {
  overflow: hidden;

  color: #92929a;

  font-size: 8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.classic-2048-scores-v11c {
  display: flex;

  gap: 5px;

  flex: 0 0 auto;
}

.classic-2048-score-v11c {
  min-width: 51px;

  padding: 5px 7px;

  display: grid;

  gap: 2px;

  border:
    1px solid
    rgba(255, 255, 255, .08);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, .025);

  text-align: center;
}

.classic-2048-score-v11c small {
  color: #92929a;

  font-size: 6.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.classic-2048-score-v11c strong {
  font-size: 11px;
  font-weight: 900;
}

.classic-2048-content-v11c {
  min-height: 0;

  padding:
    clamp(
      12px,
      3vw,
      28px
    );

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: auto;
  overscroll-behavior: contain;
}

.classic-2048-game-v11c {
  width:
    min(
      430px,
      100%
    );

  display: grid;

  gap: 11px;
}

.classic-2048-message-v11c {
  min-height: 20px;

  color: #92929a;

  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

.classic-2048-message-v11c.is-important {
  color: #f4f4f5;

  font-weight: 800;
}

.classic-2048-board-v11c {
  width: 100%;
  aspect-ratio: 1;

  padding:
    clamp(
      7px,
      2vw,
      11px
    );

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  grid-template-rows:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(
      6px,
      1.7vw,
      10px
    );

  border:
    1px solid
    rgba(255, 255, 255, .11);

  border-radius: 17px;

  background:
    linear-gradient(
      150deg,
      rgba(35, 35, 40, .98),
      rgba(12, 12, 15, .99)
    );

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, .48);

  touch-action: none;
  user-select: none;
}

.classic-2048-cell-v11c {
  min-width: 0;
  min-height: 0;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, .06);

  border-radius:
    clamp(
      7px,
      2vw,
      12px
    );

  color: #f4f4f5;

  background:
    rgba(255, 255, 255, .025);

  font-size:
    clamp(
      15px,
      6vw,
      34px
    );

  font-weight: 900;
  line-height: 1;
}

.classic-2048-cell-v11c[data-value="2"] {
  background: #1b1b1f;
}

.classic-2048-cell-v11c[data-value="4"] {
  background: #242429;
}

.classic-2048-cell-v11c[data-value="8"] {
  background: #303036;
}

.classic-2048-cell-v11c[data-value="16"] {
  background: #3d3d44;
}

.classic-2048-cell-v11c[data-value="32"] {
  background: #4b4b53;
}

.classic-2048-cell-v11c[data-value="64"] {
  background: #5b5b64;
}

.classic-2048-cell-v11c[data-value="128"] {
  background: #6d6d76;
}

.classic-2048-cell-v11c[data-value="256"] {
  background: #7f7f88;
}

.classic-2048-cell-v11c[data-value="512"] {
  color: #08080a;
  background: #92929a;
}

.classic-2048-cell-v11c[data-value="1024"] {
  color: #08080a;
  background: #b2b2b8;

  font-size:
    clamp(
      11px,
      4.2vw,
      25px
    );
}

.classic-2048-cell-v11c[data-value="2048"],
.classic-2048-cell-v11c.is-higher {
  color: #08080a;
  background: #f4f4f5;

  font-size:
    clamp(
      11px,
      4.2vw,
      25px
    );

  box-shadow:
    0 0 24px
    rgba(244, 244, 245, .16);
}

.classic-2048-help-v11c {
  color: #92929a;

  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

body.classic-2048-open-v11c {
  overflow: hidden;
}

@media (max-width: 700px) {
  .classic-2048-layer-v11c,
  body.is-native-apk
  .classic-2048-layer-v11c {
    --classic-2048-left: 0px !important;
  }

  .classic-2048-header-v11c {
    min-height: 55px;

    padding: 8px;
  }

  .classic-2048-title-v11c small {
    display: none;
  }

  .classic-2048-score-v11c {
    min-width: 43px;

    padding: 4px;
  }

  .classic-2048-content-v11c {
    align-items: flex-start;

    padding:
      15px
      12px
      calc(
        73px
        + env(safe-area-inset-bottom)
      );
  }
}

@media (max-width: 370px) {
  .classic-2048-title-v11c strong {
    font-size: 12px;
  }

  .classic-2048-button-v11c {
    padding-right: 7px;
    padding-left: 7px;

    font-size: 7.5px;
  }

  .classic-2048-score-v11c {
    min-width: 39px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classic-2048-layer-v11c,
  .classic-game-launch-v11c {
    transition: none !important;
  }
}

/* ZWORLD_CLASSIC_2048_V11C_END */