/* =========================================================================
   Mines no estilo da Blaze: escuro, painel à esquerda, grade 5x4
   (visual próprio, igual nos dois temas)
   ========================================================================= */
.mn-tela { display: grid; grid-template-columns: 300px 1fr; gap: 0; border-radius: 18px; overflow: hidden; background: #0f1923; color: #f1f5f9; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); min-width: 0; }
.mn-painel { background: #1a242d; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.mn-campo { display: flex; flex-direction: column; gap: 6px; }
.mn-campo label { font-size: 12px; color: #8a97a5; font-weight: 600; }
.mn-valor { display: flex; align-items: stretch; background: #0f1923; border: 1px solid #2c3a47; border-radius: 6px; overflow: hidden; }
.mn-valor input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 12px; font-size: 15px; outline: none; }
.mn-valor button { background: #24313c; border: 0; border-left: 1px solid #2c3a47; color: #cbd5e1; padding: 0 14px; font-weight: 700; cursor: pointer; }
.mn-valor button:hover { background: #2c3a47; }
.mn-campo select { background: #0f1923; border: 1px solid #2c3a47; border-radius: 6px; color: #fff; padding: 12px; font-size: 15px; }
.mn-botao { border: 0; border-radius: 6px; padding: 15px; font-weight: 700; font-size: 16px; cursor: pointer; color: #fff; background: #f12c4c; transition: filter 0.15s; }
.mn-botao:hover { filter: brightness(1.1); }
.mn-botao:disabled { filter: grayscale(0.5) brightness(0.7); cursor: not-allowed; }
.mn-botao.sacar { background: #1bb36c; }
.mn-botao.secundario { background: #24313c; color: #cbd5e1; font-size: 14px; padding: 11px; }
.mn-info { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mn-info div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; background: #0f1923; }
.mn-info span { color: #8a97a5; }
.mn-info b { font-variant-numeric: tabular-nums; }
.mn-info .verde { color: #1bb36c; }
.mn-nota { font-size: 12px; color: #6b7785; margin: 0; }
.mn-campo-jogo { position: relative; display: grid; place-items: center; padding: 28px; min-height: 460px; }
.mn-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: min(560px, 100%); }
.mn-casa { aspect-ratio: 1; border: 0; border-radius: 8px; background: #24313c; box-shadow: inset 0 -5px 0 #1a242d; cursor: pointer; display: grid; place-items: center; transition: transform 0.12s, background 0.15s; padding: 0; }
.mn-casa:not(:disabled):hover { transform: translateY(-3px); background: #2f3f4d; }
.mn-casa:disabled { cursor: default; }
.mn-casa.abrindo { animation: pulsar 0.25s ease-in-out infinite alternate; }
.mn-casa.diamante { background: #15212b; box-shadow: none; }
.mn-casa.diamante::after { content: ""; width: 58%; aspect-ratio: 1.1; background: linear-gradient(160deg, #a5e9ff 0%, #38bdf8 35%, #0369a1 75%); clip-path: polygon(20% 0, 80% 0, 100% 32%, 50% 100%, 0 32%); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6)); animation: brotar 0.25s ease-out; }
.mn-casa.diamante.apagada::after { opacity: 0.28; filter: none; animation: none; }
.mn-casa.bomba { background: #3b1520; box-shadow: none; }
.mn-casa.bomba::after { content: ""; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b7280, #111827 60%); box-shadow: 0 0 0 3px #f12c4c inset, 0 0 10px rgba(241, 44, 76, 0.5); }
.mn-casa.explodiu { background: #f12c4c; animation: tremer 0.1s linear 6; }
@keyframes brotar { from { transform: scale(0.2); opacity: 0; } }
.mn-resultado { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 30px; border-radius: 8px; background: #1bb36c; box-shadow: 0 0 0 4px rgba(27, 179, 108, 0.35), 0 12px 30px rgba(0, 0, 0, 0.5); animation: entrar 0.2s ease-out; text-align: center; }
.mn-resultado.perdeu { background: #f12c4c; box-shadow: 0 0 0 4px rgba(241, 44, 76, 0.35), 0 12px 30px rgba(0, 0, 0, 0.5); }
.mn-resultado b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 34px; }
.mn-resultado span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.mn-resultado small { font-size: 12px; }
.jogo-cartao.mines { background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(15, 25, 35, 0.6)); }

@media (max-width: 860px) {
  .mn-tela { grid-template-columns: 1fr; }
  .mn-campo-jogo { order: -1; padding: 16px; min-height: 0; }
  .mn-grade { gap: 8px; }
}
/* Casa abrindo com giro, explosão mais visível */
.mn-casa.diamante::after { animation: mn-vira 0.5s cubic-bezier(.3,.7,.4,1.3); }
@keyframes mn-vira { from { transform: rotateY(90deg) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.mn-casa.bomba::after { animation: mn-vira 0.4s ease-out; }
.mn-casa.explodiu { animation: tremer 0.12s linear 8; box-shadow: 0 0 0 3px #fca5a5, 0 0 30px rgba(241, 44, 76, 0.8); }
.mn-casa.abrindo { animation: pulsar 0.35s ease-in-out infinite alternate; }
.mn-resultado { animation-duration: 0.4s; }