/* Minas de Diamante — painel de aposta à esquerda e campo 5×5 à direita (no celular, campo em cima). */
.mn { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
.mn-ctrl { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: linear-gradient(180deg, #0f1a33, #0a1022); border: 1px solid rgba(94, 231, 255, .22); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.mn-title { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mn-logo { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 0 12px rgba(94, 231, 255, .6)); animation: mnFloat 3s ease-in-out infinite; }
.mn-logo svg { width: 100%; height: 100%; }
@keyframes mnFloat { 50% { transform: translateY(-4px) rotate(-4deg); } }
.mn-title h1 { margin: 0; font: 900 21px var(--serif, var(--display)); letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(180deg, #fff, #7df3ff 60%, #3aa0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mn-title p { margin: 2px 0 0; font-size: 12.5px; color: #8fb3d9; }
.mn-lab { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fb3d9; }
.mn-lab b { color: #fff; font-size: 13px; }
.mn-stake { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px 0 12px; border-radius: 12px; background: #0a1328; border: 1px solid rgba(94, 231, 255, .25); }
.mn-stake span { color: #7df3ff; font-weight: 800; }
.mn-stake input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 800 18px var(--body); }
.mn-q { display: flex; gap: 4px; }
.mn-q button { height: 34px; min-width: 38px; padding: 0 8px; border-radius: 9px; border: 0; cursor: pointer; font: 800 12.5px var(--body); color: #cfe9ff; background: #16244a; }
.mn-q button:hover:not(:disabled) { background: #1e3266; }
.mn-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mn-chips button { height: 36px; border-radius: 10px; cursor: pointer; font: 800 14px var(--display); color: #cfe9ff; background: #0a1328; border: 1px solid rgba(255, 255, 255, .08); }
.mn-chips button.on { color: #2a0606; background: linear-gradient(180deg, #ff9a8a, #ff3b2f); border-color: transparent; box-shadow: 0 0 14px rgba(255, 59, 47, .45); }
.mn-range { width: 100%; accent-color: #ff3b2f; }
.mn-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mn-info div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: #0a1328; }
.mn-info span { font-size: 10.5px; color: #8fb3d9; font-weight: 700; }
.mn-info b { font: 800 16px var(--display); color: #7df3ff; }
.mn-go { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60px; margin-top: 4px; border: 0; border-radius: 14px; cursor: pointer; font: 900 20px var(--display); color: #2a1a04;
  background: linear-gradient(180deg, #ffe08a, #f2b632); box-shadow: 0 5px 0 #8a5a0c, 0 10px 24px rgba(247, 200, 94, .3); transition: transform .1s, filter .15s; }
.mn-go small { font-size: 11px; letter-spacing: .14em; }
.mn-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #8a5a0c; }
.mn-go.cash { color: #03210f; background: linear-gradient(180deg, #8dffc7, #22c55e); box-shadow: 0 5px 0 #0f6b33, 0 10px 26px rgba(34, 197, 94, .4); animation: mnCash 1.4s ease-in-out infinite; }
@keyframes mnCash { 50% { filter: brightness(1.12); box-shadow: 0 5px 0 #0f6b33, 0 10px 34px rgba(34, 197, 94, .65); } }
.mn-go:disabled { animation: none; filter: saturate(.4) brightness(.8); cursor: default; }
.mn-rand { height: 40px; border-radius: 12px; cursor: pointer; font: 800 13px var(--body); color: #cfe9ff; background: #0a1328; border: 1px solid rgba(94, 231, 255, .25); }
.mn-rand:disabled { opacity: .45; cursor: default; }
.mn-fair { margin: 2px 0 0; font-size: 11.5px; color: #6b88ab; line-height: 1.4; }
.mn-fair i { color: #4ade80; }
.mn-fair code { color: #9fc4ea; }

/* campo */
.mn-board { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(94, 231, 255, .12), transparent 60%), linear-gradient(180deg, #0c1530, #070c1c); border: 1px solid rgba(94, 231, 255, .18); }
.mn-ladder { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mn-ladder::-webkit-scrollbar { display: none; }
.mn-ladder span { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 5px 8px; border-radius: 10px; font: 800 13px var(--display); color: #8fb3d9; background: #0a1328; border: 1px solid rgba(255, 255, 255, .06); transition: all .25s; }
.mn-ladder small { font-size: 9.5px; color: #4f6c90; }
.mn-ladder .done { color: #04121f; background: linear-gradient(180deg, #b5f7ff, #36c8ff); border-color: transparent; }
.mn-ladder .done small { color: #0b3c5c; }
.mn-ladder .next { color: #fff; border-color: #7df3ff; box-shadow: 0 0 14px rgba(125, 243, 255, .45); transform: scale(1.06); }
.mn-field { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 1.2vw, 12px); width: min(100%, 560px); margin: 0 auto; perspective: 900px; }
.mn-field.lost { animation: mnShake .5s; }
.mn-field.fresh .mn-cell { animation: mnDeal .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.mn-field.fresh .mn-cell:nth-child(5n+2) { animation-delay: .03s; } .mn-field.fresh .mn-cell:nth-child(5n+3) { animation-delay: .06s; } .mn-field.fresh .mn-cell:nth-child(5n+4) { animation-delay: .09s; } .mn-field.fresh .mn-cell:nth-child(5n) { animation-delay: .12s; }
@keyframes mnDeal { from { transform: scale(.7); opacity: .3; } }
@keyframes mnShake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.mn-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.mn-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: clamp(10px, 1.6vw, 16px); backface-visibility: hidden; }
.mn-front { background: linear-gradient(180deg, #1d2d58, #121d3d); border: 1px solid rgba(125, 243, 255, .16); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -4px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .35); }
.mn-front::after { content: ''; width: 28%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(125, 243, 255, .35), transparent 70%); }
.mn-back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 40%, #13365e, #0a1730 75%); border: 1px solid rgba(125, 243, 255, .5); }
.mn-back svg { width: 64%; height: 64%; filter: drop-shadow(0 0 10px rgba(94, 231, 255, .8)); }
.mn-field.playing .mn-cell:not(:disabled):hover .mn-front { background: linear-gradient(180deg, #27407a, #18284f); border-color: rgba(125, 243, 255, .5); box-shadow: 0 0 18px rgba(125, 243, 255, .3), inset 0 2px 0 rgba(255, 255, 255, .12); }
.mn-field.playing .mn-cell:not(:disabled):hover { transform: translateY(-3px); }
.mn-cell:disabled { cursor: default; }
.mn-cell.wait .mn-front { animation: mnWait .6s ease-in-out infinite; }
@keyframes mnWait { 50% { filter: brightness(1.5); } }
.mn-cell.open { transform: rotateY(180deg); }
.mn-cell.gem .mn-back { animation: mnGem .6s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 22px rgba(94, 231, 255, .5); }
@keyframes mnGem { 0% { transform: rotateY(180deg) scale(.8); } 60% { transform: rotateY(180deg) scale(1.12); } }
.mn-cell.ghost .mn-back { opacity: .35; box-shadow: none; }
.mn-cell.bomb .mn-back { background: radial-gradient(circle at 50% 40%, #4a1010, #1a0505 75%); border-color: rgba(255, 90, 60, .6); }
.mn-cell.bomb .mn-back svg { filter: drop-shadow(0 0 10px rgba(255, 90, 40, .7)); }
.mn-cell.boom .mn-back { background: radial-gradient(circle, #ffcf4d, #ff3b2f 45%, #3a0505 80%); box-shadow: 0 0 40px #ff3b2f; animation: mnBoom .6s ease-out; }
@keyframes mnBoom { 0% { transform: rotateY(180deg) scale(1.5); } 100% { transform: rotateY(180deg) scale(1); } }
.mn-field.won .mn-cell.gem:not(.ghost) .mn-back { animation: mnWin 1s ease-in-out 2; }
@keyframes mnWin { 50% { box-shadow: 0 0 34px #7df3ff; filter: brightness(1.3); } }
.mn-float { position: absolute; left: 50%; top: 10%; z-index: 3; transform: translate(-50%, 0) rotateY(180deg); font: 900 15px var(--display); color: #fff; text-shadow: 0 0 10px #36c8ff, 0 2px 0 #000; pointer-events: none; animation: mnFloatUp .9s ease-out forwards; }
.mn-cell.open .mn-float { transform: translate(-50%, 0) rotateY(180deg); }
@keyframes mnFloatUp { to { opacity: 0; top: -40%; } }
.mn-status { min-height: 22px; text-align: center; font-size: 14px; color: #cfe9ff; }
.mn-status b { color: #fff; }
.mn-status.good { color: #7df3ff; } .mn-status.bad { color: #ff9a8a; }
.mn-hist-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.mn-hist { overflow: auto; max-height: 420px; }

@media (max-width: 900px) {
  .mn { grid-template-columns: minmax(0, 1fr); }
  .mn-board { order: -1; padding: 12px; }
  .mn-ctrl { padding: 14px; }
  .mn-title { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mn-logo, .mn-go.cash, .mn-field.fresh .mn-cell, .mn-cell.gem .mn-back { animation: none !important; } }

/* celular: aposta e botão logo abaixo do campo (sem rolar); quantidade de bombas e detalhes vêm depois */
@media (max-width: 900px) {
  .mn-ctrl > * { order: 5; }
  .mn-ctrl > .mn-lab:first-of-type { display: none; }
  .mn-ctrl > .mn-stake { order: 1; }
  .mn-ctrl > #mnGo { order: 2; }
  .mn-ctrl > #mnRand { order: 3; }
}