.mini-game-stage {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  background: #14401f;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mini-game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #14401f;
  image-rendering: pixelated;
}

.mini-game-hud {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  font-size: 0.9rem;
}

.mini-game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 16px;
  gap: 12px;
}

.mini-game-overlay.hidden {
  display: none;
}

.mini-game-overlay h4 {
  margin: 0;
}

.mini-game-overlay p {
  margin: 0;
  max-width: 480px;
}

.mini-game-reward {
  width: 100%;
  max-width: 480px;
}

.mini-game-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}

.mini-game-controls .btn {
  min-width: 64px;
  font-size: 1.5rem;
  user-select: none;
  touch-action: manipulation;
}

.mini-game-leaderboard {
  margin-bottom: 0;
}

.mini-game-leaderboard .mini-game-rank {
  width: 32px;
}

.mini-game-row-mine td {
  font-weight: 700;
  background: rgba(255, 235, 59, 0.12);
}

@media (max-width: 768px) {
  /* The dashboard .container has 2rem of horizontal padding. On small screens
     we want the stage to span edge to edge, so we pull it out with negative
     margins and widen it by the same amount. */
  .mini-game-stage {
    margin-left: -2rem;
    margin-right: -2rem;
    width: calc(100% + 4rem);
    max-width: none;
    border-radius: 0;
  }

  .mini-game-controls .btn {
    min-width: 88px;
    font-size: 1.85rem;
    padding: 0.6rem 1rem;
  }
}