/* Minesweeper gambling mode */
.mn-panel {
  max-width: 920px;
  margin: 0 auto;
}
.mn-panel .mn-layout {
  gap: 12px;
}
.mn-panel .mn-game {
  padding: 14px 16px;
}
.mn-panel .cf-balance {
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.mn-panel .cf-balance-v {
  font-size: 16px;
}
.mn-panel .cf-stake-lbl {
  margin-bottom: 4px;
}
.mn-setup {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto minmax(72px, 1fr);
  gap: 6px 8px;
  align-items: center;
  margin-bottom: 8px;
}
.mn-select {
  padding: 7px 10px;
  background: #0c0709;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.mn-panel .cf-bet-input {
  padding: 7px 10px;
  font-size: 14px;
}
.mn-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.mn-stats span {
  padding: 6px 8px;
  background: #0c0709;
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.mn-stats strong {
  float: right;
  color: #7dff9a;
  font-variant-numeric: tabular-nums;
}
.mn-board {
  --mn-tile: clamp(38px, 5.2vw, 42px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--mn-size, 3), var(--mn-tile));
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(65,255,65,.08), transparent 55%),
    #090507;
  border: 1px solid var(--line);
}
.mn-board.mn-shake-big {
  animation: mnShakeBig .6s cubic-bezier(.36, .07, .19, .97);
}
.mn-tile {
  width: var(--mn-tile);
  height: var(--mn-tile);
  min-height: 0;
  display: block;
  position: relative;
  background: linear-gradient(160deg, #120a0c, #0c0709);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--faint);
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .14s, color .14s, transform .14s;
  overflow: hidden;
  padding: 0;
  perspective: 700px;
  transform-style: preserve-3d;
}
.mn-tile-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}
.mn-tile-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mn-tile-front {
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 44%),
    linear-gradient(160deg, #120a0c, #0c0709);
}
.mn-tile-back {
  transform: rotateY(180deg);
}
.mn-tile.is-safe .mn-tile-back {
  background: linear-gradient(160deg, rgba(74, 144, 217, 0.3), rgba(13, 31, 51, 0.96));
}
.mn-tile.is-mine .mn-tile-back {
  background: linear-gradient(160deg, rgba(232, 197, 71, 0.28), rgba(92, 69, 16, 0.96));
}
.mn-tile-img {
  width: 52%;
  height: 52%;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.mn-tile:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(65,255,65,.45);
  color: var(--text);
}
.mn-tile.is-revealed .mn-tile-inner {
  transform: rotateY(180deg);
}
.mn-tile.is-flipping .mn-tile-inner {
  animation: mnTileFlip .28s cubic-bezier(.22, .72, .2, 1) both;
}
.mn-tile.is-flipping.is-mine .mn-tile-inner {
  animation: mnTileFlip .28s cubic-bezier(.22, .72, .2, 1) both;
}
.mn-tile.is-safe {
  border-color: rgba(91, 159, 212, 0.58);
  box-shadow: inset 0 0 14px rgba(74, 144, 217, 0.14), 0 0 12px rgba(74, 144, 217, 0.14);
  color: #d8ecff;
}
.mn-tile.is-mine {
  border-color: rgba(242, 213, 100, 0.58);
  box-shadow: inset 0 0 14px rgba(232, 197, 71, 0.12), 0 0 12px rgba(232, 197, 71, 0.12);
  color: #fff4c8;
}
.mn-tile:disabled {
  cursor: default;
}
@keyframes mnTileFlip {
  0% { transform: rotateY(0deg) scale(1); }
  100% { transform: rotateY(180deg) scale(1); }
}
@keyframes mnShakeBig {
  0% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-11px, 6px) rotate(-1deg); }
  20% { transform: translate(12px, -8px) rotate(1deg); }
  30% { transform: translate(-13px, -6px) rotate(-1.2deg); }
  45% { transform: translate(10px, 8px) rotate(.8deg); }
  60% { transform: translate(-8px, -5px) rotate(-.6deg); }
  75% { transform: translate(6px, 4px) rotate(.4deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
.mn-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .mn-tile-inner {
    transition: none;
  }
  .mn-tile.is-flipping .mn-tile-inner {
    animation: none;
  }
  .mn-board.mn-shake-big {
    animation: none;
  }
}
.mn-actions .cf-flip-btn {
  margin-top: 8px;
  padding: 11px 12px;
  font-size: 12px;
  letter-spacing: .8px;
}
.mn-panel .cf-fee-note {
  margin-top: 6px;
}
.mn-panel .cf-result,
.mn-panel .cf-login-note,
.mn-panel .cf-error {
  margin-top: 8px;
}
.mn-cashout-btn {
  background: linear-gradient(180deg, #168047, #0f5c33);
  border-color: #23b96a;
  box-shadow: 0 0 20px rgba(35, 185, 106, .35);
}
.mn-cashout-btn:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(35, 185, 106, .45);
}
@media (max-width: 640px) {
  .mn-setup {
    grid-template-columns: 1fr;
  }
  .mn-stats,
  .mn-actions {
    grid-template-columns: 1fr;
  }
  .mn-board {
    --mn-tile: 36px;
    gap: 5px;
    padding: 8px;
  }
}