.screen-game {
  min-height: calc(var(--tg-viewport-height, 100dvh) - var(--app-header-h));
  padding:
    16px
    16px
    calc(20px + var(--tg-safe-bottom) + var(--tg-content-safe-bottom));
}

.mines-screen {
  width: min(100%, 420px);
  margin: 0 auto;
  min-height: calc(var(--tg-viewport-height, 100dvh) - 40px);
  display: flex;
  flex-direction: column;
}

.mines-feed {
  margin-top: 14px;
  flex: 1;
  min-height: 180px;
  max-height: 280px;
}

.mines-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.mines-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.mines-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.mines-ladder__item {
  background: #ffffff10;
  border-radius: 14px;
  padding: 8px 4px;
  text-align: center;
  opacity: 0.45;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.mines-ladder__item.is-current {
  opacity: 1;
  box-shadow: 0 0 0 1px #296eff;
}

.mines-ladder__item.is-done {
  opacity: 1;
  box-shadow: 0 0 0 1px #42c96a;
}

.mines-ladder__lottie {
  width: 36px;
  height: 36px;
  margin: 0 auto 4px;
  overflow: hidden;
}

.mines-ladder__lottie canvas,
.mines-ladder__lottie svg,
.mines-ladder__lottie img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
}

.mines-ladder__name {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mines-ladder__val {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
  font-size: 10px;
  color: #ffffff80;
  font-weight: 600;
}

.stars-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.star-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
}

.mines-ladder__val .star-icon {
  width: 11px;
  height: 11px;
}

.mines-btn .star-icon {
  width: 16px;
  height: 16px;
}

.mines-modal__sub .star-icon {
  width: 14px;
  height: 14px;
}

.mines-hint .star-icon {
  width: 13px;
  height: 13px;
}

.mines-hint {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff99;
}

.mines-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: 8px;
  margin: 12px 0 16px;
}

.MineCell {
  appearance: none;
  aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff0d;
  border-radius: 16px;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff26, #ffffff1a 100%) !important;
  color: #ffffff6b;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform 0.16s ease, opacity 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.MineCell:disabled {
  cursor: default;
  opacity: 1 !important;
}

.MineCell:not(:disabled):active {
  transform: scale(0.96);
}

.MineCell.is-safe {
  background: #1fc27e33 !important;
  border-color: #1fc27e55;
}

.MineCell.is-mine {
  background: #ff292933 !important;
  border-color: #f32b2b80;
}

.MineCell.is-mine-dim {
  opacity: 0.55 !important;
}

.MineCell--closed-symbol {
  color: #ffffff4d;
  font-size: 24px;
  font-weight: 700;
}

.MineCell--image {
  width: 58%;
  height: 58%;
  object-fit: contain;
  pointer-events: none;
  animation: MinesCellReveal 0.22s ease-out;
}

.MineCell--lottie {
  width: 70%;
  height: 70%;
  pointer-events: none;
  animation: MinesCellReveal 0.22s ease-out;
}

.MineCell--lottie canvas,
.MineCell--lottie svg,
.MineCell--lottie img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
}

@keyframes MinesCellReveal {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mines-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mines-attempts {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffffb3;
}

.mines-actions__note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #ffffff80;
}

.mines-btn {
  appearance: none;
  border: none;
  width: 100%;
  height: 52px;
  border-radius: 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mines-btn--primary {
  background: #296eff;
}

.mines-btn--success {
  background: #2fbf6b;
}

.mines-btn--ghost {
  background: #ffffff14;
}

.mines-btn:active {
  filter: brightness(0.94);
}

.mines-btn:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

.mines-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.mines-modal[hidden] {
  display: none !important;
}

.mines-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.mines-modal__card {
  position: relative;
  width: min(100%, 340px);
  background: #1a1d22;
  border-radius: 24px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.mines-modal__lottie {
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
}

.mines-modal__lottie canvas,
.mines-modal__lottie svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.mines-modal__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
}

.mines-modal__sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: #ffffff99;
}

.mines-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}