/* ===== container & UX ===== */
.bm {
  width:75%;             
  margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
.bm *::selection{background:transparent;}

/* QNR: Toolbar and rotate buttons are handled by QNR form - removed unused styles */

/* ===== stage + layering ===== */
.stage{position:relative;width:100%;margin:0 auto;line-height:0;}
.bm-view{display:none;position:relative;}
.bm-view.is-active{display:block;}

.bm-bg{
  width:100%; height:auto; display:block;
  pointer-events:none; -webkit-user-drag:none; user-drag:none;
  touch-action:manipulation;
}

.bm-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:auto;
}

/* ===== ZONE SELECTABILE (restrâns, ca să nu mai prindem dreptunghiul mare) ===== */
.bm-overlay [data-zone],
.bm-overlay [data-piece],
.bm-overlay [data-value]{
  pointer-events:auto;
  fill: rgba(232,58,58,0.00);         
  stroke: transparent;
  cursor: pointer;
  transition: fill .15s ease, stroke .15s ease;
}
.bm-overlay [data-zone]:hover,
.bm-overlay [data-piece]:hover,
.bm-overlay [data-value]:hover{
  fill: rgba(232,58,58,0.10);        
}
.bm-overlay .is-selected{
    fill: #0ba2fb;
    stroke: #0ba2fb;
    stroke-width:2;
}

/* ===== responsive ===== */
@media (max-width: 768px){
  .bm {
    max-width: 100%;
    margin: auto;
  }

}