:root{
  --cols: 5;
  --tile-size: 96px;
  --tile-gap: 14px;
  --tile-radius: 12px;
  --board-pad: 12px;
  --ctl-width: 420px;
}

.mines-shell{
  display: grid;
  grid-template-columns: var(--ctl-width) auto;
  justify-content: center;
  align-items: start;
  gap: 40px;
  margin-top: 24px;
}

.card{
  background: #0f1420;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 18px;
}

.section-title{ margin:0 0 12px 0; }

.field{ margin-bottom:18px; }
.field label{
  display:block; color:#aab0c2; font-size:.95rem; margin-bottom:8px;
}

.amount-input input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#e6eaf2;
  font-weight:700;
  font-size:.95rem;
  padding:4px 0;
}

.amount-input .chip{
  display:flex; align-items:center; gap:10px;
  background:#0e1624; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px; width:320px; height:70px;
}

.amount-input .quick{
  display:flex; gap:8px;
  margin-top:10px;
}

.amount-input .quick button{
  flex:1;
  background:#0e1624;
  border:1px solid rgba(255,255,255,.08);
  color:#c9d2e3;
  border-radius:10px;
  padding:8px 10px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
}
.amount-input .quick button:hover{
  border-color: rgba(255,255,255,.16);
}

.mine-picker{ display:grid; gap:10px; }
.picker-chip{
  display:flex; align-items:center; gap:10px;
  background:#0e1624; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px; width:320px; font-weight:700;
}
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.green{ background:#4ade80; }
.dot.red{ background:#ff667d; }
.caret{ margin-left:auto; opacity:.7 }

.preset{ display:flex; gap:8px; }
.preset button{
  background:#0e1624; border:1px solid rgba(255,255,255,.08);
  color:#c9d2e3; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer;
}
.preset button.on,
.preset button:hover{ background:#283047; border-color:#3b4970; color:#fff; }

.action-row{ margin-top:8px; }
.btn.primary.wide{
  display:block; width:360px; height:44px;
  background:linear-gradient(135deg,#ffd24d,#ffb300);
  color:#0e1116; font-weight:800; border:none; border-radius:12px; cursor:pointer;
}

.board{ padding:16px; }
.board-head{
  display:flex; align-items:center; gap:18px; color:#c9d2e3; margin:4px 8px 10px;
}
.board-head .legend{ display:flex; align-items:center; gap:8px; }
.board-head .spacer{ flex:1 }
.board-head .icons .ic{ opacity:.55; margin-left:10px; cursor:pointer; }

.board-grid{
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile-size));
  grid-auto-rows: var(--tile-size);
  gap: var(--tile-gap);
  padding: var(--board-pad);

  width: calc(var(--cols)*var(--tile-size) + (var(--cols) - 1)*var(--tile-gap) + 2*var(--board-pad));
  height: calc(var(--cols)*var(--tile-size) + (var(--cols) - 1)*var(--tile-gap) + 2*var(--board-pad));

  border-radius: 18px;
  background: #0f1420;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);

  margin: 0 auto;
  box-sizing: content-box;
}

.tile{
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: var(--tile-radius);
  background: linear-gradient(180deg,#1a2332,#151c29);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 0 10px 24px rgba(255,255,255,.03),
    0 2px 0 rgba(0,0,0,.3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.tile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.14); }
.tile:active{ transform: translateY(0); }

.die{ font-size:22px; opacity:.9; pointer-events:none; }

.tile.revealed.safe{ border-color:#3fd28a; box-shadow: inset 0 0 0 2px rgba(63,210,138,.25); }
.tile.revealed.bomb{ border-color:#ff667d; box-shadow: inset 0 0 0 2px rgba(255,102,125,.22); }

@media (max-width:1240px){
  .mines-shell{ grid-template-columns: 1fr; }
}