/* BREAK IT OFF (src/plugins/breakoff.js, src/ui/partspanel.js): the plane from
   above, big enough to tap, with a chunky button per piece beside it. */
#breakPanel .panelCard{width:min(760px,96vw);max-height:94vh;padding-bottom:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h h" "p p" "pic list" "foot foot";
  column-gap:14px;align-items:start}
#breakPanel h3{grid-area:h;margin-bottom:2px}
.breakHint{grid-area:p;text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--dim);margin:0 0 8px}
.breakPic{grid-area:pic;display:block;width:100%;max-width:340px;aspect-ratio:1;justify-self:center;
  border-radius:18px;background:rgba(30,52,92,.35);border:2px solid var(--edge);cursor:pointer;touch-action:manipulation}
.breakList{grid-area:list;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  max-height:340px;overflow-y:auto}
.breakPiece{border:2px solid var(--edge);border-radius:14px;padding:5px 6px;text-align:center;
  background:rgba(30,52,92,.35);color:inherit;font:inherit;touch-action:manipulation}
.breakPiece b{display:block;font-size:20px;margin-bottom:1px}
.breakPiece span{font-size:11px;font-weight:800;letter-spacing:.05em}
.breakPiece:active{transform:scale(.95)}
.breakPiece:disabled{opacity:.3;text-decoration:line-through}
.breakPiece.k-wing{border-color:#4fb6ff}
.breakPiece.k-stab{border-color:#b48cff}
.breakPiece.k-eng{border-color:#ff9a3c}
.breakPiece.k-fin{border-color:#47d98a}
.breakFoot{grid-area:foot;position:sticky;bottom:0;margin:12px -22px 0;padding:10px 22px 14px;
  background:rgba(10,18,34,.96);border-top:1px solid var(--edge);border-radius:0 0 20px 20px}
.breakFoot .ghostBtn{padding:14px 8px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.breakFoot .ghostBtn:disabled{opacity:.35}
.breakSnap{border-color:var(--hot)}
/* Narrow (a phone, or an iPad held upright): the picture on top, the buttons under it. */
@media (max-width:620px){
  #breakPanel .panelCard{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "p" "pic" "list" "foot"}
  .breakPic{max-width:260px}
  .breakList{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;margin-top:10px}
}
@media (max-height:520px){
  .breakPic{max-width:220px}
  .breakList{max-height:220px}
}